HTML终极指南：从基础到HTML5新特性全覆盖-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

关键标签解析：
- <!DOCTYPE html>：声明文档类型为HTML5。
- <meta charset="UTF-8">：指定字符编码，避免乱码。
- <meta name="viewport">：适配移动端，确保页面自适应。

二、开发环境搭建（VSCode高效配置）

2.1 VSCode安装与优化

下载安装：VSCode官网，选择对应系统版本。
必装插件：
- Chinese Language Pack：汉化界面。
- Live Server：实时预览（保存自动刷新）。
- Prettier：代码自动格式化。

2.2 快捷键与效率技巧

快速生成HTML骨架：输入!后按Tab键。
多光标编辑：按住Alt点击不同位置。
默认浏览器设置：
在VSCode配置中添加：
```
"open-in-browser.default": "chrome"
```

三、HTML标签全解析（含代码实战）

3.1 排版标签

标签	作用	属性示例
`<p>`	段落	`align="center"`（居中）
`<br>`	换行	单标签，无需闭合
`<hr>`	水平线	`size="3" color="#ff0000"`
`<div>`	块级容器	`<div style="border:1px solid">`
`<span>`	行内容器	`<span class="highlight">`

示例：

<p align="center">居中段落</p>
<hr size="2" color="blue">
<div>区块1</div><div>区块2（自动换行）</div>
<span>行内1</span><span>行内2（不换行）</span>

3.2 文本与字体标签

基础格式化：

<b>加粗</b> | <i>斜体</i> | <u>下划线</u> | <del>删除线</del>

字体控制（HTML5已弃用<font>，推荐CSS）：

<font face="楷体" size="5" color="green">传统字体标签</font>

3.3 列表标签

有序列表：

<ol type="I" start="3">
  <li>项目A（罗马数字III开始）</li>
  <li>项目B</li>
</ol>

无序列表：

<ul type="square">
  <li>苹果</li>
  <li>香蕉（方块符号）</li>
</ul>

3.4 图像与超链接

图像标签：
```
<img src="logo.png" alt="网站Logo" title="悬停提示" width="200" align="right">
```
- 属性详解：
  - alt：图片加载失败时显示的文字。
  - title：鼠标悬停提示信息。

超链接：

<a href="https://lagou.com" target="_blank">在新标签页打开</a>
<a href="mailto:contact@example.com">发送邮件</a>

3.5 表格标签

<table border="1" cellspacing="0" align="center">
  <tr>
    <th>姓名</th>
    <th colspan="2">联系方式</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>电话：123</td>
    <td rowspan="2">共用邮箱</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>电话：456</td>
  </tr>
</table>

关键属性：
- colspan：跨列合并。
- rowspan：跨行合并。

3.6 表单标签

<form action="/submit" method="POST">
  <!-- 输入框 -->
  <input type="text" name="username" placeholder="用户名" maxlength="10">
  <!-- 密码框 -->
  <input type="password" name="pwd">
  <!-- 单选与多选 -->
  <input type="radio" name="gender" value="male" checked> 男
  <input type="checkbox" name="hobby" value="read"> 阅读
  <!-- 下拉框 -->
  <select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected>上海</option>
  </select>
  <!-- 文件上传 -->
  <input type="file" name="avatar">
  <!-- 提交按钮 -->
  <input type="submit" value="注册">
</form>

注意事项：
- 单选框需设置相同name以实现互斥。
- 表单控件必须包含name属性，否则数据无法提交。

四、HTML5革命性新特性

4.1 语义化标签

标签	用途	示例
`<header>`	页眉/顶部区域	`<header>网站Logo</header>`
`<nav>`	导航栏	`<nav><a href="#">首页</a></nav>`
`<article>`	独立内容区块	`<article>博客正文</article>`
`<footer>`	页脚/底部信息	`<footer>版权声明</footer>`

示例布局：

<body>
  <header>网站标题</header>
  <nav>导航链接</nav>
  <article>主体内容</article>
  <footer>联系方式</footer>
</body>

4.2 媒体支持

视频播放：

<video src="video.mp4" controls autoplay muted loop width="600">
  您的浏览器不支持视频标签
</video>

音频播放：

<audio src="music.mp3" controls></audio>

4.3 增强表单控件

<input type="color" name="favcolor"> <!-- 颜色选择 -->
<input type="date" name="birthday"> <!-- 日期选择 -->
<input type="range" min="0" max="100"> <!-- 滑块 -->
<input type="search" placeholder="搜索内容"> <!-- 搜索框 -->