HTML 简介

作者: _空空 | 来源:发表于2017-07-06 18:46 被阅读67次

关于 HTML

超文本标记语言（HyperText Markup Language，简称 HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等
CSS样式是表现。就像网页的外衣，比如：标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现
JavaScript是用来实现网页上的特殊效果。如：鼠标滑过弹出下拉菜单，或鼠标划过表格的背景颜色改变，还有焦点新闻（图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

发展

年份	版本
1997.1	HTML 3.2
1997.12	HTML 4.0
1999.12	HTML 4.01
2014.10	HTML 5

HTML vs XML vs XHTML

HTML

HTML（Hyper Text Markup Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。它告诉浏览器如何显示内容

主要特点

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器

XML

XML（EXtensible Markup Language），即可扩展标记语言，是用于网络上数据交换的语言。它没有标签集，也没有语法规则，但是它有句法规则

XML 与 HTML 的主要区别

目标：HTML的设计目标是显示数据并集中于数据外观，而XML的设计目标是描述数据并集中于数据的内容，它的显示形式靠CSS或XSL帮完成
语法：HTML的标记不是所有的都需要成对出现，XML则要求所有的标记必须成对出现；HTML标记不区分大小写，XML则大小敏感，即区分大小写
更新：XML允许粒度更新，不必在XML文档每次有局部改变时都发送整个文档的内容，只有改变的元素才必须从服务器发送到客户机，而HTML却不支持这样的功能
可读性：HTML侧重于网页数据表现形式的定义和描述，欠缺对文档数据含义的确切描述，不能适应对于日益增多的各类信息进行传递与存档的需求。例如<h2>Apple</h2>,在浏览器中显示的Apple，人们并不知道它具体是水果还是一个手机，HTML并不能解释数据Apple的含义；而XML不会给大家这个错觉如果描述的是水果中的苹果的话它会很清楚的这样表示<水果>Apple</水果>。所以说HTML的可读性相对较差。
还有一点就是XML标记由架构或文档的作者定义，并且是无限制的。HTML 标记则是预定义的；HTML 作者只能使用当前 HTML 标准所支持的标记

XHTML

XHTML（EXtensible HyperText Markup Language）,即扩展超文本标签语言，目标是取代HTML

XHTML 与 HTML 的主要区别

XHTML是当前HTML版的继承者，由于HTML的语法较为松散，对于许多其他设备的要求较高，因此就出现了由DTD定义规则,语法要求更加严格的XHTML
XHTML与HTML的最大的变化在于所有标签必须闭合
XHTML中所有的标签必须小写
XHTML 元素必须被正确地嵌套
XHTML 文档必须拥有根元素

怎样理解 HTML 语义化

语义化HTML是一种编写HTML的方式，是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析
优点：
- 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构；
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO（Search Engine Optimization），即搜索引擎优化：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

怎样理解内容与样式分离的原则

对于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的，XHTML的标签只用来定义文档的结构，所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。
运用：
- 写HTML的时候先不管样式，重点放在HTML的结构和语义化上，让HTML能体现页面结构或者内容。然后通过CSS进行样式设置减少HTML和CSS契合度（即内容和样式分离）
- 写JS的时候，尽量不要用JS去直接操作样式，而是通过给元素添加删除class来控制样式变化（即行为分离）
- HTML内不允许出现属性样式，尽量不要出现行内样式
优点：
1. 数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关；
2. 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版；
3. 由于结构清晰，数据的集成、更新和处理更加方便灵活；
4. 更有意义的搜索。

常见的 meta 标签

元数据是（MetaData）是数据的的数据信息
<meta>标签提供了HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
属性：

属性	值	说明
charset	`UTF-8`（Unicode 字符编码）、`ISO-8859-1`（拉丁字母表的字符编码）	规定HTML文档的字符编码。文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码（charset属性可以通过任意元素上的`lang`属性来重写）
context	text	定义与 http-equiv 或 name 属性相关的元信息
http-equiv	content-type（规定文档的字符编码）、default-style（规定要使用的预定义的样式表）、refresh（定义文档自动刷新的时间间隔）、expires（指定网页在缓存中的过期时间）、set-cookie	把 content 属性关联到 HTTP 头部
name	application-name（规定页面所代表的 Web 应用程序的名称）、author（规定文档的作者的名字）、description（规定页面的描述。搜索引擎会把这个描述显示在搜索结果中）、generator(规定用于生成文档的一个软件包（不用于手写页面））、keywords（规定一个逗号分隔的关键词列表 - 相关的网页（告诉搜索引擎页面是与什么相关的））、revised、others	把 content 属性关联到一个名称

注意：
- <meta>标签通常位于<head>区域内
- 元数据通常以名称／值对出现
- 如果没有提供name属性，那么名称／值对中的名称会采用http-equiv属性的值

SEO 优化

页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签

<meta name="description" content="Free Web tutorials on HTML and CSS" />

搜索引擎索引方式，robotterms是一组使用逗号,分割的值，通常有如下几种取值：none，noindex，nofollow，all，index 和 follow。确保正确使用 nofollow 和 noindex 属性值。

<meta name="robots" content="index, follow" />

<!-- 
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索； follow：页面上的链接可以被查询；
noindex：文件将不被检索； nofollow：页面上的链接不可以被查询。
-->

<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

页面重定向和刷新：content 内的数字代表时间（秒），即多少时间后刷新。如果加 url，则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。

<!-- 定时跳转（让网页多少秒刷新，或跳转到其他网页） -->
<meta http-equiv="refresh" content="5" />
<meta http-equiv="refresh" content="5; url=http://www.baidu.com" />

其它：

<!-- 作者、版权 -->
<meta name="author" content="littlematch" />
<meta name="copyright" content="" />

移动设备

viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用 initial-scale 或者禁用缩放。大部分4.7-5寸设备的 viewport 宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 
`width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
width：宽度（数值 / device-width）（范围从 200 到 10,000，默认为980 像素）
height：高度（数值 / device-height）（范围从 223  到 10,000）
initial-scale：初始的缩放比例 （范围从 >0 到 10）
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no，yes)
minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）
-->

注意：很多人使用 initial-scale=1 到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。
如果和 initial-scale=1 同时使用 user-scalable=no 或 maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

// WebApp全屏模式：伪装app，离线应用
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->

// 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为 default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

// 添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题" />

// 忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />

// 忽略识别邮箱
<meta content="email=no" name="format-detection" />

// 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载 banner
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />

其它

<!-- 针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

网页相关

声明编码

<meta charset="utf-8">

优先使用 IE 最新版本和 Chrome

<!-- 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是IE浏览器就用最新的IE渲染，如果是双核浏览器就用Chrome内核 -->
<meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />

<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

浏览器内核控制：国内浏览器很多都是双内核（webkit 和 Trident），webkit 内核高速浏览，IE内核兼容网页和旧版网站。而添加 meta 标签的网站可以控制浏览器选择何种内核渲染。
- 国内双核浏览器默认内核模式如下：1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

<meta name="renderer" content="webkit|ie-comp|ie-stand">

禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。

<meta http-equiv="Pragma" content="no-cache">

Windows 8

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

站点适配：主要用于PC-手机页的对应关系

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!-- [wml|xhtml|html5] 根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。 -->

转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下 meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

其它：

<!-- 期限（指定网页在缓存中的过期时间） -->
<meta http-equiv="Expires" Content="0" />
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800" /> 

<!-- cookie -->
<meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/" />

文档声明的作用？严格模式和混杂模式指什么？<!DOCTYPE html> 的作用?

声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签
- <!DOCTYPE>标签没有结束标签
- <!DOCTYPE>声明不区分大小写
严格模式（Strict）：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式（Transitional）：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码
<!DOCTYPE html>的作用就是让浏览器进入标准模式，使用最新的 HTML5标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，而这是我们要避免的
常用的 DOCTYPE 声明：

HTML 5
  <!DOCTYPE html>

HTML 4.01 Strict
  该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）

HTML 4.01 Transitional
  该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

HTML 4.01 Frameset
  该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

XHTML 1.0 Strict
  该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 
XML 来编写标记。

XHTML 1.0 Transitional
  该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 
XML 来编写标记。

XHTML 1.0 Frameset
  该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

XHTML 1.1
  该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

浏览器乱码的原因是什么？如何解决

乱码产生的原因

乱码产生的根本原因是文件保存的编码格式和 meta 中指定的解码格式不匹配导致的
没有指定 meta 的 charset
注意：
- 只有非英文和阿拉伯数字以外的字符才会出现乱码
  - 纯粹的英文不会出现乱码问题，即使编码方式和解码方式不一致。因为 utf-8、gbk 对英文都是采用1个字节的编码方式，并且使用了相同的码字
- 不同编码集中字符占用的 byte 值不一样
常见编码集：UTF-8、UTF-16、GBK、Unicode

如何解决？

指定正确的 charset 值。在文件保存的时候，自己要清楚使用哪种编码方式保存，并且规定 HTML 文档的字符编码。
- 比如文件保存为 utf-8 格式，那么就要在<head>里添加<meta charset="utf-8">，告诉浏览器打开此页面时直接使用 utf-8 进行解码。如果文件保存为 gbk 格式，则添加 <meta charset="gbk">

常见的浏览器与内核

常见的浏览器

IE、Mozilla Firefox、Google Chrome、Opera、360、QQ、搜狗、猎豹、遨游等

浏览器内核

浏览器内核是什么？

浏览器内核可以分成两部分：渲染引擎（layout engineer 或者 Rendering Engine）和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言，执行 Javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎没有并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

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

Trident

Trident：IE浏览器使用的内核，该内核在 1997 年的 IE4 种首次被采用，是微软在 Mosaic（“马赛克”，这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览）代码的基础之上修改而来的，并沿用到 IE11，也被普遍称作“IE内核”

Trident 实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用 IE 内核而非 IE 的浏览器（壳浏览器）涌现。由于 IE 本身的 “垄断性”，而使得 Trident 内核的长期一家独大。国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。

Gecko

Gecko（Firefox 内核）：Netscape6 开始采用的内核，后来的 Mozilla FireFox（火狐浏览器）也采用了该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器也很多，这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因

Webkit

一提到 Webkit，首先想到的便是 Chrome，可以说，Chrome 让 Webkit 内核深入人心，殊不知，Webkit 的鼻祖其实是 Safari。现在很多人错误地把 Webkit 叫做 Chrome 内核（即使 Chrome 内核已经是 Blink 了）。

WebKit 前身是 KDE 小组的 KHTML 引擎，可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后，选择了后者来做引擎开发，是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。

Webkit 内核可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后，2008 年谷歌公司发布 Chrome 浏览器，采用的 Chromium 内核便 fork 了 Webkit。

Chromeium/Bink

2008 年，谷歌公司发布了 Chrome 浏览器，浏览器使用的内核被命名为 Chromium。

谷歌公司还研发了自己的 Javascript 引擎，V8，极大地提高了 Javascript 的运算速度。

Chromium 问世后，带动了国产浏览器行业的发展。一些基于 Chromium 的单核，双核浏览器如雨后春笋般拔地而起，例如搜狗、360、QQ浏览器等等，无一不是套着不同的外壳用着相同的内核。

2013年开始，Google 在 WebKit 代码的基础上研发更加快速和简约的渲染引擎，并逐步脱离 WebKit 的影响，创造一个完全独立的 Blink 引擎。Blink 引擎问世后，国产各种 Chrome 系的浏览器也纷纷投入 Blink 的怀抱，可以在浏览器地址栏输入 chrome://version 进行查看

Presto

Presto 是挪威产浏览器 Opera 的 “前任” 内核，为何说是 “前任”，因为最新的 Opera 浏览器早已将之抛弃从而投入到了谷歌大本营。

Opera 的一个里程碑作品是 Opera7.0，因为它使用了 Opera Software 自主开发的 Presto 渲染引擎，取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎。该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。

Presto 与开源的 WebKit 和经过谷歌加持的 Chromium 系列相比毫无推广上的优势，这是 Opera 转投 WebKit 的主要原因，并且使用 WebKit 内核的 Opera 浏览器可以兼容谷歌 Chrome 浏览器海量的插件资源。但是换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后，原本快速，轻量化，稳定的 Opera 浏览器变得异常的卡顿，而且表现不稳定，造成了众多的用户流失。

KHTML

KHTML，是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写，并以LGPL授权，支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高，不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多，部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点，但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小

移动端

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit，Blink，Trident，Gecko 等。其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit。Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink。Windows Phone 8 系统浏览器内核是 Trident。