1、列表
作用:布局内容排列整齐的区域
列表分类:无序列表、有序列表、定义列表
1.1 无序列表
作用:布局排列整齐的不需要规定顺序的区域
标签:ul 嵌套 li,ul 是无序列表,li 是列表条目
注意事项:ul标签里面只能包裹li标签
1.2 有序列表
作用:布局排列整齐的需要规定顺序的区域
标签:ol 嵌套,ol 是有序列表,li 是列表条目
注意事项:
- ol标签里面只能包裹li标签
- li标签里面可以包裹任何内容
1.3 定义列表
标签:dl 嵌套 dt 和 dd,dl是定义列表,dt是定义列表的标题,dd是是定义列表的描述 / 详情
注意事项:
- dl 里面只能包含 dt 和 dd
- dt 和 dd 里面可以包含任何内容
2、表格
网页中的表格与Excel表格类似,用来展示数据
标签:table 嵌套 tr,tr嵌套 td / th。
标签名 | 说明 |
table | 表格 |
tr | 行 |
th | 表头单元格 |
td | 内容单元格 |
提示:在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线
2.1 表格结构标签-了解
作用:用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰
标签名 | 含义 | 特殊说明 |
thead | 表格头部 | 表格头部内容 |
tbody | 表格主体 | 主要内容区域 |
tfoot | 表格底部 | 汇总信息区域 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>100</td>
<td>190</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.2 合并单元格
作用:将多个单元格合并成一个单元格,以合并同类信息。
合并单元格的步骤:
1.明确合并的目标
2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
- 跨行合并,保留最上单元格,添加属性 rowspan
- 跨列合并,保留最左单元格,添加属性 colspan
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>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
3、表单
作用:手机用户信息
使用场景:
- 登录页面
- 注册页面
- 搜索区域
4、input标签基本使用
input 标签 type 属性值不同,则功能不同。
type属性值 | 说明 |
text | 文本框,用于输入单行文本 |
password | 密码框 |
radio | 单选框 |
checkbox | 多选框 |
file | 上传文件 |
5、input标签占位文本
占位文本:提示信息
注意:
- 占位符:placeholder
- 如果需要实现单选效果,需要设置相同的name属性值
- 单选框和多选框的默认选中:checked
6、单选框 radio
属性名 | 作用 | 特殊说明 |
name | 控件名称 | 控件分组,同组只能选中一个(单选功能) |
checked | 默认选中 | 属性名和属性值相同,简写为一个单词 |
7、上传文件- file
默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能
8、多选框-checkbox
多选框也叫复选框。
默认选中:checked
9、下拉菜单
标签:select 嵌套 option,select是下拉菜单整体,option是下拉菜单的每一项
常见属性:selected:下拉菜单的默认选中
10、文本域
作用:多行输入文本的表单控件
标签: textarea ,双标签
常见属性:
- cols:规定了文本域内可见宽度
- rows:规定了文本域内可见行数
11、label标签
经验:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。
之前是只能在小圆圈里面点击才能选中,使用label使它点击男或女也可以选中
11.1 label标签-增大点击范围
写法一:
- label标签只包裹内容,不包裹表单控件
- 设置label标签的for属性值和表单控件的id属性相同
写法二:
- 使用label标签包裹文字和表单控件,不需要属性
提示:支持label标签增大点击范围的表单控件:文本框、上传文件、单选框、多选框、下拉菜单、文本域等等。
12、按钮-button
type属性值 | 说明 |
submit | 提交按钮,点击后可以提交数据到后台(默认功能) |
reset | 重置按钮,点击后将表单控件恢复默认值 |
button | 普通按钮,默认没有功能,一般配合JavaScript使用 |
注意:
如果需要实现以上按钮功能,需要配合form标签使用
form使用方法:用form标签把表单标签一起包裹起来即可
13、无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
- div:独占一行
- span:不换行
14、字符实体
作用:在网页中显示预留字符
15、综合案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<img src="../photo/1.jpg" alt="">
<h3>吃泡面咋了,不让吃</h3>
</li>
<li>
<img src="../photo/2.jpg" alt="">
<h3>柠檬头,我好爱,你爱嘛</h3>
</li>
<li>
<img src="../photo/3.jpg" alt="">
<h3>冬天了,冬天了,降温了</h3>
</li>
</ul>
</body>
</html>
16、综合案例二-注册信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<!-- 表单控件 -->
<!-- 个人信息 -->
<h2>个人信息</h2>
<label for="">姓名:</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码:</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码</label><input type="password" placeholder="请输入确认密码">
<br><br>
<label>性别:</label>
<label><input type="radio" name="gender" checked> 男</label>
<label><input type="radio" name="gender"> 女</label>
<br><br>
<label>居住城市:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>武汉</option>
<option>广州</option>
<option>深圳</option>
</select>
<!-- 教育经历 -->
<h2>教育经历</h2>
<label>最高学历:</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<br><br>
<label>学校名称:</label><input type="text"><br><br>
<label>所学专业:</label><input type="text">
<br><br>
<label>在校时间:</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
--
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<!-- 工作经历 -->
<h2>工作经历</h2>
<label>公司名称:</label><input type="text">
<br><br>
<label>工作描述:</label>
<br>
<textarea></textarea>
<br><br>
<!-- 协议和按钮 -->
<input type="checkbox"><label>已阅读并同意以下协议:</label>
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>