html5 笔记

JustGrin
846 阅读3分钟

简介

HTML 5 的一些规则

  1. 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
  2. 减少对外部插件的需求（比如 Flash）
  3. 更优秀的错误处理
  4. 更多取代脚本的标记
  5. HTML 5 应该独立于设备
  6. 开发进程应对公众透明

新特性

  1. 用于绘画的 canvas 元素
  2. 用于媒介回放的 video 和 audio 元素
  3. 对本地离线存储的更好的支持
  4. 新的特殊内容元素，比如 article、footer、header、nav、section
  5. 新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML 5 特性。Internet Explorer 9 将支持某些 HTML 5 特性。

video 视频

用于显示视频资源 你的浏览器不支持 video 标签

示例

  <video autoplay controls loop src="http://vjs.zencdn.net/v/oceans.mp4" >
      你的浏览器不支持 video 标签
  </video>

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。

<video>标签可以插入多个<source>标签。<source>标签可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

  <video autoplay controls loop >
    <source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" >
    <source type="video/ogg" src="http://vjs.zencdn.net/v/oceans.ogg" >
    你的浏览器不支持 video 标签
  </video>

video 标签的属性

属性 说明 值
src 指定视频的url (有效的视频url, 支持Ogg, MPEG 4, WebM 格式)
poster 视频封面,视频加载成功之前显示 (有效的图片url)
autoplay 视频加载后自动播放 autoplay
preload 视频是否预加载。如果设置了`autoplay`属性, 则忽略该设置,使用默认值`auto`
  • auto(默认值):全部预加载
  • none:不进行预加载,点击播放才加载。
  • metadata:部分预加载。
controls 显示播放按钮,音量按钮等控件 controls
loop 循环播放 loop
width/height 宽/高 就是宽高的用法啦

source 媒体资源

为媒体元素（比如 <video> 和 <audio>）定义媒体资源。 设置多个source浏览器依次识别资源直到找到可读取的媒体资源,以此可兼容不同浏览器。若是有的ie依然不支持可以在source后面使用flash标签。

示例

audio:

<audio controls>
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 标签
</audio>

video:

  <video autoplay controls loop >
    <source type="video/mp4" src="pretend-to-have-video.mp4" >
    <source type="video/ogg" src="pretend-to-have-video.ogg" >
    你的浏览器不支持 video 标签
  </video>

注意:

  • 当 audio 和video 标签设置了src属性时，里面的source标签无效。
  • source 标签本身不代表任何含义, 单独使用不会出现任何效果

source 标签的属性

属性 说明 值
src 媒体文件的 URL (有效的媒体url)
type 媒体文件的类型 (有效的图片)
media 指定媒体资源的类型(几乎所有的主流浏览器都不支持 media 属性。)

audio 音频

用于播放声音文件或者音频流

示例

  <audio src="pretend-to-have-audio.mp3" controls="controls">
  您的浏览器不支持 audio 标签
  </audio>

或者

<audio controls="controls">
    <source src="pretend-to-have-audio.ogg" type="audio/ogg">
    <source src="pretend-to-have-audio.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

audio标签的属性

属性 说明 值
src 指定音频的URL (有效的音频URL,支持Ogg Vorbis、MP3、Wav等格式)
autoplay 音频加载后自动播放 autoplay
preload 音频是否预加载。如果设置了`autoplay`属性, 则忽略该设置,使用默认值`auto`
  • auto(默认值):全部预加载
  • none:不进行预加载,点击播放才加载。
  • metadata:部分预加载。
controls 显示播放按钮,音量按钮等控件 controls
loop 循环播放 loop

canvas 图形

canvas 通过js绘制图形。 canvas 标签本身没有绘图能力，标签提供一个画布，使用js 来控制画布内的每一个像素。

参考：
HTML5从入门到精通
HTML 5 video 视频标签全属性详解

avatar
文章
阅读
粉丝