[前端基础] HTML5 篇

HTML5 是 Web 中核心语言 HTML 的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进。本文不对 Canvas/video/drag api/websocket/web worker/Geolocation 等新标签/技术进行详细阐述，篇幅有限，只整理基础概念，新技术的学习请移步官网、MDN、GitHub等技术网站（后期有机会会进行相关内容的详细编写）。

1、DOCTYPE 作用

IE5.5 引入了文档模式的概念，而这个概念是通过使用文档类型（DOCTYPE）切换实现的。

声明位于 HTML 文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。

在 HTML5 之后不再需要指定 DTD 文档，因为 HTML5 以前的 HTML 文档都是基于 SGML 的，所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 HTML5 不再基于 SGML 了，所以不再需要使用 DTD。

标准模式与兼容模式各有什么区别？
标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

DTD 介绍
DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。

2、SGML 、 HTML 、XML 、XHTML 和 DHTML 的区别

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
DHTML 将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。通过 JavaScript 和 HTML DOM，能够动态地改变 HTML 元素的样式。DHTML 实现了网页从 Web 服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。包括：（1）动态内容（Dynamic Content）：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。（2）动态排版样式（Dynamic Style Sheets）：W3C 的 CSS 样式表提供了设定 HTML 标记的字体大小、字形、样式、粗细、文字颜色、行高度、加底线或加中间横线、缩排、与边缘距离、靠左右或置中、背景图片或颜色等排版功能，而“动态排版样式”即可以“动态”地改变排版样式。

3、HTML 语义化标签

用正确的标签做正确的事情
HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于SEO
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

HTML 语义化主要指的是我们应该使用合适的标签来划分网页内容的结构。HTML 的本质作用其实就是定义网页文档的结构，一个语义化的文档，能够使页面的结构更加清晰，易于理解。这样不仅有利于开发者的维护和理解，同时也能够使机器对文档内容进行正确的解读。比如说我们常用的 b 标签和 strong 标签，它们在样式上都是文字的加粗，但是 strong 标签拥有强调的语义。

对于一般显示来说，可能我们看上去没有差异，但是对于机器来说，就会有很大的不同。如果用户使用的是屏幕阅读器来访问网页的话，使用 strong 标签就会有明显的语调上的变化，而 b 标签则没有。如果是搜索引擎的爬虫对我们网页进行分析的话，那么它会依赖于 HTML 标签来确定上下文和各个关键字的权重，一个语义化的文档对爬虫来说是友好的，是有利于爬虫对文档内容解读的，从而有利于我们网站的 SEO 。从 HTML5 我们可以看出，标准是倾向于以语义化的方式来构建网页的，比如新增了 header 、footer 这些语义标签，删除了 big 、font 这些没有语义的标签。

4、HTML5 元素分类

HTML4 中，元素被分成两大类: inline（内联元素）与 block（块级元素）。但在实际的开发过程中，因为页面表现的需要，前端工程师经常把 inline 元素的 display 值设定为 block（比如 a 标签），也经常把 block 元素的 display 值设定为 inline 之后更是出现了 inline-block 这一对外呈现 inline 对内呈现 block 的属性。因此，简单地把 HTML 元素划分为 inline 与 block 已经不再符合实际需求。HTML5 中，元素主要分为 7 类：Metadata、Flow、Sectioning、Heading、Phrasing、Embedded、Interactive。

inline 内联元素
一个行内元素只占据它对应标签的边框所包含的空间。常见的行内元素有 a b span img strong sub sup button input label select textarea 等。

block 块级元素
块级元素占据其父元素（容器）的整个宽度，因此创建了一个“块”。常见的块级元素有 div ul ol li dl dt dd 等。

inline 与 block 的区别

格式上，默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
内容上，默认情况下，行内元素只能包含文本和其他行内元素。而块级元素可以包含行内元素和其他块级元素。
行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width 无效，height 无效（可以设置 line-height），设置 margin 和 padding 的上下不会对其他元素产生影响

空元素
标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。常见的空元素有：br hr img input link met 等。

5、HTML5 新增/移除标签

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新增的有：

标签/功能	描述
canvas	绘画
video 、 audio	媒介回放
localStorage	长期存储数据，浏览器关闭后数据不丢失
sessionStorage	存储的数据在浏览器关闭后自动删除
article、footer、header、nav、section	语意化更好的内容元素
calendar、date、time、email、url、search、datalist、keygen、output	表单控件
webworker	用于前端优化、减少 JS 引擎阻塞
websocket	HTML5 新协议
document.visibilityState	返回document的可见性，即当前可见元素的上下文环境

移除的元素有：

标签/功能	描述
basefont，big，center，font, s，strike，tt，u	纯表现的元素
frame，frameset，noframes	对可用性产生负面影响的元素

6、如何处理 HTML5 新标签的浏览器兼容问题？

IE6/IE7/IE8 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式

let e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ')
let i= e.length
while (i--){
    document.createElement(e[i])
}

直接使用成熟的框架，比如 html5shim

<!--[if lt IE 9]><script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->

7、HTML5 的离线储存

定义：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

使用：

创建一个和 HTML 同名的 manifest 文件，然后在页面头部像下面一样加入一个 manifest 的属性：

<html lang="en" manifest="index.manifest">

在如下 cache.manifest 文件的编写离线存储的资源

CACHE MANIFEST
#v0.11
CACHE:
	js/app.js
	css/style.css
NETWORK:
	resourse/logo.png
FALLBACK:
	/offline.html

CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换它。
3. 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

更新缓存：

更新 manifest 文件
通过 javascript 操作
清除浏览器缓存

参考https://yanhaijing.com/html/2014/12/28/html5-manifest/

注意事项：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5MB）
如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存
引用 manifest 的 HTML 必须与 manifest 文件同源，在同一个域下
FALLBACK 中的资源必须和 manifest 文件同源
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源
站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问
当 manifest 文件发生改变时，资源请求本身也会触发更新

在线的情况下，浏览器发现 HTML 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。离线的情况下，浏览器就直接使用离线存储的资源。

8、DOMContentLoaded 事件和 Load 事件的区别

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的加载完成。Load 事件是当所有资源加载完成后触发的。

9、前端 SEO

合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；
keywords 列举出重要关键词即可
语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容肯定被抓取
重要内容不要用 js 输出：爬虫不会执行 js 获取内容
少用 iframe：搜索引擎不会抓取 iframe 中的内容
非装饰性图片必须加 alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

10、iframe 标签

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

主要缺点有

iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况
搜索引擎的检索程序无法解读这种页面，不利于网页的 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
浏览器的后退按钮失效
小型的移动设备无法完全显示框

11、b 与 strong 的区别和 i 与 em 的区别

从页面显示效果来看，被 <b> 和 <strong> 包围的文字将会被加粗，而被 <i> 和 <em> 包围的文字将以斜体的形式呈现。但是 <b> <i> 是自然样式标签，分别表示无意义的加粗，无意义的斜体，表现样式为{ font-weight: bolder}，仅仅表示「这里应该用粗体显示」或者「这里应该用斜体显示」，此两个标签在 HTML4.01 中并不被推荐使用。而 <em> 和 <strong> 是语义样式标签。 <em> 表示一般的强调文本，而 <strong> 表示比 <em> 语义更强的强调文本。使用阅读设备阅读网页时：<strong> 会重读，而 <b> 是展示强调内容。

12、title 与 h1 的区别

title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响。

13、Label 的作用

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 的 for 属性与 input 标签的 id 属性保持一致：

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>

14、HTML5 的 form 的自动完成功能是什么？

autocomplete 属性规定输入字段是否应该启用自动完成功能。默认为启用，设置为 autocomplete=off 可以关闭该功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。

15、<img> 的 title 和 alt 有什么区别

title 通常当鼠标滑动到元素上的时候显示
alt 是 <img> 的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装
饰图片外都必须设置有意义的值，搜索引擎会重点分析

16、head 标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

17、link 标签

link 标签定义文档与外部资源的关系。link 元素是空元素，它仅包含属性。此元素只能存在于 head 部分，不过它可出现任
何次数。

link 标签中的 rel 属性定义了当前文档与被链接文档之间的关系。常见的 stylesheet 指的是定义一个外部加载的样式表。

18、常用的 meta 标签属性

标签	解释
`<meta charset=’utf-8′>`	`声明文档使用的字符编码`
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>	优先使用 IE 最新版本和 Chrome
<meta name=”description” content=”不超过 150 个字符”/>	页面描述
<meta name=”keywords” content=””/>	页面关键词者
<meta name=”author” content=”name, email@gmail.com”/>	网页作者
<meta name=”robots” content=”index,follow”/>	搜索引擎抓取
`<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”>`	`为移动设备添加 viewport`
<meta name=”apple-mobile-web-app-capable” content=”yes”/>	添加到主屏后的标题（iOS 6新增）是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>	添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>	设置苹果工具栏颜色
<meta name=”format-detection” content=”telphone=no, email=no”/>	当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接
<meta name=”renderer” content=”webkit”>	启用 360 浏览器的极速模式(webkit)
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>	避免 IE 使用兼容模式
<meta http-equiv=”Cache-Control” content=”no-siteapp” />	不让百度转码
<meta name=”HandheldFriendly” content=”true”>	针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓

19、Canvas 和 SVG 有什么区别

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真

20、attribute 和 property 的区别

attribute 是 dom 元素在文档中作为 HTML 标签拥有的属性；
property 就是 dom 元素在 js 中作为对象拥有的属性。
对于 HTML 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

21、Page Visibility API

通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗，或者考试监控是否离开页面。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的：

对服务器的轮询
网页动画
正在播放的音频或视频

document.visibilityState 返回一个字符串，表示页面当前的可见性状态，共有三个可能的值：

hidden：页面彻底不可见
visible：页面至少一部分可见
prerender：页面即将或正在渲染，处于不可见状态。只在支持"预渲染"的浏览器上才会出现，比如 Chrome 浏览器

在以下四种情况，才会返回hidden：

浏览器最小化
浏览器没有最小化，但是当前页面切换成了背景页
浏览器将要卸载（unload）页面
操作系统触发锁屏屏幕

可以通过 visibilitychange 时间监听 visibilityState 的变化。

22、渐进增强和优雅降级的定义

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就根据高版本浏览器构建完整的功能，然后再针对低版本浏览器进行兼容。

23、对 Web 标准、可用性、可访问性的理解

可用性（Usability）：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可访问性（Accessibility）：Web 内容对于残障用户的可阅读和可理解性。
可维护性（Maintainability）：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

24、用于预格式化文本的标签是？

预格式化就是保留文字在源码中的格式，最后显示出来样式与源码中的样式一致，所见即所得。<pre> 定义预格式文本，保持文本原有的格式。

25、实现不使用 border 画出 1 px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<div style="height:1px; overflow:hidden; background-color:blue"></div>