src和href的区别src是source的缩写，指向外部资源的位置，指向的内容会嵌入到当前标签位置中文件；当请求src资源时，它指向的资源将被下载并应用到文档中，例如js脚本、img图片和frame元素。浏览器在解析该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕，图片、框架等元素也是如此，类似于在当前标签中嵌入指向的资源。这也是js脚本放在底部而不是放在头部的原因。href是HypertextReference的缩写，指向网络资源所在的位置，与当前元素（锚点）或当前文档（链接）建立链接。如果我们添加那么浏览器就会将该文档识别为一个css文件，并会在不停止当前文档处理的情况下并行下载资源。这也是为什么推荐使用link方式加载css而不是使用@import方式的原因。HTML5文档类型和字符集HTML5文档类型：HTML5使用UTF-8编码：CSS选择器优先级优先级（1）同类型，同级样式前者在前(2)ID>ClassStyle>Label>*(3)Inline>IDSelector>Pseudo-Class=AttributeSelector=ClassSelector>LabelSelector>GenericSelector(*)>InheritedStyle(4)Concrete>generalized，specificity是csspriority(5)near>far(embeddedstyle>internalstylesheet>externalstylesheet)嵌入样式：嵌入在元素中，span内部样式表：元素中的样式页面，中写的样式外部样式表：存在于单个css文件中，通过链接导入或Importstyle(6)!important权重最高，高于内联样式计算特异性值important>embedded>ID>class>label|pseudoclass|属性选择>pseudoobject>inheritance>wildcardspecificity计算方法：CSS样式选择器分为4级，a,b,c,d(1)如果样式是内联样式(由Style="")定义，则a=1,1,0,0,0(2)b是ID选择器的总数0,1,0,0(3)c是属性选择器、伪类选择器和类类选择器的个数。0,0,1,0(4)d是标签和伪元素选择器的个数0,0,0,1(5)!important的权重最高，高于内联样式比如结果是:1093到1100，按Bit比较，从左到右，只要比它高的bit就立即获胜，否则继续比较。列出显示值并解释它们的作用？显示：无|内联|块|列表项|行内块|表|内联表|表格标题|表格单元格|表行|表行组|表列|表页脚组|表头组|磨合|盒子|行内框|弹性盒子|内联弹性盒|弹性|inline-flex默认值：inlinenone：隐藏对象。与visibility属性的hidden值不同，它不为隐藏的对象保留它的物理空间inline：指定该对象是一个行内元素。block：指定对象是块元素。list-item：指定该对象是一个列表项。inline-block：指定该对象是一个内联块元素。(CSS2)table：指定对象为块元素级表格。类似于html标签(CSS2)inline-table：指定对象为内联元素级表格。类似于html标签(CSS2)table-caption：指定对象作为表格标题。类似于html标签(CSS2)table-cell：指定对象为表格单元格。类似于html标签| (CSS2)table-row：指定对象为表格行。类似于html标签 | (CSS2)table-row-group：指定对象为表格行组。类似于html标签
(CSS2)table-column：指定对象为表格列。类似于html标签(CSS2)table-column-group:指定对象显示为表格列组。类似于html标签(CSS2)table-header-group：指定对象为表头组。类似于html标签(CSS2)table-footer-group：指定对象为表脚组。类似于html标签(CSS2)磨合：根据上下文判断对象是内联对象还是块级对象。(CSS3)框：将对象显示为弹性框。（弹性框的最旧版本）(CSS3)内联框：将对象显示为内联块级弹性框。（最早版本的flexbox）（CSS3）flexbox：将对象显示为flexbox。(flexboxtransitionversion)(CSS3)inline-flexbox：将对象显示为内联块级弹性框。(flexboxtransitionversion)(CSS3)flex:将对象显示为flexbox。(flexbox最新版本)(CSS3)inline-flex:将对象显示为内联块级flexbox。（最新版伸缩盒）（CSS3）清除浮动的方法（一）定义父div的高度原理：手动定义父div的高度，解决了父div无法自动获取高度的问题.优点：简单，代码少，容易掌握缺点：只适用于固定高度的布局，必须给出准确的高度，如果高度与父div不同，会出现问题建议：不推荐，只使用固定高度的布局推荐使用时（2）在末尾添加一个空的div标签clear:both原理：添加一个空的div，使用css改进的clear:both清除浮动，让父div自动获取高度优点：简单，代码少，浏览器支持好，不容易出奇怪的问题缺点：很多初学者不懂原理；如果页面上有很多浮动布局，会添加很多空的div，让人感觉很不好建议：不推荐，但是以前主要用这种方法一种清除浮动的方法（三）父div定义伪类：after和zoom原理：只有IE8及以上和非IE浏览器支持：after，原理和方法2有点类似，zoom（IE有属性）可以解决ie6，ie7浮动问题的优点：浏览器好支持，不容易出现奇怪的问题（目前：大网站都在用，比如：腾讯，网易，新浪等）缺点：代码多，很多初学者不懂原理，需要两句代码组合才能得到主流浏览器的支持。建议：推荐使用，建议定义公共类，减少CSS代码。(4)父div定义overflow:hidden原则：width或zoom:1必须定义，不能同时定义height。当使用overflow:hidden时，浏览器会自动检查浮动区域的高度。优点：简单，代码少，浏览器支持好缺点：不能和position结合使用，因为多余的size会被隐藏。建议：只推荐给没用过position或者对overflow:hidden理解很深的朋友。(5)父div定义overflow:auto原则：width或zoom:1必须定义，不能同时定义height。当使用overflow:auto时，浏览器会自动检测浮动区域的高度。优点：简单，代码少，浏览器支持缺点：当内部宽高超过父div时，会出现滚动条。建议：不推荐使用，如果你需要滚动条或者保证你的代码不出现滚动条，就使用它。浮动带来的问题1.父元素的高度无法展开，影响与父元素同级的元素。2.非块级元素并行排列。设置为浮动的元素会自动移到最前面，其他的会按顺序排列，浮动元素不会覆盖非块级元素（比如文本）3.块级元素每个元素独占一行。设置为浮动的元素不会影响它前面的元素，后面的元素会占据它的位置并被它覆盖，从而缓存HTML5的新元素。首先，HTML5为了更好地练习网页语义，加入了header、footer、nav、aside、section等语义标签。在表单方面，为了增强表单，在input、emial、data、range等类型中添加了color。在存储方面，提供了sessionStorage、localStorage、离线存储。这些存储方式方便了客户端的数据存储和获取。在多媒体方面，规定了音频和视频元素audio和vedio。此外还有geolocation、canvas、draganddrop、webworker和用于多线程编程的websocket协议。csrf和xss网络攻击及CSRF防范：跨站请求伪造，可以理解为攻击者窃取用户身份，冒用用户名义发送恶意请求，例如用户登录某网站后，他立即在另一个标签页上访问了大规模攻击者用来制造攻击的网站。该网站要求访问刚刚登录的网站并发送恶意请求。这时候CSRF就产生了。比如用来制造攻击的网站使用了一张图片，但是这张图片的链接但是数据库是可以修改的。这时，攻击者就可以以用户的名义操作数据库。防御方法：使用验证码，检查https头中的refer，使用token。XSS：Cross-sitescriptingattack，指攻击者在用户浏览网页时注入恶意脚本进行攻击，如获取cookies或其他用户身份信息，分为存储型和反射型。存储类型是攻击者输入一些数据并将其存储在数据库中。其他观众看到就会攻击。如果是反射的，则不会存储到数据库中。往往表现为将攻击代码放在url地址的请求参数中。为了防御，为cookie设置httpOnly属性。,检查用户的输入并执行特殊字符过滤。transition和animation的区别animation和transition的大部分属性是相同的。它们随时间改变元素的属性值。它们之间的主要区别是transition需要触发一个事件来改变属性，而animation不需要触发任何事件。属性值会随时间变化，过渡是2帧，从from....到，动画可以逐帧播放。
