Web前端面试题-应用CSS样式

1、嵌入在HTML文档中的图像格式有哪些，都有些什么特点？

答案：ps： alpha透明是指使用alpha通道实现的透明

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

 

2、元素的布尔属性disabled和readonly有何区别？

答案：元素操作是指读取、写入等操作。Tab导航是指能否使用Tab键定位到该元素

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

 

3、请列举表格布局的弊端。

答案：表格布局主要有以下5方面的弊端。

• 可访问性差，表格布局中的内容从左到右和从上到下的读取并不总是有意义，并且还缺乏依赖关系，无障碍工具从这些文档中获取的数据会非常混乱，影响用户的浏览
• 难以实现响应式，通常可用媒体查询对不同设备呈现适合的界面，但表格布局需要用单元格嵌套表格，而单元格之间的合并要用元素的colspan或rowspan属性，不能用CSS属性简单的设置
• 可维护性差，表格布局需要使用大量的元素属性，并且表格之间需要相互嵌套。这使得代码难以阅读，特别是如果不缩进，标签没有层次感，更加难以理解代码的意图
• 不够语义化，表格布局会用到大量的单元格，单元格（td、th）不像nav、header、footer等元素有明确的含义。语义化的界面既能保持代码整齐，又能提升搜索引擎优化
• 加载速度慢，嵌套的表越多，文档就变得越臃肿，不但会加长网络传输的事件，而且也会增加渲染的时间

 

4、iframe元素有哪些缺点？

答案：iframe元素主要有4个方面的缺点

• 浏览器对同一域名的并发请求数是有限制的。

浏览器	请求数
Chrome/Firefox/Opera/Safari	6
IE 6/IE7	2
IE8/IE9	6
IE10	8
UC Browser	7

• 阻塞父窗口的load事件
• 由于脚本的执行是同步和阻塞的，将script元素放置于iframe之前，会阻塞iframe中资源的请求
• 制造点击劫持，将一个不可见的iframe或包括用户感兴趣内容的iframe覆盖在文档的某个位置上，诱使用户点击iframe中的内容

 

5、除了video和audio元素，HTML5还支持哪些其他的多媒体元素？

答案：HTML5还支持embed和track元素。embed元素用于嵌入外部资源，例如SVG矢量图形、应用程序或插件等。track元素是audio和video的子元素，为多媒体文件添加辅助文本信息，例如字幕、屏幕阅读器说明和主题等。在chrome浏览器中，可用WebVTT文件和track元素结合

 

6、canvas元素用属性和用CSS设置宽高有什么区别？

答案：可将canvas元素简单理解为两部分：容器和画布。CSS控制的是容器的尺寸，而属性控制的是画布的尺寸，绘图都是在画布上进行

 

7、用什么方法可以防止Cookie被盗取

答案：cookie是先由浏览器向服务器发起请求，再由服务器响应后回传Set-Cookie首部（此时可设置HttpOnly属性）向客户端浏览器写入Cookie。在给Cookie设置HttpOnly属性后，就能够禁止页面的JavaScript访问这个Cookie，从而避免被盗取