3.4 项目常用标签
原创声明。未经许可，不得转载，作者：小步教程。
3.4.1 块容器标签div
div标签是使用频率最高的标签，默认核心样式display: block。div元素属于“块容器block container”，因为内部可以包含多个其它块级元素与行内元素；div元素又属于“块级元素block-level”，因为它独占一行具有换行效果；div元素还属于“块元素block”，因为它既是块容器block container又是块级block-level元素。div标签的核心作用是划分页面布局结构，将一个区域分解成多个子区域，依次逐层分解。
“div”字面意思。完整英文division，中文“划分”，MDN中文版翻译为“内容划分元素”。
示例1：div应用于划分布局结构。通过div将页面划分3块区域。
<body>
<div>页头…这里会嵌入复杂的元素 小步教程</div>
<div>主体…这里会嵌入复杂的元素 xiaobuteach.com</div>
<div>页脚…这里会嵌入复杂的元素</div>
</body>
示例2：div多级嵌套继续划分页面布局结构。三个区域继续通过div继续划分小块。
<body>
<div>
<div>页头左侧…这里会嵌入复杂的元素 小步教程</div>
<div>页头右侧…这里会嵌入复杂的元素 xiaobuteach.com</div>
</div>
<div>
<div>左边栏…这里会嵌入复杂的元素</div>
<div>主体…这里会嵌入复杂的元素</div>
</div>
<div>
<p>页脚…这里会嵌入复杂的元素</p>
</div>
</body>
3.4.2 文本容器标签span
span标签内部包含多个字符，用于简短文本设置样式，叫做文本容器标签，默认核心样式display: inline。span元素属于“行内inline”元素，因为无换行效果，一行能排列多个span元素。
“span”字面意思。中文“跨”，理解为跨多个文本。“inline”包含两种意思。第1种，“in a line”，中文“在一行内”；第2种，“embedded”，中文“嵌入、内联”。“display: inline”的inline表示第1种意思，中文翻译为“行内”，本教程对应display: inline的地方翻译成“行内”而不是“内联”。通过style属性将CSS属性代码嵌入到HTML代码的用法，称为“inline style”，翻译为“内联样式”而不是“行内样式”。
示例：span应用于划分一行内的多个文本分别设置样式。
<body>
<div>
<span style="color: #0aaa76;">小步教程</span>
<span style="color: #4aa6fc;font-size: 20px;">xiaobuteach.com</span>
</div>
</body>
运行效果
3.4.3 标题h系列与段落p
常用文本类型标签包括：h1~h6表示六级标题、p表示段落、span。
示例代码
<body>
<h1>小步教程 1级标题</h1>
<h2>小步教程 2级标题</h2>
<h3>小步教程 3级标题</h3>
<h4>小步教程 4级标题</h4>
<h5>小步教程 5级标题</h5>
<h6>小步教程 6级标题</h6>
<p>小步教程 段落1<br>段落1段落1段落1<br>段落1段落1段落1</p>
<p>小步教程 段落2<br>段落2段落2段落2换行<br>段落2段落2段落2</p>
<p>
小步教程 <span>行内标签</span> <i>斜体文本</i> <b>粗体文本</b>
</p>
</body>
h系列、p具有换行效果且较大上下边距，span、i、b不会换行。h系列元素属于块元素；p元素属于块级元素独占一行，但不属于块容器，因为它内部不能包括块级元素（如div）。
3.4.4 图片标签img
img标签用于显示图片。
<img src="path" width="宽度" height="高度" />
src属性为必填项，表示图片文件的路径。默认按照图片的原始大小进行显示，width与height设置图片的宽高。示例代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>小步教程</title>
</head>
<body>
<img src="logo.jpg" width="300" height="80" title="小步教程logo" alt="小步教程logo" >
</body>
</html>
width与height属性值无单位。图片文件logo.jpg与html文件在同一文件夹，title表示悬停显示内容。运行效果如下。
alt属性表示找不到图片时的显示内容，将src属性改成不存在的文件名进行测试。
行内级inline-level元素。除span元素，其它元素也能与span在同一行，能在一行内显示的元素属于行内级inline-level元素。行内元素属于行内级元素；img元素不会换行所以也属于行内级元素。img元素也属于可替换元素replaced element，因为它的内容不是HTML代码本身定义，而是通过src指定的图片文件进行内容替换，一般的inline元素（如span）设置宽高无效，而可替换元素虽然display: inline但设置宽高有效，即使不设置宽高也默认取图片原始大小的宽高。
综上所述，图片属于行内级元素、可替换元素，严格来说不属于行内元素，更多见“第9章 行内IFC模型”。
3.4.5 链接标签a
鼠标单击链接，会打开href指定的新页面。
<a href="页面地址" target="目标窗口位置">链接内容</a>
target默认值_self，表示在当前页面打开；_blank表示打开新的标签页来打开页面。
<a href="https://www.xiaobuteach.com" target="_blank">小步教程</a>
链接默认颜色蓝色，单击未松开显示红色，已访问链接显示紫色。
3.4.6 列表标签
（1）ul/li标签
ul表示无序列表，li表示列表项。示例代码如下。
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>scss</li>
<li>typescript</li>
</ul>
运行效果
li性质与div相同，属于块容器、块级元素、块元素。
ul-li项目应用：并列项结构。并列项的内部可以嵌套复杂结构。
并列项结构1：div实现并列项结构，内外层均使用div，无法通过标签区分是否并列项结构。
<div>
<div>第1项</div>
<div>第2项</div>
<div>第3项</div>
</div>
并列项结构2：ul-li实现并列项结构。ul表示外层、li表示内层，结构清晰。
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ul>
（2）ol/li标签
ol表示有序列表，li表示列表项，默认前面显示数值序号。示例代码如下。
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>scss</li>
<li>typescript</li>
</ol>
运行效果
（3）dl/dt/dd标签
dl表示列表，dt表示列项表，dd表示列表项下的子列表项。示例代码如下。
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>javascript</dd>
<dt>后端</dt>
<dd>java</dd>
<dd>python</dd>
<dd>node</dd>
<dt>数据库</dt>
<dd>mysql</dd>
<dd>PostgreSQL</dd>
</dl>
运行效果
dt与dd也与div类似，属于块容器、块级元素、块元素。
实际项目常使用下列类似结构，实现严谨二级列表，方便对第二级整体设置样式。示例如下。
<dl>
<dt>前端</dt>
<dd>
<a>html</a>
<a>css</a>
<a>javascript</a>
</dd>
<dt>后端</dt>
<!-- 其余略 -->
</dl>
3.4.7 表格标签table
规范表格示例代码
<body>
<table border="1">
<thead>
<tr>
<th>标题 第1列</th>
<th>标题 第2列</th>
<th>标题 第3列</th>
<th>标题 第4列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
<td>第1行第4列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
<td>第2行第4列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
<td>第3行第4列</td>
</tr>
</tbody>
</table>
</body>
table表格，thead表头，tr行，th表头单元格，tbody表格内容，td内容单元格。
3.4.8 表单元素
表单元素用于用户输入数据，点击提交按钮将数据提交至后台处理。
示例代码如下。注：实际项目这种场景不会使用br进行换行。
<body>
<label for="userCode">用户账号:</label><input id="userCode" type="text" value="xiaobuteach.com">
<button type="button">校验是否存在</button><br>
<label>密码:</label><input type="password" value="123456"> <br>
<input type="checkbox" checked>同意协议 <br>
性别：<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女 <br>
婚否：<input type="radio" name="marry" checked>已婚
<input type="radio" name="marry">未婚 <br>
省份:<select>
<option>北京</option>
<option>上海</option>
<option>广东</option>
<option selected>福建</option>
</select> <br>
个人简介：<br>
<textarea>小步教程</textarea> <br>
<button type="submit">注册</button> <br>
<button type="reset">重置</button> <br>
</body>
（1）label与span的区别。鼠标形状不同，label为箭头状态，span为文本指示状态。点击label元素，焦点自动移到绑定元素，即for属性对应id的元素。
（2）input表单元素，type属性设置类型：text文本框，password密码框、checkbox复先框。radio单选框，name相同的单选框属于一组，一组只能选中一个。
（3）button按钮，select与option下列列表框，textarea多行文本框（也称文本域）。
运行效果
3.4.9 思考：标签默认样式在哪里设置
详情见“5.4 标签样式默认性”。
