第五课 HTML5新增标签

html5新增标签

1.头部区域标签

<header>我是头部区域</header>

2.导航区域标签(nav导航菜单标签)

<nav>我是导航区域</nav>

3.页脚区域标签

<footer>我是页脚区域</footer>

4.区段标签（区块标签）

<section>今日要闻</section>

<section>推荐</section>

5.内容区块标签

<article>标签规定独立的自包含内容</article>

6.aside 侧边标签

7.main 主体标签

<aside>左侧</aside>

<main>右侧</main>

html5 新增的标签，可以代替 我们在网页布局中的div（一部分div）

html5 新增的标签里，可以继续使用div标签

html5 新增的的这些标签，我们在移动端用，在pc端尽量还是用div。不用这些新增标签。因为我们要兼容低版本的浏览器。

8.dialog定义对话框或窗口标签

<dialog>我是对话框标签</dialog>

注意：

(1) 默认，这个标签在页面中是隐藏的。

(2) 默认，这个标签自带绝对定位。

我们可以通过css样式，让其显示出来

    <div class="wrap">

        <dialog>我是对话框标签</dialog>

    </div>

css代码：

    .wrap dialog {

        display: block;

    }

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

    <!-- dialog定义对话框或窗口标签 
        注意：这个标签默认他身上有一个样式，是隐藏。这个标签默认是不可见的！
    -->
    <dialog>我是对话框1</dialog>
    <dialog style="display:block;">我是对话框2</dialog>

9.small定义小号文本标签 （小号字体标签）；

特点：

small标签定义小型文本（和旁注）。

注意：

big定义大号文本标签（大号字体标签）

<big>标签是比常规的字体大一号,HTML5 不支持,但HTML 4.01 支持 <big> 标签，有些浏览器解析的时候，若遇到非HTML5标签，就会按照HTML4.0标准解析。建议使用css代替<big>效果。

10.hgroup标题组标签

特点：

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

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

用来对标题元素进行分组

<hgroup>

    <h2>最近更新</h2>

    <h3>点击排行</h3>

</hgroup>

<hgroup>

    <h2>站长推荐</h2>

    <h3>猜你喜欢</h3>

</hgroup>

11.menu定义命令的列表或菜单标签

特点：

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

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

<menu>

    <ul>

        <li><a href="">文章管理</a></li>

        <li><a href="">添加文章</a></li>

        <li><a href="">文章回收站</a></li>

    </ul>

</menu>

或者

<menu>

    <li><a href="">文章管理</a></li>

    <li><a href="">添加文章</a></li>

    <li><a href="">文章回收站</a></li>

</menu>

12.details定义元素的细节标签

特点：

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

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

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

<details>

    电话很久没有响过了，我的QQ也很久没有在线了，消失了很多天，刚刚结识的朋友因为我身上又起了红疹，每天都发来消息询问我的情况，我做到了这么多天来的沉默，我相信，没有网络，我还是可以继续我自己的生活....

</details>

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

（当你单击“详细信息”，这个标签身上会添加一个open属性）

   <details open="open">
        2020年对于中俄两国和全世界都是极不平凡的一年。新冠肺炎疫情大流行对人类生命安全形成空前挑战，对世界经济造成严重冲击，世界进入动荡变革期。真金不怕火炼。危难时刻，中俄关系的独特优势和宝贵价值愈加凸显。双方守望相助，共克时艰，在涉及彼此核心利益问题上继续坚定相互支持，体现了两国高水平互信和友谊。两国积极引领国际抗疫合作，顺利推进共建“一带一路”同欧亚经济联盟对接，共同庆祝世界反法西斯战争胜利暨联合国成立75周年，在二十国集团、上海合作组织、金砖国家等多边框架内发挥重要引领作用，成为维护国际公平正义、践行多边主义的中流砥柱。
   </details>

13.ruby定义注释标签

特点：

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

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

2.将ruby标签与 <rt> 和 <rp> 标签一起使用：

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

注意：

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

       <ruby>
           李<rt>li</rt>
           方<rt>fang</rt>
           利<rp>(</rp><rt>li</rt><rp>)</rp>
       </ruby>
	   <ruby>

    我<rt>wo</rt>

    是<rp></rp><rt>shi</rt><rp></rp>

    中<rp>(</rp><rt>zhong</rt><rp>)</rp>

    国<rp>(</rp><rt>guo</rt><rp>)</rp>

    人<rp>(</rp><rt>ren</rt><rp>)</rp>

</ruby>

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

特点：

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

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

注意：<figcaption>元素应该被置于<figure>元素的第一个或最后一个子元素的位置。

        <figcaption>
            <img src="img/1.jpg" alt="">
            <figure>白雪公主</figure>
        </figcaption>

15.progress进度条的标签

特点：

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

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

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

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

16.audio音频标签

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

controls="controls" 控制条（当你写这个属性的时候，控制条才会显示出来！）

<audio src="muisc/horse.mp3" controls="controls"></audio>

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

<audio controls="controls">

    <!-- 注释：IE 8 或更早版本的 IE 浏览器都不支持 <source> 标签。 -->

    <!-- type="audio/ogg" 这个属性可以省略不写 -->

    <source src="./muisc/horse.ogg" type="audio/ogg">

    <source src="./muisc/horse.mp3" type="audio/mpeg">

</audio>

18.video视频标签

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

controls="controls" 控制条（当你写这个属性的时候，控制条才会显示出来！）

<video src="./muisc/movie.mp4" controls="controls"></video>