Rumah > Artikel > hujung hadapan web > html5新增的标签有哪些
html5新增的标签有哪些
- 青灯夜游asal
- 2022-11-23 18:55:219078semak imbas
HTML5新增的标签：canvas、audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等。canvas标签可定义图形、audio标签可定义音频内容，video可定义视频，source可定义多媒体资源，embed可定义嵌入的内容等。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
HTML5是HTML的最新版本，由W3C在2014年完成标准定制。增强的浏览器本机功能，减少了浏览器插件（如：flash）应用程序，提高了用户体验满意度，使开发更加方便。HTML1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。
html5的新增标签
HTML5新增了一些结构性标记、多媒体标记和表单标记。下面给大家介绍一下。
5ba626b379994d53f7acf72a64f9b697 新元素
| 标签 | 描述 |
|---|---|
| 5ba626b379994d53f7acf72a64f9b697 | 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
| 标签 | 描述 |
|---|---|
| b97864c2e0ef2353a16c4d64c7734e92 | 定义音频内容 |
| 39000f942b2545a5315c57fa3276f220 | 定义视频（video 或者 movie） |
| e02da388656c3265154666b7c71a8ddc | 定义多媒体资源 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 |
| d8e2720730be5ddc9c2a3782839e8eb6 | 定义嵌入的内容，比如插件。 |
| 9bf7cbf2c39baa37076a22499de2f6ed | 为诸如 39000f942b2545a5315c57fa3276f220 和 b97864c2e0ef2353a16c4d64c7734e92 元素之类的媒介规定外部文本轨道。 |
新表单元素
| 标签 | 描述 |
|---|---|
| fc86e7b705049fc9d4fccc89a2e80ee3 | 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 |
| aa983b9eb8086376f1f6481364a02e5a | 规定用于表单的密钥对生成器字段。 |
| be6d67dae90cc1ad6469079e163d0939 | 定义不同类型的输出，比如脚本的输出。 |
新的语义和结构元素
| 标签 | 描述 |
|---|---|
| 23c3de37f2f9ebcb477c4a90aac6fffd | 定义页面独立的内容区域。 |
| 15221ee8cba27fc1d7a26c47a001eb9b | 定义页面的侧边栏内容。 |
| af4e6c3c591431c4583becd75d1c3582 | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| e2b9f03cad787b9644e1f51fd23b7dac | 定义命令按钮，比如单选按钮、复选框或按钮 |
| a5e9d42b316b6d06c62de0deffc36939 | 用于描述文档或文档某个部分的细节 |
| a38fd2622755924ad24c0fc5f0b4d412 | 定义对话框，比如提示框 |
| 631fb227578dfffda61e1fa4d04b7d25 | 标签包含 details 元素的标题 |
| 24203f2f45e6606542ba09fd2181843a | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| 614eb9dc63b3fb809437a716aa228d24 | 定义 24203f2f45e6606542ba09fd2181843a 元素的标题 |
| c37f8231a37e88427e62669260f0074d | 定义 section 或 document 的页脚。 |
| 1aa9e5d373740b65a0cc8f0a02150c53 | 定义了文档的头部区域 |
| f920514e6447cf1d171079d1371f007f | 定义带有记号的文本。 |
| 49c6123c49c6be380cb91db06cd3bfa9 | 定义度量衡。仅用于已知最大和最小值的度量。 |
| c787b9a589a3ece771e842a6176cf8e9 | 定义导航链接的部分。 |
| 6ecb87e5318a36c03c59e25d55f43372 | 定义任何类型的任务的进度。 |
| ec41f2147470148e85ad0337a362103e | 定义 ruby 注释（中文注音或字符）。 |
| 7240f116d85a7ee375466871bc33670a | 定义字符（中文注音或字符）的解释或发音。 |
| 515718f19dfe6612658be14be18aa0ec | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| 2f8332c8dcfd5c7dec030a070bf652c3 | 定义文档中的节（section、区段）。 |
| 46dd80ba616c57a652514755c74c4211 | 定义日期或时间。 |
| 37fcc81822f151c26d66e5caf9953670 | 规定在文本中的何处适合添加换行符。 |
html5标签的使用示例
（1）定义导航链接c787b9a589a3ece771e842a6176cf8e944f9630a3d507ae7532760da37622b0f
它也是有意义的标签，并不是在某处加上这个标签就有了导航的样式了，这都是有意义的p而已，在头部header中加入菜单标签c787b9a589a3ece771e842a6176cf8e9，nav标签可以和ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6标签合用
html代码：
<header>
<p>这是一个header部分</p>
<nav> <!--导航链接标签-->
<ul> <!--配合ul使用-->
<li>首页</li>
<li>关于</li>
<li>产品</li>
<li>联系</li>
</ul>
</nav>
</header>css代码：
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
}这样就可以实现之前只用p进行的菜单布局了
（2）定义文章标签23c3de37f2f9ebcb477c4a90aac6fffd7618f95bdc39e398f223d37049478af1
可以使用文章块标签进行写文章，这就使用这个标签进行写文章在section部分，可以和4a249f0d628e2318394fd9b75b4636b1e388a4556c0f65e1904146cc1a846bee合用
html代码：
<article><!--文章块p--> <h2>文章标题</h2><!--标题--> <p>文章内容文章内容文章内容文章内容文章内容文章内容 <br> 文章内容文章内容文章内容文章内容文章内容文章内容<br> 文章内容文章内容文章内容</p> </article>
css样式：
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}这样就可以写一篇文章了
（3）定义媒介内容的分组，以及它们的标题24203f2f45e6606542ba09fd2181843a
A。这个标签可以和它的配套标签联合使用614eb9dc63b3fb809437a716aa228d24，不过614eb9dc63b3fb809437a716aa228d24c03477f35900935b9be6780eb373f61c中间写标题
<figure>
<figcaption>标题</figcaption><!--配套-->
<p>标题内容</p>
</figure>
B。还可以和73de882deff7a050a357292d0a1fca9467bc4f89d416b0b8236eaa5f43dee742联合使用，其中73de882deff7a050a357292d0a1fca94c72c1af5e0e7f90179c047c5ef85885e是写标题，而67bc4f89d416b0b8236eaa5f43dee742写内容，显示的效果和配套使用的效果也有差异
<figure>
<dt>标题1</dt>
<dd>标题内容</dd>
</figure>（4）定义对话框或窗口a38fd2622755924ad24c0fc5f0b4d412
在这个标签中也是可以使用dd和dt标签，对话框中的标题和内容，对话框有个属性是open，这个标签的兼容性不是很好
<dialog open>
<dt>1问题</dt>
<dd>1答案</dd>
<dt>2问题</dt>
<dd>2答案</dd>
</dialog> 
（5）定义命令的列表或菜单5c0e96d12fc7501cef2ae2efde646ee0
A。这个标签可以和li合用
<menu>
<li>定义列表</li>
<li>定义列表</li>
<li>定义列表</li>
</menu>
B。可以给右键单击中添加自己的内容（只有火狐浏览器可以兼容）
联合（定义用户可以从弹出菜单调用的命令/菜单项目）9b8d7b889acba92c978f783c55ba01dc标签使用
<menu type="context" id="cai">
<!--label是右键后显示的菜单项，onclick是选中菜单后执行的代码-->
<menuitem label="菜单一" onclick="alert('这是菜单一')" icon="右键单击显示的图片"></menuitem>
</menu><span contextmenu="cai">单击我试试</span>
右键单击后出现想要的菜单项
单击菜单项，弹出内容
（6）标题组d8eccd9ed644b68a6460a2bb84548c82
里面可以写一些标题的结合684271ed9684bde649abda8831d4d355合用
<hgroup><!--标题组-->
<h3>标题</h3>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
</hgroup>
（7）定义小号文本d015d241ae6d34c34210679b5204fe85
这个标签和其他的加粗什么的标签其实是差不多的
<small>法律条文</small> <small>联系我们</small> <small>客户意见</small>
（8）定义元素的细节a5e9d42b316b6d06c62de0deffc36939
里面的内容可以配合标题和内容标签来使用
<details>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
<dt>问题</dt>
<dd>解答</dd>
</details> 点击详细信息就可以看到标题和内容了
（9）定义 ruby 注释ec41f2147470148e85ad0337a362103e
碰到不认识的字了可以使用这个进行注释拼音，但是有的兼容性不是很好，到时候可以进行修改
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby> <!--<rp>是能够兼容的时候让括号不可见，不能兼容的时候让括号可见，rt是进行这是的内容-->
（10）定义预定义范围内的度量49c6123c49c6be380cb91db06cd3bfa9
有几个属性值，min="" max="" value="" low="" high=""，其中low和high是范围，当value范围超了话就会显示不同的效果
<meter min="0" max="10" value="4" low="2" high="7">
value值超出了范围后
<meter min="0" max="10" value="8" low="2" high="7">
（11）进度条的标签6ecb87e5318a36c03c59e25d55f43372
<progress id="jindu" max="100" value="0"></progress>进度条
最大值就是进度条的长度就行，value值就是显示的进度，用它可以进行动态的进度条
<progress id="jindu" max="100" value="0"></progress>进度条
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //间隔1秒它的值加1
</script>这样进度条就可以完成了，是不是比只用js写的好多了，不同的浏览器表现形式还不一样
更多编程相关知识，请访问：编程学习！！
Atas ialah kandungan terperinci html5新增的标签有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!