当然!这里帮你整理一份 HTML 网页制作代码大全,包含最常用的 HTML 标签和示例,方便你快速查阅和使用。


HTML 常用标记代码大全


1. 基础结构

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
</head>
<body>
  <!-- 网页内容写这里 -->
</body>
</html>


2. 文字格式化标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

<p>段落文字</p>
<br> <!-- 换行 -->

<b>加粗</b>
<strong>加重强调</strong>
<i>斜体</i>
<em>强调</em>
<u>下划线</u>
<del>删除线</del>
<mark>高亮</mark>
<small>小号文字</small>


3. 超链接和图片

<a href="https://www.example.com" target="_blank">点击访问示例网站</a>

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


4. 列表标签

<!-- 无序列表 -->
<ul>
  <li>列表项一</li>
  <li>列表项二</li>
</ul>

<!-- 有序列表 -->
<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>


5. 表格标签

<table border="1" cellspacing="0" cellpadding="5">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>24</td>
      <td>设计师</td>
    </tr>
  </tbody>
</table>


6. 表单标签

<form action="/submit" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" required>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password" placeholder="请输入密码" required>

  <label for="gender">性别:</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>

  <label><input type="checkbox" name="agree" required> 我同意条款</label>

  <input type="submit" value="提交">
</form>


7. 多媒体标签

<!-- 视频 -->
<video src="movie.mp4" controls width="400"></video>

<!-- 音频 -->
<audio src="music.mp3" controls></audio>


8. 语义化标签 (HTML5)

<header>
  <h1>网站头部</h1>
</header>

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  <section>
    <h3>章节标题</h3>
    <p>章节内容...</p>
  </section>
</main>

<footer>
  <p>版权所有 &copy; 2025</p>
</footer>


9. 常用辅助标签

<!-- 注释 -->
<!-- 这是注释,浏览器不显示 -->

<!-- 水平分隔线 -->
<hr>

<!-- 换行 -->
<br>

<!-- 块引用 -->
<blockquote cite="https://www.example.com">
  这是引用内容
</blockquote>

<!-- 代码块 -->
<pre><code>
  function hello() {
    console.log("Hello, world!");
  }
</code></pre>


10. 元信息标签 (放在 head 内)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="网页描述">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="你的名字">

<title>网页标题</title>

<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>


总结

这份代码大全包含了 网页制作中最基础、最常用的 HTML 标签,掌握这些即可搭建静态网页的骨架,后续可配合 CSS、JavaScript 实现丰富交互和样式。


如果你需要,我还可以帮你整理:

  • CSS 常用样式大全
  • JavaScript 基础代码示例
  • 网页响应式布局示例

随时告诉我!