html5新增的标签(html5常用的语义化和结构元素) (3)

<body bgcolor="#006699">

    <div class="box">

        <!-- 视频标签 -->

        <!-- autoplay=" autoplay" 自动播放-->

<video src="./public/movie.mp4" controls="controls" style="width:600px;" autoplay="autoplay"></video>

    </div>

    <div class="box">

<video controls="controls" style="width:600px;">

    <!-- source 视频资源标签(音频资源标签) -->

<source src="./public/movie.ogg">

<source src="./public/movie.mp4">

</video>

    </div>

效果图:

    <div>

        <!-- embed插件标签 -->

        <!-- 载入的视频文件会自动播放 -->

        <!-- 载入的音频文件会自动播放 -->

        <!-- type="image/jpg" 插入资源类型 是 图像 -->

<!-- type="text/html" 插入资源类型 是 html文件 -->

<!-- type="video/webm"  插入资源类型 是 视频文件 -->

        <!-- <embed src="./public/movie.mp4" type="video/webm"> -->

            <br>

            <!-- <embed src="./music/2.mp3" type="video/webm"> -->

                <br>

                <embed src="./images/wx1.jpeg" type="images/jpeg" width="220">

                <embed src="./images/rain1.gif" type="images/gif" width="260">

               <embed src="./images/logo.png" type="images/png">

    </div>

</body>

<body>

    <!-- dialog 对话框标签 (窗口标签)-->

   <dialog open="open">

    <!-- open属性 规定dialog元素是有效的,用户可以与它进行交互(js) -->

<p>我是对话框中内容</p>

   </dialog>

   small定义元素旁注信息并显示为更小的文本

   特点:

   <!-- 在html4中,small标签作用是字体小一号。在 HTML5 中,small 元素定义**旁注信息**,并显示为更小的文本。 -->

   <dl>

    <dt>单人间</dt>

    <dd>价格:&yen;399元 含早餐,不含税  </dd>

    <dt>双人间</dt>

    <dd>价格:&yen;599元 <small>含早餐、含税</small>  </dd>

</dl>

效果图:

 

<!-- hgroup标题组标签,可以取代div -->

<hgroup>

    <h1>以创新之光照亮时代舞台 用力用情创作“三精”作品</h1>

    <h2>创随时代 精“艺”求精</h2>

</hgroup>

<!-- menu定义命令的列表或菜单标签

menu标签里的列表项我们可以使用li-->

<menu>

    <li>李</li>

    <li>芮</li>

    <li>李</li>

</menu>

效果图:

<!-- details定义元素的细节标签  会生成"三角符号"和4个字(360浏览器预览)“详细信息”或2字(Google Chrome浏览器预览)“详细”-->

<!-- open属性,定义当前标签是否打开、或者说可见 -->

<!-- open="open" 表示 当前details标签中的内容,默认展开的。 -->

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

<!-- ruby定义注释标签   将ruby标签与 <rt> 和 <rp> 标签一起使用-->

<details open="open">

    <div>

        杂技与舞蹈是一对舞台上“姐妹花”——她们二者之间既有差异性又有相似性,可以说是交相辉映,相得益彰,成为了艺术大家庭中重要的组成部分。

    </div>

</details>

效果图:

 

 

<!-- ruby定义注释标签 (中文注音或字符)-->

<!--特别注意:

 注释的内容----<rp>(</rp><rt>sun</rt><rp>)</rp> 一定要放在

文本内容右边,否则没有效果!-->

    <ruby>

        芮<rp>(</rp><rt>rui</rt><rp>)</rp>

        蓉<rp>(</rp><rt>rong</rt><rp>)</rp>

        蓉<rp>(</rp><rt>rong</rt><rp>)</rp>

    </ruby>

效果图:

 

<!-- figure定义媒介内容的分组 -->

<!-- figure标签规定独立的流内容(图像、图表、照片、代码等等)

igcaption可以为figure标签定义一个标题

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

<figure>

    <figcaption>可爱的小孩</figcaption>

    <p>

        <img src="./images/wx1.jpeg" alt="" width="220">

    </p>

</figure>

效果图:

 

<!-- progress进度条的标签 -->

<!-- .value="" 规定进程的当前值 -->

  <!-- max=""  规定需要完成的值-->

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

<br><br><br><br><br>

</body>

效果图:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值