HTML(5)+CSS(3)面试题总汇
一，浏览器内核
IE: trident 内核(1997 年的 IE4 中首次被采用,沿用至今.腾讯,猎豹,360 等浏览器都是用了 IE 的内核)
Firefox:gecko 内核 (开源内核,因为火狐用户最多,被称为火狐内核,是一个跨平台内核,windows,linux 和 mac os 中可以使用)
Chrome:Blink(基于 webkit,Google 与 Opera Software 共同开发) (2013 年之前是用 webkit)
Safari:webkit 内核 (苹果公司的内核,开源代码,不受 IE,火狐限制. 遨游浏览器,塞班手机浏览器,安卓默认浏览器都是用webkit 作为内核.另外 google chrome ,360 极速浏览器和搜狗高速浏览器高速模式也使用 webkit 作为内核.)
Opera:以前是 presto 内核(渲染速度达到极致,ie 内核速度的 3 倍,但是兼容性很差),Opera 现已改用 Google Chrome 的 Blink内核
二，每个 HTML 文件里开头的Doctype的作用
DOCTYPE简称DTDS,英文名叫Document type ,中文名“文档类型”，是一种标准通用标记语言的文档类型声明，它的目的是要告诉标记语言解析器，它应该使用什么样的文档类型去解析文档（重点：告诉浏览器按照何种规范解析页面）
没有定义doctype会开启怪异模式，怪异模式下，很多的css效果都会受到影响
三、谈谈以前端角度出发做好 SEO 需要考虑什么?
Meta标签优化
放置关键字
付费搜索引擎
链接交换和链接广泛度
合理的标签使用.
提高页面的加载速度
四，怎么提高页面的加载速度
- 减少HTTP请求
- 使用CDN
- 将样式表放在头部，将脚本放在底部
- 使用外部的JavaScript和CSS
- 避免CSS表达式，
- 压缩css和js
- 减少DNS查找
- 避免重定向
- 使Ajax可缓存
五，大量图片加载很慢,有哪些方法优化 这些图片的加载,给用户更好的体验.
1.图片懒加载,在页面上的未可视区域可以添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,如果前者小于后者,优先加载. (大型电商网站常见)
2.图片预加载:如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张优先下载.
3.如果图片为 css 图片,可以使用 CSSsprite 精灵图、SVGsprite 矢量图、Iconfont 字体图标、Base64 等技术.
4.缩略图:如果图片过大,可以使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提高用户体验.
六，CSS选择器优先级
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
七，什么是盒子模型
CSS 的盒子模型有两种:IE 盒子模型、标准的 W3C 盒子模型模型.
内容(content)、填充(padding)、边框(border)、边界(margin)都是盒模型的基本属性.
区别:
标准的 W3C 盒子模型模型: 设置的 border 值只包括 content 和 padding.IE 盒子模型:设置的 border 值包括 content,padding 和 border 值.
八，display 和visibility的区别
使用 display:none 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将"丢失";而使用 visibility:hidden 属性后,HTML 元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在.
技巧性: 设置宽高为 0,设置透明度为 0,设置 z-index 位置在-1000
九，简述一下 src 与 href 的区别
src 用于替换当前元素(引入),href 用于在当前文档和引用资源之间确立联系(关联).
src 是 source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素. 当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此类似于将所指向资源嵌入当前标签内.这也是为什么将 js 脚本放在底部而不是头部.
href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加 那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理.这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式
补充:link 和@import 的区别,两者都是外部引用 CSS 的方式,但是存在一定的区别:
1.link 是 HTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务;@import 属于 CSS 范畴,只能加载 CSS
2.link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载.
3.link 是 XHTML 标签,无兼容问题;@import 是在 CSS2.1 提出的,低版本的浏览器不支持.
4.link 支持使用 Javascript 控制 DOM 去改变样式;而@import 不支持.
九，让一个元素水平垂直居中
第一种方法:
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}
*兼容性好;缺点:必须知道元素的宽高
-------------
第二种方法：
div.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
*这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
---------------
第三种方法
div.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
*兼容性较好，缺点:不支持IE7以下的浏览器
第四种方法
一个块状元素A内 有若干个块状元素B，要达到的效果是 ，所有块状元素B 在 元素A 内水平居中显示。
.A｛
width:500px;
backgrond-color:green;
text-align:center
｝
.B｛
width:100px;
height:100px;
magin:5PX;
backgrond-color:green;
display:inline-block；
｝
十，BFC 是什么?
BFC(块级格式化上下文),一个独立的渲染区域,只有块级元素参与,规定了内部块级元素的布局方式,且该区域与外部无关. BFC 元素特性表现原则:内部子元素再怎么变动都不会影响外部元素布局规则:
1.内部 BOX 会在垂直方向上一个接一个放置,所以是从上向下排列
2.元素的 margin 左边和父级的左边紧挨,浮动元素也是这样,所以是从左向右排列
3.BOX 垂直方向上距离由 margin 决定,但同一个 BFC 内的两个相邻元素的 margin 会出现外边距合并(overflow 可以解外边距合并)
4.BFC 是页面上一个隔离的独立容器,内容子元素不影响外部元素
5.计算 BFC 高度时,浮动元素也参与计算(overflow 清除浮动以后可以撑开盒子高度)BFC 的生成: 根元素 body、浮动 float 不为 none、定位 position:absolute/fixed、overflow、display:inline-block/flex/table-cel
十一，描述一个"reset"的 CSS 文件并如何使用它.知道 normalize.css 吗?说明不同之处?
引入:不同的浏览器对一些元素有不同的默认样式,不处理时在不同的浏览器下会存在风险,显示差异,甚至布局被打乱,(初始化 CSS 会对搜索引擎优化造成小影响)可以用 Normalize.css 来代替重置样式文件.但它没有重置所有的样式风格,仅提供了一套合理的默认样式值.既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题). 在这一方面,无法做每一个复位重置.它也确实有些超过一个重置,它处理了我们永远都不用考虑的怪癖,像 HTML 的 audio 元素不一致或 line-height 不一致.
十二、什么是 Css Hack? ie6、7、8 的 hack 分别是什么? 常用 hack 的技巧 ?
CSS hack 由于不同厂商的浏览器,或者同一厂商但是不同版本的浏览器,对 CSS 的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的 CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果.
简单的说,CSS hack 为了使 CSS 代码兼容不同的浏览器.当然,我们也可以反过来利用 CSS hack 为不同版本的浏览器定制编写不同的 CSS 效果.
书写顺序,一般是将识别能力强的浏览器的 CSS 写在后面.
/firefox/ - /all ie/ - /ie8/ - /ie7/ - /ie6/ - /ie9/ - /opera/ - /chrome and safari/
技巧:渐进识别的方式,从总体中逐渐排除局部. 首先,巧妙的使用"\9"这一标记,将 IE 游览器从所有情况中分离出来. 接着,再次使用"+"将 IE8 和 IE7、IE6 分离开来,这样 IE8 已经独立识别.
十三，Sass、LESS 是什么?大家为什么要使用他们?
CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处.SASS、LESS 是最常见的 CSS 预处理器框架.
Less 是一种动态样式语言.将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持 IE 6+Webkit, Firefox),也可一在服务端运行(借助 Node.js).
优点:
- 结构清晰,便于扩展.
- 可以方便地屏蔽浏览器私有语法差异.这个不用多说,封装对浏览器语法差异的重复处理,
- 减少无意义的机械劳动.
- 可以轻松实现多重继承.
- 完全兼容 CSS 代码,可以方便地应用到老项目中.LESS 只是在 CSS 语法上做了扩展,所以老的 CSS 代码也可以与
十四，html 常见兼容性问题?
1.IE 的双边距 BUG
问题:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大. 解决:给块级元素设置_display:inline;(_ 只有 ie6 能识别)
2.超链接访问过后 hover 样式就不出现的问题是什么?如何解决?
问题:被点击访问过的超链接样式不在具有 hover 和 active 了
解决:改变 CSS 属性的排列顺序: L-V-H-A(link,visited,hover,active)
3.3 个像素问题
问题:在IE7中两个div是紧挨着的,但是在IE6中会出现两个div之间出现3px左右的间隙,这就是传说中的"IE 3px bug". 解决:这是由于使用 float 引起的使用 dislpay:inline -3px 可以解决.
4 IE z-index 问题
问题:父元素有定位,子元素即便设置 z-index 为多少,都会显示在最上面. 解决:那是因为 z-index 是有继承的.父元素有定位,默认 z-index 为 1.那么子元素也就 z-index 为 1. 要想改变,就得给父
元素设置 position:relative,后再设置 z-index.
5.IE5-8 不支持 opacity
解决: 使用滤镜 filter
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/
6.IE6 不支持 PNG 透明背景
解决: IE6 下使用 gif 图片
7.Png 透明
问题:用透明 PNG 图片作为链接的背景,图像的透明部分变得不能点击. 解决:在兼容 ie 的代码中,给 a 标签设置背景,而 background 的 url()设置为当前页面上.
8.Min-height 最小高度
问题:没办法设置最小高度
解决:用!Important 解决.代码: height:auto !important ; height:最小 px;
9.select 在 ie6 下遮盖 使用 iframe 嵌套
解决:用 iframe 当做 div 的底. div 可以遮盖 iframe,iframe 可以遮盖 select.
10.没法定义 1px 左右的宽度容器
问题:IE6 默认的行高造成的
解决:使用 over:hidden,zoom:0.08, line-height:1px 可以解决.
11.浏览器默认的 margin 和 padding 不同.
解决: 加一个全局的 *{ margin:0; padding:0;} 或者 css 初始化
12.a(有 href 属性)标签嵌套下的 img 标签,在 IE 下会有边框.
解决: a img{border:none;}
13. input 中 button 会有默认的边框,阴影
解决:用 border:none; 解决.在 IE6 以下,还需要加上 border-color:transparet;
十五，CSS有哪些新特性
简化:选择器、RGBA、阴影、盒模型、边框圆角、边框图片、渐变、背景、变换、过渡、动画、列布局、伸缩布局、媒体查询
1、css3 选择器:
属性选择器:E[attr]、E[attr=val]、E[attr*=val]、E[attr^=val]、E[attr$=val];
伪类选择器:E:only-of-type、E:only-child、E:first-child、E:last-child、E:nth-child(n)、E:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n){n 范围[0,+∞),即所有子元素,0 和负数在伪类选择器中获取不到;-n+5 表示[1,5]}、E:empty、E:target、E:enabled、E:disabled 控制表单控件的禁用状态、E:checked 单选框或复选框被选中
伪元素选择器:E::befor、E::after、E::first-letter、E::first-line、E::selection(c3 引入)
2、颜色
RGBA:该透明度 Alpha 不会被继承,区别于不透明度 opacity
**HSLA:**Hue( 色 调 ), 0( 或 360) 表 示 红 色 ,120 表 示 绿 色 ,240 表 示 蓝 色 , 取 值 0 - 360;Saturation( 饱 和 度 ), 取 值 0.0% - 100.0%;Lightness(亮度),取值 0.0% - 100.0%;Alpha 透明度,取值 0~1
3、文本阴影:
box-sizing:content-box(标准模式盒模型) | border-box(怪异模式盒模型)
5、盒子阴影:
box-shadow:none | [ , ]* 可以有多个阴影 = inset? && {2,4} && ? 内阴影、{Xoffset 可负、Yoffset 可负、blur 不可负、外延可负}、颜色
6、边框圆角:
border-radius:[ | ]{1,4} [ / [ | ]{1,4} ]?
按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角
7、边框图片:
border-image:<’ border-image-source ‘> || <’ border-image-slice ‘> [ / <’ border-image-width ‘> | / <’ border-image-width '>? /
width:边框厚度,将裁切的图片缩放至设定厚度,然后在边框中显示,超出 border-width 部分不显示outset:扩张,设置后图像在原本基础上向外延展设定值后再显示,不允许负值(少用) repeat:平铺,默认 stretch 拉伸;repeat 平铺但不缩放;round 平铺且自适应缩放大小;space 平铺且自适应缩放间距
8、渐变:
线性渐变 linear-gradient:( [ || ,]? , [, ]* )径向渐变 radial-gradient:([ [ || ] [ at ]? , | at , ]?[ , ]+)注意:渐变色不是单一颜色,不能使用 backgroud-color 设置,只能使用 background 设置间隔分明实现red 0%red 33.3% 33.3%66.6%bl66.6%bl 100%
[面试]径向渐变中的 size:渐变终止的地方(要能看到明显的起点终点来判定是哪种,默认最远角) closest-side:最近边、farthest-side:最远边、closest-corner:最近角、farthest-corner:最远角
9、背景:
background-size:auto/number/percentage/cover/containcover 自动等比缩放,直到某方向完全显示;contain 自动等比缩放,直到图片完全显示
[面试]移动端实现较小图片拥有较大响应区:下面连个属性都设置成 context-box,配合 padding 值增大响应区background-origin:padding-box/border-box/content-box; 设置定位原点background-clip: padding-box/border-box/content-box; 设置显示区域
10、过渡:
transition: property duration timing-function delay; 过渡属性(必要,全属性为 all)、过渡时间(必要)、过渡曲线(常用 linear 匀速)、延时事件
11、变换:
坐标轴:x 向右为正,y 向下文正,z 向屏幕外为正3D 变换比 2D 变换相比:多个 Z 轴,合写语法需要写上默认值,此处不做详细说明translate 平移:正值向坐标轴正向平移,负值向坐标轴反向平移;默认参考元素左上角scale 缩放:比值,1 为不缩放,>1 为放大,<1 为缩小;默认参考元素中心点rotate 旋转:正向面对某坐标轴,正值为顺时针旋转,负值为逆时针旋转;默认参考元素中心点skew 斜切/翻转/扭曲(2D 独有):正值向坐标轴正向拉伸,默认元素中心点固定,拉伸右下角点,面积保持不变进行扭曲transform-origin 改变参考点
12、动画
定义:@keyframes 动画序列{ 关键帧{ 属性:目标值 } … }关键帧可以用 from to 关键字,也可以用百分比引用:animation: 动画序列名 持续时间 过渡类型 延迟时间 循环次数 是否反向 动画之外状态过渡类型 animation-timing-function: linear | ease-in-out | steps(n); 实现步进,此时动画不连续循环次数 animation-iteration-count:n | infinte; 可设定具体次数或无限循环
[面试]动画外状态 animation-fill-mode: forwards | backwords | both; 说明:forwards 在动画结束后保持最后状态(100%状态),backwords 会在延迟开始之前先执行最初状态(0%状态,无延迟时,没有明显效果),both 会存在上述两种情况是否反向 animation-direction: alternate 交替 | reverse 反向 | normal 正常常用简写:animation: move 5s [2s] linear infinite [alternate]
13、列布局:
column-count:列数、column-width:列宽、column-gap:列间隙、column-span:跨列列数、column-rule:列间样式
[面试]列高度的平衡:如果设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列,造成多列,列数会发生改变.(所以列高可以大于分列后的默认高度,但不要小于)
14、伸缩布局:
父盒子属性设定:
display:flex; 设置给父容器盒子,子元素都会自动的变成伸缩项(flex item)
justify-content 设置主轴方向的子元素对齐方式,常设 center 实现居中(默认水平居中)
align-items 设置侧轴方向的子元素对齐方式,常设 center 实现居中(默认垂直居中)
flex-direction 定义弹性盒子元素的排列方向(主轴);row 水平主轴、column 垂直主轴
flex-wrap 控制 flex 容器是单行或者多行;nowrap 单行,wrap 多行
子元素属性设定:
flex:flex-grow、flex-shrink、flex-basis 的简写,默认值为 0 1
autoflex-grow:默认值是 0,保持 CSS 设定尺寸,设置后平分剩余空间,加在 css 设定尺寸上
flex-shrink :默认值是 1,一起缩小,设为 0 则保持 CSS 设定,设置后平分溢出部分,减在 css 设定尺寸上
15、媒体查询
查询到当前屏幕的宽度,针对不同的屏幕宽度设置不同的样式来适应不同屏幕.重置浏览器大小时,页面也会根据浏览器的宽度和高度重新渲染页面
@media screen [not|only]? and (media feature) { CSS-Code; }
media feature :max(min)-height (width),为了实现向上兼容,常用 min-width,从小写到大媒体查询调用不同 css 文件:
十六，手写伪元素清浮动
.clearfix:after {
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /*兼容 ie6,7,现在少用*/
}
十七、你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容.
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带.
**扩展:**产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃 CSS3), 你会如何说服他?
年初微软已经放弃对 IE8 的更新和支持,虽然现在还有部分用户在使用 IE8,但是随着市场占有率越来越低,虽然还在考虑对其兼容,但是没必要因为对齐兼容而影响更多客户的体验.
十八，为什么利用多个域名来存储网站资源会更有效?
主流的原因:
- CDN 缓存更方便(内容分发网络,选择一个离用户最近的 CDN 边缘节点来响应用户的请求)
- 2.突破浏览器并发限制(像地图之类的需要大量并发下载图片的站点,这个非常重要)
- Cookieless, 节省带宽,尤其是上行带宽 一般比下行要慢
- 节约主域名的连接数,从而提高客户端网络带宽的利用率,优化页面响应.因为老的浏览器(IE6 是典型),针对同一个域名只允许同时保持两个 HTTP 连接.将图片等资源请求分配到其他域名上,避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接(比如 ajax 请求). 非常规原因:
- 对于 UGC 的内容和主站隔离,防止不必要的安全问题(上传 js 窃取主站 cookie 之类的),因此要求用户内容的域名必须不是自己主站的子域名而是一个完全独立的第三方域名
十九， 如何对网站的文件和资源进行优化?
文件合并(目的是减少 http 请求)
文件最小化/文件压缩
使用 CDN(内容分发网络) 托管
缓存的使用:多个域名提供缓存
二十，Web Storage 本地存储(Local Storage、SessionStorage)cookies(储存在用户本地终端上的数据)之间的区别是什么?
Cookies:服务器和客户端都可以访问;大小只有 4KB 左右;设定有效期(不设定则关闭浏览器删除),过期后将会删除;cookie 还需要指定作用域,不可以跨域调用;需要前端开发者自己封装 setCookie,getCookie;作用是与服务器进行交互,作为 HTTP 规范的一部分而存在,不可或缺.
本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储,可通过POST或者GET的通讯发送到服务器;每个域5MB;localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的;sessionStorage 用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,是会话级别的存储.Web Storage 拥有setItem,getItem,removeItem,clear 等方法,是为了在本地"存储"数据而生.
补充:如何实现浏览器内多个标签页之间的通信?答案:调用 localstorge、cookies 等本地存储方式
二十一，语义化的理解?
1、利于 SEO,搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重, 页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记
2、让页面的内容结构化,便于各种终端根据其自身的条件来合适地显示页面,虽然部分 HTML 标签存在默认样式,甚至浏览器都各有默认样式,这种表现虽然不是语义化 HTML 结构的有点,但同样是为了更好的表达 HTML 语义
3、便于维护,方便阅读源码, 去掉或样式丢失的时候能让页面呈现清晰的结构
4、便于团队开发和维护,W3C 给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护提高开发效率甚至实现模块化开发
二十二，HTML5 引入什么新的表单标签、属性、输入类型、事件?
标签:datalist 配合 input 的 list 属性指定、keygen 验证用户数据、output 展示内容不可修改
属性:placeholder 占位符、autofocus 获取焦点、multiple 文件上传多选、required 必填项、pattern 正则表达式、autocomplet动完成、form 指定表单项属于哪个表单、novalidate 关闭验证
输入类型:email、tel、url、number、search、range、color、time、datatime
事件:oninput 输入内容时触发,可用于移动端输入字数统计、onkeyup 按键弹起时触发、oninvalid 验证不通过时触发
二十三，HTML5 和 CSS3 的新标签
HTML5:canvas , audio , video , datalist , keygen ,meter, header, footer, nav, section, article, aside,
CSS3:RGBA, text-shadow, box-shadow, border-radius, border-image,border-color, transform, transition, animation, linear-gradient, radial-gradient, flex
二十四，html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
1、新特性: 语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性
a.语义化更好的内容标签(header,nav,footer,aside,article,section)
b.表单控件,calendar、date、time、email、url、search
c.音频、视频 API(audio,video) 自定义播放器案例
d.地理定位(Geolocation) API 掌握获取、使用第三方 API 方法
e.拖拽释放(Drag and drop) API 给元素设置 draggable = “true” 属性使其可拖动,链接和图片默认可拖动
f. WEB 存储 API 只能存储字符串localStorage 长期存储,浏览器关闭后数据不丢失;sessionStorage 临时存储,不共享,关闭页面数据丢失
g.画布(Canvas) API
h.新的技术 webworker, websocket, Geolocation(作为了解)
webworker:可以在浏览器后台运行 JavaScript, 而不占用浏览器自身线程.Web Worker 可以提高应用的总体性能,并且提升用户体验.受限于不能访问 DOM 节点、全局变量和函数、window 和 document,但可以使用定时器和 XMLHttpRequest 实现 Ajax 通信. 可分为两种类型:专用线程 dedicated web worker(单页面),以及共享线程 shared web worker(多页面).
websocket:html5 中的新通讯协议,实现了浏览器与服务器全双工通信(full-duplex).一开始的握手需要借助 HTTP 请求完成.前期的网站实时通讯是通过轮询技术实现,定期发送请求,比较占带宽.IE10+实现了该协议.
Geolocation:地理定位,html5 提供了 api
2、移除的元素: 纯表现的元素:basefont,big,center,font,dir,strike, 对可用性产生负面影响的元素:frame,frameset,noframes;
3、HTML5 新标签兼容性处理: a.IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,但会把新标签解析成行内元素,还需要添加标签默认的样
4、区分 html 和 html5: 查看 DOCTYPE 声明:为 html5 标准