目录
1_列表元素1.1_列表的实现方式1.2_有序列表 – ol – li1.3_无序列表 – ul - li1.4_定义列表 – dl – dt - dd1.5_ 写前端代码逻辑顺序 2_表格元素(不推荐)2.1_表格常见元素2.2_表格其他元素2.3_单元格合并 3_表单元素3.1_input的属性3.2_表单按钮3.3_input和label的关系3.4_ radio3.5_ checkbox3.6_ textarea3.7_ select和option的使用3.8_form常见的属性 4_Emmet(理解)4.1_ 认识emmet语法4.2_ >（子代） +（兄弟）4.3_ *(多个) ^(上一级）4.4_ 括号分组 ()4.5_ 属性(id、class) {内容}4.6_ $（数字）4.7_隐式标签4.8_CSS Emmet(css缩写提高代码效率) 5_结构伪类5.1_ :nth-child5.2_ :nth-last-child( )5.3_不常用结构伪类5.4_否定伪类1_列表元素
1.1_列表的实现方式
两种方案
方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)方案二: 使用列表元素, 使用元素语义化的方式实现;
网站对列表元素无强烈偏好，多按照自己的风格来布局
原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
虽然可以通过重置来解决, 但是我们更喜欢自由的div;
常用的3组列表的元素
有序列表：ol、li
无序列表：ul、li
定义列表：dl、dt、dd
1.2_有序列表 – ol – li
ol（ordered list）： 有序列表，直接子元素只能是li
li（list item）： 列表中的每一项
1.3_无序列表 – ul - li
ul（unordered list）： 无序列表，直接子元素只能是li
li（list item）： 列表中的每一项（默认每项前面是黑色小圆点）
1.4_定义列表 – dl – dt - dd
dl（definition list）【大标题】 定义列表，直接子元素只能是dt、dd
dt（definition term）【中标题】 term是项的意思, 列表中每一项 的项目名
dd（definition description）【小标题/正文】
列表中每一项的具体描述，是对 dt 的描述、解释、补充
一个dt后面一般紧跟着1个或者多个dd
1.5_ 写前端代码逻辑顺序
先完成结构重置样式(body/a/ul)先整体, 后局部顺序: 按照从外往里. 从上往下去除重复的代码(css) 将重复的逻辑放到一个单独的class中(.icon)不同的代码抽到不同的class(.new .hot)慢慢来写反而是快！
继承样式权重<给后代专门设置样式权重
2_表格元素(不推荐)
2.1_表格常见元素
table： 表格
tr(table row)： 表格中的行
td(table data)： 行中的单元格
表格有很多相关的属性可设置表格的样式, 但已经不推荐使用
2.2_表格其他元素
thead： 表格的表头
tbody： 表格的主体
tfoot： 表格的页脚
caption： 表格的标题
th表格的表头单元格
2.3_单元格合并
某些情况, 每个单元格占据的大小不是固定的， 一个单元格可能会跨多行或者多列来使用
两种情况:
跨列合并: 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
跨行合并: 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;
3_表单元素
3.1_input的属性
type
text：文本输入框（明文输入）
password：文本输入框（密文输入）
radio：单选框
checkbox：复选框
button：按钮
reset：重置
submit：提交表单数据给服务器
file：文件上传
readonly：只读
disabled：禁用
checked：默认被选中(只有当type为radio或checkbox时可用)
autofocus：当页面加载时，自动聚焦
name：名字(在提交数据给服务器时，可用于区分数据类型)
value：取值【显示给用户看】
3.2_表单按钮
普通按钮（type=button）：使用value属性设置按钮文字
重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
3.3_input和label的关系
label元素一般跟input配合使用，用来表示input的标题；
labe可以跟某个input绑定，点击label就可以激活对应的input变成选中
3.4_ radio
将type类型设置为radio变成单选框【圆圈框】；
name值相同的radio才具备单选功能
3.5_ checkbox
将type类型设置为checkbox变成多选框【打钩框】；
属于同一种类型的checkbox，name值要保持一致
3.6_ textarea
textarea的常用属性:
cols：列数
rows：行数
缩放的CSS设置【在style中textarea的设置其样式】
禁止缩放：resize: none;
水平缩放：resize: horizontal; 【文本框水平方向可调长度】
垂直缩放：resize: vertical;【文本框垂直方向可调长度】
水平垂直缩放：resize: both;【文本框水平垂直方向都可调长度】
3.7_ select和option的使用
option是select的子元素，一个option代表一个选项，多个option就有多个选项
select常用属性
multiple：可以多选
size：显示多少项
option常用属性: elected(默认被选中)
3.8_form常见的属性
form通常作为表单元素的父元素:
form可以将整个表单作为一个整体来进行操作;
比如对整个表单进行重置；
比如对整个表单的数据进行提交;
form常见的属性如下:
action: 用于提交表单数据的请求URL
method： 请求方法（get和post），默认是get
target： 在什么地方打开URL（参考a元素的target）
4_Emmet(理解)
4.1_ 认识emmet语法
VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码
4.2_ >（子代） +（兄弟）
div>ul>li
<div><ul><li></li></ul></div>
div+div>p>span+i
<div></div><div><p><span></span><i></i></p></div>
div+p+ul>li
<div></div><p></p><ul><li></li></ul>
4.3_ *(多个) ^(上一级）
ul>li*5
<ul><li></li><li></li><li></li><li></li><li></li></ul>
div+div>p>span^h1
<div></div><div><p><span></span></p><h1></h1></div>
div+div>p>span^^^^h1
<div></div><div><p><span></span></p></div><h1></h1>
4.4_ 括号分组 ()
div>(header>ul>li*2>a)+footer>p
<div><header><ul><li><a href=""></a></li><li><a href=""></a></li></ul></header><footer><p></p></footer></div>
4.5_ 属性(id、class) {内容}
div#header+div#main>.container>a[href]
“ . ”表示其class名称
“ # ”表示id
<div id="header"></div><div id="main"><div class="container"><a href=""></a></div></div>
a[href=“”]{百度一下}
<a href="">百度一下</a>
4.6_ $（数字）
*ul>li.item$5
<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li></ul>
4.7_隐式标签
在一个双标签内容处，用emmet语法缩写快速生成相应标签
4.8_CSS Emmet(css缩写提高代码效率)
w100 即width: 100px；
w20+h30+m40+p50 （height/margin/padding）
dib表示display:inline-block
5_结构伪类
5.1_ :nth-child
:nth-child(1)：是父元素中的第1个子元素。
:nth-child(2n)：
n代表任意正整数和0； 是父元素中的第偶数个子元素（第2、4、6、8…个）； 跟:nth-child(even)同义。
:nth-child(2n + 1)：
n代表任意正整数和0； 是父元素中的第奇数个子元素（第1、3、5、7…个）； 跟:nth-child(odd)同义。
nth-child(-n + 2)： 代表前2个子元素。
5.2_ :nth-last-child( )
【不在乎子元素类型是否相同】
:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
:nth-of-type()计数时只计算同种类型的元素
:nth-last-of-type()从最后一个这种类型的子元素开始倒数数
5.3_不常用结构伪类
:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯一的这种类型的子元素
:root，根元素，就是HTML元素（包含的所有子元素）
:empty代表里面完全空白的元素
5.4_否定伪类
:not()的格式是:not(x)
x是一个简单选择器：元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示****除x以外的元素
CSS-5 列表元素(ol+ul++li+dl+dt+dd) 表格元素 单元格合并 表单元素(input+label+radio+...) Emmet语法 结构伪类(:nth-child）
