HTML5

一、HTML5介绍

（一）、什么是HTML5？

HTML5将成为HTML、XHTML以及HTML DOM的新标准。大部分现代浏览器已经具备了某些HTML5支持。
官方概念：HTML5草案的前身名为Web Applications 1.0，是作为下一代互联网标准，用于取代html4与xhtml1的新一代标准版本，所以叫HTML5。它增加了新的标签和属性，加强了网页的标准、语义化与web表现性能，同时还增加了本地数据库等web应用的功能。
HTML5现在一般用于制作动画。

二、HTML特点

• 更简单，如：doctype
• 标签语义化
• 语法更宽松
• 增加了强大的画布标签<canvas>，必须配合js使用
• 一些标签不再建议使用（比如：applet、font、basefont、center、dirs、strike、u等）
• 多设备跨平台
• 自适应网页设计，兼容性好（响应式，网页根据屏幕大小自动地改变页面的内容大小）

三、HTML5新增标签及属性

结构标签：（块状元素）有意义的div
<header> 标记定义一个页面或一个区域的头部
<nav>标记定义导航链接
<article>标记定义一篇文章内容
<section>标记定义网页中一块区域，比如章节、页眉页脚之类专题效果
<aside>标记定义页面内容部分的侧边栏
<hgroup>标记定义文件中一个区块的相关信息
<figure>标记定义一组媒体内容以及它们的标题
<figcaption>标记定义figure元素的标题
<dialog>标记定义一个对话框（会话框）类似微信
<footer>标记定义一个页面或一个区域的底部
新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

（一）、不再建议使用的标签和属性

第一类：表现类元素

basefont/big/center/font/s/strike/tt/u
建议用语义正确的元素替代他们，并使用CSS来确保渲染后的效果

第二类：框架类元素

因框架有很多可用性及可访问性问题，HTML5规范将以下元素移除。
frame/frameset/no frames，但HTML5支持iframe。

第三类：属性类

很多表现性的属性也被新规范移除，如下：
align/body标签上的link、vlink、alink、text属性bgcolor/height和width
iframe元素上的scrolling属性/valign/hspace和vspace
table标签上的cellpadding、cellspacing和boder属性
header标签上的profile属性
img和iframe元素的longdesc属性

第四类：其他

abbr取代acronym（用于表示缩写）
object取代了applet
ul取代了dir

四、input 公共属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦功能
autocomplete	on/off	自动提示功能

<form>
    <input type="text" required="required" placeholder="请输入6位数字" autofocus=“autofoucus” autocomplete=“on”>
    <input type="submit" value="提交">
</form>

五、input新增属性值

属性值	说明
type=“email”	限制用户输入必须为email类型
type=“url”	限制用户输入必须为url类型
type=“date”	限制用户输入必须为日期类型
type=“time”	限制用户输入必须为时间类型
type=“month”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制永华输入必须为数字类型
type=“range”	产生一个滑动条的表单
type=“search”	产生一个搜索意义的表单
type=“color”	生成一个颜色选择表单

<form>
    邮箱：<input type="email" required="required" ><br>
    网址：<input type="url" required="required" ><br>
    日期：<input type="date" required="required" ><br>
    时间：<input type="time" required="required" ><br>
    数字：<input type="number" required="required" ><br>
    滑动条：<input type="range" required="required" ><br>
    颜色：<input type="color" required="required" ><br>
    <input type="submit" value="Submit">
</form>

六、通用属性contenteditable和hidden

contenteditable：把普通元素做成可以输入内容的元素
hidden：隐藏