html网页制作代码大全(html常用标记)

lichongyang

2 周前

HTML（超文本标记语言）是构建网页的基础，理解 HTML 的常用标记和如何使用它们对于开发网页至关重要。以下是一个详细的 HTML 常用标记大全，涵盖了网页制作中最常用的标签及其示例。

1. 文档类型与结构

1.1 DOCTYPE

&lt;!DOCTYPE html>

用途：声明 HTML5 文档类型，告诉浏览器使用 HTML5 渲染页面。

1.2 HTML 文档结构

&lt;html lang="zh">
  &lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>网页标题&lt;/title>
  &lt;/head>
  &lt;body>
    &lt;h1>欢迎访问我的网站！&lt;/h1>
    &lt;p>这是我的第一个网页。&lt;/p>
  &lt;/body>
&lt;/html>

说明：
- <head>：包含页面的元数据、标题、链接和其他资源。
- <body>：网页的主体内容。

2. 文本标签

2.1 标题标签

&lt;h1>主标题&lt;/h1>
&lt;h2>副标题&lt;/h2>
&lt;h3>三级标题&lt;/h3>
&lt;h4>四级标题&lt;/h4>
&lt;h5>五级标题&lt;/h5>
&lt;h6>六级标题&lt;/h6>

说明：<h1> 至 <h6> 用于定义网页中的不同级别标题，<h1> 是最重要的标题。

2.2 段落标签

&lt;p>这是一个段落。&lt;/p>

说明：<p> 标签用于定义段落。

2.3 换行标签

&lt;p>这是第一行。&lt;br>这是第二行。&lt;/p>

说明：<br> 用于在段落中插入换行。

2.4 加粗与斜体

&lt;strong>加粗文本&lt;/strong>
&lt;em>斜体文本&lt;/em>

说明：
- <strong>：强调文本，通常加粗。
- <em>：强调文本，通常斜体。

2.5 超链接标签

&lt;a href="https://www.example.com">点击这里访问 Example 网站&lt;/a>

说明：<a> 用于创建超链接，href 属性指定链接目标。

2.6 列表标签

无序列表

&lt;ul>
  &lt;li>苹果&lt;/li>
  &lt;li>香蕉&lt;/li>
  &lt;li>橙子&lt;/li>
&lt;/ul>

有序列表

&lt;ol>
  &lt;li>第一项&lt;/li>
  &lt;li>第二项&lt;/li>
  &lt;li>第三项&lt;/li>
&lt;/ol>

说明：
- <ul>：无序列表，常用项目符号表示。
- <ol>：有序列表，常用于编号的项目。
- <li>：列表项。

2.7 定义列表

&lt;dl>
  &lt;dt>HTML&lt;/dt>
  &lt;dd>超文本标记语言&lt;/dd>
  &lt;dt>CSS&lt;/dt>
  &lt;dd>层叠样式表&lt;/dd>
&lt;/dl>

说明：<dl> 用于定义列表，<dt> 是定义术语，<dd> 是定义的内容。

3. 表格标签

3.1 表格

&lt;table>
  &lt;tr>
    &lt;th>姓名&lt;/th>
    &lt;th>年龄&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>张三&lt;/td>
    &lt;td>25&lt;/td>
  &lt;/tr>
  &lt;tr>
    &lt;td>李四&lt;/td>
    &lt;td>30&lt;/td>
  &lt;/tr>
&lt;/table>

说明：
- <table>：定义表格。
- <tr>：表格行。
- <th>：表格头部单元格，默认加粗居中。
- <td>：表格数据单元格。

4. 表单标签

4.1 表单

&lt;form action="/submit" method="POST">
  &lt;label for="name">姓名：&lt;/label>
  &lt;input type="text" id="name" name="name">
  &lt;br>
  &lt;label for="email">邮箱：&lt;/label>
  &lt;input type="email" id="email" name="email">
  &lt;br>
  &lt;button type="submit">提交&lt;/button>
&lt;/form>

说明：
- <form>：定义表单，action 属性指定提交目标，method 属性定义表单的提交方式（如 GET 或 POST）。
- <input>：输入框，type 属性定义输入框的类型（如 text、email、password）。
- <label>：定义输入框的标签，for 属性与输入框的 id 配合使用。

5. 多媒体标签

5.1 图片

&lt;img src="image.jpg" alt="图片描述" width="300" height="200">

说明：<img> 用于嵌入图片，src 属性指定图片的路径，alt 属性为图片提供描述，width 和 height 用于设置图像的尺寸。

5.2 音频

&lt;audio controls>
  &lt;source src="audio.mp3" type="audio/mp3">
  您的浏览器不支持音频播放。
&lt;/audio>

说明：<audio> 用于嵌入音频文件，controls 属性添加播放控件，source 标签定义音频文件的路径和类型。

5.3 视频

&lt;video width="400" controls>
  &lt;source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
&lt;/video>

说明：<video> 用于嵌入视频文件，controls 属性添加播放控件，source 标签定义视频文件的路径和类型。

6. HTML5新标签

6.1 article（文章）

&lt;article>
  &lt;h2>文章标题&lt;/h2>
  &lt;p>文章内容...&lt;/p>
&lt;/article>

6.2 section（区块）

&lt;section>
  &lt;h2>关于我们&lt;/h2>
  &lt;p>这是关于我们的内容。&lt;/p>
&lt;/section>

6.3 nav（导航）

&lt;nav>
  &lt;ul>
    &lt;li>&lt;a href="#home">首页&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#about">关于&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#contact">联系方式&lt;/a>&lt;/li>
  &lt;/ul>
&lt;/nav>

6.4 header（头部）

&lt;header>
  &lt;h1>我的网站&lt;/h1>
  &lt;nav>导航栏内容&lt;/nav>
&lt;/header>

6.5 footer（页脚）

&lt;footer>
  &lt;p>&amp;copy; 2023 我的公司&lt;/p>
&lt;/footer>

7. 嵌入其他网页

7.1 iframe（内联框架）

&lt;iframe src="https://www.example.com" width="600" height="400">&lt;/iframe>

说明：<iframe> 用于嵌入其他网页。

8. HTML注释

8.1 注释

&lt;!-- 这是一个注释 -->

说明：注释不会显示在浏览器中，通常用于标记代码的说明或注释掉部分代码。

总结

以上是 HTML 中常用标签的一个汇总。通过掌握这些常见的 HTML 标记，您可以轻松地创建和设计网页。HTML 是构建网页的基础，但要实现网页的美观和互动功能，还需要配合 CSS（样式表）和 JavaScript（脚本语言）使用。希望这份总结能够帮助您在 HTML 学习和网页开发中更加得心应手。