web前端常见面试题整理(HTML+CSS)

HTML

1.标签语义化的理解

去掉或丢失样式的时候让页面显示清晰的结构
有利于SEO，有利于爬虫读取有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
方便其它设备（屏幕阅读器，盲人阅读器，移动设备）解析渲染网页
更便于开发和维护

2.Doctype作用? Doctype文档类型？ 严格模式与混杂模式如何区分？它们有何意义?

DOCTYPE声明在文档最前面，告知浏览器以何种方式来渲染文档
标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
严格模式的排版和js运作模式是以浏览器支持的最高标准运行
混杂模式，页面向后兼容，模拟老式浏览器的行为防止站点无法工作
DOCTYPE不存在或格式不正确会导致文档已混杂模式显示

3.HTML和XHTML的区别

XHTML必须正确的嵌套，元素必须被关闭，标签名必须小写，文档必须有根元素

4.HTML5新特性

• HTML5不再是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加
• 添加语义化标签，header,nav,footer,aside,article,section
  添加视频音频API(audio,video) 画布(Canvas) 地理(Geolocation) 拖拽释放(Drag and drop)
• 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，- sessionStorage 的数据在 页面会话结束时会被清除
• 添加了一些表单控件，calendar、date、time、email、url、search
  添加新的技术webworker, websocket等

5.Iframe的优缺点

优点：能够原封不动的把页面显示出来；可重用性高；方便修改；如果有加载缓慢的第三方内容，如 图标广告等适合用iframe
缺点：会产生很多页面，不容易管理；兼容性差；会增加服务器的http请求，对于大型网站不可取

6.常用浏览器内核

• Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
• Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
• Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
• Webkit：Safari Chrome

7.cookies，sessionStorage和localStorage

共同点：都是保存在浏览器端，且是同源的

• Cookies主要用来标识用户身份，由http携带在浏览器与服务器之间来回传递，其他两个不会主动把数据发给服务器，只在本地保存
• cookie保存的数据不能超过4k，而sessionstorage和localstorage 可达到5M
• 数据的有效期不同。cookie可设置过期时间，过期之前一直有效，- sessionstorage浏览器关闭之前有效，localstorage一直有效，用来长久保存数据
• 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不同浏览器不共享；localstorage在所有同源窗口都是共享

8.get方式和post方式提交数据的区别

• 大小不同，get方式传输的数据量较小，而post可以传输大量的数据。
• post比get更安全
• post方式速度较慢，而get方式速度较快
• 在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据

9.HTML5的文件离线储存怎么使用，工作原理是什么？

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。

10.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

输入url，浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存里有，直接显示页面内容；DNS解析，获取相应的ip地址，浏览器向服务器发起tcp连接，进行三次握手；握手成功后，浏览器向服务器发送http请求，服务器处理请求，返回数据给浏览器；浏览器收到响应，读取页面内容，浏览器渲染，解析html源码，生成dom树，解析css样式，js交互

CSS

1.标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

2.box-sizing属性

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的 高/宽

3.清除浮动的方法

• 父级div定义伪类：after和zoom
  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
  .clearfloat{zoom:1}
• 在结尾处添加空div标签clear:both
• 父级div设定height
• 父级div定义overflow:hidden/auto

4.CSS选择器

• 元素选择器：* 、E、 E#id、 E.class
• 关系选择器：E、F、E>F、E+F、E~F
• 属性选择器：E[att]、E[att=“val”]、E[att~=“val”]、E[att^=“val”]、E[att$=“val”]、E[att*=“val”]、E[att|=“val”]
• 伪类选择器：E:link、E:visited、E:hover、E:active、E:focus、E:not(s)、E:root、E:first-child等
• 伪对象选择器：E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

5.CSS伪类与CSS伪对象的区别

根本区别在于是否创造了新的元素
伪类一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑 上存在但在文档树中却无须标识的“幽灵”分类
伪对象表示某个元素的子元素，逻辑上存在但实际上不存在在dom树中

6.CSS的权重规则

一个行内样式+1000，一个id+100，一个属性选择器/class类/伪类选择器+10，一个元素名/伪对象选 择器+1。关系选择器将拆分为两个选择器再计算.

7.CSS中 link 和@import 的区别

• Link属于HTML标签，@import是css提供的，只能用来加载css
• 页面加载时link会同时加载，@import引用的css会在页面加载完加载
• Link没有兼容问题
• Link的权重高于@import
• 当使用js控制 DOM 去改变样式的时候，只能使用 link 方式

8.px、em、rem的区别

• px是固定单位，不会跟着页面大小改变，em和rem是相对长度单位，适用于响应式布局
• em是相对于父元素来设置字体大小的，一般是以body的font-size为基准
• rem是相对于根元素html，只需要在根元素确定一个参考值

9. CSS3有哪些新特性

CSS3实现圆角（border-radius），阴影（box-shadow），对文字加特效（text-shadow），线性渐变（gradient）， 变形（transform）增加了更多的CSS选择器 多背景 rgba，在CSS3中唯一引入的伪元素是::selection， 媒体查询，多栏布局

10.CSS sprites原理，优缺点

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的 “background-image”，“background- repeat”，“background-position”的组合进行背景定位，
background-position可以用数字精确的定位出背景图片的位置。
优点：减少网页的http请求，减少图片的字节，方便更换风格
缺点：在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；要确 定精确位置，不易修改

11.浏览器兼容性有哪些？如何解决？

• 浏览器默认的margin和padding不同
• IE6双边距bug
• 在ie6，ie7中元素高度超出自己设置高度，原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
• min-height在IE6下不起作用
• input边框问题
• 图片默认有间距（解决使用float属性为img布局）

12.css属性content有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。
可以配合自定义字体显示特殊符号。

13. rgba()和opacity的透明效果有什么不同？

opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。
设置rgba透明的元素的子元素不会继承透明效果！

14.Flex布局

• flex-direction: row | row-reverse | column | column-reverse;(排列方向，是否倒序)
• flex-wrap: nowrap | wrap | wrap-reverse;（是否换行）
• flex-flow: flex-direction || flex-wrap;
• justify-content: flex-start | flex-end | center | space-between | space-around;（水平对齐方式）
• align-items: flex-start | flex-end | center | baseline | stretch;（竖直对齐方式）

15.圣杯布局 双飞翼布局

用flex 实现圣杯布局display:flex; Flex:1;

16.Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
Less主要语法：

• 变量 @width：10px
• 嵌套
• 混合（Mixins）
• 运算 特例calc()
• 转义
• 函数 less内置了多种函数用于转换颜色、处理字符串、算术运算等。
• 作用域
• 导入
• 映射

17.Sass Scss

Sass 是一款强化 CSS 的辅助工具，SCSS 是 Sass 3 引入新的语法
区别：Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。SCSS 对空白符号不敏感
Sass 主要语法：

• 变量 $color：#ccc
• 嵌套 嵌套伪类:通过"&"实现 在父级嵌套中，使用“&”引用父级
• 混合 @mixin定义 @include 使用
• 函数 自带内部函数和自定义函数 @function
• 继承扩展 @extend
• 导入 @import
• 运算

18.Less和sass的异同

相同：二者在语法上有共性

• 变量
• 混合(Mixins)
• 嵌套
• 运算
• 颜色功能
• 作用域

不同：

• Less是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，是在服务器端处理的。
• Less用@声明变量，Sass用$声明变量。
• Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持。
• Sass功能相比于less更加强大