下面是一份可直接收藏 / 学习 / 教学使用的《HTML 网页制作代码大全（HTML 常用标记）》，覆盖最常用、最核心的 HTML 标签，并配有简要说明与示例，适合初学者到进阶。

HTML 网页制作代码大全（HTML 常用标记）

HTML（HyperText Markup Language）是网页的基础语言，通过各种**标记（标签 / Tag）**来描述网页结构和内容。

一、HTML 文档基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  页面内容写在这里

</body>
</html>

常用说明

  • <!DOCTYPE html>：声明 HTML5 文档
  • <html>：HTML 根元素
  • <head>：页面配置信息
  • <body>：页面可见内容

二、文本与排版标签（最常用）

标题标签

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

段落与换行

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

文本强调

&lt;strong>加粗（语义）&lt;/strong>
&lt;b>加粗（样式）&lt;/b>

&lt;em>斜体（语义）&lt;/em>
&lt;i>斜体（样式）&lt;/i>

&lt;u>下划线&lt;/u>
&lt;mark>高亮文本&lt;/mark>
&lt;small>小号文字&lt;/small>

三、链接与图片

超链接

&lt;a href="https://www.example.com" target="_blank">
  访问网站
&lt;/a>

常用属性：

  • href：链接地址
  • target="_blank"：新窗口打开

图片

&lt;img src="image.jpg" alt="图片说明" width="300">

常用属性：

  • src：图片路径
  • alt：图片描述（SEO 必须）
  • width / height：尺寸

四、列表标签

无序列表

&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>

自定义列表

&lt;dl>
  &lt;dt>HTML&lt;/dt>
  &lt;dd>网页结构语言&lt;/dd>
&lt;/dl>

五、表格标签

&lt;table border="1">
  &lt;tr>
    &lt;th>姓名&lt;/th>
    &lt;th>年龄&lt;/th>
  &lt;/tr>
  &lt;tr>
    &lt;td>张三&lt;/td>
    &lt;td>20&lt;/td>
  &lt;/tr>
&lt;/table>

常用标签：

  • <table> 表格
  • <tr> 行
  • <th> 表头
  • <td> 单元格

六、表单标签（非常重要）

&lt;form action="/submit" method="post">

  &lt;input type="text" placeholder="用户名">
  &lt;input type="password" placeholder="密码">

  &lt;input type="radio" name="gender"> 男
  &lt;input type="radio" name="gender"> 女

  &lt;input type="checkbox"> 同意协议

  &lt;select>
    &lt;option>北京&lt;/option>
    &lt;option>上海&lt;/option>
  &lt;/select>

  &lt;textarea rows="4">&lt;/textarea>

  &lt;button type="submit">提交&lt;/button>

&lt;/form>

常用表单控件：

  • input（text / password / radio / checkbox / file）
  • select / option
  • textarea
  • button

七、HTML5 新增语义标签（推荐）

&lt;header>头部&lt;/header>
&lt;nav>导航&lt;/nav>
&lt;main>主体内容&lt;/main>
&lt;section>区块&lt;/section>
&lt;article>文章&lt;/article>
&lt;aside>侧边栏&lt;/aside>
&lt;footer>底部&lt;/footer>

👉 有利于 SEO 和结构清晰化。

八、多媒体标签

音频

&lt;audio controls>
  &lt;source src="music.mp3" type="audio/mpeg">
&lt;/audio>

视频

&lt;video controls width="400">
  &lt;source src="video.mp4" type="video/mp4">
&lt;/video>

九、常用 HTML 属性速查

属性说明
id唯一标识
class类名
style行内样式
title鼠标提示
hidden隐藏元素
data-*自定义数据

十、HTML 学习建议

  • HTML 负责 结构
  • CSS 负责 样式
  • JavaScript 负责 交互

三者缺一不可。

十一、总结

这份《HTML 网页制作代码大全（HTML 常用标记）》覆盖了网页开发中 90% 以上的常用标签，适合：

  • HTML 初学者
  • 教学 / 培训资料
  • 速查手册 / Cheat Sheet