HTML5新增的标签及使用

梦里梦外; 2023-07-22 04:57 22阅读 0赞

HTML5和HTML其实是很相似的，但是有些内容有发生了改变，今天我学习了一下HTML5发现还是挺好学的，只要有html+css基础就可以，今天知识看了下新的标签。

一、定义文档类型

在文件的开头总是会有一个标签

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;!</code><code>DOCTYPE</code>&nbsp;<code>html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这是显示的html的文档类型，上面那个是1.0的，下面这个就是HTML5的类型标签，很是简短

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;!</code><code>DOCTYPE</code>&nbsp;<code>html&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

二、新的布局方式

如下图所显示的布局结果

![format_png][]

正常的HTML布局就是通过div+css进行的，要是布局出这个页面正常的就是用div进行布局，然后给div进行起名字，然后进行样式的修改；

在HTML5中有个块状元素（有意义的div），也就是说不用div标签，而是用名字式的元素，例如：布局出第一个蓝色块是使用div，起名字，然后进行改变css；HTML是使用的header标签进行修改样式，header就是有意义的div

使用HTML5的新的结构标签，做出上面的布局，代码如下：

html代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;</code><code>header</code><code>&gt;定义一个页面或是区域的头部&lt;/</code><code>header</code><code>&gt;</code> <code>&lt;</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>section</code><code>&gt;定义一个区域&lt;/</code><code>section</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>aside</code><code>&gt;定义页面内容的侧边框部分&lt;/</code><code>aside</code><code>&gt;</code> <code>&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;</code><code>footer</code><code>&gt;定义一个页面或是区域的底部&lt;/</code><code>footer</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

css代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 </td> 
 <td> <code>/*页面顶部 header*/</code> <code>header{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>150px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#abcdef</code><code>;</code> <code>}</code> <code>/*页面中间 div*/</code> <code>div{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top</code><code>:</code><code>10px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>}</code> <code>section{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#abcdef</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>70%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>float</code><code>:</code><code>left</code><code>;</code> <code>}</code> <code>article{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#F33</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>500px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align</code><code>:</code><code>center</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin</code><code>:</code><code>0px</code>&nbsp;<code>auto</code><code>;</code> <code>}</code> <code>aside{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>300px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#abcdef</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>28%</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>float</code><code>:</code><code>right</code><code>;</code> <code>}</code> <code>/*页面底部*/</code> <code>footer{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>100px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#abcdef</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>clear</code><code>:</code><code>both</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top</code><code>:</code><code>10px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这样就可以不用使用div而是使用的有意义的div元素就可以布局出上面的那个样式了

![format_png 1][]

三、新的标签

（1）定义导航链接<nav></nav>

它也是有意义的标签，并不是在某处加上这个标签就有了导航的样式了，这都是有意义的div而已，在头部header中加入菜单标签<nav>，nav标签可以和<ul><li>标签合用

html代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;</code><code>header</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;这是一个header部分&lt;/</code><code>p</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>nav</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--导航链接标签--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>ul</code><code>&gt;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--配合ul使用--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;首页&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;关于&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;产品&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>li</code><code>&gt;联系&lt;/</code><code>li</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>ul</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>nav</code><code>&gt;</code> <code>&lt;/</code><code>header</code><code>&gt;&nbsp;</code> </td> 
 </tr> 
 </tbody> 
</table>

css代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>/*定义nav的高和颜色*/</code> <code>nav{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>30px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color</code><code>:</code><code>#F33</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin-top</code><code>:</code><code>100px</code><code>;}</code> <code>/*正常设置li的样式*/</code> <code>li{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>list-style</code><code>:</code><code>none</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>float</code><code>:</code><code>left</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width</code><code>:</code><code>100px</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height</code><code>:</code><code>30px</code><code>;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这样就可以实现之前只用div进行的菜单布局了

![format_png 2][]

（2）定义文章标签<article></article>

可以使用文章块标签进行写文章，这就使用这个标签进行写文章在section部分，可以和<h1>合用

html代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>&lt;</code><code>article</code><code>&gt;</code><code>&lt;!--文章块div--&gt;</code> <code>　　&lt;</code><code>h2</code><code>&gt;文章标题&lt;/</code><code>h2</code><code>&gt;</code><code>&lt;!--标题--&gt;</code> <code>　　&lt;</code><code>p</code><code>&gt;文章内容文章内容文章内容文章内容文章内容文章内容</code> <code>　　&lt;</code><code>br</code><code>&gt;</code> <code>　　文章内容文章内容文章内容文章内容文章内容文章内容&lt;</code><code>br</code><code>&gt;</code> <code>　　文章内容文章内容文章内容&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>article</code><code>&gt;　</code> </td> 
 </tr> 
 </tbody> 
</table>

css样式：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>article{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:#F33;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:500px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>text-align:center;&nbsp; /*水平居中*/&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>margin:0px auto;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这样就可以写一篇文章了

![format_png 3][]

（3）定义媒介内容的分组，以及它们的标题<figure>

A。这个标签可以和它的配套标签联合使用<figcaption>，不过<figcaption></figcaption>中间写标题

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;</code><code>figure</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>figcaption</code><code>&gt;标题&lt;/</code><code>figcaption</code><code>&gt;</code><code>&lt;!--配套--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>p</code><code>&gt;标题内容&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>figure</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 4][]

B。还可以和<dt><dd>联合使用，其中<dt></dt>是写标题，而<dd>写内容，显示的效果和配套使用的效果也有差异

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 </td> 
 <td> <code>&lt;</code><code>figure</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;标题1&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;标题内容&lt;/</code><code>dd</code><code>&gt;</code> <code>&lt;/</code><code>figure</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

（4）定义对话框或窗口<dialog>

在这个标签中也是可以使用dd和dt标签，对话框中的标题和内容，对话框有个属性是open，这个标签的兼容性不是很好

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;</code><code>dialog</code>&nbsp;<code>open&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;1问题&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;1答案&lt;/</code><code>dd</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;2问题&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;2答案&lt;/</code><code>dd</code><code>&gt;</code> <code>&lt;/</code><code>dialog</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 5][]

（5）定义命令的列表或菜单<menu>

A。这个标签可以和li合用

![format_png 6][]

B。可以给右键单击中添加自己的内容（只有火狐浏览器可以兼容）

联合（定义用户可以从弹出菜单调用的命令/菜单项目）<menuitem>标签使用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;</code><code>menu</code>&nbsp;<code>type="context" id="cai"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>menuitem</code>&nbsp;<code>label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"&gt;&lt;/</code><code>menuitem</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; <code>&lt;/</code><code>menu</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>span</code>&nbsp;<code>contextmenu="cai"&gt;单击我试试&lt;/</code><code>span</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

右键单击后出现想要的菜单项

![format_png 7][]

单击菜单项，弹出内容

![format_png 8][]

（6）标题组<hgroup>

里面可以写一些标题的结合<h3>合用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 </td> 
 <td> <code>&lt;</code><code>hgroup</code><code>&gt;</code><code>&lt;!--标题组--&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h3</code><code>&gt;标题&lt;/</code><code>h3</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h3</code><code>&gt;标题1&lt;/</code><code>h3</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h3</code><code>&gt;标题2&lt;/</code><code>h3</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>h3</code><code>&gt;标题3&lt;/</code><code>h3</code><code>&gt;</code> <code>&lt;/</code><code>hgroup</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 9][]

（7）定义小号文本

这个标签和其他的加粗什么的标签其实是差不多的

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;</code><code>small</code><code>&gt;法律条文&lt;/</code><code>small</code><code>&gt;</code> <code>&lt;</code><code>small</code><code>&gt;联系我们&lt;/</code><code>small</code><code>&gt;</code> <code>&lt;</code><code>small</code><code>&gt;客户意见&lt;/</code><code>small</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 10][]

（8）定义元素的细节<details>

里面的内容可以配合标题和内容标签来使用

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;</code><code>details</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;问题&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;解答&lt;/</code><code>dd</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;问题&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;解答&lt;/</code><code>dd</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dt</code><code>&gt;问题&lt;/</code><code>dt</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>dd</code><code>&gt;解答&lt;/</code><code>dd</code><code>&gt;</code> <code>&lt;/</code><code>details</code><code>&gt;　　</code> </td> 
 </tr> 
 </tbody> 
</table>

点击详细信息就可以看到标题和内容了

![format_png 11][]

（9）定义 ruby 注释<ruby>

碰到不认识的字了可以使用这个进行注释拼音，但是有的兼容性不是很好，到时候可以进行修改

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>&lt;</code><code>ruby</code><code>&gt;夼&lt;</code><code>rp</code><code>&gt;(&lt;/</code><code>rp</code><code>&gt;&lt;</code><code>rt</code><code>&gt;kuang&lt;/</code><code>rt</code><code>&gt;&lt;</code><code>rp</code><code>&gt;)&lt;/</code><code>rp</code><code>&gt;&lt;/</code><code>ruby</code><code>&gt;</code> <code>&lt;!--&lt;rp&gt;是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容--&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

（10）定义预定义范围内的度量<meter>

有几个属性值，min="" max="" value="" low="" high=""，其中low和high是范围，当value范围超了话就会显示不同的效果

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>meter</code>&nbsp;<code>min="0" max="10" value="4" low="2" high="7"&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 12][]

value值超出了范围后

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>meter</code>&nbsp;<code>min="0" max="10" value="8" low="2" high="7"&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![format_png 13][]

（11）进度条的标签<progress>

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;progress id=</code><code>"jindu"</code>&nbsp;<code>max=</code><code>"100"</code>&nbsp;<code>value=</code><code>"0"</code><code>&gt;&lt;/progress&gt;进度条</code> </td> 
 </tr> 
 </tbody> 
</table>

最大值就是进度条的长度就行，value值就是显示的进度，用它可以进行动态的进度条

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;progress id=</code><code>"jindu"</code>&nbsp;<code>max=</code><code>"100"</code>&nbsp;<code>value=</code><code>"0"</code><code>&gt;&lt;/progress&gt;进度条</code> <code>&lt;script&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>pro = document.getElementById(</code><code>"jindu"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setInterval(function(){ pro.value+=1;},1000);&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//间隔1秒它的值加1</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这样进度条就可以完成了，是不是比只用js写的好多了，不同的浏览器表现形式还不一样

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ4ODAzLzIwMTgwNC83NDg4MDMtMjAxODA0MTcxMTI2MzQ2MzktMTU5Njk5Mzc2OC5naWY][]

[format_png]: /images/20230528/8ad527e466e649179dcba6c9596d7fde.png
[format_png 1]: /images/20230528/8fa074287d9b4bcca16bd3e09a21f99c.png
[format_png 2]: /images/20230528/60d9367e9ca346cfad7021f8361ae9eb.png
[format_png 3]: /images/20230528/c18f94ed80ae424484437afa63800227.png
[format_png 4]: /images/20230528/779d5ad51b6f40588886470cb6d9aaeb.png
[format_png 5]: /images/20230528/4311d3e822bf480ea20487a522af17b1.png
[format_png 6]: /images/20230528/ab34d216deec4d3bb1469b33b28ab74c.png
[format_png 7]: /images/20230528/d1e3f55ec53849e583f8655abc04c006.png
[format_png 8]: /images/20230528/bf5565af1b80474892a927fdcb66cd50.png
[format_png 9]: /images/20230528/45d46cc93c3b441e929c7c7d36174d83.png
[format_png 10]: /images/20230528/153dedc00a704c05b43e9029aa9f0742.png
[format_png 11]: /images/20230528/7ccedf2d1a3f4281bc0ea3507cf87b7c.png
[format_png 12]: /images/20230528/0c020c61c1aa426285658233f4d0ec8c.png
[format_png 13]: /images/20230528/2c42e0441ff34995af47c37352c9b593.png
[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzQ4ODAzLzIwMTgwNC83NDg4MDMtMjAxODA0MTcxMTI2MzQ2MzktMTU5Njk5Mzc2OC5naWY]: /images/20230528/e33373a3c2b24ddb841ded74add59855.png