跳转目录🚀
1. 列表元素
1.1 有序列表 ol->li (ordered list)
注意:有序列表ol中直接元素只能是li
li 的含义==> list item 即表示列表中的每一项
案例演示：
<h1>喜欢的电影排名</h1><ol><li>阿甘正传</li><li>阿甘正传</li><li>阿甘正传</li><li>阿甘正传</li><li>阿甘正传</li><li>阿甘正传</li></ol>
可以从上面的案例按出来，ol其实是自带效果的，有时候我们往往不喜欢这样，因此我们会重新给它覆盖样式。
ol,li {padding: 0;margin: 0;list-style-type: none;}
1.2 无序列表 ul-> li (unordered list)
注意:无序列表ul中直接元素只能是li，与ol相同的是直接子元素也只能是li
案例演示：
<h1>常见的编程语言</h1><ul><li>JavaScript</li><li>JavaScript</li><li>JavaScript</li><li>JavaScript</li><li>JavaScript</li><li>JavaScript</li><li>JavaScript</li></ul>
其实无论是有序还是无序列表，或者其它元素，当它们有一些自带的效果我们很难去控制时，我们都习惯于将它们一次性的进行重置，像两个列表元素本质就是list-style-type不同，我们很少使用自带的序号，反而经常使用list-style-type:none;.
ul {margin: 0;padding: 0;list-style-type: none;}
如果我们的确想用序号，现在手动去添加会有点麻烦，等到之后学习js后可以通过循环来添加。
1.3 定义列表 dl->dt&dd（definition list）
注意:定义列表的直接子元素是dt 和 dd
dt 的含义==> definition term 即表示列表中每一项的项目名
dd的含义==>
definition description 即表示列表中每一项的具体描述，是对dt的描述、解释、补充一个dt后面跟着一个或者多个dd
案例演示：
<h1>前端开发</h1><dl><dt>阶段1：</dt><dd>HTML</dd><dd>HTML</dd> <dd>HTML</dd><dt>阶段2</dt><dd>JavaScript</dd><dd>JavaScript</dd><dd>JavaScript</dd></dl>
还是喜欢重置，同上
应用场景举例：
1.4 练习案例
<!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>Document</title><style>/* 重置样式 */body,ul,ol,li,dl,dd,dt,a {margin: 0;padding: 0;}ul,ol,li,dl,dd,dt {list-style-type: none;}a {text-decoration: none;color: #222;}/* 自我喜好修改 */ul>li {margin: 12px 0;}.item>a {display: inline-block;height: 24px;line-height: 24px;}ul>li .ranking {display: inline-block;width: 24px;/* font-size: 20px; */font-weight: 700;margin-right: 8px;line-height: 24px;height: 24px;text-align: center;color: #999;}ul>li:first-child span {color: #a82e2e;}ul>li:nth-child(2) span {color: #f04142;}ul>li:nth-child(3) span {color: #ff9a03;}.content {display: inline-block;}.content:hover {color: #F04142;}ul>li .icon {position: relative;top: 2px;display: inline-block;width: 16px;height: 16px;}.new {background-image: url(./img/new.svg);}.hot {background: no-repeat url(./img/hot.svg);}</style></head><body><ul><li class="item"><a href="#"><span class="ranking">1</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon hot"></i></a></li><li class="item"><a href="#"><span class="ranking">2</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon hot"></i></a></li><li class="item"><a href="#"><span class="ranking">3</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon new"></i></a></li><li class="item"><a href="#"><span class="ranking">4</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon"></i></a></li><li class="item"><a href="#"><span class="ranking">5</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon new"></i></a></li><li class="item"><a href="#"><span class="ranking">6</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon"></i></a></li><li class="item"><a href="#"><span class="ranking">7</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon"></i></a></li><li class="item"><a href="#"><span class="ranking">8</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon new"></i></a></li><li class="item"><a href="#"><span class="ranking">9</span><div class="content">载39人渔船印度洋倾覆：中国籍17人</div><i class="icon"></i></a></li></ul></body></html>
代码编写思路总结：
1.先完成结构
2.重置样式(body,a,ul,ol,li等等)
3.先整体 再局部
备注：样式的添加顺序最好跟页面结构一样，方便查找
4.将重复的逻辑放到一个单独的class中(如上面案例中的.icon)
5.不同的代码提炼到不同的样式中(如案例中的 .hot .new）
备注:继承的属性优先级是最低的，如果元素本身自己设置了相应的属性肯定会被替换掉的。
2. 表格元素
2.1 表格常见元素
编写表格时使用到的元素：
table=> 表示表格tr=> 表示表格中的一行即 table rowtd=> 表示每一行中的单元格即 table data
表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了
2.2 表格边框 border-collapse
==作用： == 该CSS 属性是用来决定表格的边框是分开的还是合并的
collapse => 重复边框折叠，或者说合并单元格边框separate => 边框分开
表格案例练习：
其中表格边框需要通过css进行调整，会使用到border-collapse
<!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>Document</title><style>table {padding: 0;margin: 0 auto;width: 400px;height: 200px;border-collapse: collapse;}table tr:first-child {font-weight: 700;}td {border: 1px solid;margin: 0;padding: 0;text-align: center;}</style></head><body><table><tbody><tr><td>排名</td><td>股票名称</td><td>股票代码</td><td>股票价格</td><td>股票涨跌</td></tr><tr><td>1</td><td>贵州茅台</td><td>600519</td><td>1800</td><td>5%</td></tr><tr><td>2</td><td>腾讯控股</td><td>00700</td><td>400</td><td>3%</td></tr><tr><td>3</td><td>五粮液</td><td>000858</td><td>160</td><td>8%</td></tr><tr><td>4</td><td>东方财富</td><td>30059</td><td>25</td><td>4%</td></tr></tbody></table></body></html>
2.3 表格的其他元素
如果表格中全部都是tr组成，会导致语义化不明确。因此为了区分表格的各个部分，而衍生出了以下几个标签增加表格元素的语义化。
caption=> 表格的标题thead=> 表格的表头th=> 表格的表头单元格tbody=> 表格的主体tfoot=> 表格的页脚
多了这些标签后，需要注意css属性如何精准的选中想要的元素
3. 表格合并
3.1 单元格合并
如何使用单元格合并呢？首先要搞清楚什么是跨行什么是跨列
跨列合并：colspan跨列是想右跨的跨行合并：rowspan跨行是向下跨的
单元格合并三步骤：
1.确定“谁” 需要跨列或者跨行
2.确定跨行还是列
3.确定跨几行或者几列
案例练习：
<!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>Document</title><style>table {width: 500px;height: 400px;border-collapse: collapse;text-align: center;}caption,th,td {padding: 5px 0;border: 1px solid #f00;}caption {font-size: 20px;font-weight: 700;border-bottom: none;}.morning,.afternoon,.night {width: 100px;}</style></head><body><table><caption>课程表</caption><thead><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></thead><tbody><tr><td class="morning" rowspan="4">上午</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td class="afternoon" rowspan="4">下午</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td class="night" rowspan="2">晚自习</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr></tbody></table></body></html>
影院案例练习：
遇到的问题：如果设置了表格的固定高度，如果所有行的高度总和最低要达到固定高度的值。否则单独修改td过低会不起作用。
<!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>table {width: 1000px;/* height: 300px; */text-align: center;border-collapse: collapse;}th,td {padding: 0;}caption,th,.start-time {font-weight: 700;}caption {height: 60px;line-height: 60px;font-size: 20px;}th {height: 50px;line-height: 50px;background-color: #f5f5f5;}td {height: 55px;/* line-height: 60px; */}tbody>tr:nth-child(2n+1) {background-color: #f3ecec;}tbody>tr:nth-child(2n) {background-color: #f5f5f5;}tbody>tr>td:nth-child(4) {color: #e73030;}.end-time {margin-top: 5px;font-size: 13px;color: #797773;}.seat-button {display: inline-block;width: 80px;height: 30px;color: #fff;font-size: 14px;line-height: 30px;border-radius: 10px;background-color: #e73030;text-decoration: none;}</style></head><body><table class="movie-list"><caption>影院电影放映列表</caption><thead><tr><th>放映时间</th><th>语言版本</th><th>放映厅</th><th>售价(元)</th><th>选座购票</th></tr></thead><tbody><tr><td><div class="start-time">13:15</div><div class="end-time">15:00散场</div></td><td>国语3D</td><td>2号厅</td><td>¥48.5</td><td><a href="#" class="seat-button">选座购票</a></td></tr><tr><td><div class="start-time">13:15</div><div class="end-time">15:00散场</div></td><td>国语3D</td><td>2号厅</td><td>¥48.5</td><td><a href="#" class="seat-button">选座购票</a></td></tr><tr><td><div class="start-time">13:15</div><div class="end-time">15:00散场</div></td><td>国语3D</td><td>2号厅</td><td>¥48.5</td><td><a href="#" class="seat-button">选座购票</a></td></tr><tr><td><div class="start-time">13:15</div><div class="end-time">15:00散场</div></td><td>国语3D</td><td>2号厅</td><td>¥48.5</td><td><a href="#" class="seat-button">选座购票</a></td></tr><tr><td><div class="start-time">13:15</div><div class="end-time">15:00散场</div></td><td>国语3D</td><td>2号厅</td><td>¥48.5</td><td><a href="#" class="seat-button">选座购票</a></td></tr></tbody></table></body></html>
4. 表单元素
4.1 认识表单
什么是表单？
HTML表单元素是和用户交互的重要方式之一, 在很多网站都需要使用表单
常见的表单元素：form：表单，在一般情况下其他表单元素都是它的后代元素input：输入框（文本输入框，单选框，复选框，按钮等等）textarea：多行文本框select,option：下拉选择框button：按钮label：表单元素的标题
4.2 input元素的使用
以上表单元素中，input的使用频率是比较多的，我们展开理解一下。
input元素的常见属性
疑问：input是替换元素吗？
img是一个可替换元素，行为是非常固定的。input的类型很多，不同的类型展现形式是不同的，不同浏览器的表现可能不一样，因此会很难直接定义成一种类型，我们把它用一个术语小挂件Widgets来描述。
4.3 布尔属性 (boolean attributes)
有很多元素都是有布尔属性的，在上面input元素中就是这样。如disabled、checked、readonly、multiple、autofocus、selected
什么叫布尔属性？
布尔属性可以没有属性值，写上属性名就代表使用这个属性如果要给布尔属性设值，值就是属性名本身
4.4 表单按钮的使用 input (type=“button”)
表单可以实现按钮的效果
普通按钮type="button"使用value属性设置按钮文字重置按钮type="reset"重置它所属form的所有表单元素（包括input、textarea、select）提交按钮type="submit"提交它所属form的表单数据给服务器（包括input、textarea、select）
按钮的两种实现方式：
button 按钮标签，input 表单标签
其中，button标签在表单中没有指定类型时，默认值是submit
<form action=""><input type="text"><input type="date"><br><!-- button 可以实现按钮 --><button type="button">普通按钮</button><button type="reset">重置按钮</button><button type="submit">提交按钮</button><br><!-- 使用input来实现 --><input type="button" value="普通按钮"><!-- 可以对form中的其它表单内容进行重置 --><input type="reset" value="重置按钮"><!-- 可以对form中的其它表单内容进行提交(提交给服务器) --><input type="submit" value="提交按钮"></form>
4.5 input和label的关系
label元素一般跟input配合使用，用来表示input的标题label可以跟某个input绑定，点击label就可以激活对应的input变成选中。<label for="username">用户名：<input id="username" type="text"></label><label for="password">密码：<input id="password" type="password"></label>
4.6 单选框的使用 input (type=“radio”)
作用当input表单元素的type类型选择了radio后会以单选框的形式呈现
类型为radio时 input的属性：
name：radio需要name来进行分组，并且在提交报单时各个参数的形式是key=value&key=value，其中的name就是决定了其中的key值。value：道理和name是一样的，我们在浏览器上选择了单选框，同时需要传递相应的数据到服务端，决定了value的值
结合label标签来实现性别选择案例：
<!-- label与单选框radio 多个radio需要用name属性组合到一起--><!-- url ：/s?age=18&height=1&sex=male --><label for="male"><input type="radio" name="sex" id="male" value="male">男</label><label for="female"><input type="radio" name="sex" id="female" value="female">女</label>
4.7 复选框的使用 input (type=“checkbox”)
作用当input表单元素的type类型选择了checkbox后会以复选框的形式呈现。
类型为checkbox时 input的属性：
name复选框也是需要使用name分组的value和radio的含义是一致的
案例演练：
<form action=""><div>您的爱好：</div><label for="hobby"><input type="checkbox" id="hobby" name="hobby" value="basketball"> 篮球<input type="checkbox" id="hobby" name="hobby" value="swimming"> 游泳<input type="checkbox" id="hobby" name="hobby" value="football"> 足球<input type="submit" value="提交"></label></form>
4.8 多行输入文本框 textarea的使用
作用： textarea 表示一个多行输入文本框
textarea常见的属性
cols: 设置文本框的列数rows: 设置文本框的行数
其实就是设置了多行文本框的宽高
案例演练：
<form action=""><label for="info">个人简介：<textarea name="info" id="info" cols="30" rows="10"></textarea></label></form>
我们可以发现在右下角会两条线，我们可以拖动鼠标调整文本框的宽高。我们也可以在css对它进行缩放设置
resize 缩放的CSS设置
resize:"none"禁止缩放resize:"horizontal"允许水平缩放resize:"vertical"允许垂直缩放resize:"both"允许水平垂直缩放
案例练习：
textarea {resize: none;/* resize: horizontal; *//* resize: vertical; *//* resize: both; */}
4.9 下拉菜单 select和option的使用
作用：select 表示一个下拉菜单，option表示里面的每一项
select的常用属性
multiple可以多选size显示多少项
option的常用属性
selected设置默认被选项
案例练习：
<select name="fruits" id="" multiple size="2"><option value="apple">苹果</option><option value="orange">橙子</option><option value="banana">香蕉</option><option value="melon" selected>西瓜</option></select>
5.form表单常见的属性
作用：form通常作为表单元素的父元素, form可以将整个表单作为一个整体来进行操作,例如重置或提交整个表单。
form的常用属性
action：把该表单里所有收集的信息都提交给里面的地址method：确定发送请求的方式 GET或POSTtarget：发送请求后打开页面的方式，和超链接同理
此图的提交方式为 GET请求，所有的数据都会显示在URL上，容易暴露数据。建议使用POST请求，具体区别到学AJAX时来区分。
案例的代码就不放了，其实现在都不单独使用form的action来发送请求了，一般使用axios那些，但是还是需要掌握一下。
请求方式的对比
