HTML5新元素（测试了大部分浏览器可用的元素，部分标签有详细讲解）

电玩女神 2023-02-17 15:57 5阅读 0赞

### h5新元素列表 ###

*  一、<canvas>新元素
 *  二、新多媒体元素
 *   *  1.<audio>标签
     *  2.<video>标签
 *  三、新表单元素
 *   *  1.<datalist>标签
     *  2.<output>标签
 *  四、新的语义和结构元素
 *   *  1.<wbr>标签（注意我wbr标签添加的位置）
     *  2.<time>标签
     *  3.<section>标签
     *  4.<ruby>标签
     *  5.<progress>标签
     *  6.<nav>标签
     *  7.<meter>标签
     *  8.<mark>标签
     *  9.<article>标签
     *  10.<header>标签
     *  11.<footer>标签
     *  12.<figure>标签
     *  13.<figure>标签
     *  14.<aside>标签
     *  15.<bdi>标签
     *  16.<details>标签
     *  17.<dialog>标签
 *  五、已移除的元素

# 一、<canvas>新元素 #

<canvas id="canvas"></canvas>
    <script type="text/javascript">
    	let canvas = document.getElementById("canvas");
    	let ctx = canvas.getContext('2d');
    	ctx.fillStyle = "#FF0000";
    	ctx.fillRect(0,0,100,100);
    </script>

<canvas>标签需要用到js开发，所以依赖于js。  
![标签][20200618095706306.png]

# 二、新多媒体元素 #

## 1.<audio>标签 ##

<audio controls autoplay loop>
    	<source src="music/RINGA LINGA  JP Ver..mp3">
    	您的浏览器不支持 audio 元素。
    </audio>

这个标签用于定义一个音频播放器。  
![标签][20200618100007993.png]

## 2.<video>标签 ##

<video width="320" height="180" controls>
    	<source src="video/bandicam 2020-04-03 08-51-24-158.mp4"  type="video/mp4">
    	您的浏览器不支持 HTML5 video 标签。
    </video>

该标签用于定义一个视频播放器。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70]

# 三、新表单元素 #

## 1.<datalist>标签 ##

<form action="https://www.runoob.com/try/demo_source/demo-form.php" method="get">
    	<input list="browsers" name="browser">
    	<datalist id="browsers">
    	  <option value="Internet Explorer">
    	  <option value="Firefox">
    	  <option value="Chrome">
    	  <option value="Opera">
    	  <option value="Safari">
    	</datalist>
    	<input type="submit">
    </form>

该标签用于定义一个带有下拉列表的输入框，与<select>标签不同的是，该标签具有“自动完成”的效果。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 1]  
![标签-自动完成效果][-]

## 2.<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>

该标签用于显示输出结果。  
![标签][20200618101054338.png]

# 四、新的语义和结构元素 #

## 1.<wbr>标签（注意我wbr标签添加的位置） ##

<p>尝试缩小浏览器窗口，以下段落的英文单词会被分行：</p>
    <p>x xx xxx xxxx xxxxx xxxxxx xxxxxxx xxxxxxxx xxxxxxxxx
     xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx
      xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxx<wbr>aaaa<wbr>xxxx</p>
    <p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>

效果展示：  
![标签效果展示][20200615084137440.gif]  
这么展示估计有的同学还是不懂，这样吧，我现在把代码中<wbr>去掉一个看看：

<p>尝试缩小浏览器窗口，以下段落的英文单词会被分行：</p>
    <p>x xx xxx xxxx xxxxx xxxxxx xxxxxxx xxxxxxxx xxxxxxxxx
     xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx
      xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxx<wbr>aaaaxxxx</p>
    <p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>

我随便把后面那个去掉了，然后我们看效果：  
![去掉一个标签效果][20200615084613420.gif]  
发现有什么不同了吗，我再把剩下一个去掉

<p>尝试缩小浏览器窗口，以下段落的英文单词会被分行：</p>
    <p>x xx xxx xxxx xxxxx xxxxxx xxxxxxx xxxxxxxx xxxxxxxxx
     xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx
     xxxxxxxxxxxxxx  xxxxxxxxxxxxxxx xxxxxxxxaaaaxxxx</p>
    <p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>

这样代码中就没有<wbr>标签了:  
![代码中没有标签][20200615085235428.gif]  
很明显了吧？其实总结一下，这个<wbr>标签就是给英文单词断词用的，比如你的页面上有一篇英文文章，而在这一行的末尾有一个完整的英文单词，但是浏览器在读到这最后一个单词的时候，如果该行剩余长度不够，则默认将这个单词另起一行显示。这时，如果为了整个页面的美观，可以使用<wbr>标签指定换行位置，这样在浏览器读到这个英文单词的时候，如果读取到了<wbr>这个标签，那么它就不会将整个单词换行，而是在<wbr>处将单词分开，在<wbr>标签后面剩余的单词部分则会换行。

## 2.<time>标签 ##

<time datetime="2020-6-14">9:00</time>

这个标签没什么，写上了也没有什么明显的效果，但是搜索引擎在爬取我们的网页时，使用该标签可以更好的贴合搜索引擎。  
![标签][20200615091627112.png]

## 3.<section>标签 ##

<section>
    	<h1>《青玉案·元夕》 辛弃疾</h1>
    	<p>东风夜放花千树，更吹落，星如雨。宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。蛾儿雪柳黄金缕，笑语盈盈暗香去。众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>
    </section>
    <section>
    	<h1>《水龙吟·登建康赏心亭》 辛弃疾</h1>
    	<p>楚天千里清秋，水随天去秋无际。遥岑远目，献愁供恨，玉簪螺髻。落日楼头，断鸿声里，江南游子。把吴钩看了，栏杆拍遍，无人会，登临意。(栏杆 一作：阑干)休说鲈鱼堪脍，尽西风，季鹰归未？求田问舍，怕应羞见，刘郎才气。可惜流年，忧愁风雨，树犹如此！倩何人唤取，红巾翠袖，揾英雄泪！</p>
    </section>
    <section>
    	<h1>《秦淮八艳》</h1>
    	<p>一顾花间如是闻折柳，词巧诗灵舞长袖 《柳如是》
           两看桃李香扇君归尘，华庭昔日琵琶声 《李香君》
           三观云鬓锦裳自是洁，终伴青灯古佛卷 《卞玉京》
           四惜小宛琴泠梦一宿，风月何曾把人留 《董小宛》
           五谓冲冠一怒为红颜，长使清军入关来 《陈圆圆》
           六叹白纸墨题旧时诺，薄情不踏故人门 《寇白门》
           七闻湘水幽兰红尘里，应是雅韵一袭香 《马湘兰》
           八敬顾盼双眉生玲珑，鸳鸯羡煞广寒宫《顾横波》</p>
    </section>

该标签在我们的网页中有文章时，可以用来定义这篇文章的一部分。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 2]

## 4.<ruby>标签 ##

<ruby style="font-size:26px;">
    	你<rp>(</rp><rt>nǐ</rt><rp>)</rp>
    	好<rp>(</rp><rt>hǎo</rt><rp>)</rp>
    </ruby>

该标签用于定义中文注音，这个已经有很多同学知道了，所以就不详细介绍了，而且注释里也有详细说明。  
![标签][20200615095516479.png]

## 5.<progress>标签 ##

<progress id="progress1" value="0" max="100"></progress>
    <button onclick="testProgress(document.getElementById('progress1').value)">测试progress</button>
    <script type="text/javascript">
    	function testProgress(n){
    		if(n == document.getElementById('progress1').max){
    			return;
    		}
    		let progress1 = document.getElementById("progress1");
    		progress1.value = n;
    		n+=0.1;
    		/* 
    			请求动画帧 
    			requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿 
    		*/
    		window.requestAnimationFrame(()=>{
    			testProgress(n);
    		});
    	}
    </script>

该标签用于定义进度条。  
![标签][20200615103110401.gif]

## 6.<nav>标签 ##

<nav>
    	<a href="javascript:;">首页</a>|
    	<a href="javascript:;">精品</a>|
    	<a href="javascript:;">时尚潮流</a>|
    	<a href="javascript:;">我的空间</a>
    </nav>

该标签主要用于定义导航栏部分。  
![标签][20200615103734753.png]

## 7.<meter>标签 ##

<meter id="meter1" value="10" min="0" max="100" low="30" high="50" optimum="60"></meter>

这个标签用来直观地表示一个数据。  
![标签1][1]  
这时如果把value换成30

![标签2][2]  
这时再把value换成51

![标签3][3]  
注意到了吗？这其实是low、high和optimum三个属性共同作用的结果，其中low表示一个低的点，high表示一个高的点，optimum表示最佳点，根据上面测试我们可以知道，如果value的值低于low，则颜色为红色表示太少，如果value的值区间为\[low,high\]，则颜色为黄色表示一般，如果value的值大于high，这时颜色为绿色表示最好。  
这里可能就会有一个问题了，为什么value的值大于high颜色就会变成绿色呢，而不是等于optimum的时候颜色才变成绿色？  
这其实跟low、high和optimum的值有关（上面说了这是三者相互作用的结果），low、high和optimum其实相当于是三个不同的临界点，如果optimum的值大于high，就是现在这种情况，这时这个“长条”被分为四个部分：low以下、low到high、high到optimum、optimum以上。low以下会被显示成红色，low到high会被显示成黄色，high到optimum和optimum以上会被显示成绿色，因为optimum表示的是最佳值，low和high相当于是一个分段（也可以理解成一段过渡），如果没有到这个过渡就是红色，如果超过这个过渡就是绿色，如果在这个过渡之间就是黄色。  
如果optimum的值在low和high中间，那么这个“长条”就会被划分成：low以下、low到optimum、optimum到high、high以上，这时如果value的值小于low或者大于high，都会显示为黄色，如果value的值在low和high之间，则显示为绿色，下面简单演示一下：

![标签4][4]

![标签5][5]

![标签6][6]

![标签7][7]  
如果optimum小于low，其实和大于high是一个道理，反向思维罢了。

![标签8][8]

![标签9][9]

![标签10][10]  
小结：  
1.如果optimum大于high：  
value < low时，显示红色;  
low =< value <= high时，显示黄色;  
value > high时，显示绿色;  
2.如果optimum小于low：  
value < low时，显示绿色;  
low =< value <= high时，显示黄色;  
value > high时，显示红色;  
3.如果optimum在low和high之间：  
value < low时，显示黄色;  
low =< value <= high时，显示绿色;  
value > high时，显示黄色;  
总而言之，就是和这low、high和optimum这三个值的大小有关。

## 8.<mark>标签 ##

<mark>
    	<p>今天的<mark>天气</mark>非常好</p>
    </mark>

该标签用于标记文本。  
![标签][20200615165454888.png]

## 9.<article>标签 ##

<article>
    	<h1>怎么把鸽子培养得很听话？</h1><p>有时候一些鸽友也会看到一些视频，就是鸽子抓在手上怎么转动，鸽子还是很乖，不乱动。有的是吹吹口哨，鸽子就飞到手上来了。类似的这样的一些行为，让一些人觉得很有意思，也希望自己的鸽子可以培养成这样。其实也不是困难的事情，和你训练多数的宠物一样，主要是食物控制条件反射，形成一种习惯，了解你的动作和声音的意义。</p><p>那对于参加赛鸽比赛的鸽友来说，就没有必要这样去做了。不需要做到这种程度，但是也要让鸽子比较听话，一般我们都说是亲和力的培养。亲和力培养程度的不同，表现能力也不同。就目前的比赛，亲和力的培养是很关键的做法。那么我们怎么让鸽子听话，养成比较好的亲和力呢？</p>
    </article>

顾名思义，该标签就是用来定义一段文章，只是这个文章必须是有意义的并且独立于整个html页面的其余部分。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 3]

## 10.<header>标签 ##

<article>
    	<header>
    		<h1>Internet Explorer 9</h1>
    		<p><time pubdate datetime="2011-03-15"></time></p>
    	</header>
    	<p> Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的</p>
    </article>

该标签通常与<article>标签连用，用作文章的页眉，或者是作存放导航栏的容器。  
![标签][20200615173611689.png]

## 11.<footer>标签 ##

<footer>
    	<p>Posted by: Hege Refsnes</p>
    	<p><time pubdate datetime="2012-03-01"></time></p>
    </footer>

该标签一般用于定义文章的页脚，通常与<article>标签连用。  
![标签][20200615173844186.png]

## 12.<figure>标签 ##

<figure>
    	<img src="images/1.jpg" alt="The 12 Constellations" width="304" height="228" />
    </figure>

该标签定义独立的流内容，因为该内容的位置独立，所以删除之后对整个html页面不会产生影响。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 4]

## 13.<figure>标签 ##

<figure>
    	<img src="images/1.jpg" alt="The 12 Constellations" width="304" height="228" />
    	<figcaption>12星座背景图片素材-正版创意图片400110709-摄图网</figcaption>
    </figure>

该标签一般与<figrue>标签连用，用于定义<figrue>元素的标题，并且该标签必须在<figure>标签第一个子元素或者最后一个子元素的位置。  
![标签][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 5]

## 14.<aside>标签 ##

<aside>
    	<h4>Epcot Center</h4>
    	<p>The Epcot Center is a theme park in Disney World, Florida.</p>
    </aside>

该标签可以定义侧边栏，或者是与<article>标签相关的内容。  
![标签][20200615183116971.png]

## 15.<bdi>标签 ##

<ul>
    	<li>Username <bdi dir="rtl">Bill:</bdi> 80 points</li>
    	<li>Username <bdi>Steve:</bdi> 78 points</li>
    </ul>

该标签设置文本方向。  
![标签][20200615183333890.png]

## 16.<details>标签 ##

<details>
    	<summary>《水调歌头》苏轼</summary>
    	<p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</p><p>明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p><p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
    </details>

该标签会显示一个下拉箭头，只有点开下拉箭头内容才会显示，其中可以用<summary>标签设置其标题。  
![标签][20200618095103937.png]

## 17.<dialog>标签 ##

<dialog open>This is an open dialog window</dialog>

顾名思义，此标签定义一个对话框。  
![标签][20200618095301141.png]

# 五、已移除的元素 #

[20200618095706306.png]: https://img-blog.csdnimg.cn/20200618095706306.png
[20200618100007993.png]: https://img-blog.csdnimg.cn/20200618100007993.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618100154206.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618100459976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[-]: https://img-blog.csdnimg.cn/20200618100800935.png
[20200618101054338.png]: https://img-blog.csdnimg.cn/20200618101054338.png
[20200615084137440.gif]: https://img-blog.csdnimg.cn/20200615084137440.gif
[20200615084613420.gif]: https://img-blog.csdnimg.cn/20200615084613420.gif
[20200615085235428.gif]: https://img-blog.csdnimg.cn/20200615085235428.gif
[20200615091627112.png]: https://img-blog.csdnimg.cn/20200615091627112.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200615092430293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[20200615095516479.png]: https://img-blog.csdnimg.cn/20200615095516479.png
[20200615103110401.gif]: https://img-blog.csdnimg.cn/20200615103110401.gif
[20200615103734753.png]: https://img-blog.csdnimg.cn/20200615103734753.png
[1]: https://img-blog.csdnimg.cn/20200615104024284.png
[2]: https://img-blog.csdnimg.cn/20200615104135561.png
[3]: https://img-blog.csdnimg.cn/20200615104341639.png
[4]: https://img-blog.csdnimg.cn/20200615111325590.png
[5]: https://img-blog.csdnimg.cn/20200615111445933.png
[6]: https://img-blog.csdnimg.cn/20200615111559929.png
[7]: https://img-blog.csdnimg.cn/20200615111702656.png
[8]: https://img-blog.csdnimg.cn/20200615111958211.png
[9]: https://img-blog.csdnimg.cn/20200615112103453.png
[10]: https://img-blog.csdnimg.cn/20200615112208781.png
[20200615165454888.png]: https://img-blog.csdnimg.cn/20200615165454888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200618133057672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[20200615173611689.png]: https://img-blog.csdnimg.cn/20200615173611689.png
[20200615173844186.png]: https://img-blog.csdnimg.cn/20200615173844186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200615175133270.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200615180254878.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JhaWR1XzM4NzYwMDY5,size_16,color_FFFFFF,t_70
[20200615183116971.png]: https://img-blog.csdnimg.cn/20200615183116971.png
[20200615183333890.png]: https://img-blog.csdnimg.cn/20200615183333890.png
[20200618095103937.png]: https://img-blog.csdnimg.cn/20200618095103937.png
[20200618095301141.png]: https://img-blog.csdnimg.cn/20200618095301141.png