HTML5--常用新元素

最新推荐文章于 2024-07-24 21:11:51 发布

maomaolaoshi

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量842

点赞数

分类专栏： html5 文章标签： html5 标签语义化新元素 html5新元素文档结构

本文链接：https://blog.csdn.net/maomaolaoshi/article/details/78113935

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如果我问你，HTML5的新增加的元素有哪些?不少人可能脱口而出section、article、header……等等。但是如果要问你HTML5增加新的元素，同时废弃了很多元素的原因是什么，我觉得大多数人可能都没思考过这个问题。

标签语义化

标签语义化就是上个问题的答案。HTML5一个最主要的变化是基本信念的变化：将元素的语义与元素对其内容呈现结果的影响分开。

HTML元素负责文档内容的结构和含义，CSS负责文档内容的呈现方式。

删除旧的标签元素

HTML 4.01中删除了不少元素，包括：

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

这些标签都是毫无语义的，例如<big>会呈现大号字体效果，<center>会对其所包括的文本进行水平居中。这些元素就糅杂了呈现方式和内容结构，违背了HTML5的设计理念，所以被抛弃了。
不过此时你可能会疑惑，那么像i（文字倾斜显示）、b（粗体显示文字内容）这类标签为什么没有被删除呢？
根据查阅的相关资料，我推测原因大概有两点：
①HTML5仍是一个过渡的版本，原则上必须要尽可能对上个版本兼容，不能过于激进。所以对那些用的常用的元素标签进行了保留。
②并不是所有的标签都有语义化。像我们最常见的标签div、span就没有明确的标签语义。所以说语义化是相对的，而不是绝对的。

态度：
语义化确实能在一定程度上规范我们的编码，方便开发人员阅读源码、开发，也能让智能设备更好的支持HTML文件。但是过于语义化的规定会破坏HTML的多样性，会让我们代码变得很死板。目前我认为对HTML5中的标签语义化还是持有赞同态度的（~~小小程序员也敢大放厥词？~~），这种并不激进的改革恰巧是我希望看到的：规范却又不死板。

常见新元素

常见的新增元素可以从语义分成几个部分：划分内容、内容分组、文本元素、表单、嵌入内容。

划分内容

划分内容是为了让每个概念、观点或主题彼此分割开，这些新增的元素是构成语义和呈现分离的重要基础，也是新增的最多的一部分元素。
本块内容的所有元素使用方法，都放在该小节的最后演示。

元素标签：<hgroup>

将一组标题组织在一起。

在介绍hgroup元素之前，我们来简单介绍一下标题元素h1~h6。
标题元素的作用：
①内容的划分。同级标题通常用将内容分作几个部分，每个部分一个主题，而各级标题通常用来表示同一主题的各个方面。
②快速了解文档的大意和结构。标题元素体系可以构成文档的大纲，让访客可以快速找到自己感兴趣的部分。

hgroup元素可以用来将几个标题元素作为一个整体处理，以免扰乱HTML文档的大纲。

元素标签：<nav>

表示有意集中在一起的导航元素。

nav元素表示文档中的一个区域，它包含着到其他页面或统一页面的其他部分的链接。该元素的目的是规划出文档的主要导航区域。

元素标签：<header>

表示文档的头部区域。

header元素表示一节的首部。里面可以包含各种适合出现在首部的东西，包括刊头或徽标。内嵌的元素方面可以包含标题元素h*，还可以包含导航元素nav。

元素标签：<footer>

表示文档的尾部区域。

footer元素表示一节的尾部。里面通常包含着该节的总结信息，还可以包含作者介绍、版权信息、到相关内容的链接、徽标以及免责声明。

元素标签：<aside>

表示页面的侧边栏内容。

aside元素用来表示跟周边内容稍占一点边的内容，类似于书籍或杂志中的侧栏。其内容与页面其他内容、article或section有点关系，但并非主体内容的一部分。它可能是一些背景信息、到相关文章的链接。诸如此类。

元素标签：<article>

表示可独立发布的重要主题或概念

article元素代表HTML文档中一段独立成篇的内容，从理论上将，可以独立于页面其余内容发或使用（例如RSS）。使用该元素的一个重要判断依据就是内容是否需要具有独立性。一篇新文章和博客条目都是这个方面的典型例子。

元素标签：<section>

表示一个重要的主题或概念

section表示的是文档中的一节。使用标题元素的时候实际上也生成了隐含的节。用section元素则可以明确地生成节并且将其与标题分开。section元素的使用没有一个明确的规定，不过从经验而讲，section元素用来包含的是那种应该列入文档大纲或录中的内容。section元素通常包含一个或多个段落及一个标题，不过标题并不是必需的。

元素标签：<address>

表示文档或article元素的联系信息。

address元素身为article元素的后代元素时，它提供的联系信息被视为该article的。否则，address元素身为body元素的子元素时（在body元素和address元素之间没有隔着article元素），它提供的联系信息被视为整个文档的。
注意：address元素不能用来表示文档或文章的联系信息之外的地址。

使用方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>划分内容的演示</title>
    <style>
        *{margin:0;padding:0}
       article,footer,header,section{margin:10px auto;width:600px}
       article h3,h1,section h3{text-align:center}
       h1{margin:auto;font-size:1.5em}
       hgroup a{text-decoration:none}
       hgroup a:link,hgroup a:visited{color:#000}
       hgroup a:active,hgroup a:hover{color:grey}
       #s1,#s2{border:1px solid #999;box-shadow:2px 2px 2px #999}
       #s1 section>p,#s2 section>p{text-indent:2em}
       #s1 section>p,#s1-1 h4,#s2 section>p{margin-right:10px;margin-left:10px}
       hgroup>h2{font-size:1.2em}
       hgroup>h3{text-indent:1.2em;font-size:1em}
       hgroup>h4{text-indent:2.4em;font-size:.8em}
       #inside-aside{float:right;margin:10px 0 10px 10px;width:200px;border-top:1px solid #999;border-bottom:1px solid #999;border-left:1px solid #999}
       #inside-aside h4{text-align:center}
       #inside-aside p{margin:5px}
       #outer-aside{position:fixed;top:200px;right:50px;max-width:25pc;border:1px solid #999;box-shadow:2px 2px 2px #999;text-align:center;line-height:1.5em}
       #outer-aside h4{margin:5px 15px}
       #outer-aside p{margin:5px}
       #outer-aside a{text-decoration:underline}
       #outer-aside a:link,#outer-aside a:visited{color:#000}
       #outer-aside a:active,#outer-aside a:hover{color:grey}
    </style>
</head>

<body>
    <header>
        <!--整个文档的头部-->
        <h1>文档演示</h1>
        <nav>
            <!-- 导航 -->
            <hgroup>
                <!--根据自身要求控制标题-->
                <h2><a href="#s1">1 辛弃疾的诗词</a></h2>
                <h3><a href="#s1-1">1.1 诗词</a></h3>
                <h4><a href="#s1-1-1">1.1.1 青玉案·元夕</a></h4>
                <h4><a href="#s1-1-2">1.1.2 破阵子·为陈同甫赋壮词以寄之</a></h4>
                <h4><a href="#s1-1-3">1.1.3 菩萨蛮·书江西造口壁</a></h4>

                <h2><a href="#s2">2 辛弃疾的人物事迹</a></h2>
                <h3><a href="#s2-1">2.1宋史 </a></h3>
                <h4><a href="#s2-1-1">2.1.1辛弃疾传</a></h4>
            </hgroup>
        </nav>
    </header>
    <section id="s1">
        <header>
            <!--本节的头部-->
            <hgroup>
                <!--标题组-->
                <h3>辛弃疾</h3>
                <h4>青玉案·元夕</h4>
                <h4>破阵子·为陈同甫赋壮词以寄之</h4>
                <h4>菩萨蛮·书江西造口壁</h4>
            </hgroup>
        </header>
        <hr/>
        <section id="s1-1">
            <section id="s1-1-1">
                <h4>青玉案·元夕</h4>
                <p>东风夜放花千树。更吹落、星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。</p>
                <p>蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。</p>
            </section>
            <section id="s1-1-2">
                <h4>破阵子·为陈同甫赋壮词以寄之</h4>
                <p>醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声。沙场秋点兵。</p>
                <p>马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名。可怜白发生。</p>
            </section>
            <section id="s1-1-3">
                <h4>菩萨蛮·书江西造口壁</h4>
                <p>郁孤台下清江水，中间多少行人泪？西北望长安，可怜无数山。</p>
                <p>青山遮不住，毕竟东流去。江晚正愁余，山深闻鹧鸪。</p>
            </section>
        </section>
    </section>

    <!-- 可以独立发布的内容 -->
    <article id="s2">
        <header>
            <h3>宋史 辛弃疾传(部分节选自《宋史》卷四百一)</h3>
            <address>本小节的地址信息<a href="#">email me</a></address>
        </header>
        <section id="s2-1">
            <section id="s2-1-1">
                <p>辛弃疾字幼安，齐之历城人。少师蔡伯坚，与党怀英同学，号辛、党。始筮仕，决以蓍，怀英遇《坎》，因留事金；弃疾得《离》，遂决意南归。金主亮死，中原豪杰并起。耿京聚兵山东，称天平节度使，节制山东、河北忠义军马，弃疾为掌书记，即劝京决策南向。</p>
                <p>僧义端者，喜谈兵，弃疾间与之游。及在京军中，义端亦聚众千馀，说下之，使隶京。义端一夕窃印以逃，京大怒，欲杀弃疾。弃疾曰：「匄我三日期，不获，就死未晚。」揣僧必以虚实奔告金帅，急追获之。义端曰：「我识君真相，乃青兕也，力能杀人，幸勿杀我。」弃疾斩其首归报，京益壮之。</p>
                <p>绍兴三十二年，京令弃疾奉表归宋，高宗劳师建康，召见，嘉纳之，授承务郎、天平节度掌书记，并以节使印告召京。会张安国、邵进已杀京降金，弃疾还至海州，与众谋曰：「我缘主帅来归朝，不期事变，何以复命？」乃约统制王世隆及忠义人马全福等径趋金营，安国方与金将酣饮，即众中缚之以归，金将追之不及。献俘行在，斩安国於市。仍授前官，改差江阴佥判。弃疾时年二十三。</p>
                <p>乾道四年通判建康府，六年，孝宗召对延和殿。时虞允文当国，帝锐意恢复，弃疾因论南北形势及三国、晋、汉人才，持论劲直，不为迎合。作《九议》 并《应问》三篇、《美芹十论》献于朝，言逆顺之理，消长之势，技之长短，地之要害，甚备。以讲和方定，议不行。迁司农寺主簿。</p>

                 <!-- 与主题相关的内容 -->
<aside id="inside-aside">
        <h4>人物评价</h4>
        <p><b>陆游：</b>大材小用古所叹，管仲萧何实流亚。<i>（《送辛幼安殿撰造朝》）</i></p>
         <p><b>陈亮：</b>眼光有梭，足以照映一世之豪。背胛有负，足以荷载四国之重。出其毫末，翻然震动，不知须鬓之既斑，庶几胆力无恐。呼而来，麾而去，无所逃天地之间；挠弗浊，澄弗清，岂自为将相之种。故曰：真鼠枉用，真虎可以不用，而用也者所以为天宠也。<i>（《辛疾弃画像赞》）</i></p>
                    <p><b>刘宰：</b>命世大才，济时远略。挺特中流之砥柱，清明寒露之玉壶。十载倦游，饱看带湖之风月；一麾出镇，迥临越峤之烟霞。上方为克复神州之图，公雅有誓清中原之志。<i>（《上安抚辛待制》）</i></p>
</aside>

<p>辟江东安抚司参议官，留守叶衡雅重之，衡入相，力荐弃疾慷慨有大略。召见，迁仓部郎官、提点江西刑狱。平剧盗赖文政有功，加秘阁修撰。调京西转运判官。差知江陵府兼湖北安抚。迁知隆兴府兼江西安抚。以大理少卿召。出为湖北转运副使，改湖南。寻知潭州兼湖南安抚。盗连起湖湘，弃疾悉讨平之．遂奏疏曰：「今朝廷清明，比年李金、赖文政、陈子明、陈峒相继窃发，皆能一呼啸聚千百，杀掠吏民，死且不顾，至烦大兵翦灭。良由州以趣办财赋为急，吏有残民害物之政，而州不敢问；县以并缘科敛为急，吏有残民害物之状，而县不敢问。田野之民，郡以聚敛害之，县以科率害之，吏以乞取害之，豪民以兼并害之，盗贼以剽夺害之，民不为盗，去将安之？夫民为国本，而贪吏迫使为盗，今年剿除，明年刬汤，譬之木焉，日刻月削，不损则折。欲望陛下深思致盗之由，讲求弭盗之术，无徒恃平盗之兵。申饬州县，以惠养元元为意，有违法贪冒者，使诸司各扬其职，无徒按举小吏以应故事，自为文过之地。」诏奖谕之。又以湖南控带二广，与溪峒蛮獠接连，草窃间作，岂惟风俗顽悍，抑武备空虚所致．乃复奏疏曰：「军政之敝，统率不一，差出占破，略无已时。军人则利於优闲窠坐，奔走公门，苟图衣食，以故教阅废弛，逃亡者不追，冒名者不举。平居则奸民无所忌惮，缓急则卒伍不堪征行，至调大军，千里讨捕，胜负未决，伤威损重，为害非细。乞依广东摧锋、荆南神劲、福建左翼例，别创一军，以湖南飞虎为名，止拨属三牙、密院，专听帅臣节制调度，庶使夷獠知有军威，望风慑服。」诏委以规画。乃度马殷营垒故基，起盖砦栅，招步军二千人，马军五百人，傔人在外，战马铁甲皆备。先以缗钱五万於广西买马五百匹，诏广西安抚司岁带买三十匹。时枢府有不乐之者，数沮挠之，弃疾行愈力，卒不能夺。经度费钜万计，弃疾善斡旋，事皆立办。议者以聚敛闻，降御前金字牌，俾日下住罢，弃疾受而藏之，出责监办者，期一月飞虎营栅成，违坐军制，如期落成，开陈本末，绘图缴进，上遂释然。时秋霖几月，所司言造瓦不易，问：「须瓦几何？」曰：「二十万。」弃疾曰：「勿忧。」令厢官自官舍、神祠外，应居民家取阚瓦二，不二日皆具，僚属叹伏。军成，雄镇一方，为江上诸军之冠。
</p>
            </section>
        </section>
    </article>

 <!-- 与主题相关的内容 -->
    <aside id="outer-aside">
        <div>
            <h4>其他相关人物--唐宋八大家</h4>
            <p><a href="https://baike.baidu.com/item/苏轼/53906">苏轼</a></p>
            <p><a href="https://baike.baidu.com/item/苏洵">苏洵</a></p>
            <p><a href="https://baike.baidu.com/item/苏辙">苏辙</a></p>
            <p><a href="https://baike.baidu.com/item/韩愈">韩愈</a></p>
            <p><a href="https://baike.baidu.com/item/柳宗元/127462">柳宗元</a></p>
            <p><a href="https://baike.baidu.com/item/欧阳修/127825">欧阳修</a></p>
            <p><a href="https://baike.baidu.com/item/王安石/127359">王安石</a></p>
            <p><a href="https://baike.baidu.com/item/曾巩">曾巩</a></p>
        </div>
    </aside>

    <footer>
        <!--整个文档的尾部-->
        &#169;2017,maomaolaoshi.<a href="http://blog.csdn.net/maomaolaoshi">maomaolaoshi</a>
    </footer>
</body>
</html>

效果图：

这里写图片描述

内容分组

内容分组用于将相关内容分组，让内容条理、结构更加清晰，方便理解。
元素标签：<figure>

表示图片。

在HTML5中figure（插图）的定义是这样的：”一个独立的内容单元，可带标题。通常作为一个整体被文档的主体引用，把它从文档主体中删除也不会影响文档的意思。”这个定义其实相当笼统，外延不限于传统意义上的插图——某种图表或图示。

元素标签：<figcaption>

表示figure元素的标题

figure元素可以包含一个figcaption元素，后者用于表示插图的标题。

使用方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>组织内容的演示</title>
<style>*{margin:0;padding:0}
section{margin:auto;padding:10px;width:600px;border:1px solid #999;box-shadow:2px 2px 2px #999;overflow:hidden;}
section p{text-indent:2em;font-size:1em;}
figure{float:right;padding:10px;border:1px solid #999}
figure img{width:200px}
figcaption{text-align:center}
</style>
</head>

<body>
<section> 
    <figure>  
    <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=38610d07513d26973ade000f3492d99e/bd315c6034a85edf153cceee49540923dc54754e.jpg">
     <figcaption>辛弃疾</figcaption>
    </figure>
    <p>辛弃疾（1140年5月28日－1207年10月3日），原字坦夫，后改字幼安，号稼轩，山东东路济南府历城县（今济南市历城区遥墙镇四凤闸村）人。南宋豪放派词人、将领，有“词中之龙”之称。与苏轼合称“苏辛”，与李清照并称“济南二安”。</p>
    <p>辛弃疾生于金国，少年抗金归宋，曾任江西安抚使、福建安抚使等职。著有《美芹十论》、《九议》，条陈战守之策。由于与当政的主和派政见不合，后被弹劾落职，退隐山居。开禧北伐前后，相继被起用为绍兴知府、镇江知府、枢密都承旨等职。开禧三年（1207年），辛弃疾病逝，年六十八。后赠少师，谥号“忠敏”。</p>
    <p>辛弃疾一生以恢复为志，以功业自许，却命运多舛、备受排挤、壮志难酬。但他恢复中原的爱国信念始终没有动摇，而是把满腔激情和对国家兴亡、民族命运的关切、忧虑，全部寄寓于词作之中。其词艺术风格多样，以豪放为主，风格沉雄豪迈又不乏细腻柔媚之处。其词题材广阔又善化用典故入词，抒写力图恢复国家统一的爱国热情，倾诉壮志难酬的悲愤，对当时执政者的屈辱求和颇多谴责；也有不少吟咏祖国河山的作品。现存词六百多首，有词集《稼轩长短句》等传世。</p>
</section>
</body>
</html>

效果图：
这里写图片描述

文本元素

元素标签：<del>

表示从文档中删除的文字。

s元素用来表示一段文字不再正确或准确，而del元素表示删除的文字。虽然在样式表现是相同，但是它们的语义还是不一样的。

元素标签：<mark>

表示一段因为与上下文中另一词语相关而被突出显示的内容。

在HTML中有很多强调内容很重要的元素，例如：em元素表示对一段文字的强调，这可以用来向读者提供关于句子或者段落含义的一种语境；strong元素用于表示一段很重要文字。
mark元素用来表示因为与某段上下文相关而被突显出的一段文字。

元素标签：<ruby>

表示位于表意文字上方或者右方的注音符号。

注音符号（ruby character）是用来帮助读者掌握表意语言（如汉语和日语）文字正确发音的符号，位于这些文字上方或右方。ruby元素表示一段包含注音符号的文字。
提示：支持 “ruby” 元素的浏览器不会显示 “rp” 元素的内容。

元素标签：<rp>

与ruby元素结合使用，标记括号。

<rp> 标签在 ruby 当做注释使用，以定义不支持 ruby 元素的浏览器所显示的内容。
浏览器支持：
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <rp> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <rp> 标签。

元素标签：<rt>

与ruby元素结合使用，标记注音符号。

<rt> 标签定义字符（中文注音或字符）的解释或发音。
浏览器支持：
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持标签。
注释：Internet Explorer 8 以及更早的版本不支持 <rt> 标签。

元素标签：<time>

表示时间或日期。

<time> 标签不会在任何浏览器中呈现任何特殊效果，并且主流浏览器对 <time> 标签支持很差，所以本小节不演示该标签。

在caniuse网站进行的兼容性查询：
这里写图片描述

元素标签：<wbr>

表示可安全换行的地方。

<wbr>标签用来表示长度超过当前浏览窗口的内容适合在此换行，究竟换不换行则由浏览器决定。

由于这个标签很特殊，所以这里单独演示。

如果不是使用<wbr>标签，遇到特长的单词的时候，会空出一大块：
这里写图片描述

如果使用<wbr>标签，则可以自由进行换行。

<p>The is a very long word: SuperSuperSuper<wbr>SuperSuperlongword<wbr></p>

这里写图片描述

使用方法：

<section>
  <p>s元素的效果：<s>测试文字</s></p>
  <p>del元素的效果：<del>测试文字</del></p>
  <section>em元素的用法：
      <p> <em> 我 </em> 喜欢前端。</p>
      <p> 我喜欢 <em>前端</em>。</p>
       前者是语气是强调“我”，后者是强调喜欢的事物。
       <hr>
      <p>strong元素的用法：
      <strong> 警告:这是一段非常重要的话！天气渐冷，注意保暖！</strong>
      </p>
          <p>mark元素的用法：<mark>这是一段与众不同的文字！</mark> </p>
       </section>
       <section style="font-size:40px;">
           ruby元素的用法：
            <ruby>啊<rp><rt>ā</rt></rp></ruby>
            <ruby>啊<rp><rt>á</rt></rp></ruby>
            <ruby>啊<rp><rt>ǎ</rt></rp></ruby>
            <ruby>啊<rp><rt>à</rt></rp></ruby> 
       </section>
</section>

效果图：

这里写图片描述

表单

元素标签：<keygen>

生成一堆公钥和私钥。

keygen元素的用途是生成公开/私有密钥对。这是公开密钥加密技术中的一个重要功能，公开密钥是包括客户端证书和SSL在内的众多Web安全技术的基础。提交表单时，该元素会生成一堆新的密钥。公钥被发给服务器，而私钥则由浏览器保留并存入用户的密钥仓库。
该元素的内部属性有：challenge、keytype、autofocus、name、disabled和form。不过由于浏览器对这个元素的支持参差不齐，所以本节对给元素不做过多讲解和演示。

元素标签：<output>

表示计算结果。

该元素用于表示计算结果，其内部属性包括name、form、for。

属性	值	描述
for	element_id	定义输出域相关的一个或多个元素。
form	form_id	定义输入字段所属的一个或多个表单。
name	name	定义对象的唯一名称。（表单提交时使用）

浏览器支持：Firefox, Chrome, Safari 以及 Opera 支持 <output> 标签。
Internet Explorer 8 以及更早的版本不支持 <output> 标签

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

效果图：
这里写图片描述

嵌入内容

标签：<audio>

表示一个音频资源

标签：<video>

表示一个视频资源

标签：<source>

表示媒体资源

这三个元素将放到《多媒体技术》中进行介绍，本节不进行详细介绍。

标签：<track>

表示媒体的附加轨道（例如字幕）

track元素提供了一套视频相关内容的实现机制，这些内容包括字幕、说明和章节标题。但是主流浏览器对其支持有限，所以本节不做内容演示。

标签：<canvas>

生成一个动态的图形画布。

画布本系列文章也暂时不介绍，以后有机会开个单章。

标签：<svg>

表示结构化矢量内容

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，用于定义用于网络的基于矢量的图形。SVG 使用 XML 格式定义图形，在放大或改变尺寸的情况下其图形质量不会有损失。SVG 是万维网联盟的标准。

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>

效果图：
这里写图片描述

标签：<embed>

用插件在HTML文档中嵌入内容

HTML5中新增的标签，可以在页面中嵌入任何类型的文档。
更多相关内容，你可以访问《HTML embed标签使用方法和属性详解》

标签：<meter>

嵌入数值在许可值范围背景中的图形表示

meter元素显示了某个范围内所有可能值中的一个。
它的内部属性有以下几种：

属性	值	描述
form	form_id	规定 `<meter>` 元素所属的一个或多个表单。
high	number	规定被视作高的值的范围。
low	number	规定被视作低的值的范围。
max	number	规定范围的最大值。
min	number	规定范围的最小值。
optimum	number	规定度量的优化值。
value	number	必需。规定度量的当前值。

min和max属性设定了可能值所处范围的边界，它们可以用浮点数来表示。meter元素的显示可以分为三个部分，过低、过高和最佳。比low属性设定的值还低，则为过低；比high属性设定的值要高，则过高；如果等于optimum属性设定的值，则认为是最佳。
当value值低于low值或者高于high值，会有不一样的视觉效果，不过当value等于optimum值时，不会有视觉效果的改变。（具体视觉效果因浏览器而异）

浏览器支持
Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签。
Internet Explorer 不支持<meter>标签。

<!DOCTYPE html>
<html>
<body>
<p>显示度量值：</p>
高于high值的时候：<meter value="9" min="0" max="10" low="3" high="8">9</meter>
<br><br>
低于low值的时候：<meter value="2" min="0" max="10" low="3" high="8">2</meter>
<br><br>
正常值的时候：<meter value="4" min="0" max="10" low="3" high="8">4</meter>
<br><br>
等于最佳值的时候：<meter value="5" min="0" max="10" low="3" high="8" optimum="5">5</meter>
</body>
</html>

效果图
这里写图片描述

标签：<progress>

嵌入目标进展或任务完成情况的图形表示

progress元素可以用来表现某项任务逐渐完成的过程，例如显示下载的进度。
它的内部属性有以下几种：

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

浏览器支持
Firefox, Chrome, Opera 以及 Safari 6 支持 <progress> 标签。
Internet Explorer 9 及更低版本不支持<progress>标签。

操作演示

<body>
    下载进度：
    <progress value="0" max="100" id="pro1"></progress>
    <script>
        var pro1 = document.getElementById("pro1"),
            value = pro1.getAttribute("value"),
            interval=setInterval(
            function () {
                if (value > 100) {
                    clearInterval(interval);
                }else{
                    pro1.setAttribute("value", value++);
                }               
            }, 50
        )
    </script>
</body>

效果图：

这里写图片描述

如果我们不使用js调节，且不设定progress的任何属性，会出现有趣的动画效果。

<!DOCTYPE html>
<html>
<body>
动画效果：
<progress></progress>
</body>
</html>

360浏览器：
这里写图片描述
火狐浏览器：

chrome浏览器

(gif图没做好，不是progress动画有问题…)

本章节内容到此结束，希望大家喜欢。

maomaolaoshi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5--常用新元素

如果我问你，HTML5的新增加的元素有哪些?不少人可能脱口而出section、article、header……等等。但是如果要问你HTML5增加新的元素，同时废弃了很多元素的原因是什么，我觉得大多数人可能都没思考过这个问题。标签语义化标签语义化就是上个问题的答案。HTML5一个最主要的变化是基本信念的变化：将元素的语义与元素对其内容呈现结果的影响分开。 HTML元素负责文档内容的结构和含义，CS
复制链接

扫一扫

专栏目录