HTMl5面试题

HTML

1、什么是HTML5

HTML5是最新的HTML标准。

设计目的是为了在移动设备上支持多媒体。

例如：video、audio、canvas

HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

新的解析规则增加了灵活性

新属性

淘汰过时的属性

一个HTML5文档到另一个文档间的拖放功能

2、HTML5中什么是最新的表单元素类型？

email、url（自带验证）

number只能输入数字

range（类似音量滚动条）

data（month、week、time、datatime、datatime-local）自带日期选择

search（搜索框）

color（颜色选择，不兼容大部分浏览器）

3、HTML5的页面结构同HTML4或更前的HTML有什么区别？

header、footer、nav、article、section、aside

一个典型的web页面包含头部、脚部、导航、内容、侧边栏。在以前的HTML如果要呈现这些内容，我们可能要使用div标签。但是在HTML5中增加了语意化标签，让HTML更加可读。

4、重绘和回流

重绘：单render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，就称为重绘，比如设置元素的background，color等等，都会重绘。

回流：当render tree中的一部分（或全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流。比如设置元素的width、height、float、position等等，都会回流元素 。

每个页面至少需要一次回流。回流必将引起重绘，而重绘不一定会引起回流。

5、HTML5的离线储存

localStorage和sessionStorage都是用来存储客户端临时信息的对象

localStorage生命周期是永久，除非用户在浏览器清除localStorage信息，否则信息永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享localStorage，但是不同页面或标签页间无法共享sessionStorage的信息。

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

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

补充

manifest属性规定文档的缓存manifest的位置。

应用程序缓存的优点：

离线浏览-用户可以在离线时使用应用程序

快速-缓存的资源可以更快的加载

减少服务器加载-浏览器只从服务器上下载已更新/已更改的资源

7、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

1、localStorage长期存储数据，浏览器关闭数据后不丢失；  
2、sessionStorage数据在浏览器关闭后自动删除；  
3、cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存；

4、存储大小：cookie数据大小不会超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；  
5、有期时间：localStorage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。sessionStorage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

8、页面可见性（Page Visibility）API 可以有哪些用途？

通过visibilityState的值检测页面当前是否可见，以及打开网页的时间等;在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放。

9、HTML5的from如何关闭自动完成功能？

给不想要提示的input设置autocomplete=off即可

10、用一两句话说一下你对“盒模型”这个概念的理解，和它都涉及到哪些css属性。

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

11、背景图合并用在什么地方最适合，有什么优点。

通常当遇到一个网站要加载大量icon(小图标)的时候，我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间，又可以减轻服务器的负载

12、HTML5版本类型声明怎么写。有什么用？

< !DOCTYPE html > 声明位于文档中的最前面的位置，处于 < html > 标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。也就是告诉浏览器按照何种规范解析页面）

13、XHTML1.0版本你知道么，跟html5版本有什么区别？

XHTML 1.0 是 XML 风格的 HTML 4.01。XHTML 1.1 主要是初步进行了模块化。  
HTML5 是下一代 HTML，取代 HTML 4.01。  
W3C 原本计划用 XHTML 系列替代 HTML 4.01，但 XHTML 系列实际上只活到了 1.1，还没等 XHTML 兴起，它的地位就被 HTML5 取代了。

14、前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。

结构层是该页面的基础HTML代码。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

表示层由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

行为层负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

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

alt 是图片加载失败时，显示在网页上的替代文字； title 是鼠标放上面时显示的文字。

16、HTML代码的书写规范有哪些？

​    命名规范

​        1.CSS 文件名使用英文小写，多个单词时，中间用下划线（_）连接，如：index.html web-guide.html  
​        2.id 命名使用英文驼峰命名法，多采用语义化来命名  
​        3.自定义属性采用英文小写命名，多个单词时，中间用中划线（-）连接，如：generate-catalogue

​    书写规范

​        1.层级不同应缩进 
​        2.行内元素中不要嵌套块级元素，比如：

不推荐写法

 
​        3.p标签中是不能嵌套块级元素的，浏览器会解析为两个独立的标签，而不能到达你想要的结果 
​        4.为每个 HTML 页面的第一行添加标准模式< !DOCTYPE html >的声明 
​        5.声明一个明确的字符编码 
​        6.语义化命名和语义化标签

17、table的合并边框属性是什么？跨行是什么？跨列是什么？

合并边框:cellspacing, 跨行:rowspan, 跨列: colspan

18、input标签存在的兼容问题？

当input标签在type为text时，在 Firefox 和 Safari 中的默认高度为22像素，宽度为146像素，而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。

当 input标签在type为submit时，在Firefox中的高度为23像素，宽度为75像素。在Safari中高度为21像素，宽度为73像素，在IE中高度为为25像素、宽度为73像素。

19、input中disabled与readonly有何区别？

disabled和readonly都是设置form属性能否被编辑。  
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效  
表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而 readonly会将该值传递出去。

如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。

而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。

20、input属性有哪些？

​    button: 定义可点击按钮。
​    checkbox: 定义复选框。
​    file: 定义输入字段和 "浏览"按钮，供文件上传。
​    hidden: 定义隐藏的输入字段。
​    image: 定义图像形式的提交按钮。
​    password: 定义密码字段。该字段中的字符被掩码。
​    radio: 定义单选按钮。
​    reset: 定义重置按钮。重置按钮会清除表单中的所有数据。 
​    submit: 定义提交按钮。提交按钮会把表单数据发送到服务器。 
​    text: 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

21、定义id名和class名有什么区别？

id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。  
web标准中一个页面是不容许重复ID的,而class 定义的是类,理论上可以无限重复的。  
class还可以同时引用多个类,不同的类之间用空格隔开.  
ID 的优先级要高于class

22、除了ul、ol还用什么写列表？

dl dt dd

23、如果不写头部声明会有什么问题？

通常html DOCT

YPE声明是必须的，如果缺少或错误，document将会造成CSS失效或半失效，即网页布局变乱，有的css属性不能体现。

另外:由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。例如IE6、IE7不能良好应对的inline-block和.clearfix问题. 
所以就加入了IE版本区分代码，主要还是解决IE版本兼容性问题。

24、哪些标签是快属性，哪些是行为属性的？它们的区别？空元素有哪些？

块级标签：div、from、h1-16、hr、ol、ul、li、p、table

特点：①总是在新行上开始，占据一整行；  
           ②高度，行高以及外边距和内边距都可控制；  
           ③宽如果不设置,默认是父级的宽度，与内容无关；  
           ④它可以容纳内联元素和其他块元素。

行内标签：a、br、img、input、span、textarea、strong、em、label  
特点：①和其他元素都在一行上；  
           ②高，行高及外边距和内边距部分可改变；  
           ③宽度只与内容有关；   
           ④行内元素只能容纳文本或者其他行内元素。不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边距，但是外边距不对上下起作用，只能对左右起作用，也可以设置内边距，但是内边距在ie6中不对上下起作用，只能对左右起作用

空元素：< br > < hr > < img > < input > < link > < meta >  
特点：①功能性元素，标签可以不闭合。

25、css样式引用和js引入的位置问题（为什么会放在头部或者底部）

尽量将css放置在页面的header里，js不管是外部引入的或嵌入的js片段都应放在页面的尾部。因为页面在加载时，css加载是可以并发请求的，而js加载时需要等待一个js文件加载完成后才加载其他资源，为了页面的快速呈现，放置在尾部效果较好。

同时由于嵌入的js片段会阻塞整个页面的呈现（外部引入js文件阻塞其他资源下载，也会阻塞该js引入位置以下的页面的内容呈现，所以要放置页面的最下面）

26、某种效果，有两种实现方案都可以实现，方案一：< img>标签；方案二：背景图，两个方案如何取舍？衡量的标准是什么?

如下场景使用img标签比较合适：  
1、如果需要图片没加载出来用文字代替就用img  
2、如果想打印页面并且想要的包含图像就用img。  
3、如果需要配合 z – index就用img。  
4、使用img代替有背景图像可以显著提高性能的动画背景。  
5、如果需要先加载图片就用img，因为src在html文件本身中而背景图是css文件中引入的图像，加载样式表加载后,延迟加载的网页。

如下场景使用background-image属性比较合适：  
1、如果图像不是内容的一部分时使用backgrond-image。  
2、当图像代替文本使用时使用backgrond-image。  
3、如果你想打印页面并且你不想要的包含图像使用backgrond-image。  
4、如果需要缩短下载时间通过CSS雪碧图时，使用backgrond-image。  
5、如果你只需要展示图像的一部分通过CSS雪碧图，时使用backgrond-image。  
6、如果你需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。

28、‘ data- ’ 属性的作用是什么？

data-* 属性用于程序员私有自定义数据。存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验。

data-* 属性包括两部分：  
属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符  
属性值可以是任意字符串，获取的时候使用驼峰风格

29、你常使用的HTML标签有哪些？

h1-h6 header footer nav article span p a  div  img  ul li  ol li  dl dt dd br strong等

​    注意：不要只关注问题的字面意思，要深刻的去理解考官为什么要出这个题的目的  
​    参考思路：  
​        1.对标签的理解  
​        2.对浏览器兼容问题的理解  
​        3.对h5新增标签的理解，以及h5新增的属性有哪些？？？  
​        4.对新技术的关注以及是否自己验证过

30、Label的作用是什么？是怎么用的？（加 for）

31、HTTP状态码及其含义

当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。主要是和input配合使用，没有单独存在的意义

31、HTTP状态码及其含义

1XX：信息状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX：成功状态码
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
3XX：重定向
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI
304 Not Modified 自从上次请求后，请求的网页未修改过
4XX：客户端错误
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源（实际开发中，出现404就表示前端负责的模块出问题了）
5XX: 服务器错误
500 Internal Server Error 最常见的服务器端错误（实际开发中，出现500就是后台或服务器的问题，不关前端的事）
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）