1.H5的发展历史
HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。 HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。 2012年12月17日,万维网联盟(W3C)正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称:“HTML5是开放的Web网络平台的奠基石。” 2013年5月6日, HTML 5.1正式草案公布。该规范定义了第五次重大版本,第一次要修订万维网的核心语言:超文本标记语言(HTML)。在这个版本中,新功能不断推出,以帮助Web应用程序的作者,努力提高新元素互操作性。 本次草案的发布,从2012年12月27日至今,进行了多达近百项的修改,包括HTML和XHTML的标签,相关的API、Canvas等,同时HTML5的图像img标签及svg也进行了改进,性能得到进一步提升
支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。
+ 内容类型(ContentType) HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm" + DOCTYPE声明 <!DOCTYPE html>不区分大小写 + 指定字符集编码 <meta charset="UTF-8"> + 可省略标记的元素不允许写结束标记的元素:br、col、embed、hr、img、input、link、meta + 可以省略结束标记的元素: li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th + 可以省略全部标记的元素:html、head、body、colgroup、tbody + 属性值可以使用双引号,也可以使用单引号。
在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
2.H5新增加的标签
HTML5常用标记 | ||
个数 | 含义 | 语法书写 |
1 | 头部 | <header></header> |
2 | 尾部 | <footer></footer> |
3 | 导航 | <nav></nav> |
4 | 媒体文件引入 | <embed src=“”></embed> |
5 | 内容块 | <section></section> |
6 | 辅助信息 | <aside></aside> |
7 | 文章 | <article></article> |
HTML常用标记 | |||
个数 | 含义 | 语法书写 | |
8 | 独立内容块 | <figure> <figcaption>这个是熊大小动物</figcaption> <img src="xiongda.png" /> </figure> | 类似dl dt dd |
9 | 高亮显示文字 | <mark></mark> | 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词 |
10 | 标题组 | <hgroup></hgroup> | <hgroup> 标签被用来对标题元素进行分组 |
11 | 对话框 | <dialog open>这是打开的对话窗口</dialog> | 目前只有 Chrome 和 Safari 6 支持 <dialog> 标签 |
12 | 定义图形 | <canvas> </canvas> | 只是图形容器,必须使用脚本来绘制图形。 |
3.H5新增加的表单type属性值
4. H5新增加的表单属性
5.H5新增加的表单标签
datalist提供一个事先定义好的列表,通过id与input关联,当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。
输出标签<output name="x" for="a b"></output> <form action="" οninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input id="a" type="range" min="0" max="100">100+ <input id="b" type="text" value="50">= <output name="x" for="a b"></output> </form>