HTML与CSS的学习

什么是HTML,CSS？

HTML(HyperText Markup Language):超文本标记语言。

超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等
标记语言:由标签构成的语言

>HTML标签都是预定义好的。例如:使用<a>展示超链接，使用<img>展示图片，<vide0>展示视

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

CSS(Cascading Style Sheet):层叠样式表，用于控制页面的样式(表现)

HTML结构标签

<html>
    <head>
        <title>标题</title>
    </head>
    <body>

    </body>
</html>

特点：

HTML标签不区分大小写

HTML标签属性值单双引号都可以

HTML语法松散

1.标题标签

标签:<h1>..</h1>(h1 →h6 重要程度依次降低)

注意:HTML标签都是预定义好的，不能自己随意定义。

2.水平线标签  <hr>

用于在网页界面添加一条水平线

3.图片标签

<img src "图片路径" width=""height="">

width大小有两种单位

一种是像素点（px)

另一种是百分比（%）

标签使用样例：

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想务实大国粮仓</title>
</head>
<body>
    <img src="./img/news_logo.png" height="35px"> 新浪政务>正文
    <h1>
        焦点访谈：中国底气 新思想务实大国粮仓
    </h1>
    <hr>
    2023年03月02日21:50央视网
    <hr>
</body>
</html>

 运行后网页

 CSS引入方式

1.行内样式:写在标签的style属性中(不推荐)

 该方式只能使得h1一个标签有该属性，复用性较低

2.内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)

 3.外联样式:写在一个单独的.css文件中(需要通过 1ink标签在网页中引入)

 代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想务实大国粮仓</title>
    <!-- 方式二：内嵌方式 -->
    <style>
        h1{
            /* 颜色描述方式 */
            /* 第一种：关键字 */
            /* color: red; */
            /* 第二种：RGB表示 */
            /* color: rgb(255,0,0); */
            /* 第三种：基于16进制 */
            color: #ff0000;
        }
    </style>

    <!-- 方式三：外联样式 -->
    <!-- <link rel="stylesheet" href="css/news.css"> -->
</head>
<body>
    <img src="./img/news_logo.png"> 新浪政务>正文
    <!-- 方式一：行内样式 -->
    <!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> -->
    
    <h1>焦点访谈：中国底气 新思想务实大国粮仓</h1>
    <hr>
    2023年03月02日21：50央视网
    <hr>
</body>
</html>

CSS文件：

h1{
    color: red;
}

颜色表示的三种方式

1.关键字

如 red表示红色，green表示绿色，blue表示蓝色

2.rgb表示 

红绿蓝三原色，每项取值0-255。

3.十六进制表示法

#开头，将数字转换成十六进制表示

每两个表示rgb的一个数

若有两个相同可以缩写

#000000缩写#000

CSS选择器

作用：用来选取需要设置样式的元素(标签)

1.元素选择器

2.id选择器

为标签设置id:

 3.类选择器

为标签设置类:

 优先级

id选择器>类选择器>元素选择器

CSS属性

color:设置文本的颜色

font-size:字体大小 (注意:记得加px)

text-decoration:规定添加到文本的修饰，none表示定义标准的文本

 text-decoration: none;/* 设置没有下划线 */

text-align:规定元素中的文本的水平对齐方式（左，中，右）

 text-align: right;/* 靠右对齐 */

text-indent:定义第一个行内容的缩进

 text-indent: 35px;/* 设置首行缩进 */

4.<pane>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

5.超链接

标签: <a href=" "target="...">央视网</a>

属性:

href:指定资源访问的ur1(路径）

target:指定在何处打开资源链接

_self:默认值，在当前页面打开

_blank:在空白页面打开

代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>焦点访谈：中国底气 新思想务实大国粮仓</title>
    <!-- 方式二：内嵌方式 -->
    <style>
        h1{
            color: #4D4F53;
        }
        #time{
            /* 颜色 */
            color: rgb(151,142,144);
           /*  字体大小 */
           font-size: 12px;
        }
        a{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <img src="./img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> >正文
    <!-- 方式一：行内样式 -->
    <!--  <h1 style="color: red;">焦点访谈：中国底气 新思想务实大国粮仓</h1> -->
    
    <h1>焦点访谈：中国底气 新思想务实大国粮仓</h1>
    <hr>
    <span class="cis" id="time">2023年03月02日21：50</span>
     <span>
        <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">
             央视网
        </a>
       
    </span>
    <hr>
</body>
</html>

6.视频标签：<video>

属性：

src:规定视频的url

controls:显示播放控件

width:播放器的宽度

height:播放器的高度

 <!-- 视频 -->
    <video src="video/1.mp4" controls width="950px"></video>

7.音频标签：<audio>

属性：

src:规定音频的url

controls:显示播放控件

 <!-- 音频 -->
    <audio src="audio/1.mp3" controls></audio>

8.段落标签：<p>

<P>
        人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
    </P>

9.文本加粗标签：<b>/<strong>

<b>单纯加粗

<strong>有强调的意思

盒子布局

盒子:页面中所有的元素(标签)，都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)

 

10.<div>标签

特点：

一行只显示一个(独占一行)

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高(width、height)

 代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px; /* 内边距, 上 右 下 左 */
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px; /* 外边距, 上 右 下 左 */
        }
    </style>
</head>

<body>
    
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>

</body>
</html>

11.表格标签：<table>

场景:在网页中以表格(行、列)形式整齐展示数据，如:班级表。

<th>具有加粗效果

 代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表格</title>
    <style>
        td {
            text-align: center; /* 单元格内容居中展示 */
        }
    </style>
</head>
<body>
    
    <table border="1px" cellspacing="0"  width="600px">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td>
            <td> <img src="img/huawei.jpg" width="100px"> </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td> <img src="img/alibaba.jpg"  width="100px"> </td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>
</html>

运行效果：

 12.表单标签<form>

表单属性:

action:表单数据提交的url地址

method:表单提交方式

get:表单数据拼接在url后面，?username=java,大小有限制

post:表单数据在请求体中携带，大小没有限制

表单项

<input>:表单项，通过type属性控制输入形式。

 姓名: <input type="text" name="name"> <br><br>

<select>:定义下拉列表，<option>定义列表项。

学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>

<textarea>:文本域

 <textarea name="description" cols="30" rows="10"></textarea>  <br><br>

  • cols 属性定义了文本输入框的列数，即水平方向上的字符数。一个列相当于一个等宽的字符，但实际上显示的字符宽度可能会根据字体而变化。这个属性的值是一个正整数，表示文本输入框的列数。

  • rows 属性定义了文本输入框的行数，即垂直方向上的文本行数。一个行相当于一行文本，但实际上显示的行高可能会根据字体和浏览器而变化。这个属性的值也是一个正整数，表示文本输入框的行数。

代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

运行效果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/646919.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Jupyter Lab 软件安装与使用

Jupyter Lab 软件安装与使用

软件简介 Jupyter Lab 软件是一个基于web 的交互式开发环境&#xff0c;集成了代码编辑器、终端、文件管理器等功能&#xff0c;使得开发者可以在一个界面中完成各种任务。JupyterLab是Jupyter Notebook的全面升级&#xff0c;是一个集文本编辑器、终端以及各种个性化组件于一…
阅读更多...
STL库 —— unordered_set与unordered_map的封装

STL库 —— unordered_set与unordered_map的封装

这里要对 unordered_set 与 unordered_map 进行封装&#xff0c;封装时使用的是上一篇中学的 HashBucket 。不仅要完成封装&#xff0c;同时要写入迭代器。 一、HashBucket 的修改 1.1 节点的修改 T 首先来认识一下使用 unordered_set 和 ordered_map 时的区别&#xff1a; …
阅读更多...
头歌结构化分析方法-数据流图

头歌结构化分析方法-数据流图

第1关&#xff1a;数据流图-画出外部实体 第2关&#xff1a;数据流图-画出加工 第3关&#xff1a;数据流图-画出数据存储 第4关&#xff1a;数据流图-画出数据流 第5关&#xff1a;数据流图-机票预定系统
阅读更多...
纯电动汽车硬件在环测试

纯电动汽车硬件在环测试

纯电动汽车硬件在环测试技术研究综述 1、新能源汽车概述 随着新能源汽车“电动化、智能化、网联化、共享化”进程的不断推进&#xff0c;新能源汽车的整体性能得到显著提高&#xff0c;纯电动汽车已经逐渐走进大众视野&#xff0c;消费者对于新能源汽车的认可度和购买欲望也稳…
阅读更多...
粤嵌—2024/5/24—最长递增子序列（✔）

粤嵌—2024/5/24—最长递增子序列（✔）

代码实现&#xff1a;
阅读更多...
每日一题---有效的括号问题

每日一题---有效的括号问题

文章目录 前言1.题目以及分析2.参考代码 前言 前面我们学习了栈的相关操作&#xff0c;现在我们做一道题&#xff0c;进行巩固 Leetcode—有效的括号 1.题目以及分析 这道题就可以使用栈进行操作&#xff0c;因为把最左边的括号当成栈底&#xff0c;最右边的是栈顶&#xff0c…
阅读更多...
深入了解 Golang 多架构编译：交叉编译最佳实践

深入了解 Golang 多架构编译：交叉编译最佳实践

随着软件开发领域的不断发展&#xff0c;我们面临着越来越多的挑战&#xff0c;其中之一是如何在不同的平台和架构上部署我们的应用程序。Golang&#xff08;Go&#xff09;作为一种现代化的编程语言&#xff0c;具有出色的跨平台支持&#xff0c;通过其强大的多架构编译功能&a…
阅读更多...
开源大模型与闭源大模型，你更看好哪一方？

开源大模型与闭源大模型，你更看好哪一方？

开源大模型与闭源大模型&#xff0c;你更看好哪一方&#xff1f; 简介&#xff1a;评价一个AI模型“好不好”“有没有发展”&#xff0c;首先就躲不掉“开源”和“闭源”两条发展路径。对于这两条路径&#xff0c;你更看好哪一种呢&#xff1f; 1.方向一&#xff1a;数据隐私 …
阅读更多...
C语言PTA练习题（编程求1+3+5+...+n，编程求n的阶乘，爬楼梯，爬楼梯（扩展），猴子吃桃，猴子吃桃（扩展），求算式前n项的和，汉诺塔游戏）

C语言PTA练习题（编程求1+3+5+...+n，编程求n的阶乘，爬楼梯，爬楼梯（扩展），猴子吃桃，猴子吃桃（扩展），求算式前n项的和，汉诺塔游戏）

7-1 编程求135...n 输入一个正整数n&#xff0c;编程求135...n 要求&#xff1a;用递归完成。 输入格式: 输入一行&#xff0c;只有一个整数n (1<n<9999) 这里n为奇数。 输出格式: 一个正整数&#xff0c;表示结果。 输入样例: 在这里给出一组输入。例如&#xf…
阅读更多...
使用libtorch加载YOLOv8生成的torchscript文件进行目标检测

使用libtorch加载YOLOv8生成的torchscript文件进行目标检测

在网上下载了60多幅包含西瓜和冬瓜的图像组成melon数据集&#xff0c;使用 LabelMe 工具进行标注&#xff0c;然后使用 labelme2yolov8 脚本将json文件转换成YOLOv8支持的.txt文件&#xff0c;并自动生成YOLOv8支持的目录结构&#xff0c;包括melon.yaml文件&#xff0c;其内容…
阅读更多...
我让gpt4o给我推荐了一千多次书 得到了这些数据

我让gpt4o给我推荐了一千多次书 得到了这些数据

事情是这样的&#xff0c;我们公司不是有个读书小组嘛&#xff0c;但是今年大家都忙于工作&#xff0c;忽视了读书这件事&#xff0c;所以我就想着搞个群机器人&#xff0c;让它明天定时向群里推荐一本书&#xff0c;用来唤起大家对读书的兴趣。但在调试的过程中就发现gpt4o老喜…
阅读更多...
基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践

基于Vue的前端自定义询问弹框与输入弹框组件的设计与实践 摘要 随着技术的不断进步&#xff0c;前端开发面临越来越多的挑战&#xff0c;其中之一就是如何有效管理复杂的业务逻辑和用户体验。传统的整块应用开发方式在面对频繁的功能变更和用户体验优化时&#xff0c;往往显得…
阅读更多...
粤嵌—2024/5/20—三角形最小路径和（✔）

粤嵌—2024/5/20—三角形最小路径和（✔）

代码实现&#xff1a; int minimumTotal(int **triangle, int triangleSize, int *triangleColSize) {if (triangleSize 1) {return triangle[0][0];}for (int i 1; i < triangleSize; i) {for (int j 0; j < triangleColSize[i]; j) {int x i - 1;int y1 j - 1, y2…
阅读更多...
【how2j java应用】

【how2j java应用】

[Log4j] 演示如何使用log4j进行日志输出 1.导入jar包 2.使用Log4j 3.代码说明 LOG4J 配置讲解 在src目录下添加log4j.properties文件 说明 log4j.xml 除了使用log4j.properties&#xff0c;也可以使用xml格式进行配置。 [junit] 通过main方法来进行测试&#xff1a;如果…
阅读更多...
《Ai学习笔记》-模型集成部署

《Ai学习笔记》-模型集成部署

后续大多数模型提升速度和精度&#xff1a; 提升速度&#xff1a; -知识蒸馏&#xff0c;以distillBert和tinyBert为代表 -神经网络优化技巧。prune来剪裁多余的网络节点&#xff0c;混合精度&#xff08;fp32和fp26混合来降低计算精度从从而实现速度的提升&#xff09; 提…
阅读更多...
OpenCV与PySide6、QT Designer的联合使用

OpenCV与PySide6、QT Designer的联合使用

一、一个简单的demo&#xff0c;用QT Designer创建一个QMainWindow&#xff0c;并且放置一个QLabel&#xff0c;用以显示从OpenCV读取到的图像文件。 1、打开QT Designer&#xff0c;新建QMainWindow&#xff0c;放置一个QLabel&#xff0c;命名为label_show&#xff1a; 2、将…
阅读更多...
Linux系统命令traceroute详解（语法、选项、原理和实例）

Linux系统命令traceroute详解（语法、选项、原理和实例）

目录 一、traceroute概述 二、语法 1、基本语法 2、命令选项 三、帮助信息 四、示例 1. 使用默认模式&#xff08;ICMP Echo&#xff09;追踪到目标主机 2. 使用UDP模式&#xff08;需要root权限&#xff09;追踪到目标主机 3. 不解析IP地址为主机名&#xff0c;直接显…
阅读更多...
Nodejs(文件操作，构建服务器，express，npm)

Nodejs(文件操作，构建服务器，express，npm)

文章目录 文件操作1.读取文件1&#xff09;步骤2&#xff09;范例 2.写文件1&#xff09;步骤2&#xff09;范例 3.删除文件4.重命名文件夹5删除文件夹 Url1.url.parse()2.url.fomat() Query1.query.parse()2.query.stringfy()3.编码和解码 第三方模块1.nodemailer2.body-parse…
阅读更多...
反弹shell详细易懂讲解，看这一篇就够了

反弹shell详细易懂讲解，看这一篇就够了

文章目录 反弹shell详细易懂讲解&#xff0c;看这一篇就够了一: 基础shell知识什么是shell&#xff0c;bash与shell的区别?通俗解释类型功能常见命令 二: 什么是反弹shell三: 反弹shell类型bash反弹shellNetcat 一句话反弹curl反弹shell正确姿势 wget方式反弹awk反弹 Shellsoc…
阅读更多...
Linux环境基础开发工具的使用（yum，vim，gcc/g++，make/Makefile，gdb）

Linux环境基础开发工具的使用（yum，vim，gcc/g++，make/Makefile，gdb）

Linux 软件包管理器-yum 什么是软件包及安装方式 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序。 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理…
阅读更多...
最新文章

Copyright @ 2022~2023