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请求 | 重用范围 | 文档大小 | 伪类与伪元素 |
内联样式 | 最高 | 无 | 不可重用 | 增加 | 不可定义 |
内嵌样式 | 与外部相同 | 无 | 当前文档 | 增加 | 可定义 |
外部样式 | 与内嵌相同 | 有 | 整个项目 | 保持 | 可定义 |
方式 | 内容和行为 | HTTP请求 | 重用范围 | 文档大小 | 特点 |
内联脚本 | 耦合 | 无 | 当前文档 | 增加 | 将内联脚本放在外部样式表之后,会延迟其他资源的下载 |
外部脚本 | 分离 | 有 | 整个项目 | 保持 | 容易维护,高复用,可用defer或async属性解决页面阻塞问题 |
元素属性 | 耦合 | 无 | 不可重用 | 增加 |
两种定义方式,分别是事件属性和在链接属性中使用特殊伪协议的URL。
不但能制作可执行Javascript的浏览器书签,还能用a元素模拟按钮的效果
|
(1)声明HTML文档内容所用的字符编码
(2)完善文档描述信息,让搜索引擎更容易解析索引,提升SEO(search engine optimization)搜索引擎优化
(3)适配移动设备,使页面在各种尺寸的屏幕种显示正确
(4)指定首选样式表,执行重载或重定向
7.a元素除了可以用于导航外,还有什么其他的功能?
答案:href属性中的URL可以是浏览器支持的任何协议,因为有这个特点,a元素也可以用于手机拨号、发送短信、发送邮件等功能。当发送短信的时候,可将内容作为参数直接带过去;当发送邮件时,可将收件人、抄送人、主题和内容作为参数直接带过去
例如:
<a href="tel:10086">打电话</a>
<a href="sms:10086?body=test">发送短信</a>
<a href="mailto:sttick@pw.org?cc=jane@pw.com">发送邮件</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不支持
| 更优的图像数据压缩算法 |
答案:
10.列举表格布局的弊端。
属性 | 元素外观 | 元素操作 | 获取焦点 | Tab导航 | 表单提交 | 元素支持 |
disabled | 修改 | 否 | 否 | 否 | 没有发送数据 |
input、textarea、option、select
和button等元素
|
readonly | 维持 | 是 | 是 | 是 | 会发送数据 | input和textarea |
(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,从而避免被盗取。