【HTML5】弃用标签与新增标签
标签：背景音乐 绘图 next menu tar 首字母 居中 command 方向
NO.1 弃用标签
| |
允许作者明确地声明一个字符序列,，它们构成一个单词的首字母缩写或简略语。 |
|
标志着包含了Java的applet。 |
|
定义页面中文本的默认字体、颜色或尺寸。 |
|
是IE浏览器中设置网页背景音乐的元素。 |
|
会使字体加大一号（例如从小号(small)到中号(medium)，从大号(large)到加大(x-large)），最大不超过浏览器的最大字体。 |
|
不是标准元素，它会使包含其中的文本闪烁。 |
|
定义居中文本,是个块级元素，可以包含段落，以及其它块级和内联元素。 |
|
用来表示一个用户可以调用的命令。 |
|
在 Shadow DOM 中用作插入点，不在普通 HTML 中使用。 |
|
定义目录列表,作为一个文件和/或文件夹的目录的容器 |
|
被定义在最新的 HTML DOM 元素中。 |
|
定义字体大小、顏色与表现。 |
|
定义了一个特定区域，另一个 HTML 文档可以在里面展示。帧应该在
|
|
是一个用于包含 的 HTML 元素。 |
|
用来显示图片。它从未被实现过，请使用标准的 元素。 |
|
定义与文档相关的可搜索索引,使浏览器显示一个对话框，提示用户输入单行文本。 |
|
标签规定用于表单的密钥对生成器字段，当提交表单时，私钥存储在本地，公钥发送到服务器。 |
|
渲染了开始和结束标签之间的文本，而不会解释 HTML，并使用等宽字体。 |
|
用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。 |
|
生成一个弹出式菜单。这包括上下文菜单，以及按钮可能附带的菜单。 |
|
是一个实验元素，旨在允许多列布局。它从来没有任何显着的牵引力，并没有在任何主流浏览器中实现。 |
|
用于使NeXT网页设计工具为其锚点生成自动的NAME标签。 |
|
阻止文本自动拆分成新行，所以它展示为长的一行，可能还需要滚动。 |
|
是个废除的和不标准的方式，用于向不支持
|
|
用于支持不支持 元素的浏览器，或者这样配置的浏览器。 |
| <![CDATA[</plaintext></td>
<td>将起始标签后面的任何东西渲染为纯文本，不会解释为 HTML。它没有闭合标签，因为任何后面的东西都会看做纯文本。</td>
</tr>
<tr>
<td><shadow></shadow></td>
<td>用作 shadow DOM insertion point。如果您在 shadow host 下创建了多个 shadow root，则可能已使用了它。</td>
</tr>
<tr>
<td><spacer></spacer></td>
<td>它可以向页面插入间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。</td>
</tr>
<tr>
<td><strike></strike></td>
<td>在文本上放置删除线。</td>
</tr>
<tr>
<td><tt></tt></td>
<td>产生一个内联元素，使用浏览器内置的 monotype 字体展示。这个元素用于给文本排版，使其等宽展示。</td>
</tr>
<tr>
<td><xmp></xmp></td>
<td>定义预格式文本,标签之间的内容不会被当作文档内容解析，而会被用等宽字体直接呈现。</td>
</tr>
</tbody></table>
<p>NO.2 新增标签</p>
<table><tbody>
<tr>
<td></td>
<td>定义页面独立的内容区域。</td>
</tr>
<tr>
<td></td>
<td>定义页面的侧边栏内容。</td>
</tr>
<tr>
<td></td>
<td>定义音频内容。</td>
</tr>
<tr>
<td><bdi></bdi></td>
<td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td>
</tr>
<tr>
<td><canvas></canvas></td>
<td>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API。</td>
</tr>
<tr>
<td><command></command></td>
<td>定义命令按钮，比如单选按钮、复选框或按钮。</td>
</tr>
<tr>
<td><datalist></datalist></td>
<td>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td>
</tr>
<tr>
<td><details></details></td>
<td>用于描述文档或文档某个部分的细节。</td>
</tr>
<tr>
<td><dialog></dialog></td>
<td>定义对话框，比如提示框。</td>
</tr>
<tr>
<td><embed></embed></td>
<td>定义嵌入的内容，比如插件。</td>
</tr>
<tr>
<td><figcaption></figcaption></td>
<td>定义 <figure> 元素的标题。</figure>
</td>
</tr>
<tr>
<td><figure></figure></td>
<td>规定独立的流内容（图像、图表、照片、代码等等）。</td>
</tr>
<tr>
<td><footer></footer></td>
<td>定义 section 或 document 的页脚。</td>
</tr>
<tr>
<td><header></header></td>
<td>定义了文档的头部区域。</td>
</tr>
<tr>
<td><span><keygen></keygen></span></td>
<td>规定用于表单的密钥对生成器字段。（已废弃）</td>
</tr>
<tr>
<td><mark></mark></td>
<td>定义带有记号的文本。</td>
</tr>
<tr>
<td><meter></meter></td>
<td>定义度量衡。仅用于已知最大和最小值的度量。</td>
</tr>
<tr>
<td><nav></nav></td>
<td>定义导航链接的部分。</td>
</tr>
<tr>
<td><output></output></td>
<td>定义不同类型的输出，比如脚本的输出。</td>
</tr>
<tr>
<td><progress></progress></td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td><rp></rp></td>
<td>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。</td>
</tr>
<tr>
<td><rt></rt></td>
<td>定义字符（中文注音或字符）的解释或发音。</td>
</tr>
<tr>
<td><ruby></ruby></td>
<td>定义 ruby 注释（中文注音或字符）。</td>
</tr>
<tr>
<td><section></section></td>
<td>定义文档中的节（section、区段）。</td>
</tr>
<tr>
<td><source></source></td>
<td>定义多媒体资源 <video> 和 。</video>
</td>
</tr>
<tr>
<td><summary></summary></td>
<td>标签包含 details 元素的标题。</td>
</tr>
<tr>
<td><time></time></td>
<td>定义日期或时间。</td>
</tr>
<tr>
<td><track></track></td>
<td>为诸如 <video> 和 元素之类的媒介规定外部文本轨道。</video>
</td>
</tr>
<tr>
<td><video></video></td>
<td>定义视频（video 或者 movie）。</td>
</tr>
<tr>
<td><wbr></wbr></td>
<td>规定在文本中的何处适合添加换行符。</td>
</tr>
</tbody></table>
<p> </p>
<p>NO.3 借鉴文档</p>
<p>MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element</p>
<p>菜鸟教程：https://www.runoob.com/html/html5-new-element.html</p>
<p>W3school：https://www.w3school.com.cn/tags/index.asp</p>
<p>蜜蜂教程：https://www.mifengjc.com/html-ref/html-reference.html</p>
<p> </p>
<p>【HTML5】弃用标签与新增标签</p>
<p>标签：背景音乐 绘图 next menu tar 首字母 居中 command 方向 </p>
<p>原文地址：https://www.cnblogs.com/KimBlack/p/14409961.html</p></span> </p>
</div>
<div style="width:640px; height:70px; margin:auto;"></div>
<style>
.prevnext{ border-bottom: dotted 2px #cdcdcd;
overflow: hidden;
width: 624px;
margin-left: 61px;}
.prevnext p{line-height:28px; height:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; width:364px; text-indent:6px;}
.prevnext p span{font-weight:bold;}
.prevnext p a{padding:0px !important;}
</style>
<div class="prevnext">
<p><span>上一篇：</span><a href="/index.php/essay/58594.html">js数据类型转换成数值类型</a></p>
<p><span>下一篇：</span><a href="/index.php/essay/58596.html">025.NET5_Autofac支持控制器属性注入</a></p>
</div>
<div class="copyright">
<div style="width:600px; float:left;">
文章来自：<a href="/index.php/" target="_blank">搜素材网</a>的<a href="/index.php/essay.html" target="_blank">编程语言</a>模块，转载请注明文章出处。<br>
文章标题：<a href="http://soscw.com/index.php/essay/58595.html" target="_blank">【HTML5】弃用标签与新增标签</a><br>
文章链接：http://soscw.com/index.php/essay/58595.html </div>
</div>
<div>
<br><h3>评论</h3>
<div class="comment-area" id="comments">
<hr>
<div class="post" id="divCommentPost">亲，登录后才可以留言！</div>
<hr>
<div class="comments">
<ul class="pagination">
</ul>
</div>
</div> </div>
</div>
<div class="detail-sidebar">
<div class="essay_new">
<h3><i></i>热门文章</h3>
<ul>
<li>
<a href="/index.php/essay/104152.html">自定义WPF窗体形状</a>
</li>
<li>
<a href="/index.php/essay/102202.html">多继承c3算法与网路编程</a>
</li>
<li>
<a href="/index.php/essay/88927.html">NET Core 3.0中的WPF</a>
</li>
<li>
<a href="/index.php/essay/92954.html">&#128207;Python项目打包方法</a>
</li>
<li>
<a href="/index.php/essay/88314.html">导航，头部，CSS基础</a>
</li>
<li>
<a href="/index.php/essay/88374.html">导航，头部，CSS基础</a>
</li>
<li>
<a href="/index.php/essay/42259.html">&lt;3&gt;Python开发——条件判断</a>
</li>
<li>
<a href="/index.php/essay/22071.html">&lt;2014 04 29&gt; c/c++常用库总结</a>
</li>
<li>
<a href="/index.php/essay/22174.html">&#39;telnet&#39; 不是内部或外部命令，也不是可运行的程序 或批处理文件。</a>
</li>
<li>
<a href="/index.php/essay/22840.html">&lt;&lt;&lt; html编码中js和html编码不一致导致乱码</a>
</li>
</ul>
</div>
<div class="article_hot">
<h3><i></i>推荐文章</h3>
<ul>
</ul>
</div>
<div class="article_like">
<h3><i></i>最新文章</h3>
<ul>
<li>
<!--<a href="/index.php/essay/108422.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="Eclipse 发布web项目的注意点"></a>-->
<a href="/index.php/essay/108422.html">Eclipse 发布web项目的注意点</a>
</li>
<li>
<!--<a href="/index.php/essay/108421.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="实现Winform端窗体关闭后刷新html网页内容"></a>-->
<a href="/index.php/essay/108421.html">实现Winform端窗体关闭后刷新html网页内容</a>
</li>
<li>
<!--<a href="/index.php/essay/108420.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="WPF 10天修炼 - WPF布局容器"></a>-->
<a href="/index.php/essay/108420.html">WPF 10天修炼 - WPF布局容器</a>
</li>
<li>
<!--<a href="/index.php/essay/108419.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="自己写的分页器，BOOTSTRAP+JQUERY（非完全版，后续完善）"></a>-->
<a href="/index.php/essay/108419.html">自己写的分页器，BOOTSTRAP+JQUERY（非完全版，后续完善）</a>
</li>
<li>
<!--<a href="/index.php/essay/108418.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="WinSCP与Putty远程连接linux"></a>-->
<a href="/index.php/essay/108418.html">WinSCP与Putty远程连接linux</a>
</li>
<li>
<!--<a href="/index.php/essay/108417.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="C# 基础知识复习（一）"></a>-->
<a href="/index.php/essay/108417.html">C# 基础知识复习（一）</a>
</li>
<li>
<!--<a href="/index.php/essay/108416.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="jQuery对象与DOM对象转换"></a>-->
<a href="/index.php/essay/108416.html">jQuery对象与DOM对象转换</a>
</li>
<li>
<!--<a href="/index.php/essay/108415.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="windows学习记录----hello world与窗口创建"></a>-->
<a href="/index.php/essay/108415.html">windows学习记录----hello world与窗口创建</a>
</li>
<li>
<!--<a href="/index.php/essay/108414.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="Linux下利用phpize安装memcashe的php源码扩展包"></a>-->
<a href="/index.php/essay/108414.html">Linux下利用phpize安装memcashe的php源码扩展包</a>
</li>
<li>
<!--<a href="/index.php/essay/108413.html"><img src="http://soscw.com/upload/" width="150" height="100" alt="CSS3选择器 ::selection选择器"></a>-->
<a href="/index.php/essay/108413.html">CSS3选择器 ::selection选择器</a>
</li>
</ul>
</div>
<div class="article_hot">
<h3><i></i>置顶文章</h3>
<ul style="margin:-8px 0;">
</ul>
</div>
<div style="padding:20px; top:0;" id="divFixed">
</div>
</div>
</div>
</div>
<style>
.pageturn{width:1400px; height:64px; position:fixed; top:50%; left:50%; margin-left:-700px; margin-top:-32px; z-index:1;}
.pageturn>a.previouspage{width:64px; height:64px; display:block; float:left; background:url('https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/images/prevnext.png') left top no-repeat;}
.pageturn>a.previouspage:hover{background:url('https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/images/prevnext.png') left bottom no-repeat;}
.pageturn>a.nextpage{width:64px; height:64px; display:block; float:right; background:url('https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/images/prevnext.png') right top no-repeat;}
.pageturn>a.nextpage:hover{background:url('https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/images/prevnext.png') right bottom no-repeat;}
</style>
<div class="pageturn">
<a class="previouspage" href="/index.php/essay/58594.html"></a>
<a class="nextpage" href="/index.php/essay/58596.html"></a>
</div>
<div class="footer">
<div class="main">
<div class="footer_content">
<div class="footer_quick">
<a href="/index.php/portal/about/index.html" target="_blank">关于我们</a> |
<a href="/index.php/portal/about/copyright.html" target="_blank">版权声明</a> |
<a href="/index.php/portal/about/question.html" target="_blank">常见问题</a> |
<a href="/index.php/portal/about/contribute.html" target="_blank">素材投稿</a> |
<a href="/index.php/portal/about/contactUs.html" target="_blank">联系我们</a> |
<a href="/index.php/portal/about/siteMap.html" target="_blank">网站地图</a> |
</div>
<div class="footer_mail">搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。</div>
<div class="footer_mail">
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2160159200&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2392512168:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</a>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?88acc0069fab2dbbe8e287a90c1e3eb5";
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>
<script>(function(){
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?7a809e2fc95757dd0af994054f845937":"https://jspassport.ssl.qhimg.com/11.0.1.js?7a809e2fc95757dd0af994054f845937";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script> </div>
<div class="footer_copyright">
Copyright © 2024 soscw.com 搜素材网素材网版权所有 <a href="http://www.beian.miit.gov.cn">蜀ICP备18015633号-1</a><br>
</div>
</div>
</div>
</div>
<!-- 返回顶部模块 -->
<div id="top">
<div id="izl_rmenu" class="izl-rmenu">
<a href="tencent://Message/?Uin=2392512168 &websiteName=www.soscw.com=&Menu=yes" class="btn btn-qq"></a>
<!--<div class="btn btn-wx">-->
<!--<div class="qrcode">-->
<!--<div class="qrcode-arrow">-->
<!--</div>-->
<!--<p>关注微信公众号</p>-->
<!--<img src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/images/weixin.jpg" alt="搜素材网素材微信公众号" width="100">-->
<!--</div>-->
<!--</div>-->
<div class="btn btn-fk" onclick="javascript:location.href='http://www.soscw.com/feedback'"></div>
<div class="btn btn-top" style="display: none;"></div>
</div>
</div>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/jquery-1.8.2.min.js"></script>
<script src="/static/js/wind.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/common.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/bootstrap-collapse.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/jquery.royalslider.min.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/qrcode.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/toTop.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/login-register.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/jquery.bootstrap-autohidingnavbar.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/highlight.pack.js"></script>
<script type="text/javascript" src="https://images.dilidili.win/imgs/sourcezip/themes/fodder/public/assets/js/search.js"></script>
<script src="/static/js/frontend.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script src="/static/js/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script src="/static/js/referrerkill.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
<!--请在下方写此页面业务相关的脚本-->
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
jQuery(function() {
//遍历所有的img元素，凡是QQ和微信引用的统统放到iframe里面
jQuery("div").find("img").each(function() {
var img = jQuery(this);
var img_src = img.attr("src");
if (img_src != undefined && img_src != '') {
img_src = decodeURI(img_src);
img_src = img_src.split("?")[0];
if (img_src.indexOf("jb51") > 0 || img_src.indexOf("qlogo.cn") > 0 || img_src.indexOf("qq.com") > 0) {
var frameid = 'frameimg' + Math.random();
img.parent().append('<span id="' + frameid + '"></span>')
img.remove();
document.getElementById(frameid).innerHTML = ReferrerKiller.imageHtml(img_src);
}
}
})
})
$(function() {
// 添加浏览
$('.show').live("click",function(){
var that = $(this);
var id = that.attr("data-id");
$.ajax({
url : "/web/addview.html",
type : "post",
datatype: "json",
data : {
"id": id
},
success : function(res){
if(res.status == 1){
window.open("http://www.soscw.com" + '/demoShow/' + res['id']);
var viewNum = $(".viewNum span").text();
viewNum++;
$(".viewNum span").text(viewNum);
}else{
alert("connect error");
}
}
});
});
// 添加收藏
$('.canAddFav').live("click",function(){
var that = $(this);
var id = that.attr("data-id");
$('.canAddFav').removeClass("canAddFav");
$.ajax({
url : "/portal/Article/doLike.html",
type : "post",
datatype: "json",
data : {
"id": id
},
success : function(res){
if(res.status){
that.removeClass('addFav').addClass('unFav');
$('.unFav').addClass("canUnFav");
that.html("已收藏");
var likeNum = $(".likeNum span").html();
likeNum++;
$(".likeNum span").html(likeNum);
}else{
window.location.href = ("/user/login.html");
}
}
});
});
// 取消收藏
$('.canUnFav').live("click",function(){
var that = $(this);
var id = that.attr("data-id");
$('.canUnFav').removeClass("canUnFav");
$.ajax({
url : "/web/unfav.html",
type : "post",
datatype: "json",
data : {
"id": id
},
success : function(res){
if(res.status){
that.removeClass('unFav').addClass('addFav');
$('.addFav').addClass("canAddFav");
that.html("收藏");
var likeNum = $(".likeNum span").html();
likeNum--;
$(".likeNum span").html(likeNum);
}else{
window.open("/user/login.html");
}
}
});
});
});
</script>
</body>
</html>]]></plaintext></td></tr></tbody></table></span></p></div></div></div> |