发展历程

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

什么是HTML

用来描述网页的语言、超文本标记语言、不是编程，而是一种标记语言、使用标记标签来描述网页等等。

我们只需记住HTML就是用标记标签来描述网页。

1.常用标签：也叫标记、元素

标签有三种：

单标签：只有开始标签，没有结束标签，但是有结束标记！！！

比如；meta img input

双标签：有开始标签，也有结束标签

双标签就比较多了，比如html head body title div p a ul li ol dl dt dd span

空标签：有标签，但是无法添加内容

标签分为行内元素和块元素，元素里面的内容在浏览器中显示，如果在一行，是行内元素，独占一行是块元素。块元素：独占一行

          div p h1-h6 ul li ol dl dt dd table tr thead tbody tfoot form

行内元素：在一行

          a img span td input select button

2.表格；

      <table border="1"> 边框=1

             <thead>表格头部

             </thead>

             <tbody>表格身体

                  <tr>

                     <td></td>

                 </tr>

             </tbody>

            <tfoot>表格尾部

           </tfoot>

     </table>

表格属性

3.表单

        文本框：<input name="userName" type="text" value="张三"/><br />

        密码框：<input type="password" /><br />

        提交：<input type="submit"/><br />

        重置：<input type="reset" /><br />

        自定义按钮：<input type="button" value="自定义按钮"/><br />

        上传文本域<input type="file" /><br />

        复选按钮、框: <input type="checkbox" /><br />

        单选按钮、框: <input type="radio" /><br />

        文本域:<textarea name="" rows="" cols=""></textarea><br />

        下拉列表：

              <select name="" id="">

                 <option value="">北京</option>

                 <option value="">上海</option>

            </select>

            <button>自定义按钮123</button>

最后我再列出几个不常用或者不用了的标签，毕竟要深学的话都了解一下好；

现在哪些标签不使用?

接下来呢，就是我们比较注重的，我们在面试中会会遇到关于HTML的哪些问题？

1.Doctype作用？标准模式与兼容模式各有什么区别呢？

声明位于HTML文档中的一行，处于标签之前。告知浏览器的解析器

用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。

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

2.HTML5 为什么只需要写 !DOCTYPE HTML？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

3. 页面导入样式时，使用link和@import有什么区别？

link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

4.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

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

（IE浏览器）}

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

（网景浏览器）

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

（欧朋浏览器）

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;] ）

（苹果，谷歌浏览器）

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]、

6.简述一下你对HTML语义化的理解？

用正确的标签做正确的事情。

html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

7.HTML5的离线储存怎么使用，工作原理能不能解释一下？

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

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

8.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

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

离线的情况下，浏览器就直接使用离线存储的资源。

9.请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），cookie还可以设置有效时间

cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递，

每次ajax请求都会吧cookie传送到后台，cookie一半用做用户登陆，后台可以根据cookie信息判断用户是否登陆状态

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

区别在于

存储大小：

cookie 数据大小不能超过 4k。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到 5M 或更大。

有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

10. iframe有那些缺点？

iframe会阻塞主页面的Onload事件；

搜索引擎的检索程序无法解读这种页面，不利于SEO;

iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以绕开以上两个问题。

11.浏览器标准模式和怪异模式之间的区别是什么？

标准模式和怪异模式的来由

在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。

12. img的title和alt有什么区别？

title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。

alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

了解HTML5，以及面试会遇到的问题。