一、HTML基础与文档结构
-
文档声明与根元素
xml<!DOCTYPE html> <!-- 声明HTML5文档类型 --> <html lang="zh-CN"> <!-- 根元素,lang属性定义语言 --> </html>
<!DOCTYPE html>
强制浏览器使用标准模式渲染
-
头部元数据
xml<head> <meta charset="UTF-8"> <!-- 字符编码 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计 --> <title>网页标题</title> <!-- 浏览器标签页显示 --> <link rel="stylesheet" href="styles.css"> <!-- 外部CSS --> </head>
viewport
是移动端适配关键属性
-
主体内容容器
xml<body> <!-- 所有可见内容 --> </body>
二、文本内容与格式化
-
标题与段落
xml<h1>主标题</h1> <!-- 一个页面建议只有一个h1 --> <h2>二级标题</h2> <p>段落文本,自动带上下边距</p>
-
文本修饰标签
xml<strong>重要文本(加粗)</strong> <!-- 语义化强调 --> <em>强调文本(斜体)</em> <del>删除线文本</del> <u>下划线文本</u> H<sub>2</sub>O <!-- 下标 --> 10<sup>2</sup> <!-- 上标 -->
-
特殊符号
xml <!-- 空格 --> < <!-- < --> > <!-- > --> © <!-- © -->
三、多媒体嵌入
-
图像
ini<img src="image.jpg" alt="图片描述" loading="lazy">
alt
为无障碍访问必需属性,loading="lazy"
启用懒加载
-
音频与视频
bash<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> <video controls width="600" poster="preview.jpg"> <source src="video.mp4" type="video/mp4"> </video>
- HTML5原生支持媒体播放,无需插件
四、列表与表格
-
有序/无序列表
xml<ul> <li>项目一</li> <li>项目二</li> </ul> <ol type="A" start="3"> <!-- 从C开始的大写字母列表 --> <li>第一项</li> </ol>
-
表格结构
xml<table border="1"> <tr> <th>姓名</th> <!-- 表头 --> <th>年龄</th> </tr> <tr> <td>张三</td> <td>25</td> </tr> </table>
五、表单与用户输入
-
表单容器
ini<form action="/submit" method="POST"> <label for="username">用户名:</label> <input type="text" id="username" name="user" required> </form>
-
输入控件
xml<input type="email" placeholder="邮箱"> <!-- 邮箱验证 --> <input type="date"> <!-- 日期选择器 --> <input type="range" min="0" max="100"> <!-- 滑块 --> <textarea rows="4"></textarea> <!-- 多行文本 --> <select> <option value="bj">北京</option> </select>
- HTML5新增输入类型增强用户体验
六、HTML5语义化布局
css
<header>网站头部</header>
<nav>导航栏</nav>
<main>
<article>独立内容(如博客文章)</article>
<aside>侧边栏</aside>
</main>
<section>内容区块</section>
<footer>页脚信息</footer>
-
优势:
-
提升SEO友好性
-
改善无障碍访问
-
代码可读性更强
-
七、超链接与资源
-
基础链接
ini<a href="https://example.com" target="_blank">在新标签页打开</a>
-
功能链接
xml<a href="tel:13800138000">电话联系</a> <a href="mailto:contact@example.com">发送邮件</a> <a href="#section-id">跳转到章节</a> <!-- 锚点链接 -->
八、元数据与脚本
-
CSS集成方式
xml<!-- 内联样式 --> <p style="color:red;">红色文本</p> <!-- 内部样式表 --> <style> body { margin:0; } </style> <!-- 外部样式表 --> <link rel="stylesheet" href="styles.css">
-
JavaScript集成
xml<!-- 内嵌脚本 --> <script> alert('页面加载!'); </script> <!-- 外部脚本 --> <script src="app.js" defer></script>
defer
属性确保脚本在DOM解析后执行
九、注释与调试
xml
<!-- 这行注释不会显示在浏览器中 -->
<!--
多行注释
用于代码说明或临时禁用代码块
-->
- 快捷键:VS Code中按
Ctrl+/
快速注释
十、现代开发实践
-
响应式图像
ini<picture> <source media="(min-width:800px)" srcset="large.jpg"> <img src="small.jpg" alt="响应式图片"> </picture>
-
语义化微数据
ini<div itemscope itemtype="https://schema.org/Person"> 姓名:<span itemprop="name">张三</span> </div>
- 帮助搜索引擎理解内容结构
完整HTML5文档示例:
xml
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>现代HTML示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>网站标题</h1>
<nav>
<a href="#home">首页</a>
<a href="#news">新闻</a>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这是<mark>重点内容</mark></p>
</article>
</main>
<footer>
<p>© 2025 公司名称</p>
</footer>
<script src="app.js"></script>
</body>
</html>