当前位置：首页 > news >正文

HTML5 文本格式化

news 2026/4/12 10:38:41

HTML5 文本格式化学习笔记

一、基础文本标签

1. 标题标签 (Heading Tags)

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>

从 h1 到 h6，重要性递减
每个页面应该只有一个 h1 标签
搜索引擎优化 (SEO) 重要

2. 段落标签

<p>这是一个段落。</p><p>这是另一个段落。</p>

标签定义段落
浏览器自动在段落前后添加空白

3. 换行和水平线

<p>第一行<br>第二行</p><hr><p>水平线下方内容</p>

 ：换行标签（空元素）
<hr>：水平线标签，表示主题分隔

二、文本格式化标签

1. 强调和重要文本

<p>这是<strong>重要文本</strong></p><p>这是<em>强调文本</em></p><p>这是<b>粗体文本</b></p><p>这是<i>斜体文本</i></p><p>这是<u>下划线文本</u></p><p>这是<mark>标记文本</mark></p>

语义区别：

：表示重要性（通常显示为粗体）
：表示强调（通常显示为斜体）
：仅视觉粗体，无语义
：仅视觉斜体，无语义（如术语、外语）
：下划线（注意：不要与链接混淆）
：高亮显示

2. 删除和插入文本

<p>原价：<del>¥100</del>现价：<ins>¥80</ins></p>

<del>：删除文本（通常显示为删除线）
<ins>：插入文本（通常显示为下划线）

3. 上标和下标

<p>水的化学式：H<sub>2</sub>O</p><p>数学公式：x<sup>2</sup>+ y<sup>2</sup>= z<sup>2</sup></p>

：下标
：上标

4. 缩写和首字母缩略词

<p>HTML 代表<abbrtitle="HyperText Markup Language">HTML</abbr></p><p>中国<abbrtitle="People's Republic of China">PRC</abbr></p>

<abbr>：定义缩写词
title属性提供完整解释

5. 引用文本

<!-- 块级引用 --><blockquotecite="https://example.com"><p>这是一个长引用，通常来自其他来源。</p></blockquote><!-- 行内引用 --><p>他说：<q>今天天气真好</q>。</p><!-- 缩写定义 --><dfn>HTML</dfn>是超文本标记语言。<!-- 代码引用 --><p>使用<code>console.log()</code>输出日志。</p><!-- 预格式化文本 --><pre>保持原始格式 包括空格和换行</pre><!-- 键盘输入 --><p>按<kbd>Ctrl</kbd>+<kbd>C</kbd>复制</p><!-- 变量 --><p>公式：<var>E</var>=<var>m</var><var>c</var><sup>2</sup></p><!-- 样本输出 --><p>程序输出：<samp>Hello, World!</samp></p>

三、语义化标签

1. 时间标签

<p>会议时间：<timedatetime="2024-04-09T14:00">今天下午 2 点</time></p><p>发布日期：<timedatetime="2024-04-09">2024 年 4 月 9 日</time></p>

<time>：定义日期/时间
datetime属性：机器可读的格式

2. 地址标签

<address>作者：张三<br>邮箱：<ahref="mailto:zhangsan@example.com">zhangsan@example.com</a><br>地址：北京市朝阳区</address>

<address>：定义文档或文章的作者联系信息

3. 小字标签

<p>版权所有 © 2024 公司名<small>保留所有权利</small></p>

：侧注、小字说明（版权信息、免责声明等）

四、实践示例

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>HTML5 文本格式化示例</title></head><body><h1>HTML5 文本格式化学习笔记</h1><p>本文档介绍了 HTML5 中的各种文本格式化标签。</p><h2>1. 基础文本</h2><p>这是<strong>重要内容</strong>，这是<em>强调内容</em>。</p><h2>2. 数学公式</h2><p>勾股定理：<var>a</var><sup>2</sup>+<var>b</var><sup>2</sup>=<var>c</var><sup>2</sup></p><p>水的化学式：H<sub>2</sub>O</p><h2>3. 引用示例</h2><blockquotecite="https://www.example.com"><p>这是一个来自其他来源的引用。</p></blockquote><p>他说：<q>学习 HTML5 很有趣</q>。</p><h2>4. 代码示例</h2><p>使用<code>&lt;p&gt;</code>标签创建段落。</p><pre>function hello() { console.log("Hello, World!"); }</pre><h2>5. 时间信息</h2><p>本文发布于：<timedatetime="2024-04-09">2024 年 4 月 9 日</time></p><h2>6. 联系信息</h2><address>作者：学习助手<br>邮箱：<ahref="mailto:learn@example.com">learn@example.com</a></address><hr><small>本文档仅供学习使用 © 2024</small></body></html>