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语法是编写网页的基础规则。掌握正确的语法，才能编写出规范、可维护的HTML代码。

东巴文（db-w.cn） 认为：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>
    <!-- 页面内容 -->
</body>
</html>

东巴文解释：

部分	作用	东巴文说明
`<!DOCTYPE html>`	文档类型声明	📋 告诉浏览器这是HTML5文档
`<html>`	根元素	🌳 所有HTML元素的容器
`<head>`	文档头部	🧠 包含元数据、标题、样式等
`<body>`	文档主体	📄 包含可见的页面内容

文档结构示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="东巴文HTML教学">
    <meta name="keywords" content="HTML, 教程, 东巴文">
    <meta name="author" content="东巴文">
    <title>HTML语法基础 - 东巴文</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 东巴文（db-w.cn）</p>
    </footer>
</body>
</html>

标签语法

标签的基本形式

HTML标签由尖括号包围的关键词组成：

<标签名>内容</标签名>

东巴文规则：

开始标签：<标签名>
结束标签：</标签名>（在标签名前加斜杠）
内容：开始标签和结束标签之间的内容

标签类型

1. 双标签（容器标签）

<p>这是一个段落</p>
<div>这是一个容器</div>
<span>这是一个行内元素</span>

东巴文说明：双标签必须有开始和结束标签，内容放在中间。

2. 单标签（自闭合标签）

<br>
<hr>
<img src="image.jpg" alt="图片">
<input type="text">
<meta charset="UTF-8">

东巴文说明：单标签不需要结束标签，HTML5中不需要在结尾加斜杠/。

3. 可选闭合标签

某些标签的结束标签可以省略（但不推荐）：

<!-- 不推荐：省略结束标签 -->
<p>第一段
<p>第二段

<!-- 推荐：始终写结束标签 -->
<p>第一段</p>
<p>第二段</p>

东巴文建议：为了代码清晰和可维护性，始终写结束标签。

标签嵌套规则

正确的嵌套

<!-- ✅ 正确：标签正确嵌套 -->
<div>
    <p>这是一个段落</p>
</div>

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

错误的嵌套

<!-- ❌ 错误：标签交叉嵌套 -->
<div>
    <p>这是一个段落
</div>
    </p>

<!-- ❌ 错误：块级元素嵌套在行内元素中 -->
<span>
    <div>这是不允许的</div>
</span>

东巴文规则：

✅ 标签必须正确嵌套，不能交叉
✅ 块级元素可以包含行内元素
⚠️ 行内元素不能包含块级元素
⚠️ <p>标签不能包含块级元素

属性语法

属性的基本形式

<标签名 属性名="属性值">内容</标签名>

东巴文解释：

属性名：描述标签的特性
属性值：属性的具体值，用引号包围

属性示例

<!-- 单个属性 -->
<a href="https://db-w.cn">东巴文</a>

<!-- 多个属性 -->
<img src="image.jpg" alt="示例图片" width="300" height="200">

<!-- 布尔属性 -->
<input type="text" disabled>
<input type="checkbox" checked>

属性规则

1. 属性值必须加引号

<!-- ✅ 正确：使用引号 -->
<div class="container"></div>
<input type="text" value="东巴文">

<!-- ❌ 错误：不加引号（虽然浏览器能解析，但不规范） -->
<div class=container></div>

东巴文建议：始终使用引号包围属性值，推荐使用双引号。

2. 属性值中的引号

<!-- 使用单引号包围，内部可以用双引号 -->
<div title='这是"东巴文"的示例'></div>

<!-- 使用双引号包围，内部可以用单引号 -->
<div title="这是'东巴文'的示例"></div>

<!-- 使用实体引用 -->
<div title="这是&quot;东巴文&quot;的示例"></div>

3. 布尔属性

<!-- 布尔属性：存在即为true -->
<input type="text" disabled>
<input type="text" disabled="disabled">
<input type="text" disabled="">

<!-- 以上三种写法效果相同 -->

东巴文说明：布尔属性推荐使用第一种写法，简洁明了。

常用属性分类

1. 全局属性

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

属性	说明	示例
`id`	唯一标识符	`<div id="header">`
`class`	类名	`<div class="container">`
`style`	内联样式	`<div style="color: red;">`
`title`	提示文本	`<div title="提示">`
`lang`	语言代码	`<html lang="zh-CN">`
`dir`	文本方向	`<div dir="rtl">`
`hidden`	隐藏元素	`<div hidden>`
`tabindex`	Tab键顺序	`<div tabindex="1">`

2. 特定属性

某些标签特有的属性：

<!-- 链接标签 -->
<a href="https://db-w.cn" target="_blank" rel="noopener">东巴文</a>

<!-- 图片标签 -->
<img src="image.jpg" alt="图片" width="300" height="200">

<!-- 表单标签 -->
<input type="text" name="username" placeholder="请输入用户名" required>

<!-- 视频标签 -->
<video src="video.mp4" controls autoplay muted></video>

注释语法

单行注释

<!-- 这是一个注释 -->
<p>这是一个段落</p>

多行注释

<!--
    这是多行注释
    可以跨越多行
    用于详细说明
-->
<div>
    <p>内容</p>
</div>

注释的作用

东巴文建议：

代码说明

<!-- 导航栏 -->
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</nav>

临时禁用代码

<!-- 
<div class="old-content">
    这段代码暂时不需要
</div>
-->

版权信息

<!--
    作者：东巴文
    网站：https://db-w.cn
    创建时间：2024-01-01
-->

东巴文提醒：

⚠️ 注释不会显示在浏览器中
⚠️ 注释不能嵌套
⚠️ 不要在注释中包含敏感信息（注释在源码中可见）

HTML语法规则总结

东巴文语法法则

法则1：始终声明DOCTYPE

<!DOCTYPE html>

理由：确保浏览器以标准模式渲染页面。

法则2：使用小写标签和属性

<!-- ✅ 推荐 -->
<div class="container"></div>

<!-- ❌ 不推荐 -->
<DIV CLASS="container"></DIV>

理由：符合HTML5规范，代码更统一。

法则3：始终闭合标签

<!-- ✅ 推荐 -->
<p>段落</p>
<div>容器</div>

<!-- ❌ 不推荐 -->
<p>段落
<div>容器

理由：代码更清晰，避免渲染问题。

法则4：属性值加引号

<!-- ✅ 推荐 -->
<div class="container" id="main"></div>

<!-- ❌ 不推荐 -->
<div class=container id=main></div>

理由：符合规范，避免解析错误。

法则5：正确嵌套标签

<!-- ✅ 正确 -->
<div>
    <p>段落</p>
</div>

<!-- ❌ 错误 -->
<div>
    <p>段落
</div>
    </p>

理由：保证DOM结构正确。

法则6：使用语义化标签

<!-- ✅ 推荐：语义化 -->
<header></header>
<nav></nav>
<main>
    <article></article>
</main>
<footer></footer>

<!-- ❌ 不推荐：滥用div -->
<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
</div>
<div class="footer"></div>

理由：提升可访问性和SEO。

常见语法错误

错误1：忘记DOCTYPE声明

<!-- ❌ 错误：缺少DOCTYPE -->
<html>
<head>
    <title>页面</title>
</head>
<body>
    <p>内容</p>
</body>
</html>

后果：浏览器可能进入混杂模式，导致渲染异常。

东巴文解决方案：始终在文档第一行添加<!DOCTYPE html>。

错误2：标签未闭合

<!-- ❌ 错误：标签未闭合 -->
<div>
    <p>段落1
    <p>段落2
</div>

后果：可能导致布局错乱。

东巴文解决方案：始终闭合所有双标签。

错误3：属性值未加引号

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

后果：如果属性值包含空格，会导致解析错误。

东巴文解决方案：始终用引号包围属性值。

错误4：标签嵌套错误

<!-- ❌ 错误：行内元素包含块级元素 -->
<span>
    <div>这是不允许的</div>
</span>

<!-- ❌ 错误：p标签包含块级元素 -->
<p>
    <div>这也是不允许的</div>
</p>

后果：浏览器会自动修正，导致不可预期的结果。

东巴文解决方案：遵循HTML嵌套规则。

错误5：特殊字符未转义

<!-- ❌ 错误：特殊字符未转义 -->
<p>价格：100元 < 200元</p>
<p>版权所有 &copy; 2024</p>

后果：<可能被误认为标签开始，&需要转义。

东巴文解决方案：使用字符实体。

<!-- ✅ 正确：使用字符实体 -->
<p>价格：100元 &lt; 200元</p>
<p>版权所有 &copy; 2024</p>

HTML验证工具

在线验证工具

东巴文推荐：

W3C Markup Validation Service
- 网址：https://validator.w3.org/
- 功能：验证HTML文档是否符合标准
- 优点：官方权威，详细错误报告
HTML5 Outliner
- 功能：检查文档结构
- 优点：可视化文档大纲

浏览器开发者工具

// 在浏览器控制台执行
console.log(document.doctype);
console.log(document.documentElement.outerHTML);

东巴文技巧：使用浏览器开发者工具（F12）查看和调试HTML代码。

VS Code插件

推荐安装：

HTMLHint：HTML代码检查
Prettier：代码格式化
Auto Rename Tag：自动重命名配对标签

最佳实践

代码格式化

<!-- ✅ 推荐：良好的缩进 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文档标题</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </main>
    
    <footer>
        <p>&copy; 2024 东巴文（db-w.cn）</p>
    </footer>
</body>
</html>

东巴文建议：

使用2个或4个空格缩进
保持一致的代码风格
使用代码格式化工具

代码注释

<!-- 页面头部 -->
<header>
    <!-- 网站Logo -->
    <div class="logo">
        <img src="logo.png" alt="东巴文">
    </div>
    
    <!-- 主导航 -->
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
        </ul>
    </nav>
</header>

<!-- 主要内容区域 -->
<main>
    <!-- 文章列表 -->
    <section class="articles">
        <article>
            <h2>文章标题</h2>
            <p>文章内容...</p>
        </article>
    </section>
</main>

<!-- 页面底部 -->
<footer>
    <p>&copy; 2024 东巴文（db-w.cn）</p>
</footer>

学习检验

知识点测试

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

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

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

答案：C

东巴文解释：HTML使用格式，其他选项是CSS（B）、JavaScript（A、D）的注释格式。

</details>

问题2：以下哪个属性是布尔属性？

A. class B. id C. disabled D. href

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

答案：C

东巴文解释：disabled是布尔属性，存在即为true。其他属性都需要指定值。

</details>

实践任务

任务：创建一个符合HTML5语法的文档，包含以下要求：

正确的DOCTYPE声明
合适的lang属性
必要的meta标签
正确的标签嵌套
合理的注释

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="东巴文HTML语法示例">
    <meta name="author" content="东巴文">
    <title>HTML语法基础 - 东巴文</title>
</head>
<body>
    <!-- 页面头部 -->
    <header>
        <h1>东巴文</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- 主要内容 -->
    <main>
        <article>
            <h2>HTML语法基础</h2>
            <p>HTML语法是编写网页的基础规则。</p>
            <p>掌握正确的语法，才能编写出规范、可维护的HTML代码。</p>
        </article>
    </main>
    
    <!-- 页面底部 -->
    <footer>
        <p>&copy; 2024 东巴文（db-w.cn）</p>
    </footer>
</body>
</html>

</details>

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

上一章：HTML简介

下一章：HTML文档结构