（2）HTML元素和高级功能常见笔试题

1.什么是Shadow DOM(影子中的DOM)？ 答案：Shadow DOM 是浏览器的一种功能，能够自动添加子元素，例如audio元素，在网页中能使用进度条、音量控制等功能，这些相关元素都由浏览器自动生成。 2.元素属性src和href有何区别？ 答案：两者的功能不同。href(hypertext reference)能够建立一条通道，将当前文档和定义的资源连接起来。src(source)是将定义的资源嵌入到当前文档中。 3.img元素中的title和alt属性有何区别？ 答案：title是全局属性，提供额外的提示信息，当鼠标滑动到该元素时，显示定义的提示。link和style元素中的title比较特殊，表示样式表的名称；alt时局部属性，仅可用再img，input等元素中，提供在图片未载入或者加载失败时的替代文本。注意，只有当input元素的type属性为image时，才能使用alt属性 4.3种将CSS样式应用到元素上的方式有什么区别？

方式	特殊性	HTTP请求	重用范围	文档大小	伪类与伪元素
内联样式	最高	无	不可重用	增加	不可定义
内嵌样式	与外部相同	无	当前文档	增加	可定义
外部样式	与内嵌相同	有	整个项目	保持	可定义

5.3种嵌入javascript的方式有什么区别？

方式	内容和行为	HTTP请求	重用范围	文档大小	特点
内联脚本	耦合	无	当前文档	增加	将内联脚本放在外部样式表之后，会延迟其他资源的下载
外部脚本	分离	有	整个项目	保持	容易维护，高复用，可用defer或async属性解决页面阻塞问题
元素属性	耦合	无	不可重用	增加	两种定义方式，分别是事件属性和在链接属性中使用特殊伪协议的URL。 不但能制作可执行Javascript的浏览器书签，还能用a元素模拟按钮的效果

6.meta元素可以定义文档的哪些元数据？ (1)声明HTML文档内容所用的字符编码 (2)完善文档描述信息，让搜索引擎更容易解析索引，提升SEO(search engine optimization)搜索引擎优化 (3)适配移动设备，使页面在各种尺寸的屏幕种显示正确 (4)指定首选样式表，执行重载或重定向 7.a元素除了可以用于导航外，还有什么其他的功能？ 答案：href属性中的URL可以是浏览器支持的任何协议，因为有这个特点，a元素也可以用于手机拨号、发送短信、发送邮件等功能。当发送短信的时候，可将内容作为参数直接带过去；当发送邮件时，可将收件人、抄送人、主题和内容作为参数直接带过去 例如：

<a href="tel:10086" target="_blank" rel="external nofollow" >打电话</a>
<a href="sms:10086?body=test" target="_blank" rel="external nofollow" >发送短信</a>
<a href="mailto:[email protected][email protected]" target="_blank" rel="external nofollow" >发送邮件</a>                 8.嵌入在HTML文档中的图像格式有哪些，都有些什么特点？       

格式	透明	压缩	动画	颜色数	浏览器兼容性	特点
GIF	支持，但不是alpha透明	无损	支持	8位	全部支持	简单动画，颜色少，有锯齿
PNG	alpha透明	无损	不支持	8位和24位	IE6不支持透明	压缩比高，色彩好，除了动画，其余方面可替代GIF
JPEG	不支持	有损	不支持	24位	全部支持	存储照片或颜色丰富的复杂图像
APNG	alpha透明	有损	支持	8位和24位	Firefox和部分Chrome、Safari 、Opera支持，IE不支持	PNG格式的拓展，可替代GIF
WEBG	alpha透明	无损和有损	支持	24位	Chrome和Opera支持，IE、Safari 和Firefox不支持	更优的图像数据压缩算法

9.元素的布尔属性disabled和readonly有什么区别？ 答案：

属性	元素外观	元素操作	获取焦点	Tab导航	表单提交	元素支持
disabled	修改	否	否	否	没有发送数据	input、textarea、option、select 和button等元素
readonly	维持	是	是	是	会发送数据	input和textarea

10.列举表格布局的弊端。 (1)可访问性差，表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系，无障碍工具(如屏幕阅读器)从这些文档中获取的数据会非常混乱，影响用户的浏览。 (2)难以实现响应式，通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并需要用元素的colspan或rowspan属性，不能用简单的CSS属性来设置。 (3)可维护性差，表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套。这使得代码难以阅读，特别是如果不缩进，标签没有层次感，更难以理解代码的意图。 (4)不够语义化，表格布局会用到大量的单元格，单元格不像nav，header，footer等元素有明确的含义。语义化的界面既能保持代码整齐，又能提升搜索引擎优化。 (5)加载速度慢，嵌套的表越多，文档就变得越臃肿，不但会加长网络传输的事件，而且 也会增加渲染的时间。 11.iframe元素有哪些特点？ (1)浏览器对同一域名的并发请求数是有限制的。 (2)阻塞父窗口的load事件 (3)脚本的执行是同步和阻塞的，将script元素放置于iframe之前，同样会组设iframe中资源的请求 (4)制造点击劫持(ClickJacking)，将一个不可见的iframe或包含用户感兴趣内容的iframe覆盖在文档的某个位置上，诱使用户点击iframe中的内容 12.canvas元素用数学和用CSS设置宽高有什么区别？ 答案：canvas元素可以简单理解成两部分：容器和画布。CSS控制的是容器的尺寸，而属性控制的画布的尺寸，绘图都是在画布上进行，画布默认宽位300px,高为150px. 13.有什么方法可以防止Cookie被盗取 答案：Cookie是先由浏览器向服务器发送请求，再由服务器响应后回传Set-Cookie首部(此时可设置HttpOnly属性)向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后，就能够禁止页面的Javascript访问这个Cookie，从而避免被盗取。