<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>价格:¥399元 含早餐,不含税 </dd>
<dt>双人间</dt>
<dd>价格:¥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>
效果图: