第一类：基础结构标签（网页的骨架）

这些标签是任何一个 HTML 页面都不可或缺的,它们定义了文档的基本结构。

dw网页制作HTML的标签有哪些
（图片来源网络，侵删）
标签名 英文名 描述和用法示例
<!DOCTYPE html> Document Type 不是标签，但必须放在最前面，它告诉浏览器这个文档是 HTML5 版本的。
<html> Root 整个 HTML 文档的根元素，包裹着页面上所有的其他内容。
<head> Head 文档的“头部”，包含页面的元数据（metadata），这些数据不会直接显示在页面上，但浏览器会使用它们。
<meta> Metadata 定义页面的元信息，如字符集、视口、关键词、描述等。
<body> Body 文档的“主体”，包含所有要在网页上显示给用户看的内容，如文本、图片、链接等。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我的第一个段落。</p>
</body>
</html>

第二类：文本内容标签（内容的“血肉”）

这些标签用于定义不同类型的文本内容，让页面内容更有层次和意义。 | 标签名 | 描述和用法示例 | | :--- | :--- | | <h1> 到 <h6> | 定义了 6 个级别的标题。<h1> 是最重要的标题（通常用于页面主标题），<h2> 次之，以此类推。注意： 应该按顺序使用，不要跳级。 | | <h1>主标题</h1> | | | <h2>副标题</h2> | | | <h3>三级标题</h3> | |

段落和格式

标签名 描述和用法示例
<p> 定义一个段落，浏览器会自动在段落前后添加一些空白。
<br> 换行标签（单标签），强制文本换行，但它不产生新的段落。
<hr> 水平分割线（单标签），创建一条水平线，用于分隔内容。
<strong> 或 <b> 加粗文本。<strong> 表示文本重要性更高（语义化），<b> 只是视觉上的加粗。
<em> 或 <i> 斜体文本。<em> 表示文本有强调语气（语义化），<i> 只是视觉上的斜体。
<span> 器，没有特定的语义，用于组合文档中的行内元素，以便用 CSS 对它们进行样式设置。
<blockquote> 定义一个长引用（块级引用），浏览器通常会对其进行缩进。
<q> 定义一个短引用（行内引用），浏览器通常会为其添加引号。

第三类：列表标签（组织信息）

用于创建有序或无序列表，非常适合展示清单、目录等结构化信息。

标签名 描述和用法示例
<ul> 无序列表（Unordered List），列表项前通常显示为圆点或方块。
<ol> 有序列表（Ordered List），列表项前通常显示为数字或字母。
<li> 列表项（List Item），用于定义列表中的每一个项目，放在 <ul> 或 <ol> 内部。

示例：

dw网页制作HTML的标签有哪些
（图片来源网络，侵删）
<!-- 无序列表 -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一步：打开冰箱门</li>
    <li>第二步：把大象放进去</li>
    <li>第三步：关上冰箱门</li>
</ol>

第四类：链接和媒体标签（丰富页面）

链接

标签名 描述和用法示例
<a> 超链接（Anchor），用于从一个页面链接到另一个页面、文件、页面内的某个位置、邮箱地址等。
<a href="https://www.example.com">访问 Example</a>
<a href="mailto:someone@example.com">给我发邮件</a>
<a href="#section2">跳转到第二节</a>

图片

标签名 描述和用法示例
<img> 图片（Image），一个单标签，用于在页面上嵌入图片。
<img src="image.jpg" alt="图片描述">
src 属性：指定图片的路径。
alt 属性：非常重要！为图片提供替代文本，当图片无法显示时，会显示这段文字，同时也有利于搜索引擎和屏幕阅读器。

视频/音频

标签名 描述和用法示例
<video> 视频，嵌入视频内容。
<video width="320" controls> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
controls 属性：显示播放控件。
<audio> 音频，嵌入音频内容。
<audio controls> <source src="sound.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 标签。 </audio>

第五类：表格和表单标签（数据输入与展示）

表格

标签名 描述和用法示例
<table> 定义一个表格。
<tr> 表格中的行（Table Row）。
<td> 表格单元格中的数据（Table Data）。
<th> 表格中的表头单元格（Table Header），通常会加粗并居中。
<thead> 表格的表头部分。
<tbody> 表格的主体部分。
<tfoot> 表格的页脚部分。

表单

表单是用户与网站交互的核心。

标签名 描述和用法示例
<form> 定义一个 HTML 表单，用于收集用户输入。
<input> 输入控件，根据 type 属性的不同，可以是文本框、密码框、单选按钮、复选框、提交按钮等。
<button> 定义一个可点击的按钮。
<textarea> 定义一个多行的文本输入区域（文本域）。
<select> 定义一个下拉列表。
<option> 定义下拉列表中的一个选项，放在 <select> 内部。
<label> 为表单元素定义标签标签，点击标签，关联的表单元素会获得焦点，这对可访问性很重要。

示例：

<form action="/submit" method="post">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username">
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
    <label for="gender">性别:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
    <label for="hobbies">爱好:</label>
    <input type="checkbox" id="reading" name="hobbies" value="reading">
    <label for="reading">阅读</label>
    <input type="checkbox" id="sports" name="hobbies" value="sports">
    <label for="sports">运动</label>
    <button type="submit">提交</button>
</form>

第六类：语义化布局标签（HTML5 新增）

HTML5 引入了一系列新的语义化标签，它们让代码结构更清晰，更容易被搜索引擎和开发者理解，在 Dreamweaver 的“插入”面板中通常有这些标签的快捷按钮。

标签名 描述和用法示例
<header> 定义文档或节的页眉，通常包含导航、logo 等。
<nav> 定义导航链接的部分。
<main> 定义文档的主要内容，一个页面中只应有一个 <main>。
<article> 定义独立的、完整的内容，如博客文章、新闻故事。
<section> 定义文档中的节（section），比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义页面内容之外的内容（侧边栏）。
<footer> 定义文档或节的页脚，通常包含版权信息、联系方式等。

示例：

dw网页制作HTML的标签有哪些
（图片来源网络，侵删）
<body>
    <header>
        <h1>网站标题</h1>
        <nav>导航菜单</nav>
    </header>
    <main>
        <section>
            <h2>文章标题</h2>
            <article>这是一篇文章的内容...</article>
        </section>
        <aside>侧边栏，相关链接等...</aside>
    </main>
    <footer>
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>
类别 核心标签
基础结构 <!DOCTYPE html>, <html>, <head>, <title>, <body>
<h1>-<h6>, <p>, <br>, <strong>, <em>, <span>
列表 <ul>, <ol>, <li>
链接媒体 <a>, <img>, <video>, <audio>
表格表单 <table>, <tr>, <td>, <th>, <form>, <input>, <button>
语义布局 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>

在 Dreamweaver 中，你可以通过其插入面板（Insert Panel）轻松地找到并插入这些标签，它会自动为你生成正确的 HTML 代码结构，理解这些标签的含义和用法是制作网页的第一步,也是最重要的一步。