- A+
所属分类：Web前端
HTML5 新增属性
HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持；
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 新增的多媒体标签
新增的多媒体标签主要包含两个： 1、视频：<video> 2、音频：<audio>
特点：
HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件（flash常常崩溃）但支持格式有限；
1、视频：<video>
当前 <video> 元素支持三种视频格式： 尽量使用 mp4格式 ，低版本不支持：
（1）语法：
<video src="文件地址" controls="controls"> </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>
2、音频： <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>
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 规定是否应该翻译元素内容。
