浅谈HTML5新增及移除的元素

下面小编就为大家带来一篇浅谈HTML5新增及移除的元素。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程。为了更好的处理现在的互联网应用,HTML5新增了图形绘制、多媒体播放、页面结构、应用程序存储、网络工作等新元素。

图形绘制新元素

标签描述
标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

标签描述
定义音频内容
定义视频内容
定义多媒体资源(audio或vedio)
定义嵌入的内容,比如插件
为如video和 audio元素之类的媒介规定外部文本轨道

新表单元素

标签描述
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
规定用于表单的密钥对生成器字段。
定义不同类型的输出,比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更加适用的的页面。

标签描述
定义页面独立的内容区域。
定义页面的侧边栏内容。 何问起
允许您设置一段文本,使其脱离其父元素的文本方向设置。
定义命令按钮,比如单选按钮、复选框或按钮。
用于描述文档或文档某个部分的细节。
定义对话框,比如提示框。
标签包含 details 元素的标题。
规定独立的流内容(图像、图表、照片、代码等等)。
定义 figure元素的标题。
定义 section 或 document 的页脚。
定义了文档的头部区域。
定义带有记号的文本。
定义度量衡。仅用于已知最大和最小值的度量。
定义导航链接的部分。
定义任何类型的任务的进度。
定义 ruby 注释(中文注音或字符)。
定义字符(中文注音或字符)的解释或发音。
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
定义文档中的节(section、区段)。
定义日期或时间。
规定在文本中的何处适合添加换行符。

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

标签
</td></tr><tr><td><strike></td></tr><tr><td><tt></td></tr></tbody></table><p>以上就是小编为大家带来的浅谈HTML5新增及移除的元素全部内容了,希望大家多多支持0133技术站~</p><p>原文地址:<a rel="nofollow" target="_blank" href="http://www.cnblogs.com/roucheng/archive/2016/06/26/html5new.html">http://www.cnblogs.com/roucheng/archive/2016/06/26/html5new.html</a></p></div><p>以上就是浅谈HTML5新增及移除的元素的详细内容,更多请关注0133技术站其它相关文章!</p></article><div class="post-actions"><a href="javascript:;" etap="like" class="post-like action action-like" data-pid="0"><i class="fa fa-thumbs-o-up"></i>赞(<span>0</span>)</a><a href="javascript:;" class="action action-rewards" data-event="rewards"><i class="fa fa-jpy"></i> 打赏</a></div><div class="post-copyright">未经允许不得转载:<a href="/">0133技术站首页</a> &raquo; <a href="/cate66/">HTML5 答疑</a></div><!--<div class="article-tags">标签:<a href="/archives/tag/javascript" rel="tag">JavaScript</a><a href="/archives/tag/%e5%be%ae%e4%bf%a1" rel="tag">微信</a><a href="/archives/tag/%e5%be%ae%e4%bf%a1%e7%9a%84%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">微信的版本号</a><a href="/archives/tag/%e7%89%88%e6%9c%ac%e5%8f%b7" rel="tag">版本号</a><a href="/archives/tag/%e8%af%ad%e4%b9%89%e5%8c%96" rel="tag">语义化</a></div>--><nav class="article-nav"><span class="article-nav-prev">上一篇<br><a href="/cate66/114848671840900.html" rel="prev">html5 拖拽及用 js 实现拖拽功能的示例代码</a></span><span class="article-nav-next">下一篇<br><a href="/cate66/114849112244900.html" rel="next">HTML5 3D书本翻页动画的实现示例</a></span></nav><div class="relates relates-thumb"><div class="title"><h3>相关文章</h3></div><ul><li><a href="/cate66/112643462225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d0d9f73510c1521.jpg-160" alt="html如何注释代码" class="thumb"></a><a href="/cate66/112643462225.html">html如何注释代码</a></li><li><a href="/cate66/112645004900.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d1339ccaaa38391.jpg-160" alt="HTML和HTML5之间有什么区别?" class="thumb"></a><a href="/cate66/112645004900.html">HTML和HTML5之间有什么区别?</a></li><li><a href="/cate66/112645519225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d142fef04894674.jpg-160" alt="HTML是什么意思" class="thumb"></a><a href="/cate66/112645519225.html">HTML是什么意思</a></li><li><a href="/cate66/112646033600.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d143fd9a9a53968.jpg-160" alt="HTML如何检索元素的位置(X,Y)?" class="thumb"></a><a href="/cate66/112646033600.html">HTML如何检索元素的位置(X,Y)?</a></li><li><a href="/cate66/112650665225.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d157ae5a90df429.jpg-160" alt="什么是HTML5" class="thumb"></a><a href="/cate66/112650665225.html">什么是HTML5</a></li><li><a href="/cate66/112652725025.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d15b57859fd4613.jpg-160" alt="HTML的readonly属性怎么用?" class="thumb"></a><a href="/cate66/112652725025.html">HTML的readonly属性怎么用?</a></li><li><a href="/cate66/112654270400.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d15d57d537d1991.jpg-160" alt="HTML和XML之间有什么区别?" class="thumb"></a><a href="/cate66/112654270400.html">HTML和XML之间有什么区别?</a></li><li><a href="/cate66/112657362500.html"><img data-src="https://ss.0133.cn/upload/article/000/000/006/5d1700ec5ca8e230.jpg-160" alt="HTML如何调用JavaScript?" class="thumb"></a><a href="/cate66/112657362500.html">HTML如何调用JavaScript?</a></li></ul></div><!-- <div class="title" id="comments"><h3>评论 <small>抢沙发</small></h3></div><div id="respond" class="no_webshot"><form action="return false;" method="post" id="commentform"><div class="comt"><div class="comt-title"><img data-src="https://secure.gravatar.com/avatar/?s=100&d=mm" class="avatar avatar-100" height="50" width="50"><p><a id="cancel-comment-reply-link" href="javascript:;">取消</a></p></div><div class="comt-box"><textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&amp;&amp;event.keyCode==13){document.getElementById('submit').click();return false};"></textarea><div class="comt-ctrl"><div class="comt-tips"><input type='hidden' name='comment_post_ID' value='6053' id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="40dd7081eb"/></p><label for="comment_mail_notify" class="checkbox inline hide" style="padding-top:0"><input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked"/>有人回复时邮件通知我</label><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="245"/></p></div><button type="button" name="submit" id="submit" tabindex="5">提交评论</button>--><!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> --><!-- </div></div><div class="comt-comterinfo" id="comment-author-info"><ul><li class="form-inline"><label class="hide" for="author">昵称</label><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称"><span class="text-muted">昵称 (必填)</span></li><li class="form-inline"><label class="hide" for="email">邮箱</label><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱"><span class="text-muted">邮箱 (必填)</span></li><li class="form-inline"><label class="hide" for="url">网址</label><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="网址"><span class="text-muted">网址</span></li></ul></div></div></form></div>--></div></div><div class="sidebar"><div class="widget widget_ui_tags"><h3>常见问题</h3><div class="items"><a href="/cate66/">HTML5 答疑</a><a href="/cate67/">CSS3 答疑</a><a href="/cate68/">JavaScript 答疑</a><a href="/cate69/">JSON 答疑</a><a href="/cate70/">jQuery 答疑</a><a href="/cate82/">Angular.js 答疑</a><a href="/cate83/">Node.js答疑</a><a href="/cate85/">React 答疑</a><a href="/cate86/">Vue.js 答疑</a><a href="/cate87/">前端答疑</a><a href="/cate99/">其他答疑</a></div></div><form method="get" class="search-form clearfix" id="search-formhybrid-search" target="_blank" action="/search/article/"><div class="search-input-wrap"><input type="text" class="search-text" placeholder="来搜我" name="word" id="search-texthybrid-search" value="" data-placeholder=""><b class="search-liaosheji"></b><button type="submit" class="search-button"><i class="icon-search"></i></button></div></form><div style="text-align:center;margin:0 auto;"><ul class='hot-search layui-clear'><li style="float:left;margin-right:20px;">热门搜索:</li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=html5新增的表单元素'>html5新增的表单元素</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=html5元素'>html5元素</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=新增元素'>新增元素</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=移除元素'>移除元素</a></li><li style="float:left;margin-right:20px;"><a href='/search/article/?word=浅谈'>浅谈</a></li></ul></div><br/><div class="widget widget_ui_posts"><h3>置顶推荐</h3><ul><li><a href="/cate99/113249168437025.html"><span class="thumbnail"><img data-src="https://ss.0133.cn/upload/article/000/000/001/61c03e45239f0358.jpg" alt="微信青少年监护人可以看聊天记录吗" class="thumb"></span><span class="text">微信青少年监护人可以看聊天记录吗</span><span class="muted">2021-12-20</span></a></li></ul></div><div class="widget widget_recent_entries"><h3>猜你喜欢</h3><ul><li><a href="/cate66/116940516100.html" target="_blank">常用的特殊符号有哪些?</a><span class="post-date">2020-02-20</span></li><li><a href="/cate66/113324635600.html" target="_blank">html中文为什么会乱码?html中文乱码怎么解决?</a><span class="post-date">2019-08-23</span></li><li><a href="/cate66/113099665625.html" target="_blank">字体颜色怎么设置?</a><span class="post-date">2019-08-14</span></li><li><a href="/cate66/114810769600.html" target="_blank">html如何插入视频?</a><span class="post-date">2019-11-11</span></li><li><a href="/cate66/112753060900.html" target="_blank">HTML中文乱码怎么解决?</a><span class="post-date">2019-07-20</span></li><li><a href="/cate66/113158400000.html" target="_blank">txt是什么格式?</a><span class="post-date">2019-08-16</span></li><li><a href="/cate66/113318872100.html" target="_blank">什么是代码?</a><span class="post-date">2019-08-23</span></li><li><a href="/cate66/113476831225.html" target="_blank">空格键符号是什么?HTML中空格键符号有哪些?</a><span class="post-date">2019-08-30</span></li></ul></div><!--<div class="widget widget_ui_tags"><h3>热门标签</h3><div class="items"><a href="/archives/tag/javascript">JavaScript (324)</a></div></div><div class="widget widget_ui_comments"><h3>最新评论</h3><ul><li><a href="" title=""><img data-src="" class="avatar avatar-100" height="50" width="50"><strong></strong></a></li></ul></div>--></div><div id="leftbar" class="leftbar"><div class="leftbar-con"><div style="text-align: center; width: 160px;"></div></div></div></section><footer class="footer"><div class="container"><p>&copy; 2022 <a href="/">WEB前端开发</a></p><p><a href="/cate88/">工具教程</a> | <a href="/cate71/">前端开发</a> | <a href="/cate61/">常见问题</a> | <a href="/cate129/">操作系统</a> | <a href="/cate103/">编程</a> | <a href="/cate108/">网络安全</a> | <a href="/cate120/">设计</a> | <a href="/cate137/">站长技巧</a></p><div class="footer-gav" style="margin-bottom: 10px ;font-size: 12px;"><img src="https://ss.0133.cn/newimg88/2016/06/beian-gov-cn.png" style="vertical-align: middle; height: 14px;"/><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2021014202号-2</a></div><div class="footer-qrcode"></div></div></footer><script> window.jsui = { www: '', uri: '/wp-content/themes/dux', ver: '5.2.5', roll: ["1", "2"], ajaxpager: '0', url_rp: '/about' }; </script><script type='text/javascript' src='/wp-content/themes/dux/js/libs/bootstrap.min.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-content/themes/dux/js/loader.js?ver=5.2.5'></script><script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=5.0.2'></script><script async="async" type='text/javascript' src='/wp-content/plugins/akismet/_inc/form.js?ver=4.0.8'></script><script type="text/javascript"> var $win = jQuery(window); var $WindowW = $win.width(); var $threebar = jQuery("#leftbar"); if ($threebar.length) { var offsetT = $threebar.offset().top; $win.on("scroll.leftbar", function () { if ($WindowW >= 1200) { if ($win.scrollTop() >= (offsetT)) { $threebar.find(".leftbar-con").css({ "position": "fixed", "top": 0 }); } else { $threebar.find(".leftbar-con").css("position", "static") } } }); } // Array var imagesArr = []; $('#article-content').find("img").each(function (index, Element) { imagesArr.push(Element) }); mediumZoom(imagesArr, { margin: 24, background: '#FFFFFF', scrollOffset: 0 }) </script><script> (function (i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-3448069-1', 'css88.com'); ga('send', 'pageview'); </script><script> var _hmt = _hmt || []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08985692e4db1e8be1cff8097c2979b7"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script></body></html>