前端面试题整理(html+css部分)--持续更新

1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

IE:trident内核Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用GoogleChrome的Blink内核

Chrome:Blink(基于webkit,Google与OperaSoftware共同开发)

2、Doctype的作用?严格模式与混杂模式的区别?

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容

3、div+css的布局较table布局有什么优点?

改版的时候更方便只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化(seo)搜索引擎更友好,排名更容易靠前。

4、img的alt与title有何异同?

alt(alt text):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成tooltip显示)

title(tooltip):该属性为设置该属性的元素提供建议性的信息。

5、为什么利用多个域名来存储网站资源会更有效?

CDN缓存更方便突破浏览器并发限制

节约cookie带宽

节约主域名的连接数,优化页面响应速度

防止不必要的安全问题

6、请描述一下cookies,sessionStorage和localStorage的区别?***

sessionStorage(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在,而WebStorage仅仅是为了在本地“存储”数据而生。

7、简述一下src与href的区别?

src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

<scriptsrc=”js.js”></script>

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是HypertextReference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

<linkhref=”common.css”rel=”stylesheet”/>

那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css,而不是使用@import方式。

8、在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?

答案:dns缓存,cdn缓存,浏览器缓存,服务器缓存。

9、有哪项方式可以对一个DOM设置它的CSS样式?

外部样式表,引入一个外部css文件

内部样式表,将css代码放在<head>标签内部

内联样式,将css样式直接定义在HTML元素内部

10、b标签和strong标签,i标签和em标签的区别?

后者有语义,前者则无。

那么问题又来了,什么时候语义化?语义化的理解?

用正确的标签做正确的事情!

html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

语义化更好的内容标签如header,nav,footer,aside,article,section等

11、BFC是什么?

BFC(块级格式化上下文),一个创建了新的BFC的盒子是独立布局的,盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题BFC是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外元素的布局,这个渲染区域只对块级元素起作用

12、简介盒子模型:

W3C标准盒子模型

CSS中的宽(width)=内容(content)的宽

CSS中的高(height)=内容(content)的高

div实际宽=width+(padding+border+margin)*2
div实际高=height+(padding+border+margin)*2

IE盒子模型(也叫作怪异盒模型)
CSS中的宽(width)=内容(content)的宽   +   (border+padding) *2
CSS中的高(width)=内容(content)的高  +  (border+padding) *2

div实际宽=width + margin2
div实际高=height+ margin2

13、为什么要初始化样式?

由于浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,若不初始化会造成不同浏览器之间的显示差异但是初始化CSS会对搜索引擎优化造成小影响

14、行内元素有哪些?块级元素有哪些?空(void)元素有那些?

(1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。

(2)行内元素有:a b span img input select  strong

          块级元素有:div  ul ol li  dl  dt  dd  h1 h2 h3 h4…p

(3)知名的空元素:<br><hr><img><input><link><meta>鲜为人知的是:<area><base><col><command><embed><keygen><param><source><track><wbr>

猜你喜欢

转载自blog.csdn.net/z1093541823/article/details/124690050