一、列表
- 无序列表
- 有序列表
- 自定义列表
(1)无序列表 Unordered List
列表项 List Item
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ul>
显示效果:
(2)有序列表 Ordered List
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>桃子</li>
</ol>
显示效果:
(3)自定义列表 Description List
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>桃子</dd>
</dl>
显示效果:
二、表格
(1)基本元素
table 属性:
- border 边框宽度
- width 表格宽度
- height 表格高度
<table border="1">
<caption>
表格大标题
</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</table>
演示效果:
(2)表格结构,可以省略
- thead 表格头部
- tbody 表格主体
- tfoot 表格底部
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>23</td>
</tr>
<tr>
<td>Jack</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>求和</td>
<td>57</td>
</tr>
</tfoot>
</table>
演示效果:
(3)合并单元格
- 跨行合并(垂直)rowspan
- 跨列合并(水平)colspan
左上原则
- 上下合并,保留最上
- 左右合并,保留最左
Tips: 不能跨结构合并
<table border="1">
<caption>
表格大标题
</caption>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>Jack</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">求和: 57</td>
</tr>
</tfoot>
</table>
演示效果:
三、表单
输入框 input
type属性 | 输入框类型 |
---|---|
text | 文本框 |
password | 密码框 |
radio | 单选框 |
checkbox | 多选框 |
file | 文件选择 |
submit | 提交按钮 |
reset | 重置按钮 |
button | 普通按钮 |
(1)text 文本框
placeholder 占位符
<input type="text" placeholder="文本框占位符" />
演示效果:
(2)password 密码框
placeholder 占位符
<input type="password" placeholder="密码框占位符" />
(3)radio 单选框
name 属性分组,一个分组只能有一个值被选中
checked 默认选中
<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" checked />女
演示效果:
(4)checkbox 多选框
checked 默认选中
<input type="checkbox" name="city" value="beijing" />北京
<input type="checkbox" name="city" value="shanghai" checked />上海
(5)file 文件选择
multiple 多选(按住 ctrl 多选)
<input type="file" />
<input type="file" multiple />
(6)按钮
- submit 提交按钮
- reset 重置按钮
- button 普通按钮
需要配合 form 表单域使用
属性 value 修改按钮显示的值
<input type="submit" />
<input type="reset" />
<input type="button" value="普通按钮" />
演示效果:
button按钮标签
type取值
- submit 提交按钮
- reset 重置按钮
- button 普通按钮(默认)
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button>普通按钮</button>
演示效果:
select下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<select></select>
</select>
演示效果:
option 选项
默认选中第一项,可以指定默认选中 selected
textarea多行文本域
type属性
- cols 宽度 列数
- rows 高度 行数
<textarea></textarea>
label标签
点击文字也可选中选项
两种使用方式等效
<input type="radio" name="sex" id="man" />
<label for="man">男</label>
<label><input type="radio" name="sex" />女</label>
演示效果:
无语义标签
- div 块级标签,独占一行
- span 行内标签
语义化标签
手机端常用
- header 网页头部
- nav 网页导航
- footer 网页底部
- aside 网页侧边栏
- section 网页区块
- article 网页文章
以上标签和 div 等效,多了语义化
字符实体
在网页中显示特殊字符
- 空格
- 版权符
©
<!-- 单词之间有5个空格,最后只显示一个空格 -->
hello world
<!-- 实现单词之间有5个空格 -->
hello world
<!-- 版权符号 -->
©
演示效果:
综合效果示例
<!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>Form Demo</title>
</head>
<body>
<h2>个人信息</h2>
<form action="">
<p>姓名:
<input type="text"
placeholder="姓名">
</p>
<p>性别:
<label><input type="radio"
name="sex"
checked>男</label>
<label><input type="radio"
name="sex">女</label>
</p>
<p>爱好:
<label><input type="checkbox"
checked>足球</label>
<label><input type="checkbox">篮球</label>
<label><input type="checkbox">羽毛球</label>
</p>
<p>现居:<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</p>
<p>个人简介:
<br />
<textarea cols="60"
rows="10"></textarea>
</p>
<input type="submit"
value="提交">
<button type="reset">重置</button>
</form>
</body>
</html>
欢迎大家指点。