Tech Docs Station

Appearance

文本格式化 ​

HTML 提供了多种标签来格式化文本，包括标题、段落、强调、引用等。

标题 ​

HTML 提供了 6 级标题，从 <h1> 到 <h6>：

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

最佳实践

  • 每个页面通常只使用一个 <h1> 标签
  • 按层级顺序使用标题，不要跳级
  • 标题对 SEO 很重要

段落与换行 ​

段落 ​

html
<p>这是第一个段落。段落会自动换行。</p>
<p>这是第二个段落。</p>

换行 ​

html
<p>第一行<br>第二行<br>第三行</p>

水平线 ​

html
<p>上面的内容</p>
<hr>
<p>下面的内容</p>

文本强调 ​

语义化强调 ​

html
<strong>重要文本（加粗）</strong>
<em>强调文本（斜体）</em>

纯样式标签 ​

html
<b>加粗文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
<s>删除线文本</s>

注意

推荐使用 <strong> 和 <em> 而不是 <b> 和 <i>，因为前者具有语义含义。

其他文本标签 ​

标记与高亮 ​

html
<mark>高亮显示的文本</mark>

小号文本 ​

html
<small>小号文本，通常用于注释</small>

删除与插入 ​

html
<del>已删除的文本</del>
<ins>新插入的文本</ins>

下标与上标 ​

html
H<sub>2</sub>O        <!-- 下标：H₂O -->
E = mc<sup>2</sup>    <!-- 上标：E = mc² -->

代码相关 ​

html
<code>行内代码</code>
<pre>预格式化文本
    保留    空格和换行</pre>
<kbd>键盘输入</kbd>
<samp>程序输出</samp>
<var>变量名</var>

引用 ​

短引用 ​

html
<p>他说：<q>学习 HTML 很有趣。</q></p>

块引用 ​

html
<blockquote cite="https://example.com">
    <p>这是一段引用的文字。可以包含多个段落。</p>
</blockquote>

引用来源 ​

html
<p>更多信息请参考<cite>HTML 教程</cite>。</p>

缩写 ​

html
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>

地址 ​

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

实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本格式化示例</title>
</head>
<body>
    <article>
        <h1>HTML 文本格式化</h1>
        
        <p>HTML 是 <abbr title="HyperText Markup Language">超文本标记语言</abbr>的缩写。</p>
        
        <h2>为什么学习 HTML？</h2>
        <p>HTML 是 <strong>网页开发的基础</strong>。正如某位专家所说：</p>
        
        <blockquote>
            <p>掌握 HTML 是成为前端开发者的第一步。</p>
        </blockquote>
        
        <h2>学习要点</h2>
        <ul>
            <li>理解<em>语义化标签</em>的重要性</li>
            <li>掌握常用文本格式化标签</li>
            <li>学会正确使用<code>class</code>和<code>id</code>属性</li>
        </ul>
        
        <hr>
        
        <footer>
            <address>
                作者：技术文档站<br>
                更新日期：<time datetime="2024-01-15">2024年1月15日</time>
            </address>
        </footer>
    </article>
</body>
</html>