面试中经常被问,支支吾吾的老是答不全!!血泪教训,决定记下来!h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
---HTML5优势:
1)解决跨浏览器问题
2)明确的语义支持--更人性化
1、结构标签
(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;
(2)article:特殊独立区块,表示这篇页眉中的核心内容;
(3)aside:标签内容之外与标签内容相关的辅助信息;
(4)header:某个区块的头部信息/标题;
(5)hgroup:头部信息/标题的补充内容;
(6)footer:底部信息;
(7)nav:导航条部分信息
(8)figure:独立的单元,例如某个有图片与内容的新闻块。
(9 ) main : 主体标签,一个document文档里只能用一次,而且不能作为子元素使用
(10)hgroup(用于对整个页面或者页面中一个内容区块的标题进行组合
注释:它是用来表明标题的集合,如果有主标题,副标题可以用这来包裹一下也就是它里面包含的是hn标签这个标签在最新HTML5.1版中被废除了
目前用来模拟hgroup的其他方法
2、表单标签
(1)email:必须输入邮件;
(2)url:必须输入url地址;
(3)number:必须输入数值;
(4)range:必须输入一定范围内的数值;
(5)Date Pickers:日期选择器
(6)search:搜索常规的文本域;
(7)color:颜色;
其中的一些属性:
tabindex: table切换顺序
autofocus: 自动聚焦
disabled: 禁用
required:此项必填,不能为空
autocomplete:是否保存用户输入值
默认为on,关闭提示选择off
parrern:正则验证 pattrn="\d{1,9}"
我设置的正则是1-9个数字,如果不是就提交失败
3、媒体标签
(1)video:视频
(2)audio:音频
属性:
aotuplay: 自动播放
meted: 静音
controls: 控制面板
loop: 重复播放
ormouseover = 'this.pause' 鼠标划上暂停
ormouseout = 'this.play' 鼠标划出开始
(3)embed:嵌入内容(包括各种媒体),Midi、Wav、AU、MP3、Flash、AIFF等。
H5新增属性
(1)对于js进行添加的属性
异步加载先出现b再出现a。
(2)网页中标签中加入小图标的样式代码
内嵌css样式:在标签内部来定义一个样式区块(scoped),只对样式标签内部才有效
内嵌框架:iframe元素,新增了seamless无边距无边框,srcdoc定义了内嵌框架的内容。
总结新增属性:
(1)manifest属性:定义页面需要用到的离线应用文件,一般放在标签里
(2)charset属性:meta属性之一,定义页面的字符集
(3)sizes属性:新增属性,当link的rel="icon"时,用以设置图标大小
(4)base属性:
(5)defer属性:script标签属性,表示脚本加载完毕后,只有当页面也加载完毕才执行(推迟执行)
(6)async属性:script标签属性,脚本加载完毕后马上执行(运行过程中浏览器会解析下面的内容),即使页面还没有加载完毕(异步执行)
(7)media属性:元素属性:表示对何种设备进行优化
(8)hreflang属性:的属性,表示超链接指向的网址使用的语言
(9)ref属性:的属性,定义超链接是否是外部链接
(10)reversed属性:
- 的属性,定义序号是否倒叙
(11)start属性:
- 的属性,定义序号的起始值
(12)scoped属性:内嵌CSS样式的属性,定义该样式只局限于拥有该内嵌样式的元素,适用于单页开发
---HTML5的改变
1)语法宽松:不区分大小写 、开始标签和结束标签大小写不讲究只要字母一个意思即可、元素可省(空元素br hr 、有些可省略结束标签(li dt dd p 。。。。)、允许有些省略属性的值标签属性等于自己的可以省略、有bool类型 允许属性不带引号但还是建议带着)
2)标记方法:内容类型.html和.htm都可以、 DTD声明规定为、
指定字符集为
3)与其他版本兼容
---HTML5保留的标签
注意:HTML5删除table的align、bgcolor、border、boder建议写在css删除框架frameset、frame、noframes