html5新元素
html5语义元素
定义了文档 或者文档的一部分区域的页眉
定义了导航链接的部分
定义了文档的某个区域，比如章节、头部、底部或者文档的其他区域
定义了页面 独立的内容区域，内容本身必须是有意义的且必须是独立于文档的其余部分
定义了页面的侧边栏内容
定义了文档或者文档的一部分区域的页脚
通常包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等
定义了文档的主要内容
在一个文档中，不能出现一个以上的元素。元素不能是以下元素的后代：、、
定义了独立的流内容（图像、图表、照片、代码 等等）
内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响
定义音频，比如音乐或其他音频流
目前支持的3种音频格式 ：MP3、Wav、Ogg
< audio src ="song.ogg" controls > audio >
如果考虑到不同浏览器 对音频文件的兼容性：
< audio controls >
< source src ="song.ogg" type ="audio/ogg" >
< source src ="song.mp3" type ="audio/mpeg" >
< p > Your browser does not support the audio tag.p >
audio >
autoplay ：autoplay 如果出现该属性，则音频在就绪后马上播放
controls ：controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
loop ：loop 如果出现该属性，则每当音频结束时重新开始播放
muted ：muted 如果出现该属性，则音频输出为静音
preload ：auto、meta、none 规定是否在页面加载后载入音频，如果设置了autoplay属性，则忽略该属性
定义视频，比如电影片段或其他视频流
目前支持3种视频格式：MP4、WebM、Ogg
< video src =“movie.mp4” controls > video >
如果考虑到不同浏览器对视频文件的兼容性：
< video width ="320" height ="240" controls >
< source src ="movie.ogg" type ="video/ogg" >
< source src ="movie.mp4" type ="video/mp4" >
< p > Your browser does not support the video tag.p >
video >
width 设置视频播放器的宽度
height 设置视频播放器的高度
autoplay ：autoplay 如果出现该属性，则音频在就绪后马上播放
controls ：controls 如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）
loop ：loop 如果出现该属性，则每当音频结束时重新开始播放
muted ：muted 如果出现该属性，则音频输出为静音
preload ：auto、meta、none 规定是否在页面加载后载入音频，如果设置了autoplay属性，则忽略该属性
poster ：url 指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
定义了一个容器，用来嵌入外部应用或者互动程序（插件）
< embed src ="helloworld.swf" width =" " height =" " type ="MIME类型" >
定义为媒体元素规定外部文本轨道
用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的
< video width ="320" height ="240" controls >
< source src ="forrest_gump.mp4" type ="video/mp4" >
< source src ="forrest_gump.ogg" type ="video/ogg" >
< track src ="subtitles_en.vtt" kind ="subtitles" srclang ="en" label ="English" >
< track src ="subtitles_no.vtt" kind ="subtitles" srclang ="no" label ="Norwegian" >
video >
default ：default 规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道
kind 规定文本轨道的文本类型
captions 该轨道定义将在播放器中显示的简短说明
chapters 该轨道定义章节，用于导航媒介资源
descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见
metadata 该轨道定义脚本使用的内容
subtitles 该轨道定义字幕，用于在视频中显示字幕
label 规定文本轨道的标题，例如当用户选择字幕轨道时，标题会显示出来
srclang 规定轨道的语言，如果kind属性的值是"subtitles"，则srclang属性是必需的
为元素定义标题
< figure >
< img src ="1.jpg" alt ="The Pulpit Rock" width ="300" height ="300" >
< figcaption > A view of the pulpit rock in Norway.figcaption >
figure >
规定了用户可见的或者隐藏的需求的补充细节
用来供用户开启关闭的交互式控件，任何形式的内容都能被放在标签里边
元素的内容对用户是不可见的，除非设置了open属性
标签为元素定义一个可见的标题，当用户点击标题时会显示出详细信息
< details open >
< summary > Copyright 1999-2011.summary >
< p > - by Refsnes Data. All Rights Reserved.p >
< p > All content and graphics on this web site are the property of the company Refsnes Data.p >
details >
定义度量衡，仅用于已知最大和最小值的度量，比如磁盘使用情况，查询结果的相关性等
< meter value ="2" min ="0" max ="10" > 2 out of 10meter > < br >
< meter value ="0.6" > 60%meter >
high 规定被界定为高的值的范围
low 规定被界定为低的值的范围
max 规定范围的最大值
min 规定范围的最小值
optimum 规定度量的最优值
value 规定度量的当前值
定义运行中的任务进度，请将标签与JavaScript一起使用来显示任务的进度
< progress value ="20" max ="100" > progress >
定义高亮显示文本
规定在文本中的何处适合添加换行符
html5已移除的元素 <![CDATA[</span><br /><span style="font-size: 13px;"><strike></span><br /><span style="font-size: 13px;"><tt></span></p>
<p> </p></div><div id="MySignature"></div>
<div class="clear"></div>
</span> </article>
<div class="mimiwuqi pagebar-2"> </div>
<div class="mimiwuqi art-tags">
<a href="http://www.adminjs.cn/tags/jichuzhishi/" title="基础知识" class="a-tag-6" target="_blank"><span>基础知识</span></a> </div>
<div class="mimiwuqi art-copyright">
<p>本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。<br></p>
</div>
</div>
<div class="mimiwuqi prev-next"> <p
class="mimiwuqi art-prev"> <a href="http://www.adminjs.cn/html5/72362.html" rel="prev"><span>上一篇</span>
截取完整的字符串(截取字符串的方法有哪些) </a> </p>
<p class="mimiwuqi art-next"> <a href="http://www.adminjs.cn/html5/72364.html" rel="next"><span>下一篇</span>
元素溢出问题解决了吗(元素溢出问题怎么解决) </a> </p>
</div>
</div>
<div class="mimiwuqi col-right r">
<div class="mimiwuqi widget widgetModule widgetHotPost">
<div class="mimiwuqi com-tit">
<h4 class="mimiwuqi title-2">相关专题</h4>
</div>
<ul class="mimiwuqi mod-main mod-post">
<li> <a href="http://www.adminjs.cn/html5/219497.html" target="_blank" title="memo,useCallback之间的联系" class="mimiwuqi clearfix">
<div>
memo,useCallback之间的联系 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219496.html" target="_blank" title="使用 React.lazy() 实现按需加载组件，提高应用性能！" class="mimiwuqi clearfix">
<div>
使用 React.lazy() 实现按需加载组件，提高应用性能！ </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219495.html" target="_blank" title="记录改造一个2018年的react老项目到vite4.3全过程" class="mimiwuqi clearfix">
<div>
记录改造一个2018年的react老项目到vite4.3全过程 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219494.html" target="_blank" title="React应用逻辑变得复杂后,部件render花费的时间会明" class="mimiwuqi clearfix">
<div>
React应用逻辑变得复杂后,部件render花费的时间会明 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219493.html" target="_blank" title="React+Ts中如何优雅的二次封装组件" class="mimiwuqi clearfix">
<div>
React+Ts中如何优雅的二次封装组件 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219492.html" target="_blank" title="Ant Design 弹窗封装：易用性和可维护性" class="mimiwuqi clearfix">
<div>
Ant Design 弹窗封装：易用性和可维护性 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219491.html" target="_blank" title="React 状态管理方案 （三）· zustand" class="mimiwuqi clearfix">
<div>
React 状态管理方案 （三）· zustand </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219490.html" target="_blank" title="浅谈原型链" class="mimiwuqi clearfix">
<div>
浅谈原型链 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219489.html" target="_blank" title="GET 和 POST 有什么不同?" class="mimiwuqi clearfix">
<div>
GET 和 POST 有什么不同? </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219488.html" target="_blank" title="Android进阶宝典 -- 解读Handler机制核心源码，让ANR无处可藏" class="mimiwuqi clearfix">
<div>
Android进阶宝典 -- 解读Handler机制核心源码，让ANR无处可藏 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219487.html" target="_blank" title="文件上传，搞懂这8种场景就够了" class="mimiwuqi clearfix">
<div>
文件上传，搞懂这8种场景就够了 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219486.html" target="_blank" title="JavaScript里的Proxy目标与Object" class="mimiwuqi clearfix">
<div>
JavaScript里的Proxy目标与Object </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219485.html" target="_blank" title="怎样在Rust中概念定义应用闭包" class="mimiwuqi clearfix">
<div>
怎样在Rust中概念定义应用闭包 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219484.html" target="_blank" title="过程间的通信方式?能够介绍一下进度的通讯方式有什么吗?" class="mimiwuqi clearfix">
<div>
过程间的通信方式?能够介绍一下进度的通讯方式有什么吗? </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219483.html" target="_blank" title="纯css实现117个Loading效果（上）" class="mimiwuqi clearfix">
<div>
纯css实现117个Loading效果（上） </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219482.html" target="_blank" title="手把手带你用Django实现一个后台管理系统" class="mimiwuqi clearfix">
<div>
手把手带你用Django实现一个后台管理系统 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219481.html" target="_blank" title="前面构建工具vite升阶系列产品怎样学习" class="mimiwuqi clearfix">
<div>
前面构建工具vite升阶系列产品怎样学习 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219480.html" target="_blank" title="一个Web3开发的入门历程" class="mimiwuqi clearfix">
<div>
一个Web3开发的入门历程 </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219479.html" target="_blank" title="MDC(Mapped Diagnostic Context)" class="mimiwuqi clearfix">
<div>
MDC(Mapped Diagnostic Context) </div>
</a> </li>
<li> <a href="http://www.adminjs.cn/html5/219478.html" target="_blank" title="应用kubernetes容器化部署的服务项目如何记录和搜集日" class="mimiwuqi clearfix">
<div>
应用kubernetes容器化部署的服务项目如何记录和搜集日 </div>
</a> </li>
</ul>
</div>
</div>
</div>
</div>
<div id="loginbox"></div><script type="text/javascript" src="/skin/images/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/skin/images/login.js"></script>
<link rel="stylesheet" type="text/css" href="/skin/images/ajaxlogin.css" />
<footer class="footer">
<div class="footer-copyright">
<p>仅供本人学习使用 | <a rel = "nofollow" href="http://www.adminjs.cn/mianze.html">免责协议</a><script>
!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"JzlszW79IbI40qnc",ck:"JzlszW79IbI40qnc"});
</script>Copyright2009-2023 <a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2023003089号</a><script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/JzlszW79IbI40qnc/quote.js?theme=2&f=12&display=0,0,1,1,1,1,0,0"></script><br>部分资源收集于网络或由用户自行上传，若侵犯了您的合法权益，请及时联系<div>技术支持： <a href="https://www.mimiwuqi.com/">前端开发</a></div></p>
</div>
<!--回到顶部和底部-->
<div class="backtop" id="backtop">
<div class="bt-box top"><i class="icon font-top"></i></div>
<div class="bt-box bottom"><i class="icon font-bottom"></i></div>
</div>
</footer>
<div class="mimiwuqi m-mask"></div>
<script src="http://www.adminjs.cn/skin/mimiwuqi/js/jquery.fancybox.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.adminjs.cn/skin/mimiwuqi/css/jquery.fancybox.min.css">
<script src="http://www.adminjs.cn/skin/mimiwuqi/js/style.js" type="text/javascript"></script>
<script>
$(function () {
$('.content').find('img').each(function () {
var _this = $(this);
var _src = _this.attr("src");
var _alt = '基础元素属性(构成基础元素)';
_this.wrap('<a data-fancybox="images" href="' + _src + '" data-caption="' + _alt + '"></a>');
$(this).attr('title','' + _alt + '');
})
})
</script>
</body>
</html>]]>
