MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。
WAV：为微软公司(Microsoft)开发的一种声音文件格式，它符合RIFF(Resource Interchange File Format)文件规范，用于保存Windows平台的音频信息资源，被Windows平台及其应用程序所广泛支持，该格式也支持MSADPCM，CCITT A LAW等多种压缩运算法，支持多种音频数字，取样频率和声道，标准格式化的WAV文件和CD格式一样，也是44.1K的取样频率，16位量化数字，因此在声音文件质量和CD相差无几！
各种关联：wav格式音质最好，但是文件体积较大。mp3压缩率较高，普及率高，音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下，ogg体积更小。
上面的例子使用了两个不同的音频格式。HTML5 <audio>元素会尝试以 mp3 或 ogg 来播放
音频格式
Chrome
Firefox
IE9
Opera
Safari
OGG
支持
支持
支持
支持
不支持
MP3
支持
不支持
支持
不支持
支持
WAV
不支持
支持
不支持
支持
不支持
<video src=https://www.jb51.net/article/”” autoplay=https://www.jb51.net/article/”” controls=https://www.jb51.net/article/”” loop=https://www.jb51.net/article/”” width=https://www.jb51.net/article/”” height=https://www.jb51.net/article/””></video>
属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <video src="../video/01 倒霉熊第三部_标清.mp4" autoplay="autoplay" loop="loop" controls="controls" > </video> </body> </html>
HTML5对视频的支持
一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式对于浏览器的兼容性却各不同。
注释：Internet Explorer 8 以及更早的版本不支持 标签。
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
NO：代表不支持。
X.0+：表示支持这款及版本更高的浏览器。
后来为了各大浏览器对音频和视频的支持不同，有了元素。
属性：
Src:音频或者视频的地址
Type视频或音频的类型。该属性值是一个简单的MIME字符串。例如：audio/ogg audio/mpeg audio/x_wav等等。
<!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> <video autoplay="autoplay" loop="loop" controls="controls"> <source src="../video/01 倒霉熊第三部_标清.avi" type="video/3gpp"></source> <source src="../video/01 倒霉熊第三部_标清.mp4" type="video/mp4"></source> </video> </body> </html>
第一个不支持还可以第二个。
线<Strong>加粗</Strong> <ins>下划线</ins> <del>删除线</del>
细节文档类型
声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。写在HTML文档的最上面。
常用的 DOCTYPE 声明
HTML 5
<!DOCTYPE html>
头文件HTML<head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
1. HTML <title> 元素<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
2.HTML <base> 元素<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href=https://www.jb51.net/“http:/www.w3school.com.cn/images/” />
<base target="_blank" />
</head>
3.HTML <link> 元素<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel=“stylesheet” type=“text/css” href=https://www.jb51.net/“mystyle.css” />
</head>
4.HTML <style> 元素<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type=“text/css”>
body {background-color:yellow}
p {color:blue}
</style>
</head>
5.HTML <meta> 元素元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
meta标签分为两部分。HTTP的头部信息（http-equiv）和页面描述信息（name）。
http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。
meta的常用用法：
设置文档的编码：
<meta charset=“utf-8” />
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
定义页面的关键词：
<meta name=“keywords” content=“HTML, CSS, XML” />
定义页面的描述：
<meta name=“description” content=“Free Web tutorials on HTML, CSS, XML” />
name 和 content 属性的作用是描述页面的内容。
自动刷新或跳转页面：
<meta http-equiv=“refresh” content=“5”>
这个表示当前页面每5秒钟刷一下，刷一下~
<meta http-equiv=“refresh” content=“2; url='https://www.jb51.net/'”>
这个表示当前页面2秒后跳到首页~
<meta http-equiv=“refresh” content=“5; url=‘'”>
定义页面过期时间：
<meta http-equiv=“expires” content=“Sunday 26 October 2008 01:00 GMT” />
content中的时间必须是GMT格式（格林威治时间）。
设置cookie的过期时间：