HTML的标签，原来这么神奇简单，自己也可以制作网页
本期继上期之后继续学习HTML的标签
列表标签
应用场景
场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等
特点：按照行的方式，整齐显示内容
种类：无序列表【左图】、有序列表【中图】、自定义列表【右图】
无序列表
场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
标签组成：
显示特点：
• 列表的每一项前默认显示圆点标识
注意点：
• ul标签中只允许包含li标签
• li标签可以包含任意内容
有序列表
场景：在网页中表示一组有顺序之分的列表，如：排行榜。
标签组成：
显示特点：
•列表的每一项前默认显示序号标识
注意点：
• ol标签中只允许包含li标签
• li标签可以包含任意内容
自定义列表
场景：在网页的底部导航中通常会使用自定义列表实现。
标签组成：
显示特点：
• dd前会默认显示缩进效果
注意点：
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容
测试代码
无序列表：<ul><li>震惊！村东头王小二家狗丢了</li><li>你敢相信，现在90后好多都没有对象</li><li>号外号外，隔壁王大爷一夜暴富，一起跟小编走进内幕</li></ul>有序列表：<ol><li><a href="https://www.baidu.com/">百度一下</a></li></ol>自定义列表：<dl><dt>这是自定义主题哈</dt><dd>这是主题下的内容哈</dd></dl>
表格标签
表格的基本标签
场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：
注意点：
• 标签的嵌套关系：table > tr > td
<table><tr><td>姓名</td><td>班级</td><td>成绩</td></tr><tr><td>王二狗</td><td>2班</td><td>96</td></tr></table>
表格相关属性
场景：设置表格基本展示效果
常见相关属性：
注意点：
• 实际开发时针对于样式效果推荐用CSS设置
<table border="1" width="50%>" height="30">#注意height属性，需要用到html5，也就是在前面表头加个5<tr><td>姓名</td><td>班级</td><td>成绩</td></tr><tr><td>王二狗</td><td>2班</td><td>96</td></tr></table>
看结果：（神奇不，实时办公，哈哈）
表格标题和表头单元格标签
场景：在表格中表示整体大标题和一列小标题
其他标签：
注意点：
• caption标签书写在table标签内部
• th标签书写在tr标签内部（用于替换td标签）
<table border="1" width="50%>" height="30"><caption>王小二成绩单</caption><tr><th>姓名</th><th>班级</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>王二狗</td><td>2班</td><td>96</td><td>100</td><td>98</td></tr></table>
表格的结构标签（了解）
场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
结构标签：
注意点：
• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略
合并单元格-思路
场景：将水平或垂直多个单元格合并成一个单元格
合并单元格步骤：
明确合并哪几个单元格
通过左上原则，确定保留谁删除谁
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
注意点：
• 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
表单标签
input系列标签
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
• input标签可以通过type属性值的不同，展示不同效果
type属性值：
用户名：<input type="text"><hr>密 码：<input type="password"><hr><input type="submit" value="登录">
input系列标签-文本框
场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：
用户名：<input type="text" placeholder="请输入用户名"><hr>密 码：<input type="password" placeholder="请输入密码"><hr><input type="submit" value="登录">
这里我想让用户名和密码对齐，但是发现敲了几个空格键后没起效果，这个在后面有提
value属性和name属性作用介绍
value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
input系列标签-密码框
场景：在网页中显示输入密码的表单控件
type属性值：password
常用属性（同文本框）：
注意点：
• type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
不在展示，已经写过了，上面
input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：
示例
账号：<input type="text" placeholder="请输入用户名" name="username"><hr>密码：<input type="password" placeholder="请输入密码" name="password"><hr>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<hr><input type="submit" value="登录">账号：<input type="text" placeholder="请输入用户名" name="username"><hr>密码：<input type="password" placeholder="请输入密码" name="password"><hr>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<hr><input type="submit" value="登录">
input系列标签-复选框
场景：在网页中显示多选多的多选表单控件
type属性值：checkbox
常用属性（同单选框）：
示例
账号：<input type="text" placeholder="请输入用户名" name="username"><hr>密码：<input type="password" placeholder="请输入密码" name="password"><hr>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<hr>爱好：<input type="checkbox" name="love" value="drink">喝酒 <input type="checkbox" name="love" value="program">编程<hr><input type="submit" value="登录">
input系列标签-文件选择
场景：在网页中显示文件选择的表单控件
type属性值：file
常用属性：
示例
账号：<input type="text" placeholder="请输入用户名" name="username"><hr>密码：<input type="password" placeholder="请输入密码" name="password"><hr>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<hr>爱好：<input type="checkbox" name="love" value="drink">喝酒 <input type="checkbox" name="love" value="program">编程<hr>文件：<input type="file"><hr><input type="submit" value="登录">
input系列标签-按钮
场景：在网页中显示不同功能的按钮表单控件
type属性值：
注意点：
• 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可
示例
<form action="">账号：<input type="text" placeholder="请输入用户名" name="username"><hr>密码：<input type="password" placeholder="请输入密码" name="password"><hr>性别：<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<hr>爱好：<input type="checkbox" name="love" value="drink">喝酒 <input type="checkbox" name="love" value="program">编程<hr>文件：<input type="file"><hr><input type="submit" value="登录"> <input type="reset" value="重置"></form>
button按钮标签
场景：在网页中显示用户点击的按钮
标签名：button
type属性值（同input的按钮系列）：
注意点：
• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等
<button type="submit">普通提交</button>select下拉菜单标签
场景：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项
常见属性：
• selected：下拉菜单的默认选中
示例
<select><option selected value="">请选择城市</option><option value="beijing">北京</option><option value="shanghai">上海</option></select>
textarea文本域标签
场景：在网页中提供可输入多行文本的表单控件
标签名：textarea
常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置
示例
<textarea placeholder="请填写对阿尘的评价~" cols="50%" rows="5"></textarea>
label标签
场景：常用于绑定内容与表单标签的关系(标签的作用就是你把标签放那儿，点击那个标签就会默认点击对应id的
标签名：label
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
示例（这里我设置了男和女两个标签，相比于前面优化了，也就是只要点击【男】就能选中）
性别：<input type="radio" name="sex" id="1" value="male" checked> <label for="1">男</label><input type="radio" name="sex" id="2" value="female"> <label for="2">女</label>
语义化标签
没有语义的布局标签-div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签(就是一个特定区域，然后里面的内容换行什么的 so easay）
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
<div style="color:#0000FF"><h3>这是div显示区域的标题</h3><p>这是div区域显示的内容</p><p>hello</p></div>
有语义的布局标签（了解）
场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
标签：
注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义
字符实体
HTML的空格合并现象
场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
（也就是你敲几个空格最终显示的都是一个，前面阿尘遇到了）
常见字符实体
场景：在网页中展示特殊符号效果时，需要使用字符实体替代
结构：&英文;
常见字符实体：
本期分享至此结束！下期见~
扫一扫，关注我们
