例
播放录像:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
浏览器支持
IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。
注释:IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。
标签定义及使用说明
<video> 标签定义视频,比如电影片段或其他视频流。
目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES从 Firefox 21 版本开始Linux 系统从 Firefox 30 开始 | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES从 Opera 25 版本开始 | YES | YES |
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
音频格式的 MIME 类型
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML 4.01 与 HTML5之间的差异
<video> 标签是 HTML5 的新标签。
提示和注释
提示:可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。
可选属性
New:HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autoplayNew | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
| controlsNew | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| heightNew | pixels | 设置视频播放器的高度。 |
| loopNew | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
| mutedNew | muted | 如果出现该属性,视频的音频输出为静音。 |
| posterNew | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
| preloadNew | autometadatanone | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
| srcNew | URL | 要播放的视频的 URL。 |
| widthNew | pixels | 设置视频播放器的宽度。 |
全局属性
<video> 标签支持 HTML 的全局属性。
事件属性
<video> 标签支持 HTML 的事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
例
HTML 注释:
<!--这是一个注释,注释在浏览器中不会显示--><p>这是一个段落</p>
浏览器支持
所有主流浏览器都支持 <!--...--> 注释标签。
标签定义及使用说明
<!--...--> 注释标签用来在源文档中插入注释。注释不会在浏览器中显示。
您可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。
您也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的。一个好的习惯是把注释或样式元素放入注释文本中,这样就可避免不支持脚本或样式的老浏览器把它们显示为纯文本。
<scripttype="text/javascript"><!--functiondisplayMsg(){alert("Hello World!")}//--></script>
注释:命令行最后的两个正斜杠(//)是 JavaScript 注释符号。这确保了 JavaScript 不会执行 --> 标签。
除了在源文档中有非常明显的作用外,许多 Web 服务器也利用注释来实现文档服务端软件特有的特性。这些服务器可以扫描文档,从传统的 HTML/XHTML 注释中找到特定的字符序列,然后再根据嵌在注释中的命令采取相应的动作。这些动作可能是简单的包括其他文件中的文本(即所谓的服务器端包含,server-inside include),也可能是复杂地执行其他命令去动态生成文档的内容。
HTML 4.01 与 HTML5之间的差异
无。
标准属性
<!--...--> 注释标签不支持任何标准属性。
如需更多有关 HTML 标准属性的信息,请访问 标准属性。
事件属性
<!--...--> 注释标签不支持任何事件属性。
如需更多有关 HTML 事件属性的信息,请访问 事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
过web前端开发的都知道,每个标签都自带样式,比如body自带margin,a标签自带下划线,li标签自带小圆点,但是你知道更具体的吗?以下的文档还原了w3c对每个标签最初的定义,收藏一下,对你一定有帮助。
@charset "utf-8";/*@charset "gb2312";*//**
* ============================================================================
* 版权所有: 切版
* 网站地址: http://www.qieban.cn
* 该文件为W3C为标签赋予最原始样式规则、制作参考无实际作用
* ----------------------------------------------------------------------------
**/
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item } head { display: none } table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } th { font-weight: bolder; text-align: center } caption { text-align: center } body { margin: 8px } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b, strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em, var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, select { display: inline-block } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub } sup { vertical-align: super } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle } td, th { vertical-align: inherit } s, strike, del { text-decoration: line-through } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "\A" } :before, :after { white-space: pre-line } center { text-align: center } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { page-break-before: always } h1, h2, h3,
h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }切版,切图网旗下靠谱的web前端外包服务切图客群体。http://www.qieban.cn/
*请认真填写需求信息,我们会在24小时内与您取得联系。