HTML快速入门-5：HTML 文本标签详解

HTML 提供了丰富的文本标签用于控制内容的结构、语义和表现。

---

一、基础文本结构标签

1. 标题标签（

-

）

• 作用：定义文档标题层级（

   最高级，

   最低级）

• 特点：
  • 浏览器默认加粗并增大字号
  • 影响 SEO（搜索引擎通过标题层级理解内容结构）

网站主标题
章节标题
子章节标题

• 最佳实践：
  • 每个页面仅使用一个 

  • 避免跳过层级（如 

     直接到 

    ）

2. 段落标签（

）

• 作用：定义文本段落
• 特点：
  • 自动添加段落间距
  • 包含的文本默认换行

这是一个段落，浏览器会自动处理段落间的空白。
连续的多个空格或换行在 HTML 中会被合并为一个空格。

3. 换行标签（
）

• 作用：强制文本换行（不产生新段落）
• 特点：
  • 自闭合标签（无需闭合）
  • 适用于地址、诗歌等需要精确换行的场景

第一行
第二行

---

二、文本语义化标签

1. 强调标签

• （语义化强调）：
  • 浏览器默认斜体显示
  • 表示内容需要强调（如关键词、重要提示）
• （强语义强调）：
  • 浏览器默认加粗显示
  • 表示内容具有高重要性（如警告、核心观点）

警告：不要在生产环境关闭防火墙。
HTML 中的 语义化标签对 SEO 至关重要。

2. 引用与标记标签

• （块级引用）：

  • 用于长文本引用（如书籍段落、演讲）
  • 默认添加缩进样式

• （行内引用）：
  • 用于短文本引用（如句子中的引用）
  • 浏览器自动添加引号
• （引用来源）：
  • 标记作品标题（如书籍、电影名）
• （高亮标记）：
  • 标记需要用户注意的文本（如搜索结果高亮）

  
这是长文本引用，通常用于引用权威来源。


爱因斯坦曾说：想象力比知识更重要。

推荐阅读：时间简史 by 史蒂芬·霍金

搜索结果：HTML 教程 包含10个章节。

3. 代码相关标签

• （行内代码）：
  • 标记代码片段（如变量名、命令）

• （预格式化文本）： 
       
   
        
  保留文本中的空格、换行和缩进
   
        
  通常与  结合使用显示多行代码
   
       
   

使用 document.querySelector() 选择元素。


  function hello() {
    console.log("Hello, World!");
  }

---

三、文本样式控制标签

1. 物理样式标签（不推荐，仅作兼容性说明）

• （加粗）：
  • 仅视觉加粗，无语义
• （斜体）：
  • 仅视觉斜体，无语义
• （下划线）：
  • 默认添加下划线（易与链接混淆）
• （删除线）：
  • 显示删除线（如已过时价格）
• （小号文本）：
  • 缩小字号（如免责声明）
• /（上标/下标）：
  • 用于数学公式或化学符号

这是加粗、斜体、下划线的文本。
原价：$100 现价：$80
水的化学式：H2O

• 注意：
  • 优先使用语义化标签（如  替代 ）
  • 物理样式标签应仅用于兼容旧代码或特殊场景

2. 文本方向控制

• （双向文本覆盖）：
  • 强制文本方向（如从右到左显示阿拉伯语）

默认方向：Hello
反向显示：Hello

---

四、进阶语义化标签

1. 时间标签（）

• 作用：标记日期和时间（支持机器可读格式）

会议时间：2023年12月25日 下午2点

2. 缩写标签（）

• 作用：定义缩写词（鼠标悬停显示完整解释）

使用 HTML 构建网页。

3. 定义标签（）

• 作用：标记术语定义（通常与  结合）

WWW 是互联网的子集。

4. 变量标签（）

• 作用：标记数学变量或代码变量

计算圆的面积：A = πr²

5. 输出标签（

）

• 作用：显示计算结果（通常与表单交互）

   +
   =
  
30

---

五、文本分组与分隔

1. 分隔线标签（

---

）

• 作用：创建水平分隔线（自闭合标签）

章节一
内容...

章节二

2. 地址标签（

）

• 作用：标记联系信息（如作者邮箱、公司地址）

  联系邮箱：[email protected]

  公司地址：北京市朝阳区某街道123号

3. 删除与插入标签

• （删除文本）：
  • 显示删除线（如修改记录）
• （插入文本）：
  • 显示下划线（如新增内容）

价格已更新：$99 → $79

---

六、现代开发建议

1. 语义化优先：
   • 使用  而非 ，使用  而非 
   • 避免滥用 
      和  包裹文本（除非有明确语义）
2. 样式与结构分离：
   • 使用 CSS 控制字体、颜色等视觉样式
   • 仅通过 HTML 标签定义内容结构和语义
3. 可访问性考量：
   • 为缩写词添加  标题
   • 复杂术语使用  定义
   • 确保文本对比度符合 WCAG 标准
4. SEO 优化：
   • 合理使用标题层级（

     -

     ）

   • 避免隐藏文本（如 display: none 的内容）

---

完整代码示例

  


  
  
HTML 文本标签指南
  
一、基础结构
  
这是一个重要的段落，包含强调和高亮文本。
  
  
  

    
HTML 是构建网页的标准标记语言。
  
  
示例代码：
  

    <h1>标题</h1>
    <p>段落</p>
  
  
  
  
二、术语定义
  
CSS 用于控制网页样式。
  
变量示例：x = y + 2
  
  
  
三、更新日志
  
2023-12-01：移除旧功能 → 新增语义化标签支持
  
  
  

    文档作者：张三

    更新日期：2023年12月25日
  

通过合理使用这些文本标签，可以创建结构清晰、语义丰富且易于维护的 HTML 文档。