一、列表标签
1、无序列表
1、使用场景:在网页中表示一组无顺序之分的列表,比如新闻列表。
2、标签组成:
标签名 | 说明 |
---|---|
ul | 表示无序列表的整体,用于包裹li标签,只能包含li标签 |
li | 表示无序列表的列表项,包含每一项内容,可以包含任意内容 |
3、ul标签的type属性值:
属性值 | 说明 |
---|---|
disc | 默认值,实心圆点 |
circle | 空心圆点 |
square | 正方形 |
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>无序列表</title>
</head>
<body>
<ul type="disc">
<li>实心圆点</li>
<li>实心圆点</li>
<li>实心圆点</li>
<li>实心圆点</li>
</ul>
<ul><!-- 默认值为disc -->
<li>实心圆点</li>
<li>实心圆点</li>
<li>实心圆点</li>
<li>实心圆点</li>
</ul>
<ul type="circle">
<li>空心圆点</li>
<li>空心圆点</li>
<li>空心圆点</li>
<li>空心圆点</li>
</ul>
<ul type="square">
<li>正方形</li>
<li>正方形</li>
<li>正方形</li>
<li>正方形</li>
</ul>
</body>
</html>
2、有序列表
1、使用场景:在页面中有序的显示一组列表,比如排行榜
2、标签组成:
标签名 | 说明 |
---|---|
ol | 表示有序列表的整体,用于包裹li标签,只能包含li标签 |
li | 表示有序列表的每一项,用于包含每一项内容,可以包含任意内容 |
3、ol标签的type属性值:
属性值 | 说明 |
---|---|
1 | 默认值,阿拉伯数字1… |
i | 小写罗马数字i… |
I | 大写罗马数字I… |
a | 小写英文字母a… |
A | 大写英文字母A… |
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>有序列表</title>
</head>
<body>
<ol type="1">
<li>有序列表数字</li>
<li>有序列表数字</li>
<li>有序列表数字</li>
<li>有序列表数字</li>
</ol>
<ol><!-- 默认值为数字 -->
<li>有序列表数字</li>
<li>有序列表数字</li>
<li>有序列表数字</li>
<li>有序列表数字</li>
</ol>
<ol type="i">
<li>小写罗马数字</li>
<li>小写罗马数字</li>
<li>小写罗马数字</li>
<li>小写罗马数字</li>
</ol>
<ol type="I">
<li>大写罗马数字</li>
<li>大写罗马数字</li>
<li>大写罗马数字</li>
<li>大写罗马数字</li>
</ol>
<ol type="a">
<li>小写英文字母</li>
<li>小写英文字母</li>
<li>小写英文字母</li>
<li>小写英文字母</li>
</ol>
<ol type="A">
<li>大写英文字母</li>
<li>大写英文字母</li>
<li>大写英文字母</li>
<li>大写英文字母</li>
</ol>
</body>
</html>
3、自定义列表
1、使用场景:通常使用在网页底部的导航中
2、标签组成:
标签名 | 说明 |
---|---|
dl | 自定义标签的整体,用于包裹dt、dd标签,只能包含dt、dd标签 |
dt | 自定义列表的主题,可以包含任意内容 |
dd | 自定义列表针对主题的每一项内容,可以包含任意内容 |
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>自定义列表</title>
</head>
<body>
<dl>
<dt>前端学习技术</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>
</body>
</html>
二、表格标签
1、使用场景:在网页中以行列的单元格方式整齐的显示数据,比如学生成绩
2、基本标签:
标签名 | 说明 |
---|---|
table | 表格整体,用于包裹多个tr标签 |
tr | 表示表格的行,包裹td标签 |
td | 表示表格的单元格,包裹内容 |
3、表格的相关属性:
属性名 | 属性值 | 说明 |
---|---|---|
border | 数字+px | 边框宽度 |
width | 数字+px | 表格宽度 |
height | 数字+px | 表格高度 |
4、表格标题和表头单元格标签:
标签名 | 名称 | 说明 |
---|---|---|
caption | 表格大标题 | 表示表格的整体大标题,默认在表格整体的顶部居中位置显示,caption标签书写在table标签内部 |
th | 表格单元格 | 表示一系列小标题,通常用于表格第一行,默认内部文字加粗显示,th标签书写在tr标签内部,用于替换td标签 |
5、表格的结构标签:用于包裹tr标签,可以省略
标签名 | 说明 |
---|---|
thead | 表示表格的头部 |
tbody | 表示表格的主体 |
tfoot | 表示表格的底部 |
6、合并单元格:
属性名 | 属性值 | 说明 |
---|---|---|
rowspan | 合并单元格的个数 | 跨行合并,删除下一行多余的单元格 |
colspan | 合并单元格的个数 | 跨列合并,删除本行多余的单元格 |
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>表格标签</title>
</head>
<body>
<table border="1px" width="500px" height="300px">
<caption><h2>学生成绩单</h2></caption>
<thead>
<tr><th>姓名</th>
<th>性别</th>
<th>科目</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td rowspan="2">男</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>99</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td rowspan="2">女</td>
<td>语文</td>
<td>99</td>
</tr>
<tr>
<td>数学</td>
<td>98</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">评语</td>
<td colspan="2">你们都很棒,加油学习</td>
</tr>
</tfoot>
</table>
</body>
</html>
三、表单标签
1、input标签
1、使用场景:多用于在网页中手机用户信息,比如登陆页、注册页
2、标签名:input,通过指定不同的type属性值来展示不同的效果
3、type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | text | 文本框,用于输入单行文本 |
input | password | 密码框,用于输入密码 |
input | radio | 单选框,用于多选一 |
input | checkbox | 多选框,用于多选多 |
input | file | 文件选择,用于上传文件 |
input | submit | 提交按钮,用于提交 |
input | reset | 重置按钮,用于重置 |
input | button | 普通按钮,默认无功能,需配合js添加功能 |
4、name和value属性:
- value属性:用户输入的内容,提交之后会发送给后端服务器
- name属性:当前控件的含义,提交之后可以告诉后端发送过去的数据是什么含义
- 后端接收到数据的格式是:name的属性值 = value的属性值
5、text:文本框
- 在网页中输入单行文本的表单控件
- 常用属性:placeholder,占位符,提示用户输入内容
6、password:密码框
- 在网页中输入密码的表单控件
- 常用属性:placeholder,占位符,提示用户输入内容
7、radio:单选框
1.在网页中显示多选一的控件
2.常用属性:
属性名 | 说明 |
---|---|
name | 分组,当相同的name属性值的单选框为一组时,一组中只能选中一个 |
checked | 添加此属性表示默认被选中 |
8、checkbox:复选框
1.在网页中显示多选多的表单控件
2.常用属性:
属性名 | 说明 |
---|---|
checked | 添加此属性表示默认选中 |
9、file:文件选择
1.在网页中显示文件选择的表单控件
2.常用属性:
属性名 | 说明 |
---|---|
multiple | 表示多文件选择 |
10、按钮
1.在网页中显示不同功能的按钮
2.type属性值:
标签名 | type属性值 | 说明 |
---|---|---|
input | submit | 提交按钮,用于提交数据给后端服务器 |
input | reset | 重置按钮,点击之后恢复表单默认值 |
input | button | 普通按钮,默认无功能,需配合js添加功能 |
3.注意:要实现以上按钮的功能,必须将表单标签使用form标签一起包裹起来
2、button标签
1、使用场景:在网页中显示用户点击的按钮
2、标签名:button
3、type属性值:同input的按钮标签系列
标签名 | type属性值 | 说明 |
---|---|---|
button | submit | 提交按钮,用于提交数据给后端服务器 |
button | reset | 重置按钮,点击之后恢复表单默认值 |
button | button | 普通按钮,默认无功能,需配合js添加功能 |
4、注意:谷歌浏览器中button默认是提交按钮,button按钮是双标签,便于包裹其他内容,如文字、图片等等。
3、select标签
1、使用场景:在网页中提供多个选择项的下拉菜单表单控件
2、标签组成:
标签名 | 说明 |
---|---|
select | 下拉菜单的整体,包裹option标签 |
option | 下拉菜单的每一项 |
3、常见属性:selected,添加此属性表示默认选中
4、textarea标签
1、使用场景:在网页中提供可供输入多行文本的表单控件
2、标签名:textarea
3、属性值:
属性值 | 说明 |
---|---|
cols | 设置文本域的可见宽度 |
rows | 设置文本域的可见行数 |
5、label标签
1、使用场景:用于绑定内容与表单标签之间的关系
2、标签名:label
3、使用方法1:
- 使用label标签将内容(比如文本)包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
4、使用方法2:
- 直接使用label标签将内容(比如文本)和表单标签一起包裹起来
- 将label标签的for属性删除掉
6、综合案例
<!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>
</head>
<body>
<!-- 为了实现submit、reset标签的功能 -->
<form>
昵称:<input type="text" placeholder="请输入你的昵称" />
<br>
性别:
<label><input type="radio" name="sex" />男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
<br>
心仪对象:<input type="password" placeholder="默认保密" />
<br>
所在城市:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<!-- 默认选中深圳 -->
<option selected>深圳</option>
</select>
<br>
喜欢的类型:
<label><input type="checkbox" checked />可爱</label>
<label><input type="checkbox" />漂亮</label>
<input type="checkbox" id="nice"><label for="nice">甜美</label>
<br>
个人介绍:
<textarea cols="30" rows="10"></textarea>
<br>
上传资料图片:
<input type="file" multiple />
<br>
<input type="submit" value="免费注册" />
<br>
<button type="reset">重置</button>
</form>
</table>
</body>
</html>
四、语义化标签
1、div标签:无语义,独占一行
2、span标签:无语义,一行可以显示多个
3、有语义的标签:
标签名 | 语义 |
---|---|
header | 网页头部 |
nav | 网页导航 |
footer | 网页底部 |
aside | 网页侧边栏 |
section | 网页区块 |
article | 网页文章 |
五、符实体
显示结果 | 描述 | 实体名称 |
---|---|---|
空格 |  ; | |
< | 小于号 | <; |
> | 大于号 | >; |
& | 和号 | &; |
“ | 引号 | "; |
' | 撇号 | &apos;(IE不支持) |
¢ | 分 | ¢; |
£ | 镑 | £; |
¥ | 元 | ¥; |
€ | 欧元 | &euro; |
§ | 小节 | §; |
© | 版权 | ©; |
致自己:每天坚持总结一点点,每天进步一点点,希望自己坚持下去,祝福每一个奋斗者都能收获满满,加油!