列表标签
无序标签
-
在网页中表示一组无顺序之分的列表,新闻列表
-
标签组成:
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:网页文章
字符实体
-
常见字符实体:
空格: