这是我练习 Web 前端时整理的笔记，原文是一批可以单独打开的 HTML 练习文件。这里按知识点重新组织，每节都附了能直接点击运行的 demo，方便对照效果。

这篇文章覆盖 HTML 最基础的四个部分：文本标签、属性、区块、表单。

一、常见文本标签

demo 1：常见文本标签

标题与段落

HTML 提供六级标题，数字越小级别越高、字号越大：

1
2
3
4
5
6
7
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<p>这是一个段落标签</p>

一个页面里 h1 通常只用一次（它代表页面主标题），其余按层级递减。这不只是风格问题，搜索引擎和无障碍工具都依赖标题层级来理解页面结构。

文本样式标签

1
2
3
<p>
    更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s>
</p>

这四个是”表现型”标签。更推荐的写法是用语义标签 <strong> 和 <em>：它们在视觉上分别等价于粗体和斜体，但表达的是”重要”和”强调”的语义，屏幕阅读器会重读。<b>/<i> 纯粹是样式，没有语义。

现在更规范的做法是把样式交给 CSS。<u> 下划线尤其容易和超链接混淆——链接默认就是带下划线的，用下划线标注普通文本会让用户误以为可点击。

列表

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 无序列表：每一项前面是小圆点 -->
<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
    <li>无序列表项 3</li>
</ul>

<!-- 有序列表：自动编号 -->
<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
    <li>有序列表项 3</li>
</ol>

两种列表的唯一区别是有没有顺序含义。要做导航菜单用 ul，要写步骤用 ol。所有列表项都放在 <li> 里，<li> 必须直接是 ul/ol 的子元素。

表格

表格由三种标签组成，记住它们的分工就不会乱：

标签 全称 作用
<table> table 表格容器
<tr> table row 一行
<th> table header 表头单元格（默认加粗居中）
<td> table data 普通数据单元格 
1
2
3
4
5
6
7
8
9
10
11
12
<table border="1">
    <tr>
        <th>列标题1</th>
        <th>列标题2</th>
        <th>列标题3</th>
    </tr>
    <tr>
        <td>元素11</td>
        <td>元素12</td>
        <td>元素13</td>
    </tr>
</table>

border="1" 只是为了在练习时看清表格边界。实际项目里表格边框一律用 CSS 控制，HTML 属性写法已经过时了。

二、HTML 属性

demo 2：HTML 属性

属性写在开始标签里，格式是 属性名="属性值"，用来给标签补充信息。

超链接：a 标签

1
2
3
4
5
6
7
<a href="https://www.baidu.com">这是一个超链接  百度</a>

<!-- _self：在当前窗口打开（默认行为） -->
<a href="https://www.baidu.com" target="_self">在当前窗口打开</a>

<!-- _blank：在新窗口/新标签页打开 -->
<a href="https://www.baidu.com" target="_blank">在新窗口打开</a>
  • href 是跳转目标，必须有，少了它这个 <a> 就不可点击；
  • target 控制打开位置，不写默认就是 _self。

用 target="_blank" 时，现代浏览器出于安全考虑会自动加上 rel="noopener"。如果你手动写 HTML，建议同时写上 rel="noopener noreferrer"，否则新页面可以通过 window.opener 反过来操纵你的页面。

图片：img 标签

1
2
3
4
5
<!-- 存在的图片，正常显示 -->
<img src="youda.gif" alt="该图片无法显示" width="100" height="100">

<!-- 故意写一个不存在的文件名，用来观察 alt 的效果 -->
<img src="you.gif" alt="该图片无法显示" width="200" height="200">

img 是单标签（自闭合），没有 </img>。三个属性各有用途：

属性 作用
src 图片路径，必须有
alt 图片加载失败时显示的替代文字，也是屏幕阅读器朗读的内容
width / height 显示宽高，单位像素

demo 里第二个 img 的 src 故意写成了不存在的 you.gif，就是为了让你看到 alt 文字在图片加载失败时会顶上来。这也是 alt 存在的意义——网络慢、图片路径写错、用户开了无图模式，都靠它兜底。

换行与分割线

1
2
<br>   <!-- 换行 -->
<hr>   <!-- 水平分割线 -->

同样是单标签。<br> 只应该用于同一段文字内部需要强制换行的场景（比如写诗、地址），要分隔段落请用 <p>，不要用一堆 <br> 堆出间距。

三、区块元素：div 与 span

demo 3：HTML 区块

这两个标签本身没有任何视觉效果，纯粹是”装东西的盒子”，用来给页面划分区域、方便之后用 CSS 布局。它们最本质的区别在显示方式：

标签 类型 特点
<div> 块级元素 block 独占一行，可以设置宽高
<span> 行内元素 inline 不换行，和文字排在同一行，设置宽高无效 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- div 划分导航区 -->
<div class="nav">
    <a href="#">链接 1</a>
    <a href="#">链接 2</a>
</div>

<!-- div 划分内容区 -->
<div class="content">
    <h1>文章标题</h1>
    <p>文章内容区域</p>
</div>

<!-- span 用来圈住一行文字里的一小段 -->
<span>链接点击这里 <a href="#"> 链接</a></span>

用一句话记住选择标准：要划分”块”用 div，要圈住”一行里的一小段文字”用 span。demo 里那四个连续排列的 span 就直观说明了它们不换行的特性。

class 属性是给元素起”分类名”，多个元素可以共用同一个 class；对应的还有 id，全页面必须唯一。这两者都是 CSS 选择器和 JS 查找元素的抓手，下一篇文章会大量用到。

四、HTML 表单

demo 4：HTML 表单

表单是页面收集用户输入的方式，由 <form> 包裹若干 <input> 组成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form action="#">
    <label for="username">用户名</label>
    <input type="text" name="username" placeholder="请输入用户名"><br><br>

    <label for="password">密码</label>
    <input type="password" name="password" placeholder="请输入密码"><br><br>

    <label for="text">请输入文本value</label>
    <input type="text" name="text" value="请输入文本"><br><br>

    <label>性别</label>
    <input type="radio" name="gender"> 男
    <input type="radio" name="gender"> 女
    <input type="radio" name="gender"> 其他
    <br><br>

    <label>爱好</label>
    <input type="checkbox" name="hobby"> 篮球
    <input type="checkbox" name="hobby"> 足球
    <input type="checkbox" name="hobby"> 羽毛球
    <br><br>

    <input type="submit" value="上传（提交）">
</form>

关键属性对照

属性 作用
type 输入框类型：text / password / radio / checkbox / submit …
name 提交时的字段名，同一个 radio 组必须用同一个 name 才能互斥
value 输入框的预设值；对 submit 来说就是按钮上的文字
placeholder 输入框为空时的灰色提示文字，不会随表单提交

三个容易踩的点

1. radio 靠 name 分组。 三个性别的 name 都是 gender，所以只能选一个；如果 name 各不相同，就会变成三个都能点中的独立单选按钮。checkbox 则天然可以多选。

2. label 的 for 要对应 input 的 id。 这样点击文字就能聚焦到对应输入框，体验好很多，对无障碍也重要。demo 里前半部分的 <label for="username"> 和 <input name="username"> 其实并没有真正关联——因为 input 没有 id，for 找不到目标。正确写法是给 input 加 id="username"。

3. 原始练习文件里 </form action="#"> 是写错的。 action 是 <form> 开始标签的属性，闭合标签不能带属性，正确写法是：

1
2
3
<form action="#">
    ...
</form>

浏览器很宽容，会自动纠正这类错误，所以页面看起来照样能跑。但不要依赖这种容错——用编辑器的高亮和校验功能能及早发现。

placeholder 常被误当成”默认值”。它只是提示，用户不输入的话提交上去是空的。想要真正的默认值要用 value。

小结

知识点 核心记忆点
文本标签 标题分六级；列表分有序无序；表格是 table → tr → th/td
属性 写在开始标签里；img 必须有 alt；target="_blank" 记得配 rel
区块 div 块级独占一行，span 行内不换行且宽高无效
表单 radio 靠 name 分组；label for 要对应 id；placeholder 不是默认值

HTML 只负责结构和内容，长什么样交给 CSS。下一篇整理 CSS 的导入方式、选择器、常用属性和盒子模型。

本系列其他文章