html基础知识

作者：萫蕉姺森う发布日期:2026-07-31 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>HTML 基础知识示例</title>
</head>
<body>
    <h1>欢迎来到 HTML 基础知识页面</h1>
    <p>这是一个简单的 HTML 示例，用于展示一些基本的 HTML 元素。</p>

    <!-- 标题元素 -->
    <h2>标题元素</h2>
    <p>HTML 提供了六种级别的标题元素，从 h1 到 h6，其中 h1 是最大的标题，h6 是最小的标题。</p>
    <h1>这是 h1 标题</h1>
    <h2>这是 h2 标题</h2>
    <h3>这是 h3 标题</h3>
    <h4>这是 h4 标题</h4>
    <h5>这是 h5 标题</h5>
    <h6>这是 h6 标题</h6>

    <!-- 段落元素 -->
    <h2>段落元素</h2>
    <p>段落元素用于定义文档中的段落。每个段落应该用 <code>&lt;p&gt;</code> 标签包裹。</p>
    <p>这是第一个段落。</p>
    <p>这是第二个段落。</p>

    <!-- 链接元素 -->
    <h2>链接元素</h2>
    <p>链接元素用于创建超链接，使用 <code>&lt;a&gt;</code> 标签。</p>
    <a href="https://www.example.com">点击这里访问 Example 网站</a>

    <!-- 图像元素 -->
    <h2>图像元素</h2>
    <p>图像元素用于在网页中嵌入图片，使用 <code>&lt;img&gt;</code> 标签。</p>
    <img src="https://www.example.com/image.jpg" alt="示例图片">

    <!-- 列表元素 -->
    <h2>列表元素</h2>
    <p>HTML 支持有序列表和无序列表。</p>
    <ul>
        <li>无序列表项 1</li>
        <li>无序列表项 2</li>
        <li>无序列表项 3</li>
    </ul>
    <ol>
        <li>有序列表项 1</li>
        <li>有序列表项 2</li>
        <li>有序列表项 3</li>
    </ol>
</body>
</html>

解释说明

DOCTYPE 声明：<!DOCTYPE html> 声明文档类型为 HTML5。
HTML 结构：
- <html> 标签是 HTML 文档的根元素。
- <head> 包含文档的元数据（如标题、样式等）。
- <body> 包含文档的主体内容。
标题元素：<h1> 到 <h6> 用于定义不同级别的标题。
段落元素：<p> 用于定义段落。
链接元素：<a> 用于创建超链接，href 属性指定链接的目标 URL。
图像元素：<img> 用于嵌入图片，src 属性指定图片的 URL，alt 属性提供替代文本。
列表元素：<ul> 和 <ol> 分别用于创建无序列表和有序列表，<li> 定义列表项。

以上代码展示了 HTML 的一些基本元素及其用法。

上一篇：html代码转换

下一篇：html排版