什么是HTML？

HTML（超文本标记语言）是用于创建网页的标准标记语言。它描述了网页的结构，由一系列元素组成，这些元素告诉浏览器如何显示内容。

提示： HTML不是编程语言，而是一种标记语言，用于定义网页内容的结构。

HTML的历史发展

HTML由Tim Berners-Lee于1991年创建，经历了多个版本的发展：

HTML 1.0 - 1993年发布，最基本的HTML规范
HTML 2.0 - 1995年发布，成为互联网标准
HTML 3.2 - 1997年发布，W3C推荐标准
HTML 4.01 - 1999年发布，引入了样式表和脚本
XHTML 1.0 - 2000年发布，基于XML的HTML
HTML5 - 2014年发布，现代Web标准
HTML5.1、HTML5.2 - 后续改进版本

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>
                    

HTML元素解析

HTML元素由开始标签、内容和结束标签组成：

<tagname>内容</tagname>

例如：

<h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://example.com">这是一个链接</a>

注意： 某些HTML元素没有结束标签，如<br>、<img>和<input>，这些称为空元素。

HTML基本标签

标题标签

HTML提供了6个级别的标题标签，从<h1>到<h6>：

                        标题标签示例
                    

                        <h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
                    

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

标题标签的最佳实践

每个页面应该只有一个<h1>标签
标题应该按层级顺序使用，不要跳过级别
标题应该描述其下方内容的主题
标题对SEO和可访问性都很重要

段落标签

使用<p>标签定义段落：

                        段落标签示例
                    
                        <p>这是一个段落。</p>
<p>这是另一个段落。</p>

这是一个段落。

这是另一个段落。

链接标签

使用<a>标签创建超链接：

                        链接标签示例
                    
                        <a href="https://www.example.com">访问示例网站</a>

访问示例网站

链接类型

绝对URL：href="https://www.example.com/page.html"
相对URL：href="page.html"或href="../folder/page.html"
页面内锚点：href="#section"
邮件链接：href="mailto:email@example.com"
电话链接：href="tel:+1234567890"

图像标签

使用<img>标签插入图像：

                        图像标签示例
                    
                        <img src="image.jpg" alt="图片描述" width="300" height="200">

最佳实践： 始终为图像提供alt属性，这对可访问性和SEO都很重要。

其他基本标签

标签	描述	示例
`<br>`	换行	`第一行<br>第二行`
`<hr>`	水平分割线	`<hr>`
`<div>`	块级容器	`<div>内容</div>`
`<span>`	内联容器	`<span>文本</span>`
`<strong>`	重要文本	`<strong>重要</strong>`
`<em>`	强调文本	`<em>强调</em>`

HTML文档类型声明

<!DOCTYPE html>声明必须位于HTML文档的第一行，告诉浏览器这是一个HTML5文档：

                        DOCTYPE声明
                    
                        <!DOCTYPE html>

DOCTYPE的历史演变

HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5: <!DOCTYPE html> (简化)

HTML注释

HTML注释不会在浏览器中显示，但可以帮助你记录代码：

                        HTML注释
                    

                        <!-- 这是一个HTML注释 -->
<!-- 
    这是多行
    HTML注释
-->
<!--[if IE]>
    这是条件注释，仅IE浏览器可见
<![endif]-->
                    

提示： 条件注释在HTML5中已不再支持，但在旧版IE中仍然有用。

HTML文档结构详解

<html>元素

HTML文档的根元素，包含整个HTML内容：

lang属性指定文档的语言
dir属性指定文本方向（ltr或rtl）

<head>元素

包含文档的元数据（metadata）：

<title> - 文档标题
<meta> - 文档元数据
<link> - 外部资源链接
<style> - 内联样式
<script> - 客户端脚本
<base> - 基础URL

<body>元素

包含文档的所有可见内容：

文本内容
图像
链接
表格
列表
表单
等所有可见元素

完整的HTML文档示例

                        完整HTML文档
                    

                        <!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="网页描述">
    <meta name="keywords" content="关键词1,关键词2">
    <meta name="author" content="作者">
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <h1>主要内容标题</h1>
    <p>段落内容...</p>
    <script src="script.js"></script>
</body>
</html>
                    

HTML语法规则

标签语法

标签名不区分大小写，但建议使用小写
属性值应该用引号包围
空元素可以自闭合
元素必须正确嵌套

属性语法

属性名不区分大小写，但建议使用小写
属性值应该用双引号包围
布尔属性可以省略值
多个属性用空格分隔

字符编码

HTML文档应该指定字符编码，通常使用UTF-8：

                        字符编码声明
                    
                        <meta charset="UTF-8">

重要： 字符编码声明应该放在<head>部分的最前面，避免出现乱码。

W3C标准与验证

W3C HTML验证器

W3C提供了在线HTML验证工具，可以检查HTML代码的合规性：

检查语法错误
验证元素嵌套
检查属性使用
确保可访问性

常见的HTML错误

未闭合的标签
错误的元素嵌套
缺失必需的属性
使用废弃的标签或属性
字符编码问题

最佳实践： 在发布网页前，使用W3C验证器检查HTML代码。

动手实践

现在尝试创建你的第一个HTML页面：

                        你的第一个HTML页面
                    

                        <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个网页！</p>
    <p>我正在学习HTML。</p>
    <h2>我的兴趣爱好</h2>
    <ul>
        <li>网页设计</li>
        <li>编程</li>
        <li>摄影</li>
    </ul>
    <h2>联系我</h2>
    <p>电子邮件: <a href="mailto:me@example.com">me@example.com</a></p>
</body>
</html>
                    

练习： 复制上面的代码到一个文本编辑器，保存为index.html，然后在浏览器中打开它。

进阶练习

创建一个包含以下元素的页面：

适当的文档结构
有意义的标题和段落
内部链接和外部链接
图像（带alt文本）
有序列表和无序列表
简单的表格

下一步学习

现在你已经了解了HTML的基础知识，下一步可以学习：

1

HTML元素

深入了解不同类型的HTML元素及其用法

继续学习

2

HTML属性

学习如何为HTML元素添加属性和值

继续学习

3

标题与段落

深入学习文本内容的结构化标记

继续学习