HTML基础

HTML、XML、XHTML

• HTML：超文本标记语言 （Hyper Text Markup Language），用于显示数据，使用标记标签来描述网页的一种语言。HTML语法较为松散。标签不区分大小写，标签甚至不必成对出现。
• XML：可扩展标记语言（EXtensible Markup Language），用于传输和存储数据，需要自行定义标签的一种标记语言。XML语法较为严格。标签必须小写，标签也必须成对地出现。
• XHTML：可扩展超文本标签语言（EXtensible HyperText Markup Language），以 XML 重构的 HTML，继承了XML严格的语法。是更严格更纯净的 HTML 版本。

HTML 语义化

HTML语义化是选择合适的标签来把HTML内容结构化，使得开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

优点

• 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
• 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
• 方便其他设备的解析
• 便于团队开发和维护

内容与样式分离

本意是：一篇文档的实际内容和意义，与这篇文档呈现给读者的方式（样式），是相互独立的。
在网页设计中，将页面通过HTML和CSS分开，不仅可以更清晰地分别表达样式或者内容，更重要的是这一分离使得二者不再耦合，样式变得可复用、组件化。

优点

• 利于协同工作。样式往往由设计师负责，而内容往往由前端工程师负责。这样的分离有利于他们的分工。
• 样式可复用。引入样式时，可以对不同的样式文件进行组合，便于网站风格的建立和管理。

meta标签

meta标签用于定义关于 HTML 文档的的元信息（meta-information）。通过一些字段信息来描述一下当前网页，以便浏览器和搜索引擎在访问到此网页的时候，可以通过这些描述信息来知道如何去解析此网页数据。
标签不包含任何内容，通过属性定义了与文档相关联的名称/值对。
如：

• 标明文档编码
• 注明文档作者
• 注明了当前网页的主要内容
• 注明了页面关键词

!DOCTYPE 文档声明

声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。定义文档是否可以使用一些不被W3C推荐的标签，以及是否可以使用框架。
浏览器从服务端获取网页后会根据文档的 DOCTYPE 定义显示网页，如果文档正确定义了 DOCTYPE，浏览器则会进入严格模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。
浏览器开发初期W3C倡导的网页标准并不流行，因此浏览器有独特的对网页标签或属性的解析模式，随着日后网页标准的流行，浏览器增加了对新标准的支持（严格模式），但又没有放弃对原有模式的兼容（混杂模式），这就是浏览器多种表现模式的来源。

• 在 HTML 4.01 中有三种 声明。

  • HTML 4.01 Strict

  • HTML 4.01 Transitional

  • HTML 4.01 Frameset

• 在 HTML5 中只有一种：

在每个 HTML 页面的第一行添加声明，能够确保在每个浏览器中拥有一致的展现。

编码格式

在计算机内部，所有的信息最终都表示为一个二进制的字符串。上个世纪60年代，美国制定了一套字符编码，对英语字符与二进制位之间的关系，做了统一规定。这被称为ASCII码，一直沿用至今。

• 乱码

英语用128个符号编码就够了，但是用来表示其他语言，128个符号是不够的。所以世界上出现了多种编码方式，比如，简体中文常见的编码方式是GB2312。
同一个二进制数字通过不同的编码方式可以被解释成不同的符号。因此，要想打开一个文本文件，就必须知道它的编码方式，否则用错误的编码方式解读，就会出现乱码。

• 统一

互联网的普及，强烈要求出现一种统一的编码方式，将世界上所有的符号都纳入其中。每一个符号都给予一个独一无二的编码，那么乱码问题就会消失。这就是Unicode，就像它的名字都表示的，这是一种所有符号的编码。
UTF-8就是在互联网上使用最广的一种Unicode的实现方式。

• 实现

在网页中通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致。

浏览器

浏览器是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。

主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari。

浏览器内核主要指的是浏览器的渲染引擎，2013 年以前，代表有 Trident（IE），Gecko（firefox），Webkit（Safari chrome 等）以及 Presto（opera)。2013 年，谷歌开始研发 blink 引擎，chrome 28 以后开始使用，而 opera 则放弃了自主研发的 Presto 引擎，投入谷歌怀抱，和谷歌一起研发 blink 引擎，国内各种 chrome系的浏览器（360、UC、QQ、2345 等等）也纷纷放弃 webkit，投入 blink 的怀抱。

HTML标签

• HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
• HTML 标签由开始标签和结束标签组成
• 开始标签是被括号包围的元素名
• 结束标签是被括号包围的斜杠和元素名
• 某些 HTML 元素没有结束标签

常见的标签

html限定了文档的开始点和结束点。

head文档的头部，描述了文档的各种属性和信息，不会作为内容显示出来。

body文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

title定义文档的标题。