HTML基础知识
标题标签：
<h1>一级标题</h1> <h2>二级标题</h2>
<h3>三级标题</h3> <h4>四级标题</h4>
<h5>五级标题</h5> <h6>六级标题</h6>
段落标签： <p>一个段落</p>
换行标签： </br>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落</p>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<em>倾斜</em>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>
布局标签：
<div>独占一行</div> 大盒子
<span>可跨行显示</span> 小盒子
图像标签：
<img src=”图像URL”/>
src是<img>标签的必须属性，指定图片路径。
<... alt> 文本属性，替换文本（图片不显示时的文字）
<... title>文本属性，提示文本（鼠标放在图像上，显示的文字）
<... width>像素，设置图像的宽度
<... height>像素，设置图像的高度
<... border>像素，设置图像的边框粗细
<img src="img.jpg.jpg" />
<img src="img.jpg" alt="星空图" />
<img src="img.jpg.jpg" alt="星空图" title="星空图" />
<img src="img.jpg.jpg" alt="星空图" title="星空图" width="500" />
<img src="img.jpg.jpg" alt="星空图" title="星空图" height="100" />
<img src="img.jpg.jpg" alt="星空图" title="星空图" width="500" border="15" />
图像标签属性注意点∶
①图像标签可以拥有多个属性，必须写在标签名的后面。
②属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③属性采取键值对的格式，即key=“value"的格式，属性=“属性值”。
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。（///）
①同一级路径：图像文件位于HTML文件同一级
②下一级路径：图像文件位于HTML文件下一级（/）
③上一级路径：图像文件位于HTML文件上一级（../）
<img src="img.jpg.jpg" />
<img src="images/img.jpg.jpg" />
<img src="../img.jpg.jpg" />
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。（\\\）
<img src="D:\VSCode\web练习\images\img.jpg.jpg" />
<img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg">
超链接标签：
链接语法格式
<a href="跳转目标" target="目标窗口弹出方式">文本图像</a>
href，用于指定链接目标的url地址，(必须属性）
target，用于指定链接页面的打开窗口方式
- 外部链接：
<a href=" 腾讯首页 " target="_self">腾讯</a>
<a href=" 腾讯首页 " target="_blank">腾讯</a> 其中，_self当前窗口打开页面；_blank新窗口打开页面。
- 内部链接：网站内部页面之间的相互链接
<a href="dieryemian.html">第二页面</a>
- 空链接：#
<a href="#">空链接</a>
- 下载链接：地址链接的是 文件.exe或者是 zip等压缩包形式
<a href="img.jpg.rar">下载文件</a>
- 网页元素链接
<a href="百度一下，你就知道"><img src="images/img.jpg.jpg"></a>
- 锚点链接:点我们点击链接,可以快速定位到页面中的某个位置
<a href="#bili">外部</a>
h4 id="bili">1、外部链接</h4>
注释：
快捷键 Ctrl+/
<!--我想喝焦糖玛奇朵-->
特殊字符：
空 格
表格标签： tr“行标签”
表头单元格格式
<table>
<tr>
加粗效果 <th>...</th>
<td>...</td>
...
</tr>
...
</table>
普通单元格格式
<table>
<tr>
<td>...</td>
...
</tr>
...
</table>
align （left、center、
表格结构标签
<table>
<thead> 头部区域
<tr>
<th>...</th>
</tr>
</thead>
<tbody> 主体区域
<tr>
<td>...</td>
...
</tr>
...
</tbody>
</table>
...
</table>
right）：表格相对周围元素对齐方式
border（1或“”）：是否有边框，默认为“”，表示无边框
cellpadding：单元格与其内容之间的空白
cellspacing：单元格之间的空白
合并单元格
colspan：合并跨列单元格
rowspan：合并跨行单元格
</table>
<table border="1" width="500" height="250" cellspacing="0">
<tr>
<td> </td>
<td colspan="2"> </td> <!--跨列单元格 -->
</tr>
<tr>
<td rowspan="2"></td> <!--跨行单元格 -->
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
列表标签：
无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
表单标签：
一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
<form action=”url地址” method=”提交方式” name=”表单域名称”>
各种表单元素控件
</form>
表单控件
1、<input>表单元素：用于收集用户信息
<input type="属性值">
type属性值
<form action=”url地址-***.php” method="提交方式" name=”表单域名称”>
<!-- text 文本框 用户可以在里面输入任何文字 默认20个字符-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password 密码框 用户看不见里面输入的密码 -->
密码：<input type="password" name="pwd"><br>
<!-- radio 单选按钮 可以实现多选 -->
<!-- name是表单元素名字这里性别单选按钮必须有相同的名字name才可以实现多选1 -->
性别：男 <input type="radio" name="sex"> 女 <input type="radio" name="sex" checked="checked"> 人妖 <input type="radio" name="sex"><br>
<!-- checkbox 复选框 可以实现多选 -->
爱好：吃饭 <input type="checkbox" name="hobby"> 睡觉 <input type="checkbox"> 打豆豆 <input type="checkbox">
<!-- 点击了提交按钮,可以把表单域form里面的表单元紊里面的值提交给后台服务器-->
<input type="submit" value="免费注册">
<!-- 重置按钮可以还原表单元紊初始的默认状态 -->
<input type="reset" value="重新填写">
<!-- 普通按钮 button 后期结合js 搭配使用 -->
<input type="button" value="获取短信验证码"><br>
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像：<input type="file">
</form>
checked 规定此input元素首次加载时应当被选中
maxlength 规定输入字段中的字符的最大长度
hidden 定义隐藏的输入字段（type属性值）
image 定义图像形式的提交按钮（type属性值）
<label>标签为input元素定义标注
该标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上用来增加用户体验.
<label for="wen">文本输入：</label>
<input type="text" id="wen">
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
<label for="nv">女</label>
<input type="radio" name="sex" id="nv">
注意：<label>标签for属性与相关元素的id属性相同。
- <select>表单元素：定义下拉列表
<select>
<!-- selected="selected"定义当前项为默认选中项 -->
<option selected="selected">中国</option>
<option>韩国</option>
<option>泰国</option>
</select>
- <textarea> 表单元素：定义多行文本输入
<textarea cols="50" rows="5">
请输入文字：
</textarea>
附加：
1、<hr>横线——
2、去掉li前面的项目符号（小圆点） li {list-style: none;}
CSS基础知识
语法规范：
<style>
/* 选择器 {样式} */
/* 给谁改样式 {改什么样式} */
p {
color: blueviolet;
font-size: 24px;
}
</style>
<style>必须放在<head>中
CSS基础选择器：
1、类class选择器：“.”
.pink {
color: pink;
}
<li class="pink">年满18岁、单身</li>
类命名规则：
多类名使用方式：（中间用空格隔开）
<style>
.pink {color: pink;}
.font {font-size: 24px;}
</style>
<div class="pink font">黄嘉怡</div>
- id选择器：（一般和js搭配使用）
<style>
/* id选择器：样式#定义，结构id调用，只能使用一次，别人切勿使用 */
#pink {color: pink;}
</style>
<div id="pink">黄嘉怡</div>
- 通配符选择器：“*”表示选取页面中所有元素
* {color: red;}
特殊情况才使用
CSS字体属性：
1、字体系列：使用font-family属性定义
h2 {font-family: 微软黑体;}
p {font-family: 'Courier New', Courier, monospace, "微软黑体";}
2、字体大小：使用font-size属性定义
/* 标题标签比较特殊，需要单独指定文字大小 */
h2 {font-size: 16px;}
p {font-size: 20px;}
3、字体粗细：使用font-weight属性定义
.bold {font-weight: bold;}
4、文字样式：使用font-style属性定义
p {font-style: italic;}/* normal */
5、字体复合属性
div {
/*font-size: 16px;
font-weight: 700;
font-style: italic;
font-family: 'Microsoft yahei';*/
/* 复合属性：简写的方式 节约代码*/
/* font:font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'Microsoft yahei';
}
其中在font-weight中，700相当于bold;400相当于normal.
注意;
使用font属性时，必须按照顺序书写，不能更换，用空格隔开.
不需要设置的属性可以省略，但必须保留font-size和font-family属性.
CSS文本属性：
- 文本颜色
div {color: deeppink;}
div {color: #cc00ff;} 最常用
div {color: rgb(255, 0, 255);}
- 对齐文本：text-align
属性值：Left；center；right
h2 {text-align: center;}
- 装饰文本：text-decoration
none 默认，没有装饰线（可取消下划线）
underline 下划线，链接a自带下划线
overline 上划线 line-through 删除线
div{text-decoration: underline;}
- 文本缩进：text-indent，指定文本第一行的缩进
/* 文本的第一行音行缩进多少距离 */
/* p {text-indent: 20px;} */
/* 如果此时写了2em则是缩进当前元素2个文字大小的距离 */
p {text-indent: 2em;}
- 行间距：line-height，上间距+文本高度（16px）+下间距
div {line-height: 26px;}
p {line-height: 25px;}
CSS引入方式：
CSS的三种样式表
- 内部样式表（内嵌样式表）
写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个<style>标签中。
<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
<style>
div {
line-height: 26px;
}
</style>
- 行内样式表
<div style="color: blueviolet; font-size: 12px;">中国人</div>
- 外部样式表
实际开发都是外部样式表.适合于样式比较多的情况.
核心:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.
引入方法：
<link rel="stylesheet" href="style.css">
Emmet语法：
快速生成HTML结构语法
1、生成标签直接输入标签名按tab键即可比如div然后tab键，就可以生成<div></div>
2、生成多个相同标签加上*就可以了比如div*3就可以快速生成3个div
3、如果有父子级关系的标签，可以用>比如ul>li就可以了
4、如果有兄弟关系的标签，用＋就可以了比如div+p
5、如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以
6、如果生成的div类名是有顺序的，可以用自增符号$
<!-- .demo$*3 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
7、如果想要在生成的标签内部写内容可以用{ }表示
<!-- div{我是美女}*3 -->
<div>我是美女</div>
<div>我是美女</div>
<div>我是美女</div>
快速格式化代码
Shift+Alt+F
CSS的复合选择器：
1、*后代选择器（包含选择器）
ol li{ color: pink;}
ol li a {color: plum;}
.nav li a {color: purple;}
<ol>
<li>我是美女</li>
<li><a href="#">我是美女</a></li>
</ol>
<ul class="nav">
<li>我是美女</li>
<li><a href="#">我是美女</a></li>
</ul>
元素1，2必须用空格隔开；元素1是父级，2是子级
2、子选择器
只能选择作为某元素的最近一级子元素（选亲儿子元素）。
.nav>a {color: purple;}
<div class="nav">
<a href="#">我是美女</a>
<p><a href="#">我是帅哥</a></p>
只能使“我是美女”变成紫色。
3、*并集选择器
div,
p,
.pig li {
color: salmon;
}
<div>熊大</div>
<p>熊二</p>
<ul class="pig">
<li>小猪佩奇</li>
</ul>
4、伪类选择器：用（:）表示
用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
*链接伪类选择器
a : link /*选择所有未被访问的链接*/
a :visited /*选择所有已被访问的链接*/
a : hover /*选择鼠标指针位于其上的链接*/
a : active /*选择活动链接（鼠标按下时的链接）*/
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: sandybrown;
}
a:hover {
color: skyblue;
}
a:active {
color: springgreen;
}
<a href="#">小猪佩奇</a>
注意：必须按照顺序书写 l-v-h-a. （常用 a{ }；a:hover{ }）
:focus伪类选择器（用于获取获得焦点的表单元素）
焦点就是光标，主要针对<input>类表单元素
input:focus {
background-color: pink;
}
<input type="text">
<input type="text">
CSS的元素显示模式：
HTML元素一般分为块元素和行内元素两种类型
1、块元素：独占一行，可以设置宽度和高度
常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
注意：
- 文字类的元素内不能使用块级元素
- <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
2、行内元素（内联元素）：不可以设置宽度和高度
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<$>、<ins>、<u>、<span>等
注意：
- 链接里面不能再放链接
- 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3、行内块元素：可以设置宽度和高度
在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内块元素转化为块元素、块元素转化为行内块元素：
a {
display: block; 显示：块；
}
a {
display: inline-block; 显示：行内块；
}
4、小技巧：单行文字垂直居中
让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
div {
height: 40px;
line-height: 40px;
}
CSS的背景：
背景颜色
background-color: pink;
一般情况下元素背景颜色默认值是transparent（透明），可自行设置
背景图片
background-image: url(images/qiwen.jpg);
none为无背景图（默认）
背景平铺
background-repeat: repeat /*no-repeat repeat-x repeat-y */;
背景图片位置
方位名词：center、top、left、right、bottom
background-position: center top; 可交换位置
background-position: right; 第二个默认居中对齐
（网上扒图：右键—选择open in new tab）
精准单位：20px......
background-position: 20px 50px; 不可交换位置，x、y轴
background-position: 50px; 第二个默认垂直居中
混合单位
/* 一定 x 为center, y 为center */
background-position: 50px center;
背景图像固定
后期可以制作视差滚动的效果。
background-attachment: fixed;
/* scroll 滚动效果*/
背景复合写法
没有特定的书写顺序，一般是：
背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
background: pink url(images/img.jpg) no-repeat fixed top;
背景色半透明：alpha透明度，取值范围0~1之间
background: rgba(0, 0, 0, 0.3); 后面必须四个值
background: rgba(0, 0, 0, .3);
CSS的三大特性：
层叠性（就近原则）、继承性（子承父业）
优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
| 继承或者* | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style=" " | 1,0,0,0 |
| !important重要的 | ∞无穷大 |
权重叠加∶如果是复合选译器，则会有权重叠加，需要计算权重。
盒子模型：
margin-top
margin-bottom
CSS盒子模型本质上是
border-top
border-bottom
一个盒子，封装周围的HTML
content
padding-top
padding-top
元素
它包括:边框、外边距、
内边距、和实际内容
边框（border）
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细)边框样式边框颜色
border-width: 5px;
border-style: solid;
border-color: turquoise;
边框简写：没有顺序要求
border: 5px solid turquoise;
边框分开写法
border-top: 5px solid turquoise;
表格细线边框
table,
th {
border: 1px solid blueviolet;
/* 合并相邻的边框 */
border-collapse: collapse;
}
边框影响盒子实际大小
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1、测量盒子大小的时候,不量边框.
2、如果测量的时候包含了边框,则需要width/height减去边框宽度
内边距（padding）
padding: 5px;
/* 一个值，代表上下左右都有5像素内边距 */
padding: 5px 10px;
/* 两个值，代表上下内边距5像素，左右内边距10像素 */
padding: 5px 10px 20px;
/* 三个值，代表上内边距5像素，左右内边距10像素，下内边距20像素 */
padding: 5px;
/* 四个值，代表上是5像素，右是10像素，下是20像素，左是30像素*/
外边距（margin）
外边距可以让块级盒子水平居中
①盒子必须指定宽度（width）
②盒子左右的外边距都设置为auto
常用三种写法：
- margin-left:auto；margin-left:auto；
- margin:auto；
- margin:0 auto；
注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
外边距合并-嵌套块元素塌陷
对于两个嵌套关系(父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
解决方案:
①可以为父元素定义上边框。
border: 1px solid transparent;
②可以为父元素定义上内边距。
padding: 1px;
③可以为父元素添加overflow:hidden。
overflow: hidden;
清除内外边距
* {
padding: 0; 清除内边距
margin: 0; 清除外边距
}
行内元素尽量只设置左右的外边距
圆角边框*：
border-radius属性用于设置元素的外边框圆角。
border-radius: 10px; 10px：圆的半径
- 参数值可以为数值或百分比的形式
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
- 如果是个矩形，设置为高度的一半就可以做
- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius
盒子阴影：
/* box-shadow: h-shadow(水平阴影的位置，可负) v-shadow(垂直阴影的位置，可负) blur(模糊距离) spread(阴影的尺寸) color(阴影的闫森) inset(将外部阴影改为内部阴影); */
box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .3);
文字阴影：
h-shadow、v-shadow、blur、color
text-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
浮动导读：
标准流：标签按照规定好默认方式排列
浮动特性：
1、脱离标准普通流的控制（浮）移动到指定位置（动)，（俗称脱标）
2、浮动的盒子不再保留原先的位置
3、如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且页端对齐排列。
4、如果行内元素有了浮动,则不需要转换块级\行肉块元素就可以直接给高度和宽度。
清除浮动：
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
方法：
- 额外标签法也称为隔墙去，是W3C推荐的做法。
.clear { clear: both }
<div class="clear"> </div> 新增盒子元素要求必须是块级元素
- 父级添加overflow属性
overflow: hidden; 父级添加
- 父级添加after伪元素（照顾低版本浏览器）
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/*IE 6、7专有 */
*zoom: 1;
}
4、父级添加双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/*IE 6、7专有 */
*zoom: 1;
}
CSS定位：
定位︰将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位=定位模式＋边偏移。
定位模式（position）
static 静态定位 relative 相对定位
absolute 绝对定位 fixed 固定定位
边偏移
边偏移就是定位的盒子移动到最终位置。有top、bottoml、eft和right 4个属性。
*相对定位relation
相对定位的特点∶（务必记住）
1．它是相对于自己原来的位置来移动的(参照点是自己原来的位置)。
2原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来位置）
*绝对定位absolute
1、如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document文档)。
2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3．绝对定位不再占有原先的位置。（脱标）
*固定定位fixed
1、以浏览器的可视窗口为参照点移动元素。跟父元素没有任何关系不随滚动条滚动。
2、固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧
小算法：
1、让固定定位的盒子left: 50%，走到浏览器可视区（也可以看做版心）的一半位置。
2、让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的一半位置
粘性定位sticky
1、以浏览器的可视窗口为参照点移动元素（固定定位特点）
2、粘性定位占有原先的位置（相对定位特点）
3、必须添加top. left、right、bottom其中一个才有效。
定位叠放次序 z-index
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器{ z-index：1；}
1、数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上
2、如果属性值相同，则按照书写顺序，后来居上
3、数字后面不能加单位
4、只有定位的盒子才有z-index属性
定位的拓展
- 绝对定位的水平居中
加了绝对定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left:50%;:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;:让盒子向左移动自身宽度的一半。
2、定位特殊特性
绝对定位和固定定位也和浮动类似。
①行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
②块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
3、脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。
4、绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它卜面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片)
但是绝对定位（固定定位）会压住下面标准流所有的内容。
元素的显示与隐藏：
CSS新增伪元素：
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTM结构。
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意∶
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法:element::before { }
- before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器—样，权重为1
附加：
- *CSS属性书写顺序：
建议遵循以下顺序:
1.布局定位属性:display / position/ float / clear/ visibility / overflow(建议display第一个写，毕竟关系到模式)
2.自身属性: width/ height / margin/ padding/ border / background
3.文本属性 :color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性（CSS3) : content / cursor / border-radius/ box-shadow / text-shadow/ background:linear-gradient...
- 实际开发中，我们不会直接用链接a而是用li包含链接(li+a)的做法。
1. li+a语义更清晰，一看这就是有条理的列表型内容。
2．如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
扫一扫
1733
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
