HTML5基础

时间：2021-01-08 11:31:18 收藏：0 阅读：0

HTML5是什么？

HTML5是HTML最新修订版本，是新一代的HTML标准。

HTML5标准设计的目的是在移动设备上支持丰富的多媒体。
HTML5标准增加了许多新标签，简化了编码复杂度，提高了HTML页面的可交互性。

HTML5文档

当我们想让浏览器以HTML5标准解析HTML文档时，需要在HTML文档第一行书写

<!DOCTYPE HTML>

HTML5文档的默认字符编码为UTF-8

HTML5文档基本结构

<!DOCTYPE HTML>
<html>
<head>
    <title>...</title>
</head>
<body>
...
</body>
</html>

HTML5新增内容

用于2d/3d绘图的canvas标签。
用于多媒体播放的video和audio元素。
提供更好的页面缓存支持的locaStorage、sessionStroage元素。
自带特殊样式的内容元素，如article、footer、header、nav、section等。
新的表单元素，如calendar、date、time、email、url、search等。

HTML5页面结构

通用的HTML5页面结构如下所示：

技术图片

<header>标签：常用于HTML的头部内容，如流式布局中的整页LOGO等。
<nav>标签：常用于HTML页面上方的导航栏等。
<article>&<section>标签：通常用于表示HTML页面的正文内容。
<aside>标签：通常用于表示HTML页面的侧边工具栏、侧边悬浮的文档目录等。
<footer>标签：通常用于表示HTML页面的作者、版权所属等信息。

HTML5 内容元素

代码示例

<!DOCTYPE HTML>
<html>

<head>
    <title>HTML5内容元素</title>
</head>

<body>
    <header style="background:rgb(201, 201, 201);">
        <h1>HTML5头部内容标题</h1>
        <p>
            HTML5头部内容正文
        </p>
    </header>
    <nav style="background: rgb(247, 157, 93);">
        <a href="#">导航按钮1</a> |
        <a href="#">导航按钮2</a> |
        <a href="#">导航按钮3</a> |
        <a href="#">导航按钮4</a> |
        <a href="#">导航按钮5</a> |
        <a href="#">导航按钮6</a> |
    </nav>
    <article style="background:rgb(248, 164, 164); float: left; width: 80%;">
        <section style="background:rgb(212, 130, 130);">
            <h2>HTML5正文第1节标题</h2>
            <p>
                HTML5正文第1节正文
            </p>
        </section>
        <section style="background:rgb(241, 95, 95);">
            <h2>HTML5正文第2节标题</h2>
            <p>
                HTML5正文第2节正文
            </p>
        </section>
    </article>
    <aside style="background:rgb(158, 255, 182); float: right; width: 20%;">
        <h2>HTML5侧边栏标题</h2>
        <p>
            HTML5侧边栏正文
        </p>
    </aside>
    <footer style="background:rgb(91, 154, 236); clear: both; text-align: center;">
        <h1>Author：LiveOrNot</h1>
        <h1>Copyright：xxx</h1>
    </footer>
</body>

</html>

效果展示

技术图片

HTML5 Audio元素

HTML5 Audio元素通过<audio>标签定义声音，这里的声音可以是音频或音频流。

<audio>标签支持mp3、wav、ogg三种格式音频文件的解析及播放。
<audio>标签的controls属性提供添加播放、暂停和音量调节等按钮。
<audio>标签的autoplay属性可以用于指定音频在准备就绪后自动开始播放。
<audio>标签的loop属性可以用于指定音频播放结束后自动重新开始播放。
<audio>标签内可以包含多个<source>标签用于指定音频资源列表，<source>标签的src属性用于指定音频资源地址，开始播放后audio内的多个source指向的音频资源依次播放。
<audio>标签内可以附加提示信息用于浏览器不支持audio标签时做出信息反馈。

代码示例

<!DOCTYPE HTML>
<html>

<head>
    <title>HTML5 Audio元素</title>
</head>

<body>
    <audio controls>
        <source src="https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2017kNov/27X/27f_Tongyu/07.mp3">
        <source src="https://96.f.1ting.com/local_to_cube_202004121813/96kmp3/zzzzzmp3/2017kNov/27X/27f_Tongyu/07.mp3">
    </audio>
</body>

</html>

效果展示

技术图片

HTML5 Video元素

HTML5 Video元素通过<video>标签定义声音，这里的声音可以是视频或视频流。

<video>标签支持mp4、webm、ogg三种格式视频文件的解析及播放。
<video>标签的controls属性提供添加播放、暂停、音量调节、全屏、画中画等按钮。
<video>标签的autoplay属性可以用于指定视频在准备就绪后自动开始播放。
<video>标签的loop属性可以用于指定视频播放结束后自动重新开始播放。
<video>标签内可以包含多个<source>标签用于指定视频资源列表，<source>标签的src属性用于指定视频资源地址，开始播放后video内的多个source指向的视频资源依次播放。
<video>标签内可以附加提示信息用于浏览器不支持video标签时做出信息反馈。

代码示例

<!DOCTYPE HTML>
<html>

<head>
    <title>HTML5 Audio元素</title>
</head>

<body>
    <video controls>
        <source src="https://www.w3cschool.cn/statics/demosource/movie.mp4">
        <source src="https://www.w3cschool.cn/statics/demosource/movie.mp4">
    </video>
</body>

</html>

效果展示

技术图片