作者：樱桃小丸子儿
链接：/p/abadcc84e2a4
HTML&CSS
img的alt和title的异同？
**alt **是图片加载失败时，显示在网页上的替代文字；
**title **是鼠标放上面时显示的文字,title是对图片的描述与进一步说明;
这些都是表面上的区别，alt是img必要的属性，而title不是。
对于网站seo优化来说，title与alt还有最重要的一点：
搜索引擎对图片意思的判断，主要靠alt属性。所以在图片alt属性中以简要文字说明，同时包含关键词，也是页面优化的一部分。条件允许的话，可以在title属性里，进一步对图片说明。
简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
html5新元素？
HTML5 中一些有趣的新特性：
①用于绘画的 canvas 元素；
②用于媒介回放的 video 和 audio 元素；
③对本地离线存储的更好的支持；
④新的特殊内容元素，比如 article、footer、header、nav、section；
⑤新的表单控件，比如 calendar、date、time、email、url、search"
以上是w3c上的原话，简单说就是更符合标准，提供更多功能支持；更加规范，可读性更强，性能有提升，实现功能更加简单方便，就像手机一样，高版本的功能多一些。
更详细请看html5新元素
CSS层叠是什么？介绍一下
CSS就是层叠式样式表(Cascading Style Sheets)的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式按照从外到内、由先到后的顺序叠加起来，如果不发生冲突，则全部样式都有效，重复定义冲突时按照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义的覆盖先定义的样式。
CSS实现垂直和水平居中
这是一道经典的问题，实现方法也有很多种，以下是其中一种实现：
具体方案说明：
①使用绝对定位left:50%与margin-left取宽度值一半的复数形式设置水平居中。
②使用绝对定位top:50%与margin-top取高度值一半的复数形式设置垂直居中
HTML结构：
CSS代码：
.box1 { position: relative; width: 600px; height: 600px; background-color: red; } .content{ background-color:pink; width:200px; height:200px; position: absolute; //父元素相对定位,使子元素相对父元素定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }
什么是CSS Hack?
针对不同的浏览器写不同的CSS,就是 CSS Hack。
详情请看以下链接
CSS hack大全&详解(什么是CSS hack)
你知道哪些CSS浏览器兼容性问题。
CSS 多浏览器兼容性问题及解决方案
px和em的区别
px和em都是长度单位，区别是，px的值是固定的，是绝对单位，类似的还有pt(磅，1pt=1/72英寸)、pc(皮卡，1pc=12pt)、mm(毫米)、cm(厘米)、in(英寸)绝对单位指定是多少就是多少，计算比较容易。
em的值不是固定的，它是相对单位，em是指当前默认字号大小(继承父元素默认字号)的倍数，可根据父元素字号的改变而自动调整。例如2em是当前字号的2倍，若父元素或默认字号为12pt,则2em就是24pt。类似的还有ex,ex是当前字号高度值(通常是字体尺寸一半)的倍数。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
HTML5离线存储
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
说说你对语义化的理解
①去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
②有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
③方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页；
④便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
描述一段语义的HTML代码
(HTML5中新增加的很多标签(如：、、和等)就是基于语义化设计原则)
< div id="header"> < h1>标题< /h1> < h2>专注Web前端技术< /h2> < /div>
如何居中div？
给div设置一个宽度，然后添加margin:0 auto属性
div{width:200px; margin:0 auto; }
列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
①
block像块类型元素一样显示。
none缺省值。像行内元素类型一样显示。
inline-block像行内元素一样显示，但其内容像块类型元素一样显示。
**list-item **像块类型元素一样显示，并添加样式列表标记。
②
absolute
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，若父元素都没有定位则相对于html的根元素(浏览器窗口)定位。
fixed
fixed (老IE不支持)生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
relative生成相对定位的元素，相对于其原来所在的文档流中的位置进行定位。
static
static 默认值。没有定位，元素出现在正常的流中 (忽略 top, bottom, left, right z-index 声明)
对BFC规范的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的margin会发生折叠。
(W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)
描述CSS Reset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一。
最简化的CSS Reset
*{outline:0;padding:0;margin:0;border:0;}
CSS定义的权重
CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。
理解选择器的特殊性很重要，特别是在修复bug的时候，但是要尽量避免使用。
CSS选择器的权重与优先规则
CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
• static 自动定位，自动定位就是元素在页面普通文档流中由HTML自动定位，普通文档里中的元素也称为流动元素。不能通过z-index进行层次分级。
• relative 相对定位，相对定位不脱离文档流，参考其在原来文档流中的位置，通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
• absolute 绝对定位，绝对定位脱离文档流，依据最近的已经定位(绝对、相对或固定定位)的父元素，通过 top,bottom,left,right 定位。当父级 position 为 static 时，absolute元素将依据body根元素(浏览器窗口)进行定位，可以通过z-index进行层次分级。
• fixed 固定定位，固定定位与父元素无关(无论父元素是否定位)，直接根据浏览器窗口定位，且不随滚动条拖动页面而滚动，可通过z-index进行层次分级。
CSS中margin和padding的区别
margin是外边距，属于元素之外，相邻元素的margin可以融合。
padding是内边距，在元素之内，相邻元素的padding不可融合。
