跳转到内容

HTML基本格式化

来自代码酷

HTML基本格式化[编辑 | 编辑源代码]

HTML（超文本标记语言）的基本格式化是指通过HTML标签对文本内容进行结构化排版，使其在浏览器中呈现出清晰、易读的格式。HTML提供了一系列标签，用于控制文本的显示方式，包括标题、段落、换行、水平线、字体样式等。这些标签是构建网页内容的基础，也是初学者必须掌握的核心知识。

基本格式化标签[编辑 | 编辑源代码]

以下是HTML中最常用的基本格式化标签：

标题（Headings）[编辑 | 编辑源代码]

HTML提供了6级标题，从

到

，其中

是最高级标题，

是最低级标题。标题标签会自动加粗文本并添加一定的上下边距。 
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

输出效果：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

段落（Paragraphs）[编辑 | 编辑源代码]

标签用于定义段落，浏览器会自动在段落前后添加一定的空白。 

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

输出效果：

这是一个段落。

这是另一个段落。

换行（Line Breaks）[编辑 | 编辑源代码]


标签用于在文本中插入一个换行符，它是一个空标签（没有结束标签）。 

这是一行文本。<br>
这是新的一行文本。

输出效果： 这是一行文本。
这是新的一行文本。

水平线（Horizontal Rules）[编辑 | 编辑源代码]

标签用于在页面中创建一条水平线，通常用于分隔内容。 

<p>第一部分内容</p>
<hr>
<p>第二部分内容</p>

输出效果：

第一部分内容

第二部分内容

文本格式化标签[编辑 | 编辑源代码]

HTML还提供了一系列标签用于格式化文本：

加粗文本[编辑 | 编辑源代码]

使用或标签可以加粗文本。虽然视觉效果相似，但表示语义上的重要性。 

<b>这是加粗文本</b>
<strong>这也是加粗文本（语义更强）</strong>

输出效果： 这是加粗文本
这也是加粗文本（语义更强）

斜体文本[编辑 | 编辑源代码]

使用或标签可以使文本变为斜体。表示语义上的强调。 

<i>这是斜体文本</i>
<em>这也是斜体文本（带有强调）</em>

输出效果： 这是斜体文本
这也是斜体文本（带有强调）

下划线和删除线[编辑 | 编辑源代码]

标签用于下划线文本，或标签用于删除线文本。 

<u>这是下划线文本</u>
<s>这是删除线文本</s>
<del>这也是删除线文本</del>

输出效果： 这是下划线文本
这是删除线文本
这也是删除线文本

上标和下标[编辑 | 编辑源代码]

标签用于上标，标签用于下标。 

H<sub>2</sub>O 是水的化学式。<br>
E = mc<sup>2</sup> 是爱因斯坦的质能方程。

输出效果： H2O 是水的化学式。
E = mc2 是爱因斯坦的质能方程。

预格式化文本[编辑 | 编辑源代码]

标签用于保留文本中的空格和换行符，通常用于显示代码或诗歌等需要保留原始格式的文本。

<syntaxhighlight lang="html">
<pre>
    静夜思
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。

</syntaxhighlight>

输出效果： 

    静夜思
    床前明月光，
    疑是地上霜。
    举头望明月，
    低头思故乡。

引用和代码[编辑 | 编辑源代码]

标签用于长引用，

标签用于短引用，标签用于显示代码片段。 
<blockquote>
这是长引用内容，通常会缩进显示。
</blockquote>

<q>这是短引用</q>

<code>var x = 5;</code>

输出效果：

这是长引用内容，通常会缩进显示。

这是短引用

var x = 5;

实际应用案例[编辑 | 编辑源代码]

以下是一个结合多种格式化标签的实际例子： 

<!DOCTYPE html>
<html>
<head>
    <title>格式化示例</title>
</head>
<body>
    <h1>HTML格式化示例</h1>
    <hr>
    
    <h2>文章标题</h2>
    <p>这是一篇关于<strong>HTML格式化</strong>的文章。<em>请注意</em>各种格式化标签的使用。</p>
    
    <h3>代码示例</h3>
    <pre>
    <code>
    function greet() {
        console.log("Hello, World!");
    }
    </code>
    </pre>
    
    <h3>引用</h3>
    <blockquote>
        <p>知识就是力量。</p>
        <p><small>— 弗朗西斯·培根</small></p>
    </blockquote>
    
    <h3>科学公式</h3>
    <p>勾股定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
</body>
</html>

格式化标签的层次结构[编辑 | 编辑源代码]

HTML格式化标签可以嵌套使用，但必须遵循正确的嵌套顺序。以下是常见的嵌套结构：

graph TD html --> body body --> h1 body --> p p --> strong p --> em body --> pre pre --> code body --> blockquote blockquote --> p p --> small

注意事项[编辑 | 编辑源代码]

1. 虽然HTML提供了多种格式化标签，但在现代网页开发中，许多视觉效果通常使用CSS来实现，以保持结构与样式的分离。 2. 语义化标签（如、）不仅影响外观，还传达了内容的含义，对SEO和可访问性有益。 3. 避免过度使用格式化标签，保持代码简洁易读。

4. 某些标签（如、
）在HTML5中已被废弃，应使用CSS替代。

总结[编辑 | 编辑源代码]

HTML基本格式化是构建网页内容的基础技能。通过合理使用标题、段落、文本样式等标签，可以创建结构清晰、易于阅读的网页内容。虽然CSS在现代网页设计中承担了更多的样式控制功能，但HTML格式化标签仍然是内容结构的基础，特别是在语义化标记方面发挥着重要作用。

检索自“https://wiki.echo.cool/index.php?title=HTML基本格式化&oldid=3768”