HTML5新属性
一、HTML5 的新特性
HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改；
两个概念：
-
-
-
是一个新版本的
HTML语言，定义了新的标签、特性和属性 -
拥有一个强大的技术集，这些技术集是指：
HTML5、CSS3、javascript, 这也是广义上的HTML5
-
-
1、HTML5 拓展了哪些内容
① 语义化标签
② 本地存储
③ 兼容特性
④ 2D、3D
⑤ 动画、过渡
⑥ CSS3 特性
⑦ 性能和集成
2、HTML5 的现状
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持；
二、HTML5 新增属性
1、HTML5 新增的语义化标签
以前布局基本用 div 来做，但div 对于搜索引擎来说，是没有语义的。
新增的语义化标签：
<body> <header> 头部标签 </header> <nav> 导航标签 </nav> <article> 内容标签 </article> <section> 定义文档某个区域 </section> <aside> 侧边栏标签 </aside> <footer> 尾部标签 </footer> </body>
<div class=“header”> </div> <div class=“nav”> </div> <div class=“content”> </div> <div class=“footer”> </div>
注意：
这种语义化标准主要是针对搜索引擎的 ，这些新标签页面中可以使用多次 ，
在 IE9 中，需要把这些元素转换为块级元素；
语义化标签，在移动端支持比较友好；
2、HTML5 新增的多媒体标签
-
-
-
embed：标签定义嵌入的内容
-
audio：播放音频
-
video：播放视频
-
-
特点：
HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件（flash常常崩溃）但支持格式有限；
1、多媒体 embed（会使用）
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
2、视频：<video>
当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式 ，低版本不支持：
（1）语法：
<video src="文件地址" controls="controls" width="300" autoplay="autoplay" muted="muted"> </video>
// 播放录像 <video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > </ video >
（2）常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| src | url | 视频url地址 |
| controls | controls | 播放控件 |
| autoplay | autoplay | 自动播放，谷歌默认muted |
| loop | loop | 循环播放 |
| width | pixelx（像素） | 播放器宽度 |
| height | pixelx（像素） | 播放器高度 |
| preload | auto（预先加载） none（不加载） | 预先加载（有autoplay忽略） |
| poster | imgurl | 加载等待的画面图片，默认第一帧 |
| muted | muted | 静音播放，谷歌默认 |
（3）案例：
<style> video { width: 100%; } </style> <body> <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg"> </video> </body>
3、音频： <audio>
当前 <audio> 元素支持三种音频格式：主要是用mp3
（1）语法：
<audio src="文件地址" controls="controls"></audio> < audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持 <audio> 标签。 </ audio>
（2）属性：
| 属性 | 值 | 描述 |
|---|---|---|
| src | url | 视频url地址 |
| autoplay | autoplay | 自动播放，谷歌默认muted |
| controls | controls | 播放控件 |
| loop | loop | 循环播放 |
谷歌浏览器把音频和视频自动播放禁止了；
3、多媒体
1、插入音频、视频和flash
语法：
<embed src=”多媒体文件地址” width=””> </embed>
2、插入背景音乐
<bgsound src=”背景音乐的地址”/>
loop可选值：
Loop=”2”表示重复两次；
loop=”infinite”表示无限循环；
loop=”-1”无限次；
3、 HTML5 新增的 input 类型
1、新增类型
| 属性值 | 说明：限制用户输入的类型 |
|---|---|
| type="email" | 邮件类型 |
| type="url" | 地址类型 |
| type="date" | 日期类型 |
| type="time" | 时间类型 |
| type="month" | 月份类型 |
| type="week" | 周类型 |
| type="color" | 生成一个颜色表单 |
| type="number" | 数字类型（常用） |
| type="tel" | 手机号码（常用） |
| type="search" | 搜索框（常用） |
2、新增表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，不占位 |
| autofocus | autofocus | 页面加载完自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项;默认打开,如 autocompplete="on"需要放在表单内，同时加name属性，成功提交 |
| multiple | multiple | 多选文件提交 |
<style> /* 可以通过以下设置方式修改placeholder里面的字体颜色： */ input::placeholder { color: pink; } </style> <body> <form action=""> <ul> <li>数量：<input type="number"></li> <li>手机号码：<input type="tel"></li> <li>搜索：<input type="search"></li> </ul> </form> </body>
综合表单案例：
<form action=""> <fieldset> <legend>学生档案</legend> <label for="userName">姓名:</label> <input type="text" name="userName" id="userName" placeholder="请输入用户名"> <br> <label for="userPhone">手机号码:</label> <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br> <label for="email">邮箱地址:</label> <input type="email" required name="email" id="email"><br> <label for="collage">所属学院:</label> <input type="text" name="collage" id="collage" list="cList" placeholder="请选择"><br> <datalist id="cList"> <option value="前端与移动开发学院"></option> <option value="java学院"></option> <option value="c++学院"></option> </datalist><br> <label for="score">入学成绩:</label> <input type="number" max="100" min="0" value="0" id="score"><br> <label for="level">基础水平:</label> <meter id="level" max="100" min="0" low="59" high="90"></meter><br> <label for="inTime">入学日期:</label> <input type="date" id="inTime" name="inTime"><br> <label for="leaveTime">毕业日期:</label> <input type="date" id="leaveTime" name="leaveTime"><br> <input type="submit"> </fieldset> </form>
三、广义的HTML5
广义的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
虽然 HTML5 的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势。
HTML5 MDN 介绍：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML
HTML标签附录
HTML大概有七八百个标签
<!--...--> 定义注释。 <!DOCTYPE> 定义文档类型,所有H5都是打头。 <a> 定义锚。 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <applet> 不赞成使用。定义嵌入的 applet。 <area> 定义图像映射内部的区域。 <article> 定义文章。 <aside> 定义页面内容之外的内容。 <audio> 定义声音内容。 <b> 定义粗体字。 <base> 定义页面中所有链接的默认地址或默认目标。 <basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 <bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。 <bdo> 定义文字方向。 <big> 定义大号文本。 <blockquote> 定义长的引用。 <body> 定义文档的主体。 <br> 定义简单的折行。 <button> 定义按钮 (push button)。 <canvas> 定义图形。 <caption> 定义表格标题。 <center> 不赞成使用。定义居中文本。 <cite> 定义引用(citation)。 <code> 定义计算机代码文本。 <col> 定义表格中一个或多个列的属性值。 <colgroup> 定义表格中供格式化的列组。 <command> 定义命令按钮。 <datalist> 定义下拉列表。 <dd> 定义定义列表中项目的描述。 <del> 定义被删除文本。 <details> 定义元素的细节。 <dir> 不赞成使用。定义目录列表。 <div> 定义文档中的节。 <dfn> 定义定义项目。 <dialog> 定义对话框或窗口。 <dl> 定义定义列表。 <dt> 定义定义列表中的项目。 <em> 定义强调文本。 <embed> 定义外部交互内容或插件。 <fieldset> 定义围绕表单中元素的边框。 <figcaption> 定义 figure 元素的标题。 <figure> 定义媒介内容的分组，以及它们的标题。 <font> 不赞成使用。定义文字的字体、尺寸和颜色。 <footer> 定义 section 或 page 的页脚。 <form> 定义供用户输入的 HTML 表单。 <frame> 定义框架集的窗口或框架。 <frameset> 定义框架集。 <h1> to <h6> 定义 HTML 标题。 <head> 定义关于文档的信息。 <header> 定义 section 或 page 的页眉。 <hr> 定义水平线。 <html> 定义 HTML 文档。 <i> 定义斜体字。 <iframe> 定义内联框架。 <img> 定义图像。 <input> 定义输入控件。 <ins> 定义被插入文本。 <isindex> 不赞成使用。定义与文档相关的可搜索索引。 <kbd> 定义键盘文本。 <keygen> 定义生成密钥。 <label> 定义 input 元素的标注。 <legend> 定义 fieldset 元素的标题。 <li> 定义列表的项目。 <link> 定义文档与外部资源的关系。 <map> 定义图像映射。 <mark> 定义有记号的文本。 <menu> 定义命令的列表或菜单。 <menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。 <meta> 定义关于 HTML 文档的元信息。 <meter> 定义预定义范围内的度量。 <nav> 定义导航链接。 <noframes> 定义针对不支持框架的用户的替代内容。 <noscript> 定义针对不支持客户端脚本的用户的替代内容。 <object> 定义内嵌对象。 <ol> 定义有序列表。 <optgroup> 定义选择列表中相关选项的组合。 <option> 定义选择列表中的选项。 <output> 定义输出的一些类型。 <p> 定义段落。 <param> 定义对象的参数。 <pre> 定义预格式文本。 <progress> 定义任何类型的任务的进度。 <q> 定义短的引用。 <rp> 定义若浏览器不支持 ruby 元素显示的内容。 <rt> 定义 ruby 注释的解释。 <ruby> 定义 ruby 注释。 <s> 不赞成使用。定义加删除线的文本。 <samp> 定义计算机代码样本。 <script> 定义客户端脚本。 <section> 定义 section。 <select> 定义选择列表（下拉列表）。 <small> 定义小号文本。 <source> 定义媒介源。 <span> 定义文档中的节。 <strike> 不赞成使用。定义加删除线文本。 <strong> 定义强调文本。 <style> 定义文档的样式信息。 <sub> 定义下标文本。 <summary> 为 <details> 元素定义可见的标题。 <sup> 定义上标文本。 <table> 定义表格。 <tbody> 定义表格中的主体内容。 <td> 定义表格中的单元。 <textarea> 定义多行的文本输入控件。 <tfoot> 定义表格中的表注内容（脚注）。 <th> 定义表格中的表头单元格。 <thead> 定义表格中的表头内容。 <time> 定义日期/时间。 <title> 定义文档的标题。 <tr> 定义表格中的行。 <track> 定义用在媒体播放器中的文本轨道。 <tt> 定义打字机文本。 <u> 不赞成使用。定义下划线文本。 <ul> 定义无序列表。 <var> 定义文本的变量部分。 <video> 定义视频。 <wbr> 定义可能的换行符。 <xmp> 不赞成使用。定义预格式文本。
属性 描述
accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
