当然!这里帮你整理一份 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>版权所有 © 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 基础代码示例
- 网页响应式布局示例
随时告诉我!
发表回复