html代码大全必背：HTML代码大全必背，从基础到进阶的必备标签与属性
HTML文档基本结构
<!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>
<!-- 页面内容 -->
</body>
</html> <!DOCTYPE html>：声明文档类型为HTML5。<html lang="zh-CN">：根元素，lang属性指定语言。<head>：包含元数据、标题、链接等。<meta charset="UTF-8">：指定字符编码。<meta name="viewport"...>：响应式设计必备，控制移动设备的显示，`：网页标题,显示在浏览器标签页上。<body>：网页主体内容。
文本标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 段落 -->
<p>这是一个段落。</p>
<!-- 强调文本 -->
<strong>加粗文本</strong>
<em>斜体文本</em>
<!-- 换行 -->
<br>
<!-- 水平线 -->
<hr>图片与媒体
<!-- 图片 -->
<img src="image.jpg" alt="图片描述" width="500" height="300">
<!-- 视频 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持视频标签。
</video>
<!-- 音频 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频标签。
</audio> 链接与锚点
<!-- 超链接 --> <a href="https://www.example.com" target="_blank">访问示例网站</a> <!-- 锚点链接 --> <a href="#section1">跳转到章节1</a> <!-- 定义锚点 --> <h2 id="section1">章节1</h2>
列表
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
<!-- 定义列表项 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl> 表格
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
</table> 表单
<form action="/submit" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"><br><br>
<label for="gender">性别：</label>
<input type="radio" id="male" name="gender" value="male">男
<input type="radio" id="female" name="gender" value="female">女<br><br>
<label for="hobby">爱好：</label>
<input type="checkbox" id="reading" name="hobby" value="reading">阅读
<input type="checkbox" id="sports" name="hobby" value="sports">运动<br><br>
<label for="country">国家：</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="japan">日本</option>
</select><br><br>
<input type="submit" value="提交">
</form> 语义化标签（HTML5）
<header>
<h1>网站标题</h1>
</header>
<nav>
<a href="#">首页</a> | <a href="#">lt;/a> | <a href="#">联系</a>
</nav>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>版权所有 © 2023</p>
</footer> CSS内联与属性
<!-- 内联样式 -->
<p style="color: red; font-size: 20px;">这是一段红色的文字。</p>
<!-- 样式属性 -->
<div style="background-color: #f0f0f0; padding: 20px;">
这是一个带样式的盒子。
</div> 事件处理
<button onclick="alert('按钮被点击了！')">点击我</button>
<input type="button" value="点击" onclick="showMessage()">
<script>
function showMessage() {
alert('Hello World!');
}
</script> 小贴士：如何高效学习HTML？
- 从基础开始：先掌握文档结构、文本、链接、列表等基础标签。
- 多练习：通过实际项目练习,巩固知识点。
- 使用工具：利用浏览器的开发者工具（F12）查看HTML结构。
- 参考文档：遇到问题时,查阅W3C官方文档。
HTML是前端开发的基石，熟练掌握这些代码是构建网页的第一步，希望本文能帮助你快速掌握HTML的核心知识,为后续学习CSS和JavaScript打下坚实基础！
文章已关闭评论！
