一、新的文档类型生命(DTD)
通常我们做网站是在网页的第一行是这样一段代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是html4的DTD声明,DTD是用来声明浏览器渲染方式,各种浏览器的渲染有差异性,主要有两个差异性,其一是css渲染效果的不同,其二是对javascript支持不同 。各种浏览器的渲染不同,我们可以称为怪异模式。而符合w3c标准的模式就是标准模式。我们就是用上面的DTD声明,来告诉浏览器我们的代码是符合标准模式,如果没有这个声明,代码就是怪异模式。
而html5的DTD声明就比较简单了:
<!doctype html>
很短了,并且html5不区分大小写。
二、新增的HTML5标签
1、结构标签:(块状元素)有意义的div
<article> 标记定义一篇文章
<header> 标记定义一个页面或一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义内容部分的侧边栏
<hgroup> 标记定文件中一个区块的相关信息,h1——h6
<figure> 标记定义一组媒体内容以及他们的标题
<figcaption> 标签定义figure元素的标题
<footer> 标记定义一个页面或一个区域的底部
<dialog> 标记定义一个对话框(会话框)类似微信
新的结构标签有利于网页布局和提升对搜索引擎的友好。
2、多媒体交互标签
<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源列表
<canvas> 标记定义图片,用来在浏览器中画图的,并且可以用于小游戏什么的,效率比flash高。
<embed> 标记定义外部的可交互的内容或插件 比如flash
Html5的多媒体标签的出现,意味着多媒体的发展以及不使用插件的情况下即可操作多媒体文件,极大的提升了用户体验。
3、web应用标签
<menu> 命令列表
<menuitem> menu命令列表标签FF(嵌入系统)
<command> menu标记定义一个命令按钮
<meter> 状态标签(实时状态显示:气压、气温)C、O
<progress> 状态标签(任务过程:安装、加载)C、F、O
<datalist> 为input标记定义一个下拉列表,配合option F、O
<details> 标记定义一个元素的详细内容,配合dt、dd C
4、注释标签
<ruby> 标记定义注释或音标
<rp> 告诉那些不支持Ruby元素的浏览器如何去显示
<rt> 标记定义对ruby的注释内容文本
5、其他标签
<keygen> 标记定义表单里一个生成的键值(加密信息传送)O/F
<mark> 标记定义有标记的文本(黄色选中状态)
<output> 标记定义一些输出类型,计算表单结果配合oninput事件
<time> 标记定义一个日期/时间,目前所有浏览器都不支持
三、删除的HTML标签
1、纯表现的元素:basefont ,big ,cneter ,font ,s ,tt ,u ;
2、对可用性产生负面影响的元素:frame ,frameset , noframes
3、产生混淆的元素:acronym ,applet ,isindex ,dir
四、重新定义的HTML标签
<b> 代表内联文本,通常是粗体,没有传递重要的意思
<i> 代表内联文本,通常是斜体 ,没有传递重要的意思。
<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> 可以同details与figure一同使用,汇总细节,dialog也可用
<hr> 表示主题结束,而不是水平线,虽然显示相同
<menu> 重新定义用户界面的菜单,配合commond或menuitem
<small> 表示小字体,例如打印注释或者法律条款
<strong> 表示重要性而不是强调符号
五、崭新的页面布局
传统的页面布局很多的div,页面复杂。如下图:
Html5的页面布局,简单明了,如下图: