HTML5笔记(多媒体元素、列表元素、容器元素、元素包含关系)

多媒体元素

video 视频
audio 音频

video

controls: 控制控件的显示,取值只能为controls

 <video controls="controls" src="./media/open.mp4"></video>

某些属性，只有两种状态： 1.不写。2. 取值为属性名,这种属性叫做布尔属性。

布尔属性,在HTML5中，可以不用书写属性值。

<video controls  src="./media/open.mp4"></video>

autoplay:布尔属性,自动播放.

<video controls autoplay src="./media/open.mp4"></video>

muted:布尔类型,静音播放。

<video controls autoplay muted src="./media/open.mp4"></video>

loop:布尔属性,循环播放。

<video controls autoplay muted loop src="./media/open.mp4"></video>

audio

<audio src="./media/shamoluotuo.mp3" controls></audio>

当不写控件元素controls时，页面不会显示播放的控件。

兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音频视频格式可能不一致

mp4、webm 为了更好的兼容浏览器；通常加source子元素,写两个格式的视频。

<video controls autoplay muted loop>
    <source src="./media/open.mp4">
    <source src="./media/open.webm">
</video>

对于旧版本的浏览器

<video controls autoplay muted loop>
    <source src="./media/open.mp4">
    <source src="./media/open.webm">
    <p>
        对不起，你的浏览器不支持video元素，请下载最新版本的浏览器。
    </p>
</video>

列表元素

有序列表

ol: ordered list
li: list item
列表(ol)中的子元素只能是li

<body>
    把大象装进冰箱，总共分几步？
    <ol type="">
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
    </ol>
</body>

有序列表：type的属性为：1，指的是列表从数字1开始排序。(默认值)
type的属性为：i，指的是列表从罗马数字i开始排序。
type的属性为：a，指的是列表从字母a开始排序。
type的属性为：A，指的是列表从字母A开始排序。
注意：这个属性在HTML4中弃用，但是在HTML5中被重新引用。除非列表中序号很重要(比如，在法律或者技术文件中条目通常被需要所引用),否则请使用CSS中list-style-type属性替代。

reversed指的是倒序排列。

    <ol reversed>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
        <li>打开冰箱门</li>
        <li>大象进去</li>
        <li>冰箱门关上</li>
    </ol>

无序列表

ul:unordered list

    <ul>
        喜欢的电影：
        <li>猫和老鼠</li>
        <li>攀登者</li>
        <li>我和我的祖国</li>
        <li>盗梦空间</li>
    </ul>

无序列表常用于制作菜单或新闻列表。

定义列表

通常用于一些术语的定义

dl: difinition list 定义列表

dt: definition title 定义标题

dd: definition description 术语的描述

<body>
HTML中的术语解释:
    <dl>
        <dt>HTML</dt>
        <dd>
            超文本标记语言,XXXXXXX
        </dd>

        <dt>元素</dt>
        <dd>
            组成HTML文档的元素，每个XXXX
        </dd>
    </dl>
</body>

容器元素

容器元素:该元素代表一个块区域，内部用于放置其他元素。

div元素

没有语义，纯净的，可以嵌套标签。

语义化容器元素

header:通常用于表示页头，也可以用于表示文章的头部。

footer:通常用于表示页脚,也可以用于表示文章的尾部。

article:通常用于表示整篇文章

section:通常用于表示文章的章节

aside:通常用于表示侧边栏

    <header>
        表示文章的头部
    </header>
    <article>
        表示整篇文章
        <section>第一个章节Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero dolorem rerum dicta quod molestiae eum sapiente voluptates distinctio nulla repellendus!</section>
        <section>第二个章节Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eaque officia obcaecati accusantium labore itaque enim omnis iusto sint voluptate.</section>
    </article>
    <aside>
        表示侧边栏
    </aside>
    <footer>
        表示文章的尾部。
    </footer>