2018-HTML5面试题

一.Doctype的作用，严格模式和混杂模式的区别，以及如何触发这2种模式？

1、声明位于文档中的第一行，处于标签之前。告知浏览器解析器，用什么文档类型规范来解析html文档。
2、DOCTYPE不存在或者格式不正确会导致文档以混杂模式呈现。
3、严格模式就是浏览器根据web标准解析页面，是一种严格的DTD,不允许使用任何表现层的语法。
4、混杂模式不严格按照标准模式执行,主要用以兼容旧的浏览器,以宽松的方式向后兼容。模拟老式浏览器的行为以防止老站点无法工作。说的透明点就是可以实现IE5.5及以下版本的浏览器的渲染模式。
5、触发标准模式、严格模式的方法就是在html中声明正确的DTD,触发混杂模式可以不声明DTD。

二.html5标签

01、

定义文章。
02、 定义声音内容。
03、

定义页面内容之外的内容。
04、定义图形。
05、 定义下拉列表。
06、

定义元素的细节。
07、

定义对话框或窗口。
08、定义外部交互内容或插件。
09、

定义 figure 元素的标题。
10、

定义媒介内容的分组，以及它们的标题。
11、

定义耶脚。
12、

定义section 或 page 的页眉。
13、定义生成密钥。
14、 定义有几号的文本。
15、

定义导航链接。
16、

定义输出的一些类型。
17、 定义任何类型的任务进度。
18、

定义文章。
19、定义视频。
20、 定义时间/日期。

三、html语义化的理解？

1、html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
2、以一种文档格式显示，容易阅读。
3、利于SEO便于搜索引擎的爬虫确定上下文和各个关键字的权重。
4、便于阅读维护理解。
扩展：比如语义化的标签

四、Html和xhtml有什么区别?

html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
最主要的不同:
XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。

五、谈谈对html5的了解（html5的新特性）。

1、良好的移动性，以移动设备为主。
2、响应式设计，以适应自动变化的屏幕尺寸。
3、新增离线缓存技术，localStorage sessionStorage。
扩展：
cookie：存储空间只有4kb，在用户设定的期限后过期。
sessionStorage：存储空间5MB，用户关闭当前标签页后失效，不同的标签页不共享session。
localStorage：存储空间5MB，除非浏览器中删除文件或者js删除否则一直存在。

4、新增canvas video audio等新标签元素。新增特殊内容元素：article footer header nav section新增表单控件：calendar date time email url search
5、地理定位
6、新增webSocket/webWork技术

六、如何对网站的文件和资源进行优化

1、文件合并（目的是减少http请求）
2、文件压缩 （目的是直接减少文件下载的体积）
3、使用cdn托管资源
4、使用缓存
5、gizp压缩需要的js和css文件
6、meta标签优化（title,description,keywords）,heading标签的优化,alt优化
7、反向链接，网站外链接优化

七、css的基本语句构成是？

（自定义的样式名称）｛
    样式内容（属性：属性值；）
}

八、行内元素有那些？块级元素有那些？空元素有哪些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
1、行内元素有：a b span select strong（强调的语气）img input（内联元素）
2、块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3、常见的空元素：



---

鲜为人知的是：

九、 介绍一下标准的css盒模型，低版本ie盒模型有什么不同

1、盒模型有两种， IE 盒子模型、W3C 盒子模型。
2、盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。
3、区 别： IE的width部分把 border 和 padding计算了进去。

十、 说出三种减少页面加载的方法（加载时间指感知的时间或实际加载的时间）

CSS Sprites。
JS、CSS源码压缩、图片大小控制合适。
网页Gzip。
CDN托管。
data缓存 。
图片服务器。

十一、 Html5中本地存储概念是什么，有什么优点，与cookie有什么区别？

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
区别：
1、 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2、 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3、 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4、 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

十二、 http状态码有那些，分别代表什么意思

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

十四、 HTTP的请求方法

HTTP（Hypertext Transfer Protocol）的八种请求方法：
方法 概述
1、GET 请求页面的详细信息，并返回实体主体。
2、POST 向指定资源提交数据进行数据请求（例如提交表单，或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立或已有资源的修改。
3、PUT 从客户端向服务器传送的数据取代指定的文档内容。
4、DELETE 请服务器删除指定的页面。
5、HEAD 类似与Get请求，只不过返回的响应中没有具体的内容，用于获取报头
6、CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7、OPTIONS 允许客户端查看服务器的性能。
8、TRACE 回显服务器收到的请求，主要用于测试或诊断。