HTML结构详解
文档声明头
任何一个标准的HTML页面，第一行一定是一个以开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。
DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
HTML4.01有以下6种规范：
- HTML 4.01 Strict：严格模式，不允许使用任何表现性、排版或者结构性的标签和属性；
- HTML 4.01 Transitional：过度模式，允许使用一些过渡标签和属性以便与之前版本的页面兼容；
- HTML 4.01 Frameset：框架模式，专门用于页面中包含框架（frameset）的情况；
- XHTML 1.0 Strict：严格模式，要求网页符合XML的语法规范；
- XHTML 1.0 Transitional：过渡模式，允许使用一些过渡标签和属性以便与之前版本的页面兼容；
- XHTML 1.0 Frameset：框架模式，专门用于页面中包含框架（frameset）的情况。
需要注意的是，XHTML 1.0规范要求页面中所有标签必须是小写形式，并且要有开始和结束标签。而HTML 4.01对大小写并没有限制，也可以使用自闭合标签。
页面语言 lang
下面这行标签，用于指定页面的语言类型：
<html lang="en"> 最常见的语言类型有两种： en：定义页面语言为英语。 zh-CN：定义页面语言为中文
头标签 head
HTML5的比较完整的骨架：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="厉害很厉害" /> <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" /> <title>Document</title> </head> <body> </body> </html>
面试题：
问：网页的head标签里面，表示的是页面的配置，有什么配置？
答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下：
<title>：指定整个网页的标题，在浏览器最上方显示。<base>：为页面上的所有链接规定默认地址或默认目标。<meta>：提供有关页面的基本信息。<body>：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签内。<link>：定义文档与外部资源的关系。
meta标签：
<meta>表示“元”。“元”配置，就是表示基本的配置项目。
常见的几种meta标签如下：
- 字符集
charset：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta标签中的charset定义，charset就是character set（即“字符集”），即网页的编码方式。
字符集(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
上面这行代码非常关键，是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就会显示乱码。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”，我们在下一段会详细介绍。
- 视口
viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width表示视口宽度等于屏幕宽度。
视口（viewport）这个知识点，初学者还比较难理解，以后学Web移动端的时候会用到。
- 定义“关键词”：
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
这些关键词就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
- 定义“页面描述”：
meta除了可以设置字符集，还可以设置关键字和页面描述。
只要设置Description页面描述，那么百度搜索结果就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
设置页面描述的举例：
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
效果如下：
上面的几种<meta>标签都不用记，但是另外还有一个<meta>标签是需要记住的：
<meta http-equiv="refresh" content="3;http://www.baidu.com">
上面这个标签的意思是说，3秒之后自动跳转到百度页面。
<title>标签：
用于设置网页标题：
<title>网页的标题</title>
<title>标签也有助于SEO搜索引擎优化。
<base>标签：
<base href="/">
<base>标签用于指定基础的路径。指定之后，所有的a链接都是以这个路径为基准。
### <body＞标签
计算机编码
计算机编码是将字符、数字、符号等信息转换为计算机可以理解和处理的二进制形式的过程。计算机使用二进制编码来表示和存储数据。
在计算机编码中，最基本的单位是比特（bit），它可以表示0或1两种状态。多个比特组合在一起可以表示更复杂的信息。常用的比特组合单位有字节（byte），由8个比特组成，可以表示256种不同的状态。
为了能够表示不同的字符和符号，计算机采用了许多不同的编码方案。其中最常见的编码方案是ASCII（美国标准信息交换码），它使用一个字节（8个比特）来表示一个字符，包括英文字母、数字、标点符号和一些控制字符。
随着计算机的发展和国际化需求，ASCII编码无法满足所有字符的表示，于是出现了许多其他的编码方案，如GB2312、ISO-8859等。但是这些编码方案仍然只能表示有限的字符集。
为了解决字符集的扩展和统一的问题，出现了Unicode编码。Unicode采用了更大的编码空间，可以表示几乎所有的已知字符。最常用的Unicode编码方案是UTF-8，它使用可变长度的编码方式，根据字符的不同而使用不同长度的字节序列。
除了字符编码外，计算机还有其他的编码形式，如图像编码、音频编码、视频编码等，它们将图像、声音、视频等非文本数据转换为二进制形式，以便计算机进行处理和存储。
计算机编码是将信息转换为二进制形式的过程，通过不同的编码方案可以表示不同的字符和数据。这些编码方案在计算机科学和信息技术领域中起着重要的作用。
当涉及计算机编码时，还有一些重要的概念和技术需要了解：
- 字符集（Character Set）：字符集是一组字符的集合。常见的字符集包括ASCII、Unicode和UTF-8。字符集确定了可以在计算机中表示的字符范围。
- 编码方式（Encoding）：编码方式是指将字符集中的字符转换为二进制形式的规则。不同的编码方式使用不同的比特模式来表示字符。常见的编码方式有ASCII编码、UTF-8编码等。
- 压缩编码（Compression Encoding）：压缩编码是一种将数据进行压缩以减小其存储空间或传输带宽的方法。常见的压缩编码算法有gzip、zip、LZ77、LZW等。
- 错误检测与纠正编码（Error Detection and Correction Coding）：错误检测与纠正编码是一种在数据传输或存储过程中用于检测和纠正错误的方法。常见的错误检测与纠正编码算法有奇偶校验、循环冗余校验（CRC）、汉明码等。
- URL编码（URL Encoding）：URL编码是一种将URL中的特殊字符转换为特定格式的编码方式。它主要用于防止URL中包含的特殊字符干扰对URL的解析和处理。
- 图像编码（Image Coding）：图像编码是一种将图像数据转换为压缩格式的方法，以便减小存储空间或传输带宽。常见的图像编码算法有JPEG、PNG等。
- 音频编码（Audio Coding）：音频编码是一种将音频数据转换为压缩格式的方法，以便减小存储空间或传输带宽。常见的音频编码算法有MP3、AAC等。
- 视频编码（Video Coding）：视频编码是一种将视频数据转换为压缩格式的方法，以便减小存储空间或传输带宽。常见的视频编码算法有H.264、H.265等。
这些编码技术在计算机系统中起着至关重要的作用，通过使用适当的编码方式和算法，可以有效地表示、处理和传输各种类型的数据。
计算机，不能直接存储文字，存储的是编码。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。假如：A用110表示，B用111表示等。
ASCII码： 美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。 美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
ANSI编码： 每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如： 中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。 日本的ANSI编码是JIS编码。 台湾的ANSI编码是BIG5编码（繁体）。
GBK： 对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
Unicode编码(统一编码)： 用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
UTF-8(Unicode Transform Format)编码： 根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
毫无疑问，开发中，都用UTF-8编码吧，准没错。
中文能够使用的字符集两种：
第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模： UTF-8（字很全） > gb2312（只有汉字）
重点1：避免乱码
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。
拿 sublime编辑器举例，当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。VS Code 的道理一样。
重点2：UTF-8和gb2312的比较
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。 2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我们亲测：qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。新华网藏语频道，使用的是UTF-8，保证字符集的数量。我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到meta标签中的charset属性即可。
那么，我们为什么可以查看网页的源代码呢？因为这个打开的html网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然可以查看网页的源代码。
HTML的规范
HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
1. 编写XHTML的规范：
- 所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：
<h1><font></font></h1> - 所有的标记都必须小写。
- 所有的标签都必须闭合。
- 双标签：
<span></span> - 单标签：
<br>建议写成<br /><hr>建议转成<hr />，还有<img src="URL" />
- 所有的属性值必须加引号。例如：
<font color="red"></font> - 所有的属性必须有值。例如：
<hr noshade="noshade">、<input type="radio" checked="checked" /> - XHTML文档开头必须要有DTD文档类型定义。
2. HTML的基本语法特性
- HTML对换行不敏感，对tab不敏感。HTML只在乎标签的嵌套结构，和换行、tab无关。
- 空白折叠现象：HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
- 标签要严格封闭。标签不封闭会导致错误的结果。
（2）空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
举例如下：
<p>This is an example.</p>
以上代码中，“This is” 和 “an example.” 之间有多个空格，但在页面上只会显示为一个空格。
（3）标签要严格封闭
标签不封闭的结果是灾难性的。
标签不封闭的举例如下：
<div> <p>This is a paragraph. <span>This is a span.</div> </div>
以上代码中，<p>标签没有正确闭合，而<span>标签却在<p>标签内部结束。这样的错误嵌套会导致页面结构混乱，影响网页的显示效果和功能。正确的写法应该是：
<div> <p>This is a paragraph.</p> <span>This is a span.</span> </div>
