html5+CSS3面试题【六】

怼烎@ 2023-05-31 06:38 7阅读 0赞

## 1、请描述一下cookies，sessionStorage和localStorage的区别 ##

1> sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。  
2> localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。  
3> web storage和cookie的区别 Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。  
4> Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。 除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

## 2、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？ ##

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
拖拽释放(Drag and drop) API  
语义化更好的内容标签（header,nav,footer,aside,article,section）  
音频、视频API(audio,video)  
画布(Canvas) API  
地理(Geolocation) API  
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除  
表单控件，calendar、date、time、email、url、search  
新的技术webworker, websocket, Geolocation  
移除的元素  
纯表现的元素：basefont，big，center，font, s，strike，tt，u；  
对可用性产生负面影响的元素：frame，frameset，noframes；

## 3、如何处理HTML5新标签的浏览器兼容问题？ ##

支持HTML5新标签：  
IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

## 4、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？ ##

1.id选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul > li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = "external"]）
    9.伪类选择器（a: hover, li:nth-child）

优先级为:  
!important > id > class > tag  
CSS3新增伪类举例：  
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。  
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。  
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。  
p:only-child 选择属于其父元素的唯一子元素的每个

元素。  
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。  
:enabled :disabled 控制表单控件的禁用状态。  
:checked 单选框或复选框被选中。

## 5、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ ##

FOUC - Flash Of Unstyled Content 文档样式闪烁  
  
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。  
解决方法简单的出奇，只要在之间加入一个或者

## 6、介绍一下box-sizing属性？ ##

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。  
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高  
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content  
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

## 7、’data-’属性的作用是什么？如何获取’data-’属性的值？ ##

答：data-属性是H5中的，用来自定义属性，通过dataset属性获取。 不是所有的浏览器都支持，不支持用getAttribute获取。