web前端开发面试题之HTML+CSS

1. HTML和CSS分别是什么？

• HTML：超文本传输协议
• CSS：层叠样式表

2. XHTML和HTML的区别是什么？

• HTML是一种基本的web网页设计语言，XHTML是一个基于XML的置标语言。
• 主要的区别：

1. XHTML元素必须被正确的嵌套
2. XHTML元素必须被关闭
3. 标签名必须用小写字母
4. XHTML文档必须拥有根元素

3.Doctype 严格模式和混杂模式如何触发？区别他们有什么意义？

• 用在文档开始位置，声明使用哪种规范（html/xhtml），一般为严格 过度 基于框架的html文档，加入xml声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug。

4. 对WEB标准和W3C的理解与认识？

• 标签闭合、标签小写、不乱嵌套、使用外部链接CSS和js脚本，结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问。内容能被更广泛的设备访问，更少的代码和组件，容易维护，改版方便，不需要改动页面内容，提供打印版本而不需要复制内容，提高网站易用性。

5. 描述CSS reset的作用和用途？

• Reset重置浏览器的CSS默认属性，浏览器的品种不同，样式不同，然后重置，让他们统一。

6.解释CSS sprites，如何使用？

• CSS精灵图 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

7. 如何对网站的文件和资源进行优化？

• 文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用。

8. 前端页面由哪三层构成，分别是什么?作用是什么？

• 网页分成三个层次，即：结构层、表示层、行为层。
  网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签， 也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含 任何关于如何显示有关内容的信息。例如， P 标签表达了这样一种语义：“这是一个文本段”。
  　1. 网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容” 的问题做出了回答。
  　2. 网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

9.浏览器的内核分别是什么？

• IE浏览器的内核Trident，Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink。

10.常见兼容性问题？

11.超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和 active 了解决方法是改变 CSS 属性的排列顺序:

• L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

12.html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如 何区分 HTML 和 HTML5？

• HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能 的增加。

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search
　　　　 新的技术 webworker, websockt, Geolocation

* 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

* IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

如何区分： DOCTYPE 声明\新增的结构元素\功能元素

12.解释浮动和它的工作原理？清除浮动的技巧？

• 浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。
  （1）使用空标签清除浮动。
  这种方法是在所有浮动标签后面添加一个空标签定义CSS clear：both，弊端就是增强了无意义的标签。
  （2）使用overflow。
  给包含浮动元素的父标签添加CSS属性，overflow：auto；zoom：1，用于兼容IE6.
  (3) 使用after伪元素清除浮动。
  该方法只适用于非IE浏览器，需注意：
  一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；

13.用过媒体查询，针对移动端的布局吗？

媒体查询语法：

1、内联写法： and之后必须有空格

　@media screen and (min-width:960px //判断浏览器大小条件){
　			body{background：red} //常规的样式
　　　　　　}

2、 外联写法：当屏幕满足条件的时候连接href后的css文件

　<link='stylesheet' media='screen and (min-width:960)' href='xx.css'/>
　　　　　　　　<link='stylesheet' media='screen and (min-width:960) and (max-width:1960)' href='xx.css'/>

媒体查询根据不同屏幕显示不同界面有两种方式：
1.在不同的媒体查询判定的大括号后写不同的样式
2.写两个相同的HTML内部的内容，通过媒体查询判断界面后，显示一个，隐藏另一个

14.使用css预处理吗？

• CSS预处理器定义了一种新的语言，基本的思想是用一种专门的编程语言，开发者只需要使用这种语言进行编程工作，减少枯燥无味的CSS代码的编写过程的同时，能让CSS具有更加简洁、适应性更强、可读性更加、层级关系更加明显，更易于代码的维护等诸多好处。

• CSS预处理器种类繁多，sass、Less、stylus
  15.div+css的布局较table布局有什么优点？

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

• 页面加载速度更快，结构化清晰，页面显示整洁。

• 表现与结构相分离

• 易于优化（seo）搜索引擎更友好，排名更容易靠前。

16.为什么利用多个域名来存储网站资源会更加有效？

• CDN缓存更方便
• 突破浏览器并发限制
• 节约cookie带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

17. 请谈一下你对网页标准和标准制定机构重要性的理解？

• 网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者 遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各 种 BUG、安全问题，最终提高网站易用性。

18. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一个会 话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久 化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动 删除数据，否则数据是永远不会过期的。
• Cookie 的 大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中 浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。Cookie 的作 用是与服务器进行交互，作为 HTTP 规范的一部分而存在。

19.你知道的网页制作会用到图片格式有哪些？

-png-8 、png-24 、jpg、GIF、webp、svg、jpeg

• 面试官最想听到的是webp：谷歌开发的一种旨在加快图片加载速度的图片格式。
• 图片压缩体积大概只有jpeg的2/3，并能节约大量的服务器带宽资源和数量空间。
• WebP 格式图像的体积要比 JPEG 格式图像小 40% 。

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

• dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。