HTML简介

HTML语法基础

HTML文档结构

HTML标签属性

文档类型定义

HTML语法规则

文本基础

标题与段落

文本格式化

列表

链接

图像

表格

多媒体

表单基础

表单进阶

表单验证

表单样式

语义化标签

HTML5新特性

HTML5文本语义

Canvas绘图

SVG图形

Web存储

IndexedDB

Web Workers

地理位置API

拖放API

历史记录API

剪贴板API

拖放API中级

WebSockets

通知API

全屏API

剪贴板API进阶

文件API

拖放API进阶

CSS集成基础

CSS选择器

CSS盒模型

CSS布局技术

响应式设计

代码规范

可访问性

Web安全

隐私保护

个人网站项目

博客系统项目

电商网站项目

社交平台项目

开发工具

版本控制

包管理器

构建工具

Web Components

PWA渐进式应用

WebAssembly

性能优化

Web发展趋势

AI与Web

Web安全未来

Web技术展望

HTML语法规则

语法规则概述

HTML语法规则定义了如何正确编写HTML文档。遵循这些规则可以确保代码的可读性、可维护性和兼容性。

东巴文（db-w.cn） 认为：良好的语法习惯是高质量代码的基础，就像建筑的地基一样重要。

基本语法规则

规则1：标签必须正确嵌套

<!-- ✅ 正确：正确嵌套 -->
<div>
    <p>
        <strong>粗体文本</strong>
    </p>
</div>

<!-- ❌ 错误：错误嵌套 -->
<div>
    <p>
        <strong>粗体文本
    </p>
</strong>
</div>

东巴文说明：

标签必须按正确的顺序关闭
先打开的标签后关闭，后打开的标签先关闭
遵循"先进后出"原则

规则2：标签名使用小写

<!-- ✅ 推荐：小写标签名 -->
<div class="container">
    <p>段落文本</p>
</div>

<!-- ❌ 不推荐：大写标签名 -->
<DIV CLASS="container">
    <P>段落文本</P>
</DIV>

东巴文说明：

HTML5不强制要求小写，但推荐使用小写
XHTML要求必须小写
小写更易读、更统一

规则3：属性名使用小写

<!-- ✅ 推荐：小写属性名 -->
<div class="container" id="main"></div>

<!-- ❌ 不推荐：大写属性名 -->
<div CLASS="container" ID="main"></div>

规则4：属性值必须加引号

<!-- ✅ 推荐：属性值加引号 -->
<div class="container" id="main"></div>
<a href="https://db-w.cn">东巴文</a>

<!-- ❌ 不推荐：属性值不加引号 -->
<div class=container id=main></div>
<a href=https://db-w.cn>东巴文</a>

东巴文说明：

推荐使用双引号
单引号也是合法的
属性值包含空格时必须加引号

规则5：布尔属性的写法

<!-- ✅ 推荐：布尔属性简写 -->
<input type="text" disabled>
<input type="checkbox" checked>
<option selected>选中项</option>

<!-- ✅ 也可以：完整写法 -->
<input type="text" disabled="disabled">
<input type="checkbox" checked="checked">
<option selected="selected">选中项</option>

东巴文说明：

布尔属性存在即为true
推荐使用简写形式
不存在即为false

规则6：自闭合标签的写法

<!-- ✅ HTML5写法：不需要斜杠 -->
<img src="image.jpg" alt="图片">
<br>
<hr>
<input type="text">

<!-- ✅ XHTML写法：需要斜杠 -->
<img src="image.jpg" alt="图片" />
<br />
<hr />
<input type="text" />

东巴文说明：

HTML5不强制要求斜杠
XHTML要求必须有斜杠
推荐使用HTML5写法

规则7：特殊字符必须转义

<!-- ✅ 正确：特殊字符转义 -->
<p>价格：100 &lt; 200</p>
<p>版权所有 &copy; 2024 东巴文</p>
<p>使用 &lt;div&gt; 标签</p>

<!-- ❌ 错误：特殊字符未转义 -->
<p>价格：100 < 200</p>
<p>使用 <div> 标签</p>

东巴文常见转义字符：

字符	转义代码	说明
<	`<`	小于号
>	`>`	大于号
&	`&`	和号
"	`"`	双引号
'	`'`	单引号
©	`©`	版权符号
®	`®`	注册商标
™	`™`	商标符号
空格	` `	不换行空格
¥	`¥`	人民币符号

规则8：注释的正确写法

<!-- ✅ 正确：HTML注释 -->
<!-- 这是单行注释 -->

<!--
    这是多行注释
    可以跨越多行
-->

<!-- ❌ 错误：注释中包含双横线 -->
<!-- 这是--错误的注释 -->

<!-- ❌ 错误：注释嵌套 -->
<!-- 外层注释 <!-- 内层注释 --> -->

东巴文说明：

注释以结束
注释内容不能包含--
注释不能嵌套

文档结构规则

规则9：必须声明DOCTYPE

<!-- ✅ HTML5文档类型声明 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    页面内容
</body>
</html>

东巴文说明：

DOCTYPE必须放在文档最前面
HTML5的DOCTYPE声明简洁明了
确保浏览器以标准模式渲染

规则10：必须设置字符编码

<!-- ✅ 推荐：UTF-8编码 -->
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>

<!-- ✅ 也可以：完整写法 -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>页面标题</title>
</head>

东巴文说明：

推荐使用UTF-8编码
字符编码声明应放在<head>标签内的最前面
避免乱码问题

规则11：必须设置语言属性

<!-- ✅ 推荐：设置语言属性 -->
<html lang="zh-CN">

<!-- ✅ 英文页面 -->
<html lang="en">

<!-- ✅ 日文页面 -->
<html lang="ja">

东巴文说明：

提升可访问性
帮助搜索引擎理解内容
浏览器拼写检查

规则12：必须设置viewport

<!-- ✅ 移动端适配 -->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式页面</title>
</head>

东巴文说明：

确保移动端正确显示
响应式设计的基础
避免缩放问题

语义化规则

规则13：使用语义化标签

<!-- ✅ 推荐：语义化标签 -->
<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h1>文章标题</h1>
        <p>文章内容</p>
    </article>
</main>

<footer>
    <p>版权所有 &copy; 2024 东巴文</p>
</footer>

<!-- ❌ 不推荐：非语义化标签 -->
<div class="header">
    <div class="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <div class="article">
        <h1>文章标题</h1>
        <p>文章内容</p>
    </div>
</div>

<div class="footer">
    <p>版权所有 &copy; 2024 东巴文</p>
</div>

东巴文说明：

使用合适的语义化标签
提升可访问性
有助于SEO优化
代码更易读、易维护

规则14：标题标签层级正确

<!-- ✅ 推荐：标题层级正确 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

<!-- ❌ 不推荐：跳过层级 -->
<h1>一级标题</h1>
<h3>三级标题</h3> <!-- 跳过了h2 -->

<!-- ❌ 不推荐：标题用于样式 -->
<h1 style="font-size: 14px;">小号文本</h1>

东巴文说明：

标题按层级递进，不要跳过
每个页面通常只有一个<h1>
标题用于结构，不是用于样式

规则15：列表标签正确使用

<!-- ✅ 推荐：有序列表 -->
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!-- ✅ 推荐：无序列表 -->
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>

<!-- ✅ 推荐：定义列表 -->
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

<!-- ❌ 不推荐：使用div模拟列表 -->
<div class="list">
    <div class="item">项目一</div>
    <div class="item">项目二</div>
    <div class="item">项目三</div>
</div>

可访问性规则

规则16：图片必须有alt属性

<!-- ✅ 推荐：有alt属性 -->
<img src="image.jpg" alt="示例图片">

<!-- ✅ 装饰性图片：空alt -->
<img src="decorative.jpg" alt="">

<!-- ❌ 不推荐：缺少alt属性 -->
<img src="image.jpg">

东巴文说明：

alt属性提供图片的文本描述
图片无法显示时显示alt文本
屏幕阅读器会读取alt文本
装饰性图片使用空alt

规则17：表单控件必须有label

<!-- ✅ 推荐：使用label标签 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- ✅ 推荐：label包裹控件 -->
<label>
    用户名：
    <input type="text" name="username">
</label>

<!-- ❌ 不推荐：缺少label -->
用户名：<input type="text" name="username">

东巴文说明：

提升表单可访问性
点击label聚焦控件
屏幕阅读器读取label

规则18：链接必须有描述性文本

<!-- ✅ 推荐：描述性文本 -->
<a href="https://db-w.cn">访问东巴文官网</a>
<a href="/about">关于我们</a>

<!-- ❌ 不推荐：无意义文本 -->
<a href="https://db-w.cn">点击这里</a>
<a href="/about">更多</a>

<!-- ❌ 不推荐：URL作为文本 -->
<a href="https://db-w.cn">https://db-w.cn</a>

东巴文说明：

链接文本应描述链接目标
避免使用"点击这里"、"更多"等无意义文本
提升可访问性和SEO

性能优化规则

规则19：CSS放在head中

<!-- ✅ 推荐：CSS放在head中 -->
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 内部样式 */
    </style>
</head>

<!-- ❌ 不推荐：CSS放在body中 -->
<body>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 内部样式 */
    </style>
</body>

东巴文说明：

CSS放在head中可以尽早加载
避免页面闪烁
提升渲染性能

规则20：JavaScript放在body末尾

<!-- ✅ 推荐：JavaScript放在body末尾 -->
<body>
    <!-- 页面内容 -->
    
    <script src="script.js"></script>
    <script>
        // 内部脚本
    </script>
</body>

<!-- ❌ 不推荐：JavaScript放在head中 -->
<head>
    <script src="script.js"></script>
</head>

东巴文说明：

JavaScript放在body末尾不阻塞页面渲染
提升页面加载速度
确保DOM已加载

规则21：使用懒加载

<!-- ✅ 推荐：图片懒加载 -->
<img src="image.jpg" alt="图片" loading="lazy">

<!-- ✅ 推荐：iframe懒加载 -->
<iframe src="page.html" loading="lazy"></iframe>

东巴文说明：

延迟加载非关键资源
提升页面加载速度
节省带宽

代码格式规则

规则22：使用一致的缩进

<!-- ✅ 推荐：使用缩进 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <div class="container">
        <header>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </nav>
        </header>
    </div>
</body>
</html>

<!-- ❌ 不推荐：没有缩进 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>

东巴文说明：

使用2空格或4空格缩进
保持缩进一致
提升代码可读性

规则23：合理使用换行

<!-- ✅ 推荐：块级元素换行 -->
<div>
    <p>段落一</p>
    <p>段落二</p>
</div>

<!-- ✅ 推荐：行内元素不换行 -->
<p>这是<strong>粗体</strong>和<em>斜体</em>文本</p>

<!-- ❌ 不推荐：过度换行 -->
<div>


    <p>段落一</p>
    
    
    <p>段落二</p>
    
    
</div>

规则24：删除不必要的空格

<!-- ✅ 推荐：无多余空格 -->
<div class="container">
    <p>段落文本</p>
</div>

<!-- ❌ 不推荐：多余空格 -->
<div  class="container" >
    <p>段落文本</p>
</div>

验证工具

在线验证工具

东巴文推荐工具：

W3C Markup Validation Service
- 网址：https://validator.w3.org/
- 功能：验证HTML代码是否符合标准
HTML5 Outliner
- 网址：https://gsnedders.html5.org/outliner/
- 功能：检查HTML文档大纲
Nu Html Checker
- 网址：https://validator.w3.org/nu/
- 功能：验证HTML5代码

浏览器开发工具

东巴文说明：

Chrome DevTools：F12打开
查看Elements面板
检查HTML结构和样式

常见错误

错误1：标签未关闭

<!-- ❌ 错误：标签未关闭 -->
<div>
    <p>段落文本

<!-- ✅ 正确：标签已关闭 -->
<div>
    <p>段落文本</p>
</div>

错误2：属性值未加引号

<!-- ❌ 错误：属性值未加引号 -->
<div class=container id=main></div>

<!-- ✅ 正确：属性值加引号 -->
<div class="container" id="main"></div>

错误3：特殊字符未转义

<!-- ❌ 错误：特殊字符未转义 -->
<p>价格：100 < 200</p>

<!-- ✅ 正确：特殊字符转义 -->
<p>价格：100 &lt; 200</p>

错误4：标签嵌套错误

<!-- ❌ 错误：标签嵌套错误 -->
<p>
    <div>块级元素</div>
</p>

<!-- ✅ 正确：标签嵌套正确 -->
<div>
    <p>段落文本</p>
</div>

错误5：缺少必要属性

<!-- ❌ 错误：缺少alt属性 -->
<img src="image.jpg">

<!-- ✅ 正确：有alt属性 -->
<img src="image.jpg" alt="图片描述">

最佳实践总结

东巴文语法法则

法则1：规范性

✅ 使用小写标签名和属性名
✅ 属性值必须加引号
✅ 标签必须正确嵌套和关闭

法则2：语义化

✅ 使用语义化标签
✅ 标题层级正确
✅ 列表标签正确使用

法则3：可访问性

✅ 图片必须有alt属性
✅ 表单控件必须有label
✅ 链接必须有描述性文本

法则4：性能优化

✅ CSS放在head中
✅ JavaScript放在body末尾
✅ 使用懒加载

法则5：代码格式

✅ 使用一致的缩进
✅ 合理使用换行
✅ 删除不必要的空格

学习检验

知识点测试

问题1：以下哪个是正确的HTML注释？

A.  B. // 注释 C. /* 注释 */ D. # 注释

<details> <summary>点击查看答案</summary>

答案：A

东巴文解释：HTML注释使用语法。B是JavaScript单行注释，C是CSS/JavaScript多行注释，D是Python/Shell注释。

</details>

问题2：以下哪个属性值写法是推荐的？

A. <div class=container> B. <div class="container"> C. <div CLASS="container"> D. <div Class='container'>

<details> <summary>点击查看答案</summary>

答案：B

东巴文解释：推荐使用小写属性名和双引号属性值。A缺少引号，C使用大写属性名，D属性名大小写不一致。

</details>

实践任务

任务：找出以下HTML代码中的所有错误并修正。

<!DOCTYPE html>
<HTML lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题
</head>
<body>
    <div class=container>
        <h1>欢迎来到东巴文
        <img src="logo.jpg">
        <p>价格：100 < 200元</p>
        <a href="#">点击这里</a>
        <!-- 注释--内容 -->
    </div>
</body>
</html>

<details> <summary>点击查看参考答案</summary>

修正后的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <div class="container">
        <h1>欢迎来到东巴文</h1>
        <img src="logo.jpg" alt="东巴文Logo">
        <p>价格：100 &lt; 200元</p>
        <a href="#">访问东巴文官网</a>
        <!-- 注释内容 -->
    </div>
</body>
</html>

东巴文错误列表：

<HTML>应改为<html>（小写）
<title>标签未关闭
class=container应改为class="container"（加引号）
<h1>标签未关闭
<img>缺少alt属性
<应转义为<
"点击这里"应改为描述性文本
注释中不能包含--

</details>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！

上一章：文档类型定义

下一章：文本基础