面试去吧之Html

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

doctype告诉浏览器用哪种文档标准解析网页，若不存在会导致兼容模式呈现

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

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

行内元素:a input lable i span strong select  img 

块级元素:div  p  h1-h6 ul li ol dl dt dd table 

空元素:br  hr  link input meta img

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

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

• import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，而 link 是 XHTML 标签，无兼容问题;
• link 支持使用 js 控制 DOM 去改变样式，而@import 不支持;

html5 有哪些新特性

1.地理定位Geolocation

2.拖拽

3.多媒体

4.canvas

5.webstorage

6.svg

html5 有哪些新元素

• 语意化更好的内容元素，比如 article、footer、header、nav、section
• 表单控件，calendar、date、time、email、url、search

html5 废除

• 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
• 对可用性产生负面影响的元素：frame，frameset，noframes；

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

就是让正确的标签做正确的事

1.结构清晰  2.便于维护 3.便于SEO

HTML5 的离线储存怎么使用

1. 页面头部像下面一样加入一个 manifest 的属性；
2. 在 cache.manifest 文件的编写离线存储的资源

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

cookies：

1.cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）

2.会随着请求头提交给服务端,存储体积小大小不能超过 4k，安全性较低(比seeion低

essionStorage 和 localStorage :

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

2.仅在本地保存

有效期（生命周期）：

• localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
• cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

 

关于 title 属性的知识

• title 属性的功能是提示。额外的说明信息和非本质的信息请使用 title 属性。title 属性值可以比 alt 属性值设置的更长。
• title 属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。

 

*如何实现浏览器内多个标签页之间的通信? (阿里)

• WebSocket、SharedWorker；
• 也可以调用 localstorge、cookies 等本地存储方式；

localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，

我们通过监听事件，控制它的值来进行页面信息通信；

注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

 

 

 

*iframe 有那些缺点？

• iframe 会阻塞主页面的 Onload 事件；
• 搜索引擎的检索程序无法解读这种页面，不利于 SEO;
• iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

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

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