h5标签梳理
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>
代码演示:
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>
代码演示:
9.定义元素细节的标签
特点:
1.open属性,定义当前标签是否打开、或者说可见
2.open="open" 表示 当前details标签中的内容,默认展开的。
如果我们不给这个属性,当前details标签中的内容,默认隐藏的。
注意:这个标签,浏览器渲染后,在页面上会生成“详细信息”4个字。当你单击“详细信息”,包裹在这个标签里的信息内容会被 展开显示。
(当你单击“详细信息”,这个标签身上会添加一个open属性)
<details open="open"> 编者按:“云中谁寄锦书来”。在2020这极不平凡的一年里,习近平总书记多次以书信的方式同人民群众、党员干部以及各行各业各界人士交流互动。一封封信笺,传达关切、鼓励与厚望,笔笔见真情,句句暖人心。岁末之际,央视网《天天学习》栏目推出年终策划“信笺里的2020”,为您讲述总书记回信背后的故事。 </details>
代码演示:
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>
代码演示:
12.progress进度条的标签
特点:
1.progress标签定义运行中的任务进度(进程)。
2.value="" 规定进程的当前值。
max="" 规定需要完成的值。
<progress value="80" max="100"></progress>
代码演示:
13.audio音频标签
src="muisc/horse.mp3" 音频文件的路径
controls="controls" 控制条(当你写这个属性的时候,控制条才会显示出来!)
<audio src="music/xzq.mp3" controls="controls"></audio>
代码演示:
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>
代码演示:
15.video视频标签
src="./muisc/movie.mp4" 视频文件的路径
controls="controls" 控制条(当你写这个属性的时候,控制条才会显示出来!)
<video src="music/vv.mp4" controls="controls"></video>