Appearance
列表
| 标签 | 作用 |
|---|---|
<ul> | 无序列表，列表项前显示圆点 |
<ol> | 有序列表，列表项前显示数字 |
<li> | 列表项，必须放在 ul 或 ol 中 |
<dl> | 自定义列表 |
<dt> | 自定义列表中的术语 |
<dd> | 自定义列表中的描述 |
表格
html
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</tbody>
</table>
| 标签 | 作用 |
|---|---|
<table> | 表格容器 |
<thead> | 表头区域 |
<th> | 表头单元格（文字加粗居中） |
<tr> | 行 |
<td> | 普通单元格 |
<tbody> | 表格主体 |
<tfoot> | 表尾（不常用） |
单元格合并
html
<td rowspan="2">跨两行</td>
<td colspan="2">跨两列</td>
rowspan：跨行合并colspan：跨列合并- 左上原则：合并从左上角单元格开始
元素类型
块级元素
- 独占一行
- 可嵌套其他元素
- 如
<p>、<div>、<h1>~<h6>
内联元素
- 不独占一行，一行可放多个
- 不可嵌套块级元素
- 如
<a>、<span>、<img>
div 与 span
html
<div>块级容器，配合 CSS 布局</div>
<span>内联容器，配合 CSS 局部样式</span>
<div>：块级，无实际语义，纯布局容器<span>：内联，无实际语义，用于包裹文本
语义化结构标签
| 标签 | 作用 |
|---|---|
<header> | 页眉（头部） |
<main> | 主体内容（每页唯一） |
<nav> | 导航栏 |
<article> | 文章 |
<section> | 分块/章节 |
<aside> | 侧边栏 |
<footer> | 页脚 |
表单
表单容器
html
<form action="提交地址">
<!-- 表单控件 -->
</form>
输入控件
html
<input type="text" name="username" value="默认值" placeholder="提示文本" />
| 属性 | 说明 |
|---|---|
type | 控件类型（text / password 等） |
name | 控件名称，提交到后端用 |
value | 默认值 |
placeholder | 提示文本 |
disabled | 禁用 |
autocomplete | 自动填充，on / off |
文本域
html
<textarea name="content" cols="30" rows="10" placeholder="请输入文本"></textarea>
cols：列数（一行多少字符）rows：行数
文件上传
html
<input type="file" name="file" multiple accept=".jpg,.png,.zip" />
multiple：允许多选accept：限制文件类型
单选框
html
<input type="radio" name="gender" value="0" checked />女
<input type="radio" name="gender" value="1" />男
name相同的为一组，组内只能选一个checked：默认选中
复选框
html
<input type="checkbox" name="hobby" value="0" />篮球
<input type="checkbox" name="hobby" value="1" />足球
下拉列表
html
<select>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
</select>
selected：默认选中
按钮
html
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
| type | 行为 |
|---|---|
submit | 提交表单 |
reset | 重置表单 |
button | 无默认行为，需配合 JS |
label 辅助标签
label 可提升用户体验，点击 label 自动聚焦到对应 input：
html
<!-- 方式一：直接包裹 -->
<label>用户名：<input type="text" name="username" /></label>
<!-- 方式二：for + id 关联 -->
<label for="username">用户名：</label>
<input type="text" name="username" id="username" />