Day02HTML标签学习

一、Html标签学习

1：列表标签

1.1无序列表
	场景：在网页中表示一组无顺序之分的列表，如：新闻列表。
	标签组成：

标签名	说明
ul	表示无序列表的整体,用于包裹li标签
li	表示无序列表的每一项,用于包含每一行内容

代码：
	<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    ![效果](https://img-blog.csdnimg.cn/ab805e9e828341148e68085f6d6c97d7.png#pic_center)
显示特点：
	• 列表的每一项前默认显示圆点标识
注意点：
	• ul标签中只允许包含li标签
	• li标签可以包含任意内容
1.2有序列表	
	场景：在网页中表示一组有顺序之分的列表，如：排行榜。
	标签组成：

标签名	说明
ol	表示有序列表的整体,用于包裹li标签
li	表示有序列表的每一项,用于包含每一行内容

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>
![效果](https://img-blog.csdnimg.cn/98f8c066ba7c447fb60ac4fdc9439123.png#pic_center)
显示特点：
• 列表的每一项前默认显示序号标识
注意点：
• ol标签中只允许包含li标签
• li标签可以包含任意内容
1.3自定义列表	
	场景：在网页的底部导航中通常会使用自定义列表实现。
	标签组成：

标签名	说明
dl	表示有序列表的整体,用于包裹dd/dt标签
dt	表示主题
dd	表示自定义列表的内容

代码：
<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
    <dd>订单操作</dd>
</dl>
![效果](https://img-blog.csdnimg.cn/fc5676182ce9429ab324a9ef4418c3cc.png#pic_center)


显示特点：
• dd前会默认显示缩进效果
注意点：
• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容

2：表格标签

2.1场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表
基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

常见相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格宽度

2.2表格标题和表头单元格标签
	场景：在表格中表示整体大标题和一列小标题

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	大头单元格	表示一列小标题，通常用于表格第一行，默认文字加粗，居中

2.3合并单元格
1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
	给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

3：表单标签

3.1 input系列标签
场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
• input标签可以通过type属性值的不同，展示不同效果
type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选
input	file	文件上传
input	submit	提交按钮
input	reset	重置
input	button	普通按钮

3.2input系列标签-文本框
场景：在网页中显示输入单行文本的表单控件
type属性值：text
常用属性：placeholder ：用于提示用户输入的内容

3.3input系列标签-单选框
场景：在网页中显示多选一的单选表单控件
type属性值：radio
常用属性：name：有相同的属性值只能选中其中一个
		checked：默认选中
注意点：
• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
3.2 button按钮标签
	场景：在网页中显示用户点击的按钮
    标签名：button
    type属性值（同input的按钮系列）：

标签名	属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮

3.3 select下拉菜单标签
	场景：在网页中提供多个选择项的下拉菜单表单控件
    标签组成：
    select标签：下拉菜单的整体
    option标签：下拉菜单的每一项
   常见属性：
     selected：下拉菜单的默认选中
3.4 textarea文本域标签
	场景：在网页中提供可输入多行文本的表单控件
    标签名：textarea
    常见属性：
    • cols：规定了文本域内可见宽度
    • rows：规定了文本域内可见行数
3.5 label标签
	场景：常用于绑定内容与表单标签的关系
	 标签名：label
	 使用方法①：
		1. 使用label标签把内容（如：文本）包裹起来
		2. 在表单标签上添加id属性
		3. 在label标签的for属性中设置对应的id属性值
	 使用方法②：
		1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
		2. 需要把label标签的for属性删除即可

4：字符实体