HTML5新增type类型
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的 值进行验证）
<form> E-mail: <input type="email" name="usremail"> <input type="submit"> </form>
url
定义用于输入 URL 的字段
<form> <input type="url" name="homepage"> <input type="submit"> </form>
search
定义搜索字段（比如站内搜索或谷歌搜索等）
<form> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form>
tel
定义用于输入电话号码的字段
<form> 电话号码: <input type="tel" name="usrtel"> <input type="submit"> </form>
color
从拾色器中选取颜色
<form> 选择你喜欢的颜色: <input type="color" name="favcolor"> <input type="submit"> </form>
number
定义用于输入数字的字段（您可以设置可接受数字的限制）
<form> 数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form>
range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您 也可以设置可接受数字的限制
<form> <input type="range" name="points" min="1" max="10"> <input type="submit"> </form>
date
定义 date 控件
<form> 生日: <input type="date" name="bday"> <input type="submit"> </form>
month
定义 month 和 year 控件（不带时区）
<form> 生日 ( 月和年 ): <input type="month" name="bdaymonth"> <input type="submit"> </form>
week
定义 week 和 year 控件（不带时区）
<form> 选择周: <input type="week" name="week_year"> <input type="submit"> </form>
HTML5新增属性
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。
<form> User name: <input type="text" name="user_name" autofocus /> <input type="submit"> </form>
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值
<form> <input type="search" name="user_search" placeholder="Search itbaizhan" /> <input type="submit"> </form>
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）
<form> Name: <input type="text" name="usr_name" required /> <input type="submit"> </form>
实体字符
我们考虑⼀个问题，如果我们要在页面上显示⼀个 < 的时候，应该 如何来写，如果直接写符号显然是不合理的，毕竟，它是属于标签 的关键字，那我们应该如何来实现呢？ 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字 符实体
<p>¥</p> <p>®</p>
温馨提示
实体名称对大小写敏感！
块元素与行内元素（内联元素）
HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在 HTML5中，元素不再按照这种⽅式来区分， 而是按照内容模型来区 分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语 句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的， 元素可能属于不止⼀个类别，称为混合的
常见块级元素 div、form、h1~h6、hr、p、table、ul、等
常见内联元素 a、b、em、i、span、strong等
行内块级元素（特点：不换行、能够识别宽高） button、img、input等
HTML新增元素
容器元素（div）
<div>可定义文档中的分区或节（division/section）
<div>标签可以把文档分割为独立的、不同的部分
<div>是一个块级元素。这意味着它的内容自动地开始一个新行
<div>主要应用在布局上，作为布局的每个区域的容器
<body> <div class="container"> <div class="header">网站头部</div> <div class="nav">网站导航</div> <div class="main"> <div class="left">网站主要内容 </div> <div class="right">网站右侧模块 </div> </div> <div class="footer">网站底部</div> </div> </body>
HTML5新增布局标签
HTML5 是 HTML 最新的修订版本，2014年10月由万维网联盟 （W3C） 完 成标准制定 在 HTML5 出现之前，我们一般采用 DIV+CSS 布局我们的页面。但是这样 的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎 爬虫对我们页面的爬取。为了解决上述缺点， HTML5 新增了很多新的 语义化标签
视频和音频
HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方 工具实现的，现在HTML5也支持了这方面的功能。在一个支持 HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。
视频
Video标签定义视频，比如电影片段或其他视频流
<video src="movie.mp4" controls> 您的浏览器不支持 video 标签。 </video>
音频
Audio 标签定义声音，比如音乐或其他音频流
<audio src="someaudio.mp3"> 您的浏览器不支持 audio 标签。 </audio>
source
<source>标签为媒介元素（比如<video>和<audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒 体类型或者编解码器的支持进行选择
<audio controls> <source src="horse.ogg" > <source src="horse.mp3" > Your browser does not support the audio element. </audio>
HTML5新增标签
figure
用于对元素进行组合。多用于图片与图片描述组合
<figure> <img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>figure的标题</figcaption> </figure>
details
用于描述文档或文档的某个部分的细节，类似于下拉列表
<details> <summary>指定的标题，用户点击标题时展示下面 的所有内容，内容可以是任何形式的内容</summary> <div> <p>内容描述</p> </div> </details> <!-- 当增设open属性时，描述内容默认展示 --> <details open> <summary>指定的标题，用户点击标题时展示下面的 所有内容，内容可以是任何形式的内容</summary> <div> <p>内容描述</p> </div> </details>
mark
主要用来在视觉上向用户呈现那些需要突出的文字。 标签的 一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词
<p>你是<mark>大长腿</mark>吗？</p>
meter
定义度量衡。仅用于已知最大和最小值的度量
<meter min="0" max="100" value="81" low="20" high="80"></meter>
progress
运行中的进程。可以使用<progress>标签来显示 JavaScript 中耗费时间的 函数的进程
<progress max="100" value="20"></progress>
datalist
定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值 的下拉列表。 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 请使用 input 元素的 list 属性来绑定 datalist
<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
canvas
定义图形，比如图表和其他图像
