初识HTML

新建一个HTML文件，看到目录结构如下

<img src  ..../>.我是单标签

<div>我是双标签</div>

其实DOCTYPE写成小写的就是 Doc Type，翻译过来就是文档类型，后面接了一个html，所以就是声明该文档类型是HTML格式

但有几点需要注意：

1、声明必须是 HTML 文档的第一行，位于 标签之前。

2、声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

3、所有的浏览器都支持，所以一定要注意添加此声明，以方便告知浏览器文档类型

他们组成了一对标签，所以是双标签

此元素可告知浏览器其自身是一个 HTML 文档。

限定了文档的开始点和结束点，在它们之间是文档的头部（head）和主体（body）

在html的后面还有一个 lang="en" ,意思是此网页可以被翻译成英语，将带有lang属性的网页扔到谷歌上显示，明显可以看到d出的提示翻译框框

head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：

base ,link, meta,script,style,title

而title则是head里唯一必须的标签，用于定义标题。

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

定义文档的标题，它是 head 部分中唯一必需的元素。

,  , 以及  。

定义文档的标题，它是 head 部分中唯一必需的元素。

定义文档的标题，它是 head 部分中唯一必需的元素。

html是一种超文本标记语言，h5是就是html的第五代简称。h5包含了html所有技术点，比如：网页设计，网页上面的图片、文字、视频的显示和排版技术。h5课程一般包含传统网页设计技术；新型网页设计UI设计（比如h5海报设计等等）；由于h5使用场景位居前段，所以课程还会涉及一些产品和用户体验以及设计的内容。

为何会有一个 blob？直接点击这个链接，返回了 404！什么情况？于是对此做了一番探索。

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .

首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来，通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调，可以知晓数据已经加载完毕，然后关闭数据流，调用 Video::play 函数通知浏览器播放视频。至此，整个 Blob 运行机制讲解完毕。

W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的， 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。

综上，这个只是 HTML5 提供的新特性，但是截止目前还是处于试验状态。

在上面示例中使用的视频格式不是普通的 MP4 而是 FMP4 。如果没有注意到这个问题，就可能造成：

HTML5 MediaSource works with some mp4 files and not with others (same codecs)。

解决方案：

It works fine if mp4 is fragmented.

You can do that using Bento4's mp4fragment tool.

---