1.头部区域标签

<header></header>

2.导航标签

<nav></nav>

3.区块标签

<section></section>

4.内容区块标签

<article></article>

5.aside 侧边标签

   main 主体标签

<aside>左侧</aside> <main>右侧</main> <!-- 把页面分成左右两块 --> <section> <aside></aside> <main></main> </section>

6.dialog对话框标签

       自带样式是隐藏的

       这个标签自带绝对定位

   注意:如果 对话框标签显示出来了,它自带一个加粗的边框线。你可以通过css样式去改变这个边框线。

<dialog style="display:block;">对话框</dialog>

代码演示:

202012291609210976136675

7.hgroup标签组标签,对标题进行分组

   特点:

   hgroup标签被用来对标题元素进行分组。

   当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。

   用来对标题元素进行分组

<hgroup> <h1>demo</h1> <h2>emo</h2> </hgroup>

8.menu标签定义命令的列表或菜单标签,可以用来代替div

   特点:

   1.新增了label属性,但是label在主流浏览器中,都不能被识别到。

   2.menu标签里的列表项我们可以使用li

<menu> <ul> <li><a href="">wwww</a></li> <li><a href="">wwww</a></li> </ul> </menu>

代码演示:

202012291609211163865075

9.定义元素细节的标签

   特点:

   1.open属性,定义当前标签是否打开、或者说可见

   2.open="open" 表示 当前details标签中的内容,默认展开的。

   如果我们不给这个属性,当前details标签中的内容,默认隐藏的。

   注意:这个标签,浏览器渲染后,在页面上会生成“详细信息”4个字。当你单击“详细信息”,包裹在这个标签里的信息内容会被 展开显示。

   (当你单击“详细信息”,这个标签身上会添加一个open属性)

<details open="open"> 编者按:“云中谁寄锦书来”。在2020这极不平凡的一年里,习近平总书记多次以书信的方式同人民群众、党员干部以及各行各业各界人士交流互动。一封封信笺,传达关切、鼓励与厚望,笔笔见真情,句句暖人心。岁末之际,央视网《天天学习》栏目推出年终策划“信笺里的2020”,为您讲述总书记回信背后的故事。 </details>

代码演示:

202012291609211238742916
202012291609211276250478

10.ruby定义注释标签

  特点:

  1.ruby标签定义ruby注释(中文注音或字符)。

  在东亚使用,显示的是东亚字符的发音。

  2.将ruby标签与 <rt> 和 <rp> 标签一起使用:rt是用来放注释的内容

  <ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成,还包括可选的 <rp> 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

  注意:

  其中rt标签要有,rp标签可以没有。

<ruby> 测<rt>ce</rt> 试<rt>shi</rt> 页<rp>(</rp><rt>ye</rt><rp>)</rp> </ruby>

代码演示:

11.figure定义媒介内容的分组,以及它们的标题

   特点:

   1.figure标签规定独立的流内容(图像、图表、照片、代码等等)。

   2.figcaption可以为figure标签定义一个标题

<figcaption> <img src="img/pig.jpg" alt=""> <figure>猪</figure> </figcaption>

代码演示:

202012291609211553321388

12.progress进度条的标签

   特点:

   1.progress标签定义运行中的任务进度(进程)。

   2.value="" 规定进程的当前值。

   max=""  规定需要完成的值。

<progress value="80" max="100"></progress>

代码演示:

202012291609211608107859

13.audio音频标签

   src="muisc/horse.mp3" 音频文件的路径

   controls="controls" 控制条(当你写这个属性的时候,控制条才会显示出来!)

<audio src="music/xzq.mp3" controls="controls"></audio>

代码演示:

202012291609211654724566

14.source带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件(如果都支持则任选一个)

<audio controls="controls"> <!-- 注释:IE 8 或更早版本的 IE 浏览器都不支持 <source> 标签。 --> <!-- type="audio/ogg" 这个属性可以省略不写 --> <source src="music/ww.mp3" type="audio/mp3"> <source src="music/xzq.mp3" type="audio/mp3"> </audio>

代码演示:

202012291609212231164364

15.video视频标签

   src="./muisc/movie.mp4" 视频文件的路径

   controls="controls" 控制条(当你写这个属性的时候,控制条才会显示出来!)

<video src="music/vv.mp4" controls="controls"></video>