html5解决了:web浏览器之间的兼容性很低、文档结构不明确等功能。
一、Html5和Html4的区别
(1)语法的改变:
内容类型:文件名还是 .html或 .htm;文件类型还是 texttype
DOCTYPE声明:变化较大(在html4中要指定版本),指定字符编码:html4:<meta http-equiv ="content-type" content="text/html" charset ="UTF-8"> ; html5 :<meta charset="UTF-8">
(2)可以省略标记的元素:具有boolean值得属性
值为true的情况:
<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked=" ">
值为false的情况:
<input type="checkbox">
(3)新增元素:
结构元素:section(内容块) article(博客中的一篇文章) aside(辅助信息) header(标题) hgroup(标题的结合) footer(作者姓名) nav (导航) figure(文档主体中的一个单元)
其他元素:video audio canves embed mark progress meter time ruby rt rp wbr
command details datalist datagrid keygen output source menu
input元素的类型: email(地址)、 url、 number、 range、 Date Pickers(日历)
二、祥讲
article元素:article元素代表文档、页面或应用程序中独立的、完整的、可以独立被外部引用的内容。它可以是一篇博客或者报刊中的文章,一片论坛帖子、一段用户评论、或独立的插件,或其他任何独立的内容。article元素是可以嵌套使用的;article元素可以用来表示插件。
section元素:用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但 section元素并非一个普通的容器元素; 当一个容器需要被直接定义成样式或通过脚本定义行为时,推荐使用div而非section元素。
通常不推荐没有标题内容使用section元素,对页面中的内容进行分段,对文章进行分块。
不要与article元素混淆
特别注意:
1、不要将section元素作为设置样式的页面容器
2、如果 article元素、aside元素、nav元素更符合使用条件,那就不要使用section元素
3、没有标题内容 不要使用section元素
nav元素:是一个可以用作页面导航的连接组,其中的导航元素连接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。
应用场景:
传统导航条、侧边栏导航、页内导航、翻页操作
特别注意:
不能用menu元素替代nav元素
aside元素:用来表示当前页面或文章的附属信息部分,它可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别与主要主要内容的部分。
aside元素在article元素内,作为主要信息的一个附属信息;aside元素在article元素外。
header元素:是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,也可以是其他内容,例如:数据表格,搜索表单,或者相关的logo图片。可以出现多次。
footer元素:可以作为其上层父级内容块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如:作者、相关阅读链接及版权信息等。
hgroup 元素:是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,譬如:一个内容区块的标题及其子元素算一组。
address元素:用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子信箱、真实地址、电话号码等。address应该不只用来呈现电子信箱或真实地址,还用来展示跟文档相关的联系人的所有信息。
2.1废除元素
能使用css替代的元素:basefont big center font s tt u;不再使用frame框架;只有部分浏览器支持的元素;其他被废除的元素
2.2新增属性
表单相关的属性:
form属性:在HTML4中,表单内的从属元素必须写在表单内部。而在HTML5中,可以把他们写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。
formmethod属性:在HTML4中,一个表单内只能有一个action属性用来对表单内所有元素统一指定提交页面,所以每个表单内也只有一个method属性来统一指定提交方法。在HTML5中,可以使用formmethod属性来对每一个表单元素分别指定不同的提交方法(提交方法:get和post)。
formenctype属性:在HTML4中,表单元素具有一个enctyp属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。
三种形式:
<input type="text" formenctype="text/plain">
<!-- formenctype = "text/plain":表单中的空格被转化为+号,但不对表单中的特殊符号进行编码 。 -->
<input type="text" formenctype="multipart/form-data">
<!-- formenctype="multipart/form-data": 不对字符进行编码,在使用文件上传时需要使用该编码 -->
<input type="text" formenctype="application/x-www-form-urlencoded">
<!--formenctype="application/x-www-form-urlencoded" : 提交方式为get时,浏览器将此编码方式将表单数据转换成字符-->
formtarget属性:在HTML4中,表单元素具有一个target属性,该属性用于指定在何处打开表单提交后所需要加载的页面。在HTML5中,可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。
autofocus属性:为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。
required属性:HTML5中新增的required属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览中显示信息提示文字。
labels属性:在HTML5中,为所有可使用标签的表单元素、button、select 元素等,定义一个labels属性,属性值为一个NodeList对象,代表该元素所绑定的标签元素所构成的集合。
2.3新增的全局属性 (Html5)
contentEditable属性:主要功能是,允许用户编辑元素中的内容,是boolean类型值,未说明类型时,则由继承的状态来指定(如:父元素是可编辑的,其子元素也是)。
designMode属性:值有两个 : On,可编辑;Off,不可编辑。
hidden属性:也是boolean类型值。
spellcheck属性:用于输入框中拼写检查。
tabindex属性:
<body>
<a href=""><tabindex="1"></a>
</body>
tabindex="-1":是无法获取焦点的,但是在程序中是可以获取tabindex的。