何雨果的知识库

Appearance

HTML 元素与标签 ​

BeginnerHTML Fundamentals

HTML（HyperText Markup Language）是构建网页的基础语言，定义网页的 内容与结构。

一、🔤 什么是 HTML ​

HTML 全称 HyperText Markup Language，拆解为两部分：

部分含义
HyperText超文本——可以链接到其他文档的文本片段（即超链接）
Markup Language标记语言——通过特殊标记（标签）来标注内容的结构和语义

世界上第一个网站由 Tim Berners-Lee 创建，充满了超链接——点击一个链接就跳转到另一个 HTML 文件，这就是超文本的工作方式。

标记语言的类比：类似于编辑审阅手稿时用下划曲线表示加粗、直线表示下划线，HTML 通过 标签（Tags） 来标记内容的结构和含义。

二、🏷️ 标签（Tag）vs 元素（Element） ​

这是 HTML 中最基础的概念区分：

html
<h1>Hello World</h1>
│    │           │
│    └─ 内容      └─ 闭合标签 (Closing Tag)
└─ 开放标签 (Opening Tag)

├──────── 元素 (Element) ────────┤
概念定义示例
标签（Tag）尖括号内的标记，分为开放标签和闭合标签<h1>、</h1>
元素（Element）包含开放标签 + 内容 + 闭合标签的 完整结构<h1>Hello World</h1>
  • 开放标签：<tagname> — 标记元素的开始
  • 闭合标签：</tagname> — 标记元素的结束（注意斜杠 / 在标签名 前面）

三、📑 标题元素（Heading Elements） ​

HTML 提供 6 级标题，从 <h1>（最高级）到 <h6>（最低级）：

html
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最次要）</h6>

标题的层级概念来源于 书籍装帧：H1 相当于书名，H2 是章节标题，H3 是小节标题，以此类推。

最佳实践 ​

规则说明
✅ 每页只有一个 <h1>H1 是页面最高级标题，类似书名
✅ 按顺序使用层级不要从 H1 直接跳到 H3，中间应有 H2
❌ 不存在 <h7>标题最多到 H6
❌ 开闭标签要匹配<h1>...</h1> 不能写成 <h1>...</h6>

TIP

不遵守这些规则不会导致代码崩溃，页面仍能正常显示。但作为专业规范，良好的标题层级对 SEO 和 无障碍访问 至关重要。

四、📝 段落元素（Paragraph Element） ​

html
<p>这是第一段文本。</p>
<p>这是第二段文本。</p>

为什么需要段落标签 ​

如果直接在 HTML 中写纯文本（不加标签），所有文本会 挤在同一行，无法区分段落边界。<p> 标签的作用：

  • 将文本分隔为独立段落，段落间自动产生间距
  • 对 屏幕阅读器 至关重要：帮助视障用户跳转到下一段落

Lorem Ipsum 占位文本 ​

在设计阶段常使用 Lorem Ipsum 作为占位文本，它是一段源自古典拉丁文学的无意义文本，已有 500+ 年的排版历史。

生成器地址
标准版lipsum.com
培根版baconipsum.com

五、🔲 空元素（Void Elements） ​

空元素是 禁止包含任何内容 的特殊元素，没有闭合标签，只有一个自闭合标签。

语法对比 ​

html
<!-- 普通元素：有开放标签 + 内容 + 闭合标签 -->
<p>这是段落内容</p>

<!-- 空元素：只有一个自闭合标签，无内容 -->
<hr />
<br />

斜杠方向

空元素末尾的 / 是 正斜杠（向右倾斜），不是反斜杠 \。按惯例，斜杠前留一个空格：<br />。

常用空元素一览 ​

元素名称用途
<hr />Horizontal Rule水平分隔线
<br />Break行内换行
<img />Image图片（需要 src 属性）
<meta />Metadata页面元数据（字符集、视口等）
<link />Link外部资源链接（CSS 样式表等）
<input />Input表单输入控件

<hr /> — 水平分隔线（Horizontal Rule） ​

用于在内容之间添加视觉分隔线，表示主题的切换：

html
<p>第一部分内容</p>
<hr />
<p>第二部分内容（与上面不相关）</p>

<br /> — 换行（Break） ​

在 同一段落内 强制换行，适用于内容属于同一段落但需要分行显示的场景：

场景一：诗歌

html
<p>
  To see a World in a Grain of Sand<br />
  And a Heaven in a Wild Flower<br />
  Hold Infinity in the palm of your hand<br />
  And Eternity in an hour
</p>

场景二：地址

html
<p>
  28 South Molton Street<br />
  London<br />
  W1K 5QJ<br />
  United Kingdom
</p>

诗歌和地址的共同点：它们属于 同一段落 的内容，但每行必须单独显示才能正确传达意义。

HTML5 兼容性说明 ​

HTML5 中，结尾的 / 已被解析器忽略，以下两种写法均合法：

html
<!-- 两种写法都有效 -->
<br />
<br>

推荐保留 /> — 便于人类阅读时快速区分空元素与非空元素。

❌ 反模式 ​

不要用多个 <br /> 来模拟段落间距，应使用 <p> 标签：

html
<!-- ❌ 错误：用 br 模拟段落分隔 -->
第一段话<br /><br />第二段话

<!-- ✅ 正确：使用 p 标签 -->
<p>第一段话</p>
<p>第二段话</p>

滥用 <br /> 会损害 无障碍访问性，屏幕阅读器无法正确识别段落结构。

六、📚 参考资源 ​

← 返回 Web 开发研究