一、HTML5概述

1.HTML5新特性

兼容性（ie9+）、合理性、效率、安全性、分离、简化、通用性、无插件

2.HTML5构成

主要包括下面这些功能：Canvas（2D和3D）、Channel消息传送、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Sent Events、Scalable Vector Graphics（SVG）、WEbSocket API及协议、Web Origin Concept、Web Storage、Web SQL database、Web Workers 、XMLHTTPRequest Level 2

二、编写第一个HTML5页面

1.检测浏览器是否支持HTML5

<head>

  <meta charset="UTF-8">

  <title></title>

  <style>

    #myCanvas{

      width:200px;

      height: 200px;

      background: red;

    }

  </style>

</head>

<body>

 <canvans id="myCanvas">该浏览器不支持HTML5的画布标记</canvas>

</body>

</html>

将该代码放在不支持HTML5的浏览器（ie8）中就会显示改行文字，而不会显示出样式

2.使用HTML5编写简单的web页面

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>第一个HTML5页面</title>

</head>

<body>

 <p>hello world！</p>

</body>

</html>

效果如下：

【个人学习笔记】走近H5

相比HTML4，根据HTML5设计化繁为简的准则，文档类型和字符说明都进行了简化。DOCTYPE声明是HTML文件中必不可少的，位于文件第一行

<!DOCTYPE html>

<html lang="en">

三、HTML5元素

1.新增结构元素（即新增的语义化标签元素）

header、footer、section、nav、aside、article

2.新增的功能元素

hgroup：用于对整个页面或页面中一个内容区块的标题进行组合

figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元

video、audio、embed

mark：在视觉上向用户呈现那些需要突出显示或高亮显示的文字。（比如搜索结果中的关键字）

time、canvas、output：表示不同类型的输出，比如脚本的输出

source：为媒体元素（比如video）定义媒体资源

menu：表示菜单列表，当需要列出表单控件时使用该标签

ruby：表示ruby注释

rt：表示字符的解释或发音

rp：在ruby注释中使用，以定义不支持ruby元素的浏览器所显示内容

wbr：表示软换行，与br的区别是，br白哦是此处必须换行，而wbr是浏览器窗口或父级元素足够宽时不进行换行，当宽度不够时，自动换行

command：表示命令按钮，如单选按钮，复选框或按钮。

details：表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用。summary元素提供标题或图例

datalist：表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表

datagrid：表示可选数据的列表，以树形列表的形式显示

Keygen：表示生成密钥

progress：表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数进程

email、url、number、range、Data Pickers

3.HTML5中被废除的元素

能使用css代替的元素：basefont、big、center、font、s 、strike、tt、u

不在使用frame框架，支持iframe

只有部分浏览器支持的元素：applet、bgsound、blink、marquee

秒客网