HTML语法完全指南

从基础到高级，全面掌握HTML的核心概念和语法规则，打造专业级网页

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>页面标题</title>
    <!-- 外部资源引用 -->
</head>
<body>
    <!-- 页面内容 -->
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落文本。</p>
</body>
</html>

DOCTYPE声明

<!DOCTYPE html> 声明文档类型为HTML5，位于文档的第一行。

HTML根标签

<html> 标签是HTML文档的根，所有其他标签都包含在其中。

头部与主体

<head> 包含元数据，<body> 包含可见的页面内容。

元素与标签

HTML元素由开始标签、内容和结束标签组成。了解不同类型的元素是构建网页的基础。

块级元素

块级元素独占一行，宽度默认是父元素的100%。常见的块级元素有：

<div> - 通用容器
<p> - 段落
<h1>~<h6> - 标题
<ul>, <ol>, <li> - 列表
<form> - 表单

内联元素

内联元素只占据所需的宽度，不会换行。常见的内联元素有：

<a> - 链接
<img> - 图片
<input>, <button> - 表单控件
<span> - 通用内联容器
<strong>, <em> - 文本格式化

空元素

空元素没有内容和结束标签，只需一个标签即可。常见的空元素有：

<br> - 换行

<hr> - 水平线

<img> - 图片

<input> - 输入框

<meta> - 元数据

<link> - 外部资源链接

<col> - 表格列

<wbr> - 可选换行点

HTML属性

HTML属性为元素提供额外信息，写在开始标签中，格式为 属性名="属性值"。

通用属性

所有HTML元素都可以使用的属性：

id

唯一标识元素，用于CSS和JavaScript选择器

<div id="main-content"></div>

class

为元素指定一个或多个类名，用于CSS样式

<p class="text-red bold"></p>

style

内联定义元素的CSS样式

<h1 style="color:blue;"></h1>

title

提供元素的额外信息，鼠标悬停时显示

<img src="logo.png" title="公司标志">

常用元素特定属性

某些元素特有的重要属性：

src

指定图像、脚本或媒体的路径

<img src="image.jpg">

href

指定链接的目标URL

<a href="https://example.com"></a>

alt

为图像提供替代文本，用于无障碍访问

<img src="logo.png" alt="公司标志">

disabled

禁用表单元素，使其不可用

<input type="text" disabled>

属性使用技巧

使用 aria-* 属性增强无障碍性，例如 aria-label
为图像和链接添加 target="_blank" 时，始终加上 rel="noopener noreferrer" 防止安全风险
使用 data-* 属性存储自定义数据，供JavaScript使用

文本格式化

HTML提供了多种标签用于格式化文本，包括标题、段落、强调等。

标题标签

HTML提供6个级别的标题标签，从 <h1> 到 <h6>，重要性逐级降低。

`<h1>` 一级标题

`<h2>` 二级标题

`<h3>` 三级标题

`<h4>` 四级标题

`<h5>` 五级标题

`<h6>` 六级标题

文本强调标签

HTML提供多种标签用于强调文本，每个标签有不同的语义。

<strong> - 重要文本（通常显示为粗体）

这是重要的文本

<em> - 强调文本（通常显示为斜体）

这是需要强调的文本

<mark> - 标记/高亮文本

这是被标记的文本

<small> - 次要文本

这是次要的文本

<del> - 删除文本

~~这是被删除的文本~~

<ins> - 插入文本

这是插入的文本

其他文本格式化标签

<b> - 粗体文本（无强调语义）

这是粗体文本

<i> - 斜体文本（无强调语义）

这是斜体文本

<u> - 下划线文本

这是下划线文本

<sub> - 下标文本

H₂O

<sup> - 上标文本

x² + y² = r²

<code> - 代码文本

function add(a, b) { return a + b; }

列表

HTML提供三种列表类型：无序列表、有序列表和定义列表。

无序列表

使用 <ul> 标签，每个列表项使用 <li> 标签。

项目一
项目二
- 子项目A
- 子项目B
项目三

<ul>
  <li>项目一</li>
  <li>项目二
    <ul>
      <li>子项目A</li>
      <li>子项目B</li>
    </ul>
  </li>
  <li>项目三</li>
</ul>

有序列表

使用 <ol> 标签，每个列表项使用 <li> 标签。

第一步
第二步
1. 子步骤A
2. 子步骤B
第三步

<ol>
  <li>第一步</li>
  <li>第二步
    <ol type="a">
      <li>子步骤A</li>
      <li>子步骤B</li>
    </ol>
  </li>
  <li>第三步</li>
</ol>

定义列表

使用 <dl> 标签，包含术语（<dt>）和定义（<dd>）。

HTML: 超文本标记语言
CSS: 层叠样式表
JavaScript: 网页脚本语言

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  <dt>JavaScript</dt>
  <dd>网页脚本语言</dd>
</dl>

列表使用技巧

有序列表可以通过 type 属性指定编号类型：1（默认）、A、a、I、i
无序列表可以通过CSS修改项目符号样式（list-style-type）
列表可以嵌套使用，创建复杂的结构

链接与图片

链接和图片是网页中不可或缺的元素，用于导航和展示内容。

链接

使用 <a> 标签创建链接，通过 href 属性指定目标URL。

外部链接

访问示例网站

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

内部链接

跳转到基础结构部分

<a href="#basic">跳转到基础结构部分</a>

邮件链接

发送邮件

<a href="mailto:contact@example.com">发送邮件</a>

电话链接

拨打 +1234567890

<a href="tel:+1234567890">拨打 +1234567890</a>

图片

使用 <img> 标签插入图片，通过 src 属性指定图片路径。

基本图片

示例图片

<img src="image.jpg" alt="示例图片">

响应式图片

<img src="image.jpg" alt="响应式图片" style="max-width:100%; height:auto;">

图片链接

<a href="https://www.example.com">
  <img src="image.jpg" alt="点击访问示例网站">
</a>

链接与图片最佳实践

始终为图片添加 alt 属性，提高无障碍性
外部链接使用 target="_blank" 时，添加 rel="noopener noreferrer" 防止安全风险
使用相对路径引用网站内的资源
考虑使用 <picture> 元素提供不同分辨率的图片

表格

HTML表格用于展示结构化数据，由行和列组成。

基本表格结构

姓名	年龄	职业	城市
张三	28	工程师	北京
李四	32	设计师	上海
王五	45	产品经理	广州

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>45</td>
      <td>产品经理</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

合并单元格

使用 colspan 和 rowspan 属性合并单元格。

产品信息
名称	笔记本电脑
规格	15.6英寸屏幕
规格	8GB内存，512GB SSD

表格标题与分组

使用 <caption>、<thead>、<tbody> 和 <tfoot> 标签。

2023年销售数据
季度	销售额
第一季度	¥120,000
第二季度	¥150,000
总计	¥270,000

表格使用技巧

使用 <thead>、<tbody> 和 <tfoot> 标签组织表格结构
为表格添加 <caption> 标签，提高表格的可访问性
使用 border-collapse: collapse; CSS属性合并相邻的边框
对于复杂表格，考虑使用 <colgroup> 和 <col> 标签定义列属性

表单

HTML表单用于用户输入，是网站与用户交互的重要方式。

基本表单结构

姓名

邮箱

留言

兴趣

阅读旅行摄影

性别

男女其他

国家

<form>
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name">
  </div>
  
  <div>
    <label for="email">邮箱</label>
    <input type="email" id="email">
  </div>
  
  <div>
    <label for="message">留言</label>
    <textarea id="message" rows="3"></textarea>
  </div>
  
  <div>
    <label>兴趣</label>
    <label>
      <input type="checkbox"> 阅读
    </label>
    <label>
      <input type="checkbox"> 旅行
    </label>
    <label>
      <input type="checkbox"> 摄影
    </label>
  </div>
  
  <div>
    <label>性别</label>
    <label>
      <input type="radio" name="gender"> 男
    </label>
    <label>
      <input type="radio" name="gender"> 女
    </label>
    <label>
      <input type="radio" name="gender"> 其他
    </label>
  </div>
  
  <div>
    <label for="country">国家</label>
    <select id="country">
      <option>中国</option>
      <option>美国</option>
      <option>英国</option>
      <option>其他</option>
    </select>
  </div>
  
  <button type="submit">提交</button>
</form>

表单输入类型

HTML提供多种输入类型，满足不同的输入需求。

text - 单行文本输入

password - 密码输入（隐藏显示）

number - 数字输入

date - 日期选择器

email - 邮箱输入（有格式验证）

表单验证属性

使用HTML5的验证属性，可以在客户端进行基本的表单验证。

required - 必填字段

minlength/maxlength - 最小/最大长度

min/max - 数字范围

pattern - 正则表达式验证

表单最佳实践

使用 <label> 标签关联输入控件，提高可访问性
使用HTML5验证属性进行基本验证，但不要依赖它们替代服务器端验证
为表单元素添加 name 属性，以便服务器接收数据
使用 <fieldset> 和 <legend> 标签组织相关表单元素