HTML定义
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
什么是 HTML?
HTML 是用来描述网页的一种语言。
·HTML 指的是超文本标记语言: HyperText Markup Language
·HTML 不是一种编程语言，而是一种标记语言
·标记语言是一套标记标签 (markup tag)
·HTML 使用标记标签来描述网页
·HTML 文档包含了HTML 标签及文本内容
·HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
·HTML 标签是由尖括号包围的关键词，比如 <html>
·HTML 标签通常是成对出现的，比如 <b> 和 </b>
·标签对中的第一个标签是开始标签，第二个标签是结束标签
·开始和结束标签也被称为开放标签和闭合标签
<标签>内容</标签>
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
Web 浏览器
Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：
ctrl+B：收框
ctrl+S：保存
标签的语法
标签 成对 出现，中间包裹内容
<>里面 放英文字母（标签名）
结束标签比开始标签多 /
◆ 双标签 ：成对出现的标签
◆ 单标签 ：只有开始标签，没有结束标签
HTML 基本骨架
html:整个网页
html：整个网页
head：网页头部，用来存放给浏览器看的信息，例如CSS
body：网页主体，用来存放给用户看的信息，例如图片、文字
VS Code 快速生成骨架：
在 HTML 文件（ .html ）中， !（英文） 配合 Enter / Tab 键
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
标签的关系
作用：明确标签的书写位置；让代码格式更整齐
⚫ 父子关系 （嵌套关系）
⚫ 兄弟关系 （并列关系）
⚫ * 代码格式
⚫ 父子关系： 子级标签换行且缩进 （Tab键）
⚫ 兄弟关系： 兄弟标签换行要对齐
注释
注释就是对代码的解释和说明，其目的是让人们能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。
在编写HTML代码时，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如:方便理解、方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便以后你对自己代码进行修改。学习和工作中，关键代码都要加注释
<!--..-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示。
在VS Code 中，添加/删除注释的快捷键:Ctrl +/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这是文字，能看见吗？ -->
</body>
</html>
注释是不会显示再网页内容中的
标题标签
—般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标题标签
标签名：h1 ~ h6（双标签）
显示特点：
文字加粗
字号逐渐减小
独占一行（换行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html> 
h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制
标签的语法：
标签名：p（双标签）
显示特点：
- 独占一行
- 段落之间存在间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>杰西卡·霍兰德（蒂尔达·斯文顿TildaSwinton饰）是旅居哥伦比亚的欧洲人，她来到波哥大看望她生病的姐姐（艾格尼丝·布雷克AgnesBrekke饰）。因为总是听到奇怪的巨响，于是她试图去找寻幻听的根源，并由此开始了一场由幻想、偶遇与重逢组成的，与记忆和历史产生回响的旅程。</p>
<p>杰西卡·霍兰德（蒂尔达·斯文顿TildaSwinton饰）是旅居哥伦比亚的欧洲人，她来到波哥大看望她生病的姐姐（艾格尼丝·布雷克AgnesBrekke饰）。因为总是听到奇怪的巨响，于是她试图去找寻幻听的根源，并由此开始了一场由幻想、偶遇与重逢组成的，与记忆和历史产生回响的旅程。</p>
</body>
</html>
换行与水平线标签
换行：<br>（单标签）
水平线：<hr> (单标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
这是第一行内容
<br>
这是第二行内容
<hr>
</body>
</html> 
文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、
删除线等。
标签的主要部分有:
1.开始标签(Opening tag):包含元素的名称(本例为p)，被左、右角括号所包围。表示元素从这里开
始或者开始起作用——在本例中即段落由此开始。
2.结束标签(Closing tag):与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的
结果。
3.内容(Content):元素的内容，本例中就是所输入的文本本身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>strong加粗效果</strong>
<b>b的加粗效果</b>
<br>
<em>em的倾斜</em>
<i>i的倾斜</i>
<br>
<ins>ins下划线</ins>
<u>u下划线</u>
<br>
<del>del的删除线</del>
<s>s的删除线</s>
</body>
</html>
图像标签
作用：在网页中插入图片
语法：
<img src="图片的 URL">
src用于指定图像的位置和名称，是 <img> 的必须属性。
在了解图片标签之前我们必须先了解以下路径：
路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
相对路径 -从当前文件位置出发查找目标文件⚫ / 表示进入某个文件夹里面
⚫ . 表示当前文件所在文件夹
⚫ .. 表示当前文件的上一级文件夹
绝对路径 -从盘符出发查找目标文件
图像标签-属性
| 属性 | 作用 | 说明 |
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
超链接标签
作用：点击跳转到其他页面。
语法：<a href="http://www.baidu.com">跳转页面</a>
href 属性值是跳转地址，是超链接的必须属性。 超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。 拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--超链接是双标签a-->
<a href="https://www.baidu.com/index.htm">点击跳转百度</a>
<br>
<!--跳转到本地-->
<!--target="_blank"新窗口跳转页面,原窗口不会消失-->
<a href="./09-图像标签.html" target="_blank">点击跳转到图片</a>
<!--开发初期，不知道超链接的跳转地址，href属性值写#,表示空连接，不会跳转-->
<a href="#">空链接</a>
</body>
</html> 
音频标签
语法：<audio src="音频的URL"></audio>
| 属性 | 作用 | 特殊说明 |
| src(必须属性) | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
视频标签
语法
常见属性
列表标签
HTML 列表
HTML 支持有序、无序和定义列表:
HTML 列表
有序列表
1.第一个列表项
2.第二个列表项
3.第三个列表项
无序列表
·列表项
·列表项
·列表项
无序列表
作用:布局排列整齐的不需要规定顺序的区域。
标签:ul嵌套li, u是无序列表，li是列表条目。
标签里面只能包裹li标签
li标签里面可以包裹任何内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表条目一</li>
<li>列表条目二</li>
<li>列表条目三</li>
</ul>
</body>
</html> 
有序列表
作用:布局排列整齐的需要规定顺序的区域。
标签:ol嵌套li,ol是有序列表，li是列表条目。
ol标签里面只能包裹li标签
li标签里面可以包裹任何内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ol> <li>步骤一</li> <li>步骤二</li> <li>步骤三</li> </ol> </body> </html>
定义列表
标签:dl嵌套dt和dd,dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情。
例如：
dl里面只能包含dt和dd
dt和dd里面可必包含任何内容<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <dl> <dt>服务中心</dt> <dd>申请售后</dd> <dd>售后政策</dd> </dl> </body> </html>
表格标签
标签：table嵌套 tr,tr嵌套 td / th
标签名 说明 table 表格 tr 行 th 表头单元格 td 内容单元格 提示:在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</table>
</body>
</html>
表格结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
1.明确合并的目标2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
--跨行合并，保留最上单元格，添加属性是rowspan
--跨列合并，保留最左单元格，添加属性colspan
3.删除其他单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格标签</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单标签
作用：收集用户信息。
使用场景：
登录页面注册页面
搜索区域
input标签
input标签type属性值不同，则功能不同。
语法：<input type="...." placeholder="....."> 提示词（提示输入什么）
<body>
<!--特点:输入什么显示什么-->
文本框:<input type="text">
<br>
<!--特点:输入什么都是以点的形式显示-->
密码框:<input type="password">
<br><br>
单选框:<input type="radio">
<br><br>
多选框:<input type="checkbox">
<br><br>
上传文件:<input type="file">
</body> 
input占位文本
占位文本：提示信息
<input type = "..." placeholder="提示信息">
文本框和密码框都可以使用
radio单选框
常见属性
| 属性名 | 作用 | 特殊说明 |
| name | 控件名称 | 控件分组，同组只能选中一个（单选） |
| checked | 默认选中 | 属性名和属性值相同，简写为一个单词 |
file上传文件
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple属性可以实现文件多选功能。
<input type="file" multiple>
checkbox多选框
多选框也叫复选框
默认选中：checked.
<input type="checkbox" checked>前端代码
下拉菜单
标签: select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。
文本域标签
作用：多行输入文本的表单控件
例如：发QQ空间，发微博等
标签：textarea,双标签
label标签
作用：网页中，某个标签的说明文本。
用label标签绑定文字和表单的空间关系，增大表单控件的点击范围。
写法一：
label标签只包裹内容，不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
写法二：
使用label标签包裹文字和表单控件，不需要属性
提示:支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮标签
语法
type属性值
| type属性值 | 说明 |
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，与javascript使用 |
网页布局标签
作用：布局网页（划分网页区域,摆放内容）
标签：
div:独占一行
span:不换行
字符实体
作用：在网页中显示预留字符。
显示结果 描述 实体名称 空格 < 小于号 < > 大于号 >
CSS
css定义
层叠样式表(Cascading Style Sheets，缩写为CSS)，是一种样式表语言，用来描述HTML文档的呈现（美化内容）。书写位置: title标签下方添加style双标签，style标签里面书写CSS代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初始CSS</title> <style> /*CSS代码*/ /*选择器{CSS属性}*/ /*属性名和属性值成对出现->键值对*/ p { /*文字颜色*/ color: rgb(231, 13, 13); /*字号*/ font-size: large; } </style> </head> <body> <p>体验CSS</p> </body> </html>
CSS引入方式
1.内部样式表：
CSS代码写在style标签里面
2.外部样式标表：
CSS代码写在单独的CSS文件中(.css)
在HTML中使用link标签引入
3.行内样式：
配合JavaScript使用
选择器
作用：查找标签，设置样式
基础选择器
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器
标签选择器
标签选择器:使用标签名作为选择器→选中同名标签设置相同的样式。
例如：p,h1,div,a,img.....
类选择器
作用:查找标签，差异化设置标签的显示效果。
步骤：定义类选择器->.类名
使用类选择器->标签名class="类名"
类名自定义，不要用纯数字或中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
id选择器
作用:查找标签，差异化设置标签的显示效果。
场景:id选择器一般配合JavaScript使用，很少用来设置CSS样式
步骤：
定义id选择器→#id名
使用id选择器→标签添加id= "id名"
同一个id选择器在一个页面只能使用一次。
通配符选择器
作用:查找页面所有标签，设置相同样式。
通配符选择器 : *，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
画盒子
目标:使用合适的选择器画盒子
属性
| 属性名 | 作用 |
| width | 宽度 |
| height | 高度 |
| background-color | 背景色 |
文字控制属性
字体大小
■ 属性名：font-size
■ 属性值：文字尺寸，PC端网页最常用的单位px
字体粗细
■ 属性名：font-weight
■ 属性值：
数字 关键字 正常 400 normal 加粗 700 bold
字体倾斜
■作用：清楚文字默认的倾斜效果
■ 属性名：font-style
■ 属性值：
正常：normal
倾斜：italic
行高
■作用：设置多行文本的间距
■属性名：line-height
■属性值：
数字+px
数字(当前标签font-size属性值的倍数)
行高的组成
行高的测量方法:从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）。
行高---垂直居中
垂直居中技巧：行高属性值等于盒子高度属性值
字体族
属性名：font-family
属性值：字体名
font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
Font复合属性
复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font: 是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写)
注意：字号和字体值必须书写，否则font属性不生效。
文本缩进
属性名：text-indent
属性值：
数字+px
数字+em（推荐：1em=当前的字号大小）
文本对齐
作用：控制内容水平对齐
属性名：text-align
属性值
属性值 效果 left 左对齐 center 居中对齐 right 右对齐
水平对齐方式-图片
text-align本质是控制内容的对齐方式，属性要设置给内容的父级。
我们可以将图片放入div标签中，在将div中的文字内容居中即可。
修饰线
属性名：text-decoration
属性值：
属性值 效果 none 无 underline 下划线 line-through 删除线 overline 上划线
文字颜色
属性名：color
属性值：
复合选择器
定义：由两个或多个基础选择器，通过不同的方式组合而成
作用：更准确，更高效的选择目标元素（标签）
后代选择器：选中某元素的后代元素
选择器写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开
子代选择器
子代选择器：选中某元素的子代元素（最近的子集）
选择器写法：父选择器>子选择器{CSS属性}，父子选择器之间用>隔开。
并集选择器
并集选择器：选中多组标签设置相同的样式
选择器写法：选择器1，选择器2.......，选择器n{CSS属性},选择器之间用，隔开。
<style> div, p, span{ color: red; } </style> <div> div 标签</div> <p>p 标签</p> <span>span 标签</span>
交集选择器
交集选择器：选中同时满足多个条件的元素。
选择器写法：选择器1选择器2{CSS属性}，选择器之间没有连写，没有任何符号
例如：我们要选中P标签，可是有两个P,如果用类选择器有两个box，所以我们可以使用交集选择器，同时选中即可。
<p class="box">p 标签，使用了类选择器box</p> <p>p 标签</p> <div class="box">div标签，使用了类选择器box</div>如下：
p.box{ color:red; }如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
伪类选择器
伪类选择器：伪类表示元素的状态，选中元素的某个状态设置样式
伪类——超链接
超链接有四个状态
选择器 作用 :link 访问前 :visited 访问后 :hover 鼠标悬停 :active 点击时（激活） 如果要给超链接设置以上四个状态，需要按照LVHA的顺序书写。
继承性
继承性：子级默认继承父级的文字控制属性。
如果标签自己有样式则生效自己的样式，不继承
层叠性
特点：
相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
不同的属性会叠加：不同的CSS属性都生效
优先级
优先级也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
规则：
选择器优先级高的样式生效
公式：
通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
(选中标签的范围越大，优先级越低)
类选择器>标签选择器，所以该标签会显示绿色
优先级 - 叠加计算规则
叠加计算：如果是复合选择器，则需要权重叠加计算
公式：（每一行之间不存在进位）
(行内样式,id选择器个数，类选择器个数，标签选择器个数)
规则:
从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较!important权重最高
继承权重最低
Emmet写法
Emmet写法：代码的简写方式，输入缩写VS Code 会自动生成对应的代码。
背景属性
背景图
网页中，使用背景图实现装饰性的图片效果
属性名：background-image(bgi)
属性值：url(背景图URL)
背景图平铺方式
属性名：background-repeat(bgr)
属性值：
背景图位置
属性名：background-position(bgp)
属性值：水平方向位置 垂直方向位置
关键字：
| 关键字 | 位置 |
| left | 左侧 |
| right | 右侧 |
| center | 居中 |
| top | 顶部 |
| bottom | 底部 |
坐标（数字+px,正负都可以）：
水平方向：正数向右，负数向左
垂直方向：正数向下，负数向上
关键字取值方式写法，可以颠倒取值顺序
可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中。
背景图缩放
作用:设置背景图大小
属性名：background-size
常用属性值：
关键字cover:等比例缩放背景图以完全覆盖背景区，可能背景图部分看不见
contain:等比例缩放背景图以完全装入背景区，可能背景区部分空白
百分比：根据盒子的尺寸计算背景图的大小
数字+单位（例如px）
背景图固定
作用：背景不会随着元素的内容滚动
属性名：background-attachment（bga）
属性值：fixed
背景图的复合属性
属性名：background(bg)
属性值：背景色 背景图 背景图的平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性，不区分向后顺序)
显示模式
显示模式：标签（元素）的显示方式作用：布局网页的时候，更据标签的显示模式选择合适的标签摆放内容。
块级元素
独占一行
宽度默认是父级的100%
可添加宽高属性
行内元素
一行共存多个
宽高属性不生效
宽高由内容撑开
行内块元素
一行共存多个；
宽高属性生效；
默认宽高由内容撑开
转换显示模式
属性名：display
属性值：
属性值 效果 block 块级 inline-block 行内块 inline 行内
结构伪类选择器
作用：根据元素的结构关系查找元素
| 选择器 | 说明 |
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child | 查找第N个E元素（第一个元素N值为1） |
E->选择器
：nth-child(公式)
根据元素结构关系查找多个元素
| 功能 | 公式 |
| 偶数标签 | 2n |
| 奇数标签 | 2n+1;2n-1 |
| 找到5的倍数的标签 | 5n |
| 找到第5个以后的标签 | n+5 |
| 找到第5个以前的标签 | -n+5 |
<style>
li:nth-child(2n){
background-color:green;
}伪元素选择器
作用:创建虚拟元素(伪元素)，用来摆放装饰性的内容。
选择器 说明 E::before 在E元素里面最前面添加一个伪元素 E::after 在E元素里面最后面添加一个伪元素 注意点:
·必须设置content::" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
·伪元素默认是行内显示模式
· 权重和标签选择器相同
1865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
