列表标签
无序标签
-
在网页中表示一组无顺序之分的列表，新闻列表
-
标签组成：
ul:表示无序列表的整体，用于包裹li标签
li:表示无序列表的每一项，用于包含每一行的内容
-
特点：
列表的每一项前默认显示圆点
-
注意：
ul标签中只语序包含li标签
li标签可以包含任意内容
-
快捷键：li*n(n表示要多少li)
代码
<!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>
</head>
<body>
<h1>水果列表</h1>
<ul>
<li>榴莲</li>
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ul>
</body>
</html>有序标签
-
在网页中表示一组有顺序的列表，排行榜
-
标签组成：
ol:表示有序列表的整体，用于包裹li标签
li:表示有序列表的每一项，用于包含每一行的内容
-
特点：
列表的每一项前默认显示序号标识
-
注意：
ol标签中只语序包含li标签
li标签可以包含任意内容
-
快捷键：li*n(n表示要多少li)
代码
<!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>
</head>
<body>
<h1>排行榜</h1>
<ol>
<li>张杰：100分</li>
<li>薛之谦：90分</li>
<li>张三：60分</li>
</ol>
</body>
</html>自定义标签
-
在网页的底部导航栏中通常会使用
-
标签组成：
dl:表示自定义列表的整体，用于包裹dt、dd:
dt:表示自定义列表的主题 dd:表示自定义列表的针对主题的每一项内容
-
特点:
dd前会默认显示缩进效果
-
注意：
dl标签中只语序包含dt/dd标签
dt/dd标签可以包含任意内容
代码
<!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>
</head>
<body>
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自动服务</dd>
</dl>
</body>
</html>表格标签
基本标签
-
在网页中以行+列的单元格的方式整齐展示和数据，学生成绩
-
基本标签：
table：表格整体，可用于包裹多个tr
tr:表格每行，可用于包裹多个td
td:表格单元格，可用于包裹内容
-
注意：
标签的嵌套关系：table>tr>td
相关属性
-
设置表格基本展示效果
-
常见：
border：数字，边框宽度
width：数字，表格宽度
height：数字，表格高度
-
注意：
实际开发时对于样式效果推荐用CSS设置
表格标题和表头单元格式标签
-
在表格中表示整体大标题和一列小标题
-
其他标签：
caption：表格大标题，表示表格整体大标题，默认在表格整体顶部居中位置显示
th:表头单元格，表示一列小标题，通常用于表格的第一行，默认文字加粗并居中显示
-
注意： caption标签书写在table内部标签
th标签书写在tr内部标签（用于替换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>Document</title>
</head>
<body>
<!-- table整体 -->
<table border="1" width="0" height="0" >
<!-- 表格标题 -->
<caption><strong>学生成绩单</strong></caption>
<tr>
<!-- 表头标签，默认加粗 -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐漂亮</td>
</tr>
</table>
<hr>
<table border="1" width="0" height="0" >
<tr>
<td>姓名</td>
<td>成绩</td>
<td>评语</td>
</tr>
<tr>
<td>小哥哥</td>
<td>100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>100分</td>
<td>小姐姐漂亮</td>
</tr>
</table>
</body>
</html>表格的结构标签（了解）
-
让表格的内容结构分组，突出表现不同部分（头部、主体、底部），使语义更加清晰
-
结构标签：
thead：表格头部
tbody：表格主体
tfoot：表格底部
-
注意：
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
-
快捷键：
tab，缩进
shift+tab，向前缩进
合并单元格
-
将水平或垂直多个单元格合并成一个单元格
-
跨行合并（垂直合并成一个）
-
跨列合并（水平合成一个）
-
合并单元格的步骤：
-
明确合并哪几个单元格
-
通过左上原则确定保留谁删除谁
上下合并->只保留最上的，删除其他
左右合并->只保留最左的，删除其它
-
给保留的单元格设置：跨行合并（）或者跨列合并（colspan）
rowspan：合并单元的个数，跨行合并，将多行的单元格垂直合并
colspan：合并单元的个数，跨列合并，将多行的单元格水平合并
-
-
注意：
只有同一结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）
代码
<!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>
</head>
<body>
<!-- table整体 -->
<table border="1" width="0" height="0" >
<!-- 表格标题 -->
<caption><strong>学生成绩单</strong></caption>
<tr>
<!-- 表头标签，默认加粗 -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
<tr>
<td>小哥哥</td>
<td rowspan="2">100分</td>
<td>小哥哥真帅</td>
</tr>
<tr>
<td>小姐姐</td>
<td>小姐姐漂亮</td>
</tr>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</table>
</body>
</html>表单标签
能够使用表单相关标签和属性，实现网页中表单类网页结构搭建
input系列标签
-
在网页中显示收集用户信息的表单效果，登录页、注册页
-
标签名：input
-
input标签可以通过type属性值的不同，展示不同的效果
-
type属性值；
text：文本框，用于输入单行文本
-
在网页中显示输入单行文本的表单控件
-
常用属性：
placeholder：占位符，提示用户输入内容的文本
password：密码框，用于输入密码
-
常用属性：
placeholder：占位符，提示用户输入内容的文本
radio：单选框，用于多选一
-
常用属性：
name:分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked:默认选中（加上单词就行）
-
注意：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checkbox：多选框，用于多选
-
常用属性：
checked:默认选中（加上单词就行）
file：文件选择，用于之后上传文件
-
常用属性：
multiple：多文件选择（加上单词就行）
submit：提交按钮，用于提交数据给后台 reset：重置按钮，用于重置 button：普通按钮，默认无功能，配合js添加功能
-
value：显示文字
注意：
如果要使用按钮标签，要配合form表单使用从开始试用input标签到使用input标签结束
-
代码
<!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>
</head>
<body>
<form action="">
文本框：<input type="text" placeholder="QQ邮箱/手机号">
<br>
密码框：<input type="password" placeholder="密码">
<br>
性别：男<input type="radio" name="sex">
女<input type="radio" name="sex" checked>
<br>
多选框：<input type="checkbox" name="" id="" checked>
<br>
文件：<input type="file" name="" id="" multiple>
<br>
<!-- 按钮 -->
提交按钮：<input type="submit" value="免费注册">
重置按钮：<input type="reset" >
<br>
普通按钮：<input type="button" value="普通按钮">
</form>
</body>
</html>button按钮标签
-
在网页中用户点击的按钮
-
type属性值：
submit：提交按钮，用于提交数据给后台
reset：重置按钮，用于重置
button：普通按钮，默认无功能，配合js添加功能
-
注意：
button标签是双标签，更便于包裹其他文字、图片等
代码
<!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>
</head>
<body>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
</body>
</html>select下拉菜单
-
标签组成：
select：下拉菜单整体
option：下拉菜单中的每一项
-
常见属性：
selected：下拉菜单中的默认选项
代码
<!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>
</head>
<body>
<select>
<option selected>北京</option>
<option >上海</option>
<option >深圳</option>
</select>
</body>
</html>textarea文本域标签
-
常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域中可见行数
-
注意：
右下角可以拖拽改变大小
实际开发时对于样式效果推荐用CSS设置
代码
<!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>
</head>
<body>
<textarea cols="30" rows="10">
文本域标签
</textarea>
</body>
</html>语义化标签
开发常用的没有任何意义的语义化标签
-
div：一行只能显示一个
-
span：一行可以显示多个
有语义的标签（了解，手机网页页面才会使用）
-
标签：
header：网页头部
nav:网页导航 footer:网页底部
aside:网页侧边栏 section:网页区块
artice:网页文章
字符实体
-
常见字符实体：
空格：
2337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
