html5面试题

218 阅读4分钟

DOCTYPE的作用

声明一般位于文档的第一行,作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析,否则就以兼容模式进行解析。

标准模式与兼容模式各有什么区别

标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。

兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以防止站点无法工作。

语义化理解

  • html语义化就是让页面的内容结构化,便于浏览器、搜索引擎解析;

  • 在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。

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

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

Html5有那些新增的表单元素

(1) 绘画canvas

(2) 用于媒介回放的视频video和音频audio元素

(3) 客户端存储localStorage、sessionStorage

(4) 语义化更好的内容元素,比如article,footer,header,nav,section

(5) 表单控件,color,calendar,date,time,mouth,week,email,url等

(6) 新的技术webworker,websockt,Geolocation

(7) 移出的元素

a.纯表现的元素:basefont,big,center,font等

b.产生负面影响的元素:frame frameset等

(8) ie8 7 6 支持通过document.createElemet 方法产生新的标签,可以利用这 一特性让这些浏览器支持html5新标签

标签上title与alt属性的区别

  • title 是图片正常加载时,鼠标放上去的额外信息

  • alt 是图片不能正常显示的时候,用文字代替

Html5的新的输入类型属性

  • search:用于搜索域,比如站点搜索或 Google 搜索,域显示为常规的文本域。

  • url :用于应该包含 URL 地址的输入域在提交表单时,会自动验证 url 域的值。

  • email:用于应该包含 e-mail 地址的输入域,在提交表单时,会自动验证 email 域的值。

  • datetime:选取时间、日、月、年(UTC 时间)

  • date:选取日、月、年

  • month:选取月、年

  • week:选取周和年

  • time:选取时间(小时和分钟)

  • datetime-local:选取时间、日、月、年(本地时间)

  • number:用于应该包含数值的输入域,您还能够设定对所接受的数字的限定。

  • range:用于应该包含一定范围内数字值的输入域,类型显示为滑动条。

<input type="search">

对浏览器内核的理解

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

  • JS引擎:解析和执行javascript来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

cookies、sessionStorage和localStorage解释及区别

存储大小:

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

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

有效时间:

  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;

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

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

数据与服务器之间的交互方式:

  • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端

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

target 属性

<a target="_blank">意思是在新窗口打开链接</a> // blank 单词的意思是“空白”

<a target="_self">意思是在当前框架中打开链接</a>

<a target="_parent">意思是在父框架打开链接</a>

<a target="_top">意思是在当前窗口打开链接</a>

<a target="framename">意思是在指定框架打开链接</a>

html5块级元素标签

div h1...h6 ul ol p table form

html5行内元素标签

span a img  input button textarea

html5中的canvas的作用

Canvas 元素用于在网页上绘制图形,HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。