1、h5新增的内容是什么？
新增了语义化标签：header，nav，body，main，article，aside，footer。
HTML语义化的理解：语义化是指根据内容的结构化，选择合适的额标签。通俗来讲就是用正确的标签做正确的事情。
语义化的优点：
- 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录。
- 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发和维护。
新增了多媒体标签属性：video，auto。
新增了表单控件：number，search，email，tel，date，time，URL。
新增了本地离线存储local-storage长期存储数据。
新增了自定义属性：data-*。
新增了画布canvas API。
拖拽释放（rap）API on drop
新的技术文本WebSocket，一种在单个tcp链接上进行全双工通讯的协议，浏览器通过JavaScript向服务器发出建立webSocket连接的请求，连接建立以后，客户端和服务端就可以通过TCP连接直接交换数据，当你获取WebSocket连接后，就可以通过send()方法向服务器发送数据，并通过onmessage事件来接受服务器返回的数据。
新增了地理位置（Geo location） API。
1.1 DOCYTYPE（文档类型）的作用
DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html 或 xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄JavaScript 脚本的解析。它必须声明在 HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过 document.compatMode 获取，比如，语雀官网的文档类型是 CSS1Compat）
- CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用 W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
1.2 说一下HTML5的离线存储？
- 指的是没有网络连接的时候们可以正常访问应用，与网络连接时更新缓存文件
- 在cache.manifest文件编写需要离线存储的资源：
<html lang="en" manifest = "index.manifest">- 在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
- 如何清除缓存：更新 manifest 文件，通过 javascript 操作，清除浏览器缓存
1.3 说一下b和strong，i和em的区别？
- strong是有语义的，起到加强语气的效果，遇到阅读器会重读，即为了情调而加粗
- em起到强调文本的作用
1.4 说一下canvas和svg的区别
- canvas是画布，适合图形密集型的游戏，不支持事件处理。
- svg是矢量图，不依赖分辨率，不适合游戏，适合大型渲染区域，支持事件处理
1.5 请描述一下cookies、sessionStorage和localStorage 区别？
cookie是网站为了标示用户身份而储存在用户本地终端上的数据（经常通过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
sessionStorage和locaStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更大。
cookie数据大小不能超过4K
localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage：数据在当前浏览器窗口关闭后自动删除
cookie：设置得cookie过期时间之前一直有效，即使窗口或浏览器关闭。
1.6 CSS清除浮动得几种方法？
- 1、父级div定义height。
- 2、结尾处加空div标签clear：both。
- 3、父级div定义伪类：after和zoom。
- 4、父级div定义overflow：hidden。
- 5、父级div定义overflow：auto。
- 6、父级div也浮动，需要定义宽度。
- 7、父级div定义display：table。
- 8、结尾处加br标签clear:both。
- 比较好的是第3种，好多网站都这样用
1.7 px\em\rem的区别？
- 1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
- 2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
- rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
- 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。
2、css3新增内容
2.0 块级标签行内标签和行内块标签的区别？
块级标签：div p h1-h6 ul li header footer main nav section artical
块状标签能独占一行，能设置宽高
行内标签：a span em strong i
行内标签不能独占一行，默认在同一行排列，不能设置宽高
行内块标签：img ,textarea, input 表单元素类标签
行内块状标签同时具备行内块的特点
三种标签如何转化：display：block ； display：inline ; display:inline-block;
block：会独占一行 可设置宽高
inline：不会独占一行 会一直排列 宽高无效
inline-block：排列到一起 可设置宽高
display除了上面那些还有什么？
display:none; display:table;display:flex;
display:none;能隐藏还有什么可以隐藏？
visibility：hidden 。display：none；不渲染到页面，但是存在。visibility：none。不显示但是占据了位置。
2.0.1 script标签中添加defer和async的作用
defer：延迟执行
defer表示延迟执行引入的jsavascript标签，即这段javascript加载的时候html并未停止解析，这两个过程是并行的。整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，如果有多个defer的script标签，会按顺序执行，然后触发 DOMContentLoaded 事件。
async：异步加载
async表示异步执行引入的javascript标签，即javaScript下载时html并未停止解析，等到javaScript下载完成，html就停止解析，执行javaScript代码，等待javaScript执行完毕，浏览器再继续渲染。需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。如果有多个js脚本，哪个先下载完成就先执行哪个，跟书写顺序没有关系。
2.0.2 CSS页面布局单位总结
1、绝对长度单位
绝对长度单位视借质而定，不依赖与环境(显示器、分辨率等)绝对场地单位相互之间是固定的，并固定在一些物理测量中。
单位 描述
cm 厘米 1cm = 96 / 2.54
mm 毫米 1mm = 1/10cm
in 英寸 1in = 96px = 2.54cm
px 像素 1px = 1/96 in
pt point 1pt = 1/72 in
pc pica,1pc = 6pt
2、相对长度单位
相对长度单位指定一个长度相对于另一个长度的属性。使用相对单位的样式表可以更容易地从一个输出环境扩展到另一个输出环境。
单位 描述
em 他是描述相对于应用在当前元素的字体尺寸，所以他是相对长度单位。一般浏览器默认大小为16px
rem 根据当前根元素(html) 的font-size
vw viewpoint width， 视图宽度 ， 1vw==视图宽度的1%
vh viewpoint height ， 视图高度 ， 1vh == 视图高度的 1%
vmin vw 和 vh 中较小的那个
vmax vw 和 vh 中 较大的那个
ex 依赖于英文字母小x的高度
ch 数字0的宽度，只写一个0的话为12px
% font-size:120%，根据你的上层字体大小
2.1新增选择器：
2.1.1属性选择器
a[href^=‘http’] :查找含有href属性为http的a元素
2.1.2伪类选择器
选择 功能描述
:root 选择匹配文档的根元素
E:nth-child(n) 选择所有在其父元素中的第n个位置的匹配E的子元素
E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素
E:nth-of-type(n) 选择所有在其父元素中同类型第n个位置的匹配E的子元素
E:nth-last-of-type(n) 选择所有在其父元素中同类型倒数第n个位置的匹配E的子元素
E:last-child 选择位于其父元素中最后一个位置，且匹配E的子元素 ，与E:nth-last-child(1)等同
E:fisrt-child 选择位于其父元素中第一个位置，且匹配E的子元素 ，与E:nth-child(1)等同
E:empty 选择匹配E的元素，且该元素不包含子元素。
E:first-of-type 选择在其父元素中匹配E的第一个同类型子元素
2.1.3UI伪类选择器
E:enabled : 选择匹配E的所有可用UI元素。
E：disabled：选择所有E的不可见元素。
E：:required ： 用于匹配设置了’required’属性的元素。
2.1.4：伪元素选择符:
选择器 功能描述
first:letter 设置对象内的第一个字符的样式
first-line 设置对象内的第一行的样式
before 设置对象前发生的内容，用来和content属性一起使用
after 设置对象后发生的内容，用来和content属性一起使用
placeholder 设置对象文字占位符的样式
selection 设置对象被选时的颜色
2.2关于文本:
文本的阴影：text-shadow 文本换行：Word-wrap 、 Word-break 文本字体 @font-face使用。
2.3背景:
background-image
background-size
background-origin:属性指定了背景图像的位置区域。
background-clip属性指定背景绘制区域。
2.4动画：
transform变换效果：
animation动画效果：
2.5过渡效果：
transition过渡效果：
2.6边框效果：
border-color：为边框设置多种颜色。
border-image：图片边框。
border-radius：圆角边框。
box-shadow：阴影效果。
3、盒子模型
3.1盒子模型有：
css盒子模型有：content-box border-box padding-box。
content-box:测量只包括内容，不包padding、border、margin。
padding-box:width和height属性包括padding大小，不包括border，margin。
border-box：width和height属性包括padding、border大小，不包括margin
3.1IE怪异盒子模型
IE怪异盒子模型：width = padding + width + border
IE盒子模型box-sizing:border-box;
W3C标准盒子模型：width = content
box-sizing：content-box
3.2、flex布局。
3.2.1 flex-deirection：设置主轴方向。
flex-direction：row | row-reverse | column | column-reverse
row：默认值，表示沿水平方向，自左向右。
row-reverse：表示沿水平方向 ， 自右向左。
column：表示垂直方向，自上而下。
column-reverse：表示垂直方向：自下而上。
3.2.2 flex-wrap属性
flex-wrap：nowrap | wrap | wrap-reverse
nowrap：表示不换行 有多少都是一行排列
wrap：正常换行
wrap-reverse：向上换行，第一行位于下面
3.3 justify-content属性
justify-content:flex-start | flex-end | center | space-between | space-around。
flex-start:默认值 ， 左对齐。
flex-end:右对齐。
center：居中对齐。
pace-between：两端对齐。
space-around：每个项目的两侧的间距相等。
3.4 align-items属性
align-items：flex-start | flex-end | center | baseline | stretch。
flex-start：左对齐 x轴。
flex-end：右对齐 x轴。
center：居中对齐 x轴。
baseline：项目的第一行文字的基线对齐。
stretch：默认值：如果未设置高度和宽度为auto。
4、position属性
position有五个属性：static ， relative ， absolute ， fixed ， sticky。
5、简述 href 和 src 的区别和作用？
href
href:识别超文本引用，主要用在a、link标签中，href是引用和页面关联，表示当前元素和外部资源之间建立联系。
src
src:用于资源引用，表示替换当前标签，常用在img script iframe中。指向的内部会迁移到当前标签中所在的位置，在请求src资源时会将其指定的资源下载并应用到当前文档中。同时在请求src资源时会暂停其他资源的下载，这也是为什么放在后面。
简述link 和 import引入的区别和优缺点。
link是xhtml语言标签，不仅可以引入css，还可以定义其他的rss内容(比如：rel=“author”),而import只能引入css
加载顺序方面：link标签同浏览器同步加载，import是html标签渲染完毕才加载。
兼容性方面：link兼容所以浏览器，import是css2才有的语法，不兼容ie5以下。
dom操作方面：link可以通过js创造出来，动态加载，而import不可js操作。
6、CSS优先级计算规则是怎样的？
！important的优先级为最高。
最低0.47元/天 解锁文章
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
