html5的新元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5的新元素相关的知识，希望对你有一定的参考价值。
自1999年以后html 4.01 已经改变了很多，今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。 <video>标记
定义和用法：
</video> 标签定义视频，比如电影片段或其他视频流。
<audio> 标记
定义和用法
</audio> 标签定义声音，比如音乐或其他音频流。
实例：
一段简单的HTML5 音频
<audio src=>
您的浏览器不支持 audio 标签。
</audio>
<canvas> 标记
定义和用法：
<canvas> 标签定义图形，比如图表和其他图像。
HTML5 的 canvas 元素使用javascript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
实例：
通过 canvas 元素来显示一个红色的矩形：
<canvas id=myCanvas></canvas>
<script type=text/javascript>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script> 除了原先的DOM接口，HTML5增加了更多API,如：
1． 用于即时2D绘图的Canvas标签
2． 定时媒体回放
3． 离线数据库存储
4．文档编辑
5． 拖拽控制
6． 浏览历史管理 新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput
元素的新属性：日期和时间，email, url。
新的通用属性：ping, charset, async
全域属性：id, tabindex, repeat。
移除元素：center, font, strike。 就是Html标注的属性里加上runat=server所构成的控件，至于Html标注和Html控件之间的区别很明显，Html控件是运行于服务器端，Html标注是运行于客户端。
基本Html控件有：HtmlTexArea\\HtmlTable\\HtmlImage\\HtmlButton\\HtmlSelect\\HtmlForm\\HtmlInput。
自定义的Html控件是根据自己的需求定义。当自主开发效率低，可以从技术社区、源码网站下载需要的控件。比如，需要插入table, image, links 等标签。不必自己开发，可以使用：ComponentOne Wijmo Editor等。
免费HTML5图表库——.Net图表控件Chart FX，深受大家喜爱，相信大家已经非常熟悉了。而且还从Chart FX的开发商SoftwareFX获得一个激动人心的消息：该公司已推出一套为HTML5，jQuery和JavaScript开发者设计的图表库——jChartFX，而且jChartFX是免费的！ .Net图表控件Chart FX相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX！
jChartFX亮点： jChartFX充分利用了HTML5，CSS和SVG，让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。 jChartFX拥有很多令人振奋的功能，它在无插件纯JavaScript的浏览器上运行，这意味着在提高了网站安全性和速度的同时，最大程度的减少了网站服务器的负荷。 jChartFX还能够自动整合到jQuery UI ThemeRoller，自动读取并解释jQuery的主题和CSS文件，能够快速适应您的页面布局和设计，无需一行代码。 jChartFX支持JSON，JSON能够帮助您实现，任何数据源中的数据都可以展现到图表中。 jChartFX还支持超过40种的2D、3D图表类型，免费的图表控件中支持如此之多的图表展示类型实属难得。 注：在下面表格中4: 指在HTML 4.01 中定义了该元素 5: 指在HTML 5 中定义了该元素 按字母顺序排列的标签列表标签 描述 <!--...--> 定义注释 4 5 <!DOCTYPE> 定义文档类型 4 5 <a> 定义超链接 4 5 <abbr> 定义缩写 4 5 <acronym> HTML 5 中不支持 4 <address> 定义地址元素 4 5 <applet> 定义 applet（HTML 5 中不支持） 4 <area> 定义图像映射中的区域 4 5 <article> 定义 article 5 <aside> 定义页面内容之外的内容 5 <audio> 定义声音内容 5 <b> 定义粗体文本 4 5 <base> 定义页面中所有链接的基准URL 4 5 <basefont> HTML 5 中不支持，请使用CSS 代替 4 <bdo> 定义文本显示的方向 4 5 <big> 定义大号文本（HTML 5 中不支持） 4 <blockquote> 定义长的引用 4 5 <body> 定义 body 元素 4 5 <br> 插入换行符 4 5 <button> 定义按钮 4 5 <canvas> 定义图形 5 <caption> 定义表格标题 4 5 <center> 定义居中的文本（HTML 5 中不支持） 4 <cite> 定义引用 4 5 <code> 定义计算机代码文本 4 5 <col> 定义表格列的属性 4 5 <colgroup> 定义表格列的分组 4 5 <command> 定义命令按钮 5 <datalist> 定义下拉列表 5 <dd> 定义定义的描述 4 5 <del> 定义删除文本 4 5 <details> 定义元素的细节 5 <dfn> 定义定义项目 4 5 <dir> 定义目录列表（HTML 5 中不支持） 4 <div> 定义文档中的一个部分 4 5 <dl> 定义定义列表 4 5 <dt> 定义定义的项目 4 5 <em> 定义强调文本 4 5 <embed> 定义外部交互内容或插件 5 <fieldset> 定义 fieldset 4 5 <figcaption> 定义 figure 元素的标题 5 <figure> 定义媒介内容的分组，以及它们的标题 5 <font> HTML 5 中不支持 4 <footer> 定义 section 或 page 的页脚 5 <form> 定义表单 4 5 <frame> 定义子窗口（框架）（HTML 5 中不支持） 4 <frameset> 定义框架的集（HTML 5 中不支持） 4 <h1> to <h6> 定义标题1 到标题6 4 5 <head> 定义关于文档的信息 4 5 <header> 定义 section 或 page 的页眉 5 <hgroup> 定义有关文档中的 section 的信息 4 5 <html> 定义 html 文档 4 5 <i> 定义斜体文本 4 5 <iframe> 定义行内的子窗口（框架） 4 5 <img> 定义图像 4 5 <input> 定义输入域 4 5 <ins> 定义插入文本 4 5 <keygen> 定义生成密钥 5 <isindex> 定义单行的输入域（HTML 5 中不支持） 4 <kbd> 定义键盘文本 4 5 <label> 定义表单控件的标注 4 5 <legend> 定义 fieldset 中的标题 4 5 <li> 定义列表的项目 4 5 <link> 定义资源引用 4 5 <map> 定义图像映射 4 5 <mark> 定义有记号的文本 4 5 <menu> 定义菜单列表 4 5 <meta> 定义元信息 4 5 <meter> 定义预定义范围内的度量 5 <nav> 定义导航链接 5 <noframes> 定义 noframe 部分（HTML 5 中不支持） 4 <noscript> 定义 noscript 部分 4 5 <object> 定义嵌入对象 4 5 <ol> 定义有序列表 4 5 <optgroup> 定义选项组 4 5 <option> 定义下拉列表中的选项 4 5 <output> 定义输出的一些类型 5 <p> 定义段落 4 5 <param> 为对象定义参数 4 5 <pre> 定义预格式化文本 4 5 <progress> 定义任何类型的任务的进度 5 <q> 定义短的引用 4 5 <rp> 定义若浏览器不支持 ruby 元素显示的内容 5 <rt> 定义 ruby 注释的解释 5 <ruby> 定义 ruby 注释 5 <s> 定义加删除线的文本（HTML 5 中不支持） 4 <samp> 定义样本计算机代码 4 5 <script> 定义脚本 4 5 <section> 定义 section 4 5 <select> 定义可选列表 4 5 <small> 定义小号文本 4 5 <source> 定义媒介源 4 5 <span> 定义文档中的 section 4 5 <strike> 定义加删除线的文本（HTML 5 中不支持） 4 <strong> 定义强调文本 4 5 <style> 定义样式定义 4 5 <sub> 定义下标文本 4 5 <summary> 定义 details 元素的标题 5 <sup> 定义上标文本 4 5 按字母顺序排列的标签列表标签 描述 4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素 <table> 定义表格 4 5 <tbody> 定义表格的主体 4 5 <td> 定义表格单元 4 5 <textarea> 定义 textarea 4 5 <tfoot> 定义表格的脚注 4 5 <th> 定义表头 4 5 <thead> 定义表头 4 5 <time> 定义日期/时间 5 <title> 定义文档的标题 4 5 <tr> 定义表格行 4 5 <tt> 定义打字机文本 4 5<u> 定义下划线文本（HTML 5 中不支持） 4 <ul> 定义无序列表 4 5 <var> 定义变量 4 5 <video> 定义视频 5 <xmp> 定义预格式文本（HTML 5 中不支持） 4 HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
4: 指在HTML 4.01 中定义了该元素。
5: 指在HTML 5 中定义了该元素。
HTML 5不再支持的 HTML 4.01 属性：onreset。 事件属性属性 值 描述 4 5 onabort script 发生 abort 事件时运行脚本。 5 onbeforeonload script 在元素加载前运行脚本。 5 onblur script 当元素失去焦点时运行脚本。 4 5 onchange script 当元素改变时运行脚本。 4 5 onclick script 在鼠标点击时运行脚本。 4 5 oncontextmenu script 当菜单被触发时运行脚本。 5 ondblclick script 当鼠标双击时运行脚本。 4 5 ondrag script 只要脚本在被拖动就运行脚本。 5 ondragend script 在拖动操作结束时运行脚本。 5 ondragenter script 当元素被拖动到一个合法的放置目标时，执行脚本。 5 ondragleave script 当元素离开合法的放置目标时。 5 ondragover script 只要元素正在合法的放置目标上拖动时，就执行脚本。 5 ondragstart script 在拖动操作开始时执行脚本。 5 ondrop script 当元素正在被拖动时执行脚本。 5 onerror script 当元素加载的过程中出现错误时执行脚本。 5 onfocus script 当元素获得焦点时执行脚本。 4 5 onkeydown script 当按钮按下时执行脚本。 4 5 onkeypress script 当按键被按下时执行脚本。 4 5 onkeyup script 当按钮松开时执行脚本。 4 5 onload script 当文档加载时执行脚本。 4 5 onmessage script 当 message 事件触发时执行脚本。 5 onmousedown script 当鼠标按钮按下时执行脚本。 4 5 onmousemove script 当鼠标指针移动时执行脚本。 4 5 onmouseover script 当鼠标指针移动到一个元素上时执行脚本。 4 5 onmouseout script 当鼠标指针移出元素时执行脚本。 4 5 onmouseup script 当鼠标按钮松开时执行脚本。 4 5 onmousewheel script 当鼠标滚轮滚动时执行脚本。 5 onreset script 当表单重置时执行脚本。不支持。 4 onresize script 当元素调整大小时运行脚本。 5 onscroll script 当元素滚动条被滚动时执行脚本。 5 onselect script 当元素被选中时执行脚本。 4 5 onsubmit script 当表单提交时运行脚本。 4 5 onunload script 当文档卸载时运行脚本。 5 HTML 5标签拥有属性。在每个标签的参考页中可以找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。
4: 指在HTML 4.01 中定义了该元素
5: 指在HTML 5 中定义了该元素
HTML 5标签中的新属性有：contenteditable, contextmenu, draggable, irrelevant, ref,registrationmark, template
HTML 5 中不再支持的属性：accesskey 标签属性属性 值 描述 4 5 acceskey a character 设置访问一个元素的键盘快捷键。不支持。 4 class class_ruleorstyle_rule 元素的类名。 4 5 contenteditable true
false 设置是否允许用户编辑元素。 5 contentextmenu id of a menu element 给元素设置一个上下文菜单。 5 dir ltr
rtl 设置文本方向。 4 5 draggable true
false
auto 设置是否允许用户拖动元素。 5 id id_name 元素的唯一 id。 4 5 irrelevant true
false 设置元素是否相关。不显示非相关的元素。 5 lang language_code 设置语言码。 4 5 ref urlorelementID 引用另一个文档或文档上另一个位置。仅在 template 属性设置时使用。 5 registrationmark registration mark 为元素设置拍照。可规定于任何 <rule> 元素的后代元素，
除了 <nest> 元素。 5 style style_definition 行内的样式定义。 4 5 tabindex number 设置元素的 tab 顺序。 4 5 template urlorelementID 引用应该应用到该元素的另一个文档或本文档上另一个位置。 5 title tooltip_text 显示在工具提示中的文本。 4 5 HTML5可以提供:
1.提高可用性和改进用户的友好体验;
2.有几个新的标签，这将有助开发人员定义重要的内容；
3.可以给站点带来更多的多媒体元素(视频和音频)；
4.可以很好的替代FLASH和Silverlight；
5.当涉及到网站的抓取和索引的时候，对于SEO很友好；
6.将被大量应用于移动应用程序和游戏。
谷歌和HTML5
2010年5月22日，谷歌创建了一个涂鸦来纪念Pac Man的视频游戏。这个涂鸦是一个动画，同时也是一个可以玩的Pac Man的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的，当然谷歌也提供一个FLASH版本来支持不兼容HTML5的浏览器。我敢打赌，这是大多数 互联网网民第一次和HTML5的接触。对于个人来说，这是一个兴奋的消息。以我的观点，这个涂鸦提供了一个机会可以窥视未来互联网、网页、移动应用软件和游戏等发展趋势。对于搜索引擎优化，他开辟了我更多的想象，它让我思考HTML5在SEO领域的潜力。网站转移到HTML5标准对于SEO有什么优势?
HTML 5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。
HTML5与SEO
一：使搜索引擎更加容易抓取和索引
对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的 好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。
二：提供更多的功能，提高用户的友好体验
使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。
三：可用性的提高，提高用户的友好体验
最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也公开声明将 停止FLASH基于移动平台的开发，可以这么说——移动平台日后视频音频是HTML5的天下！
html5新元素详细讲解 - https://21xrx.com/full_stack/Html/html5_elements.html
以上是关于html5的新元素的主要内容，如果未能解决你的问题，请参考以下文章