编程技术

Document

HTML面试题

1.谈谈你对Web标准以及W3C的理解和认识

web标准简单来说可以分为结构、表现和行为。其中结构主要是由HTML标签组成，通俗的来说结构指的是我们写在body里面的一些标签，都是为了页面的结构。表现即css样式表，通过css使页面更具有美感。行为指的是页面和用户之间有一定的交互，使页面结构或表现发生变化，主要由JS组成。

web标准是将该三部分独立分开，使其更具模块化。但是，当行为产生的时候，结构和表现难免的会发生变化，这也使得这三个的界面并不是那么清晰。

W3C对Web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：

(1)对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO搜索引擎优化很有帮助）

  • 标签字母要小写

  • 标签要闭合

  • 标签不允许随意嵌套

（2）对于CSS和JS要求：

  • 尽量使用外链CSS样式表和JS脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

  • 样式尽量少用行间样式表，使结构和表现分离，标签的id和class等属性名要做到见文起义，标签越少加载越快，用户体验提高，代码维护简单，便于改版。

  • 提高网站易用性。

2.HTML、XML和XHTML有什么区别

三者的定义：

  • HTML：超文本标记语言

  • XML：可扩展标准语言

  • XHTML：可扩展超文本标记语言

HTML是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片、链接、音频、视频等。

它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个<p>标签，那就是告诉浏览器这是一个段落，不要弄错。浏览器看到后，就会正确解析，产生相应的行为。

XML它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的。这样做的目的是方便存储、传输、分享数据，人和机器都可以方便的读。XML和HTML有一个明显的区别：HTML标签都是预定义的，你不可以自己随便添加，但是XML可以自己随意“发明”标签-这就是“可扩展”的 一个含义。

XHTML就是以XML语法形式来写HTML（XHTML是作为XML被重新设计的HTML）

XHTML出现的原因：HTML是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小写可以混用，单引号或双引号随便引用。HTML标准的制定者W3C就将XML的语法形式与HTML结合，形成XHTML，所以也可以把XHTML理解为HTML的严格语法形式，除此之外，其他方面基本相同。

比如XHTML有一些强制的要求：

  • 必须包含一个文件头声明 <!DOCTYPE>

  • 所有元素名必须小写

  • 所有空元素必须关闭

  • 所有属性名必须小写

  • 所有属性名必须加引号

  • 所有布尔值属性必须加上属性值

与HTML相比最重要的区别：

文档结构

  • XHTML DOCTYPE是强制性的

  • <html>中的XML namespace属性是强制性的

  • <html> 、 <head> <title> 以及 <body>也是强制性的

元素语法

  • XHTML元素必须正确嵌套

  • XHTML元素必须始终关闭

  • XHTML元素必须小写

  • XHTML文档必须有一个根元素

属性语法

  • XHML属性必须使用小写

  • XHTML属性必须用引号包围

  • XHTML属性最小化也是禁止的

如何从HTML转换到XHTML

  1. 向每张页面的第一行添加XHTML <!DOCTYPE>

  2. 向每张页面的html元素添加xmlns属性

  3. 把所有元素名改为小写

  4. 为所有属性值加引号

HTML和XHTML的共同点

  1. 所有标记都必须要有一个相应的结束标记

  2. 所有标签的元素和属性的名字都必须是小写

  3. 所有的XML标记都必须合理嵌套

  4. 所有的属性必须用引号括起来

  5. 所有的 “<”和“&”特殊符号都用编码表示

  6. 给所有属性赋一个值

  7. 不要再注释内容中使“--”

  8. 图片必须要有说明文字

3.严格模式和混杂模式如何区分，如何触发这两种模式

DOCTYPE的定义：是一组机器可读的规则，它们指示（X）HTML文档允许有什么，不允许有什么，DOCTYPE正是告诉浏览器使用哪种DTD，一般放在（X）HTML文档开头声明，用以告诉其他人这个文档的类型风格。

DOCTYPE的作用：告知浏览器的解析器，用什么文档类型规范来解析这个文档。

DOCTYPE的种类：该标签可声明3中种文档类型，分别表示严格版本（strict），过渡版本（Transitional）和基于框架（Frameset）的HTML文档。

严格模式：就是浏览器根据Web标准去解析页面的方法，是一种要求严格的DTD，不允许使用任何表现层的语法。（就是以W3C标准解析文档）--标准模式

混杂模式：是一种向后兼容的解析方法（浏览器用自己的方式解析文档）--兼容模式

如何区分？

与网页中的DTD直接相关

如何触发？

严格模式：就是在HTML标签前声明正确的DTD

混杂模式：可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明

两种模式的差异

（1）盒模型不同

  • 严格模式：其宽高代表一个元素内容的宽高

  • 混杂模式：其宽高代表 content+padding+border

（2）设置行内元素的宽高

  • 严格模式：不能给 span 等行内元素设置 width 和 height

  • 混杂模式：可以设置

（3）设置百分比

  • 严格模式：一个元素的高度由其内容来决定。如果父元素没有设置高度，子元素设置百分比是无效的。

（4）水平居中

  • 严格模式：使用 margin: 0 auto

  • 混杂模式：用 text-aligin

（5）混杂模式下不能设置图片 padding ， table字体不能继承上层设置；混杂模式下， white-space：pre 会失效

区分严格模式和混杂模式的意义？

严格模式的排版和JavaScript运行模式以该浏览器支持的最高标准运行。

混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

严格模式和混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

4.什么是静态网页？什么是动态网页

静态网页：指没有数据交互的网页，即没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有 HTML+CSS+JavaScript做成的网站

动态网页：指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要由后台逻辑的支持。比如动态网页就是JSP页面等。

5.语义化的主要目的是什么

  • 利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）

  • 在样式丢失的时候，还是可以比较好的呈现结构

  • 更好地支持各种终端，例如无障碍阅读和有声小说等

  • 利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在卡法和维护的时候就可以提高效率。

`语义化的主要目的是可以概括为用正确的标签做正确的事。

HTML语义化可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护度和可重用性。比如，少使用 <div> 这种无语义的标签，多使用语义化的标签 <header> <footer> 等。

6.锚点的作用是什么？如何创建锚点？

锚点是文档中某一行的一个标记，类似于书签，用于链接到文档中的某个位置。

当定义锚点后，可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。

在使用 <a>元素创建锚点时，可以使用 name 属性为其命名（W3C规范）

对其他元素，还可以使用 id属性为其命名，代码如下：

<h1 id="check">选择内容</h1>
<a name="school"> 选择内容</a>

然后就可以创建链接、单击链接，直接跳转到锚点，代码如下：

<a href="#check"> 选择内容</a>
<a name="#school"> 选择内容</a>

7.列举常用的结构标签，并描述其作用

结构标签专门用于标识页面的不同结构，相对于使用 <div> 元素而言，结构标签可以实现语义化的标签。

常用的结构标签有以下几种：

  • <header>元素：用于定义文档的页眉

  • <nav>元素：用于定义页面的导航链接部分

  • <section>元素：用于定义文档中的节，表示文档中一个具体的组成部分

  • <article>元素：常用于定义独立于文档其他部分的内容

  • <footer>元素：常用与定义某区域的脚注信息

  • <aside>元素：常用与定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息

8.超链接有哪些常见的表现形式？

<a>元素用于创建超级链接，常见的表现形式有以下几种

  • 普通超级链接，语法为： <a href="http://www.baidu.com">百度</a>

  • 下载链接，即目标文档为下载资源，语法为： <a href="day.zip">下载</a>

  • 电子邮件链接，用于链接到 E-mail，语法为： <a href="mailto:2284098244@qq.com"></a>

  • 空链接，用于返回页面顶部，语法为： <a href="">...</a>

  • 锚点跳转，用于跳转到页面某一个位置，目前常用语前端路由，语法为： <a href="#school"></a>

  • 用于实现特定的代码功能，语法为： <a href="javascript:void(0);"></a>

9.div是什么？在它出现之前用什么做网站布局？

div是网站布局的盒子标签。它出现之前使用 table布局。因为 table布局嵌套很多，网站加载慢（table无法局部渲染），布局层级不清晰。

div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

但是table布局的缺陷确实非常明显：table虽然修改方便，但是它会影响网站的加载速、展现。当网速很慢的话，必须加载完毕才能显示，不然没办法展现，影响网站的展示效果。

10.img标签上的 title和 alt属性的区别是什么？

title的功能是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；

alt 的功能是图片的替换文字，即当图片不能正常显示的时候，用文字代替。

11.空元素（单标签）有哪些？

知名的空元素（单标签）:<br>,<hr>,<img>,<input>,<link>,<meta>

12.简述一下 src和 href的区别

href ：指向网络资源所在位置，简历和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接

src ：指向外部资源的位置，指向的内容会嵌入到文档当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档中。

13.简述一下 <strong><em>和 <b><i>标签的区别

<strong>和 <em>用于强调文本，但是 <strong>强调的程度更强一些。

<em>是斜体强调标签， <strong>是粗体表示；

<em>是局部强调， <strong>是全局强调；从视觉上考虑， <em>的强调是有顺序的，阅读到某处时，才会注意到。 <strong>的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。

<em>表示内容的重点， <strong>表示强烈的重要性、严重性或内容的紧迫性， <strong>不会改变所在句子的语义， <em>则会改变所在句子的语义。

HTML5工作草案中：

<em>和 <strong>仍然是表达要素，但这时的 <strong>表示html页面上的强调， <em>表示句子上的强调。

<b>和 <i>是视觉要素，分别表示无意义的加粗和无意义的斜体。

14.HTML、CSS、JavaScript的关系是什么？

  1. HTML是网页内容的载体，是内容显示的框架。内容就是网页制作者放在页面上让用户浏览的信息，包括文字、图片、视频等。

  2. CSS是网页内容的表现，就像对网页进行包装。比如字体、颜色、边框等，这些都是用来改变内容外观的东西。

  3. JavaScript用来实现网页上的特效和交互。比如，当光标放在某个链接上时背景颜色改变等。

15.在一个特定的框架中如何使用HTML中的超链接定位？

可以使用 target 属性在指定的框架中打开被链接的文档。

有 4 个保留的目标名称用作特殊的文档重定向操作：

  • _blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。

  • _self：这个目标的值对所有没有指定目标的 < a > 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。

  • _parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

  • _top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

16.常见浏览器内核有哪些？

  • IE：trident内核

  • Firefox：gecko内核

  • safari：webkit内核

  • opera：以前是presto内核，现在改用google chrome的Blink内核

  • Chrome：Blink（基于webkit，google与opera software共同开发）

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

IE8,7,6支持用 document.createElement产生标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式（最好的方式是直接使用成熟的框架，使用最多的设计 html5shim框架），可以用IE hack引用该框架。

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

2.如何区分HTML和HTML5？

HTML5约等于HTML4.0+css3+JS+API

HTML5和html的实质区别：

  • 在文档类型声明上

//html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

//html5
 <!DOCTYPE html>

  • 在结构语义上

html4.0：没有体现结构语义化标签，通常都是这样命名的

<div id="header"></div>

html5：在语义上却有很大的优势。提供了一些新的html5标签，例如：

<header> 、<nav>、<article>、<aside>、<footer>..

  • 强大的HTML5的新的功能

  1. 强大的绘图功能：Canvas标签，它是通过 JavaScript来绘制2D图形， Canvas是逐像素进行渲染的。在 Canvas中国，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果位置发生变化，那么整个场景也需要重新绘制，包括任何或许被图形覆盖的对象。该元素的强大之处在于可以直接在HTML上进行图像操作。 SVG是一种使用XML描述2D图形的语言， SVG基于XML，这意味着 SVG DOM中的每个元素都是可用的。可以为某个元素附加 JavaScript事件处理器。在 SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。

  2. 新增的视频标签

使用SVG的优势在于：

  1. SVG图像可以通过文本编辑器来创建和修改

  2. SVG图像可被搜索、索引、脚本化或压缩

  3. SVG是可伸缩的

  4. SVG图像可以在任何的分辨率下备高质量的打印

  5. SVG可在图像质量不下降的情况下被放大

两者都是用户绘图，区别：

Canvas：

  1. 依赖分辨率

  2. 不支持事件处理器

  3. 弱的文本渲染能力

  4. 能够以 .png和 .jpg 格式保存结果图像

  5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  1. 不依赖分辨率

  2. 支持事件处理器

  3. 最适合带有大型渲染区域的应用程序（比如谷歌地图）

  4. 复杂度高会减慢渲染速度（热和过度使用DOM的应用都不快）

  5. 不适合游戏开发

3.什么是HTML5？

HTML5 是目前最新的HTML标准，它的主要目的是提供所有内容，而不需要任何如 Flash、

SilverLight等的额外插件，这些内容来自动画、视频、富GUI等。

HTML5 是万维网联盟（W3C）和网络超文本应用技术组（WHATWG）合作输出的。

4.新的HTML5文档类型和字符集是什么？

文档类型是 <!doctype html>

字符集 <meta charset="UTF-8">

5.HTML5新增了哪些功能？

结构元素

  1. article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。

  2. aside元素，表示article内容之外的内容，辅助信息。

  3. header元素，表示页面中一个内容区块或整个页面的页眉。

  4. hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。

  5. footer元素，表示页面中一个内容区块或整个页面的页脚。

  6. figure元素，表示媒介内容的分组，以及它们的标题。

  7. section元素，表示页面中一个内容区块，比如章节。

  8. nav元素，表示页面中的导航链接。

其他元素

  1. video元素，用来定义视频。

  2. audio元素，用来定义音频。

  3. canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。

  4. embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

  5. mark元素，用来展示高亮的文字。

  6. progress元素，用来展示任何类型的任务的进度。

  7. meter元素，表示度量衡，定义预定义范围内的度量。

  8. time元素，用来展示日期或者时间。

  9. command元素，表示命令按钮。

  10. details元素，用来展示用户要求得到并且可以得到的细节信息。

  11. summary元素，用来为details元素定义可见的标题。

  12. datalist元素，用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。

  13. datagrid元素，也用来展示可选的数据列表，以树形列表的形式来显示。

  14. keygen元素，表示生成密匙。

  15. output元素，表示不同类型的输出。

  16. source元素，为媒介元素定义媒介资源。

  17. menu元素，表示菜单列表。

  18. ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。

  19. wbr元素，表示软换行。与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。

  20. bdi元素，定义文本的文本方向，使其脱离其周围文本的方向设置。

  21. dialog元素，表示对话框或窗口。

废除的元素

  1. 纯表现元素：纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5提倡把页面展示性功能放在css样式表中统一处理，所以将这些元素废除，用css样式进行替代。

  2. 对可用性产生负面影响的元素：对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在html5中已不支持frame框架，只支持iframe框架，html5中同时将frameset、frame和noframes这三个元素废除。

  3. 只有部分浏览器支持的元素：对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持，特别是bgsound元素以及marquee元素，只被IE支持，所以在html5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript编程的方式替代。

新增的API

  • Canvas API：canvas元素可以为页面提供一块画布展示图形。结合 Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像以及动画了。Canvas本质上是位图画布，不可伸缩，绘制出来的对象不属于页面DOM结果或者任何命名空间。不需要将每个图元当做对象存储，执行性能非常好。

  • SVG：它是一种标准的矢量图形，是一种文件格式，有自己的API。HTML5引入了内联的SVG，使得SVG元素可以直接出现在HTML标记中。

  • 音频和视频： audio和 video元素的出现让HTML5的媒体应用多了新选择，对于这两个元素，HTML5规范提供了通用、完整、可脚本化控制的API，使用HTML5的媒体标签的两个好处：

  1. 作为浏览器原生支持的功能，新的 audio和 video元素无需安装

  2. 媒体元素向 Web页面提供了通用、集成和脚本化控制的API

  • Geolocation API：可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由经纬度坐标和一些其他元数据组成。

  • Communication API：

  1. 跨文档消息传递：处于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到严格的限制。然而，现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。这种情况下，如果浏览器内部能提供直接的通信机制，就能更好的组织这些应用。

segmentfault.com/a/119000001…[1]

6.HTML5的form如何关闭自动补全功能？

三种方式：

  • 在IE的Internet选项菜单里的内容--自动完成里面设置

  • 设置Form的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能

  • 设置输入框的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能

6.HTML5应用缓存和常规的HTML浏览器缓存有什么区别？

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML，CSS，图像和JavaScript脚本并存在本地。改性能提升了网站的性能，可通过如下方式实现。

<!doctype html>
<html manifest="example.appcache">
</html>

与传统的浏览器缓存相比，该特性并不强制要求用户访问网站。

HTML应用程序缓存

使用HTML5，通过创建 cache manifest 文件，可以轻松地创建web应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  • 离线浏览-用户可在应用离线时使用它们

  • 速度-已缓存资源加载更快

  • 减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer

Cache Manifest 基础

如果需要启用应用程序缓存，在文档的 <html >标签中包含 manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest文件中直接指定了该页面 ）。

manifest文件建议的文件扩展名是 .appcache

请注意， manifest文件需要排至正确的 MIME-type，即 “text/cache-manifest”。必须在web服务器上进行配置。

Manifest文件

该文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

manifest文件可分为三部分：

  • CACHE MANIFEST-在此标题下列出的文件将在首页下载后进行缓存

  • NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存

  • FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必须的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的manifest文件列出了三个资源：一个CSS文件，一个GIF图像，以及一个JavaScript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的NETWORK规定的文件永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp

FALLBACK

下面的FALLBACK规定如果无法建立因特网连接，则用 offline.html 替代 /html5/目录中的所有文件：

FALLBACK:
/html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存

  • manifest文件被修改：更改注释达到更改文件的目的

  • 由程序来更新应用缓存：使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存

实例----完整的 Manifest文件

CACHE MANIFEST

/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注释

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保 浏览器更新缓存，您需要更新 manifest 文件。

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

7.为什么HTML5里面不需要DTD？如果不放入<! doctype html>标签，HTML5还会工作吗？

HTML5没有使用SGML或者XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅需放置<! doctype html>标签代码，让浏览器识别HTML5文档。

如果不放入 <! doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。

8.本地存储和会话（事务）存储之间的区别是什么？

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

9.如果把HTML5看成一个平台，它的构建模块有哪些？

  • <nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确。

  • <header>标签用来定义文档的页眉。

  • <section>标签用来描述文档的结构。

  • <footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

10.请你说一下Web Worker和 WebSocket的作用

web Worker的作用如下:

  1. 通过 worker = new Worker(url)加载一个 JavaScript 文件，创建一个 Worker，同时返回一个 Worker 实例。

  2. 用 worker.postMessage(data) 向 Worker发送数据。

  3. 绑定 worker.onmessage接受 Worker发送过来的数据。

  4. 可以使用 worker.terminate() 终止一个 Worker的执行。

WebSocket的作用如下： 它是 Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5 新增的协议，WebScoket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

11.如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localStorage、 cookies等数据存储，可以实现标签页之间的通信。

12.HTML5为浏览器提供了哪些数据存储方案？

在较高版本的浏览器中，提供了 sessionStorage和 globalStorage。在HTML5规范中，用 localStorage取代了 globalStorage。

13.什么是SVG？

SVG即可缩放适量图像。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

14.Canvas和SVG的区别是什么？

  1. 一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。

  2. Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。

  3. 因为不需要记住以后事情，所以Canvas运行更快；因为为了之后的操作，SVG需要记住坐标，所以运行比较缓慢。

  4. 在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。

  5. Canvas绘制出的是位图，因此与分辨率有关；SVG绘制出的是矢量图，因此与分辨率无关。

15.HTML5如何实现跨域？

从HTML5开始，可以通过在响应头里增加 Access-Control-Allow-Origin，实现跨域请求。这个特性的出现使得跨域通信只需通过配置http协议头即可。

eg：

header(``'Access-Control-Allow-Origin:http: //a.com'``);

header(``'Access-Control-Allow-Methods:POST,GET'``);

header(``'Access-Control-Allow-Credentials:true'``);

echo 'Cross-domain Ajax'``;

JavaScript

var xhr = new XMLHttpRequest(); ; 
xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
xhr.withCredentials = true;
xhr.onload = function () {          
  alert(xhr.response);
};  
xhr.onerror = function () {
 alert('error making the request.');
};
xhr.send();