文章目录
1.列表标签
1.1无序列表
- 场景
在网页中表示一组无顺序之分的列表,如:新闻列表。
- 标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹标签 |
li | 表示无序列表的每一项。用于包含每一行的内容 |
- 显示特点:
列表的每一项前默认显示圆点标识
- 注意点:
ul标签中只允许包含li标签
li标签可以包含任意内容
1.2有序列表
- 场景
在网页中表示一组有顺序之分的列表,如:排行榜。
- 标签组成:
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹标签 |
li | 表示有序列表的每一项。用于包含每一行的内容 |
- 显示特点:
列表的每一项前默认显示序号标识
- 注意点:
ol标签中只允许包含i标签
li标签可以包含任意内容
1.3自定义列表
- 场景
在网页的底部导航中通常会使用自定义列表实现。
- 标签组成:
标签名 | 说明 |
---|---|
dl | 表示自定义列表的整体,用于包裹d/dd标签 |
dt | 表示自定义列表的主题 |
dd | 表示自定义列表的针对主题的每一项内容 |
- 显示特点:
dd前会默认显示缩进效果,(样式可以通过css去修改)
- 注意点:
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
2.表格标签
2.1表格的基本标签
- 场景
在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表
- 标签组成:
标签名 | 说明 |
---|---|
table | 表格整体,可用于包裹多个灯 |
tr | 表格每行,可用于包裹td |
td | 表格单元格可用于包裹内容 |
- 注意点:
标签的嵌套关系:table>tr>td
2.2表格相关属性
- 场景
设置表格基本展示效果
- 标签组成:
标签名 | 说明 |
---|---|
border | 边框宽度 |
width | 表格宽度 |
height | 表格高度 |
- 注意点:
实际开发时针对于样式效果推荐用CSS设置
2.3.表格标题和表头单元格标签
- 场景
在表格中表示整体大标题和一列小标题
- 标签组成:
标签名 | 说明 |
---|---|
caption | 表格大标题 |
th | 表头单元格 |
-
注意点:
-
caption标签书写子在table标签内部。
-
th标签书写在tr标签内部(可以替换td标签)
-
-
代码清单
<body>
<table>
<!--caption标签 表格大标题-->
<caption>学生成绩表</caption>
<!--tr标签 表格每行-->
<tr>
<!--th标签 表头单元格-->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td>100分</td>
<td>非常棒</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>还不错</td>
</tr>
<tr>
<td>王五</td>
<td>50分</td>
<td>回家,叫家长</td>
</tr>
</table>
</body>
-
运行结果
学生成绩表 姓名 成绩 评语 张三 100分 非常棒 李四 80分 还不错 王五 50分 回家,叫家长
2.4表格标签
- 场景
主要是让表格的内容结构分组,突出表格不同的位置(头部,主体,底部)。
- 标签组成:
标签名 | 说明 |
---|---|
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
-
注意点:
-
表格结构标签内部用于包裹tr标签(tr标签表格每行)
-
表格的结构标签可以省略
-
-
代码清单
<table>
<!-- 头部 -->
<thead>
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>张三</td>
<td>100分</td>
<td>非常棒</td>
</tr>
<tr>
<td>李四</td>
<td>80分</td>
<td>还不错</td>
</tr>
</tbody>
<!-- 底部 -->
<tfoot>
<tr>
<td>王五</td>
<td>50分</td>
<td>回家,叫家长</td>
</tr>
</tfoot>
</table>
- 运行结果
姓名 | 成绩 | 评语 |
张三 | 100分 | 非常棒 |
李四 | 80分 | 还不错 |
王五 | 50分 | 回家,叫家长 |
2.5表格合并单元格
- 场景
将水平或垂直多个单元格合并成一个单元格
- 标签组成:
标签名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,垂直合并 |
clospan | 合并单元格的个数 | 跨列合并,水平合并 |
-
注意点:
- 明确合并那几个单元格
- 通过左上原则,确保保留谁,删除谁。
- 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead,tbody,tfoot)。
-
代码清单
<table border="1">
<tr>
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td rowspan="2">非常棒</td>
</tr>
<tr>
<td>李四</td>
</tr>
<tr>
<td colspan="3">王五50分回家,叫家长</td>
</tr>
</table>
- 运行结果
姓名 | 成绩 | 评语 |
---|---|---|
张三 | 100分 | 非常棒 |
李四 | ||
王五50分回家,叫家长 |
3.表单标签
3.1 input系列标签
- 场景
在网页中显示收集用户信息的表效果,登录页,注册页 等。
- 标签:input:
input标签可以通过type属性值来展示不同效果。
-
type属性值:
type属性值 说明 text 文本框,用于输入单行文本 password 密码框,用于输入密码 radio 单选框,用于多选一 checkbox 多选框,用于多选多 file 文件选择,用于之后上传文件 submit 提交按钮,用于提交 reset 重置按钮,用于重置 button 普通按钮,默认无功能,之后配合5添加功能
3.2 input系列标签 - 文本框
- 场景
显示输入单行文本的表单控件
-
type属性值:text:
-
常用属性
属性值 说明 placeholder 占位符,提示用户输入内容 -
代码清单
<input type="text" placeholder="请输入名称">
3.3 input系列标签 - 单选框
- 场景
单选,常用性别选择,等。
-
type属性值:radio:
-
常用属性
属性值 说明 name 分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选中 checked 用于默认选中 -
注意点
- name属性对于单选框有分组功能
- 有相同name属性值的单选框为一组,一组中只能同时有一个被选中
-
代码清单
<body>
<!-- 同name属性值的必须要添加,并且保持一直,否则没有办法单选 -->
<input type="radio" name="sex" checked>男</input>
<input type="radio" name="sex">女</input>
</body>
3.4 input系列标签 - 文件选择
- 场景
用于文件选择的表单控件。
-
type属性值:file:
-
常用属性
属性值 说明 multiple 多文件选择 -
代码清单
<body>
<input type="file">选择文件</input>
<!-- multiple属性值用于选择多个文件 -->
<input type="file" multiple>选择文件</input>
</body>
3.5 input系列标签 - 按钮
- 场景
显示不同功能的按钮表单控件
-
type属性值:
属性值 说明 name 提交按钮,(form表单内容信息)点击之后提交数据给后台 reset 重置按钮看,重置form表单中的默认值。 button 普通按钮,默认没有功能,配合js使用的 -
注意点
- 如果需要实现以上按钮功能,需要配合form标签使用
- form使用方法:用form标签把表单标签一起包裹起来即可
- button标签是双标签,更便于包裹其他内容:文字、图片等
-
代码清单
<body>
<!-- form表单标签,action属性是提交的地址 -->
<from action="">
<!--提交form标签内容 -->
<input type="submit">提交按钮</input>
<!--重置form标签内容 -->
<input type="reset">重置</input>
<input type="button">普通按钮</input>
</from>
</body>
3.6 input系列标签 - 下拉菜单
- 场景
网页提供多个选择的下拉菜单标签控件
-
标签组成
- select标签:下拉菜单的整体
- option标签:下拉菜单的每一项
-
常见属性
- selected:下拉菜单的默认选中。
-
代码清单
<body>
<select>
<!-- selected属性值是默认选中的意思 -->
<option selected>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</body>
4.文本域标签
- 场景
提供可输入多行文本的表单控件(类似于微信聊天输入框)。
-
标签名
- cols:规定了文本域内可见宽度。
- rows标签:下拉菜单的每一项
-
常见属性
- selected:下拉菜单的默认选中。
-
注意点
- 右下角可以拖拽改变大小。
- 样式可以根据css设置。
-
代码清单
<body>
<textarea cols="60" rows="30"></textarea>
</body>
5.label标签
- 场景
常见于绑定内容与表单标签的关系,
-
标签名 label
-
使用方法一
- 使用label标签把内容(如:文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的Id属性值
-
使用方法二
- 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
-
代码清单
<body>
<!-- 方法一 -->
<input type="radio" name="sex" id="nan">
<label for="nan">男</label>
</input>
<!-- 方法二 -->
<label><input type="radio" name="sex">女</input></label>
</body>