html富文本标签

作者：△冷色彩发布日期:2025-10-12 浏览:52

<!-- HTML 富文本标签示例 -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 富文本标签示例</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>这是最大的标题</h1>
    <h2>这是一个稍小的标题</h2>
    <h3>这是一个更小的标题</h3>

    <!-- 段落标签 -->
    <p>这是一个普通的段落。富文本可以包含多种格式，如<strong>加粗</strong>、<em>斜体</em>、<u>下划线</u>等。</p>

    <!-- 列表标签 -->
    <ul>
        <li>无序列表项 1</li>
        <li>无序列表项 2</li>
        <li>无序列表项 3</li>
    </ul>

    <ol>
        <li>有序列表项 1</li>
        <li>有序列表项 2</li>
        <li>有序列表项 3</li>
    </ol>

    <!-- 图像标签 -->
    <img src="https://via.placeholder.com/150" alt="占位图片">

    <!-- 链接标签 -->
    <a href="https://www.example.com">点击这里访问示例网站</a>

    <!-- 表格标签 -->
    <table border="1">
        <tr>
            <th>表头 1</th>
            <th>表头 2</th>
        </tr>
        <tr>
            <td>单元格 1</td>
            <td>单元格 2</td>
        </tr>
    </table>

    <!-- 引用和代码块 -->
    <blockquote>
        这是一个引用块。
    </blockquote>

    <pre>
        <code>
            function helloWorld() {
                console.log("Hello, World!");
            }
        </code>
    </pre>

</body>
</html>

解释说明：

标题标签 (<h1> 至 <h6>)：用于定义不同级别的标题，<h1> 是最大级别，<h6> 是最小级别。
段落标签 (<p>)：用于定义段落，可以在其中使用其他标签来增强文本样式。
列表标签 (<ul> 和 <ol>)：分别用于创建无序列表和有序列表，<li> 用于定义列表项。
图像标签 (<img>)：用于嵌入图像，src 属性指定图像的路径，alt 属性提供替代文本。
链接标签 (<a>)：用于创建超链接，href 属性指定链接的目标地址。
表格标签 (<table>)：用于创建表格，<tr> 定义行，<th> 定义表头单元格，<td> 定义普通单元格。
引用块 (<blockquote>)：用于表示一段被引用的文本。
代码块 (<pre> 和 <code>)：<pre> 保留空格和换行符，<code> 用于显示代码片段。

以上代码展示了如何使用常见的 HTML 标签来创建富文本内容。

上一篇：html简介

下一篇：html注释标签