1.HTML5的发展:
2.HTML5的语义化标签,页面架构:
3.HTML5新增的元素:
3.1格式类:
1、mark:定义有记号的文本,高亮显示
2、meter:用于定义度量衡,定义范围内的度量,需定high,low,max,min,optimum,value几个属性
3、progress:定义任何类型的任务的进度,即定义一个进度条,需定义max,value两个属性
4、time:定义日期/时间(大多数主流浏览器不支持)
5、wbr:定义可能的换行符
3.2表单类:
1、datalist:定义选项列表,与input元素配合使用
2、output:显示不同类型的输出
3.3图像类:
1、canvas:定义图形画布
2、figcaption:定义fig元素的标题
3、figure:定义媒介内容的分组以及它们的标题
3.4音频、视频类:
1、audio:定义音频内容
2、video:定义视频内容
3、embed:用于嵌套媒体资源,既可以是音频也可以是视频
4、source:为媒介元素定义媒介资源
3.5其他类:
1、details:用于描述文档或文档某个部分的细节
2、summary:为details元素定义可见的标题,作为details元素的第一个子元素
4.HTML5停止使用的元素:
1)frame元素,该元素曾经是构建页面框架结构不可或缺的元素,但由于页面重用性低,HTML5中不再使用该元素。
2)其他停止使用的元素,分别由HTML5新元素进行取替。包括,applet,bgsound,acronym,dir,isindex,listing,nextid,plaintext,rb,xmp。
5.HTML5新增的属性:
5.1新增的表单属性:
属性名称 | 适用元素 | 说明 |
autofocus | input,select,textarea,button | 用于页面加载时,使设置该属性的元素控件获得焦点 |
form | input,output,select,textarea, |
|
button,fieldset | 用于声明设置该属性的元素属于哪个表单 |
|
placeholder | input(text),textarea | 用于对设置该属性的元素进行输入提示 |
required | input(text),textarea | 用于对设置该属性的元素,进行必填校验 |
autocomplete | form,input | 用于对设置该属性的元素,进行自动补全填写 |
min/max/step | input | 用于对设置该属性的,包含数字或日期的元素规定限定约束条件 |
multiple | input(email,file) | 用于规定设置该属性的元素输入域中可选择多个值 |
pattern | input | 用于设置元素输入域校验模式 |
5.2新增的链接属性:
属性名称 | 适用元素 | 说明 |
media | a,area | 用于规定设置该属性元素的媒体类型 |
sizes | link | 用于设置元素关联图标大小,通常与icon结合使用 |
5.3新增的其它属性:
属性名称 | 适用元素 | 说明 |
reversed | ol | 用于指定列表显示顺序为倒序 |
charset | meta | 用于设置文档字符编码方式 |
type | menu | 用于设置menu元素显示形式 |
label | menu | 用于设置menu元素标注信息 |
scoped | style | 用于设置样式作用域 |
async | script | 用于设置脚本执行方式为同步或异步 |
manifest | html | 用于设置离线应用文档缓存信息 |
5.4新增的属性说明:
1、contenteditable:规定元素内容是否可编辑
2、draggable:规定元素是否可拖动
3、dropzone:规定在拖动被拖动数据时是否进行复制、移动或链接
4、hidden:规定元素当前或不再相关
5、spellcheck:规定是否对元素进行拼写和语法检查
6、translate:规定是否应该翻译元素的内容
6.停止使用的属性:
HTML4属性 | HTML5处理方法 |
align,autosubmit,background,bgcolor,border,clear,compact,char,charoff,cellpadding,cellspacing ,frameborder,height,hspace,link,marginheight,marginwidth,noshade,nowrap,rules,,size,text, valign,vspace,width, | 使用CSS样式表替代原属性 |
target,nohref,profile,version | 停止使用 |
scope | 使用HTTP Content-type头元素 |
rev | rel替代 |
shape,coords | 使用area替代a |
7.HTML5移动通信:
跨文档消息机制:H4不允许一个浏览器的不同框架、不同标签页、不同窗口间的应用程序互相通信。
websocket:服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。Ajax技术需要客户端发起请求;XHR受到域的限制。
8.HTML5存储:
1、localstroage:类似于cookie,持久化本地存储,多达5M存储空间
2、sessionstorage:用于本地存储一个会话中的数据,会话结束则数据随之销毁
3、web SQL数据库
4、IndexDB