懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

HTML5_布局and音视频

发表日期:2014-10-09文章编辑:仙桃云科网络科技有限公司

I.HTML5标签的改变
1.文档声明
HTML语法是不区分大小写的
HTML5的DTD声明为:<!doctype html>
确保浏览器能在HTML5的标准模式下进行渲染

\App3_HTML5\Module1_Layout\html5.html
 

2.结构标签
article      一篇文章
header       一个页面或一个区域的头部
nav          导航链接
section              一个区域
aside       侧边栏
hgroup      一个区块的相关信息
figure      一组媒体内容以及它们的标题
figcaption   figure元素的标题
footer     页面或区域的底部
dialog     对话窗(会话窗)
新的结构标签带来的是网页布局的改变, 以及提升对搜索引擎的友好
 

3.多媒体交互标签
video      视频
audio      音频
source    媒体资源
canvas    图片
embed   外部可交互内容或插件
多媒体标签的出现意味着富媒体的发展, 以及支持不使用插件的情况下即可操作媒体文件

 

4.Web应用标签
menu       命令列表
menuitem    menu命令列表标签
command    menu定义一个命令按钮
meter      状态标签(实时状态显示:气压、气温)
progress    状态标签(任务过程:安装、加载)
datalist      为input标记定义一个下拉列表
details     定义一个元素的详细内容
ruby        注释或音标
rp       不支持ruby的浏览器的显示
rt        对ruby注释的内容文本
keygen      表单里一个生成的键值(加密信息传送)
mark       有标记的文本(黄色为选中状态)
output      输出类型,计算表但结果配合oninput事件
time       日期/时间

 

4.删除的HTML标签
纯表现元素:内容和样式要分离
basefontbigcenterfontsstrikettu
对可用性产生负面影响的元素:搜索引擎无法抓取框架里的实际内容
frameframesetnoframe
产生混淆的元素:
acronymappletisindexdir

 

5.重新定义的标签
b       内联文本,粗体
i        内敛文本,斜体
dd       同details与figure一同使用,定义包含文本,dialog也可用
dt        同details与figure一同使用,汇总细节,dialog也可用
hr        主题结束,而不是水平线,虽然显示相同
menu     重新定义用户界面的菜单,配合commond或者menuitem使用
small      小字体,例如打印注释或者法律条款
strong    表示重要性而不是强调符号

 

6.新的布局方式
<body>
  <header></header>
  <nav></nav>
  <section>
    <article>
      <header></header>
      <p></p>
      <footer></footer>
    </article>
  </section>
  <aside></aside>
  <footer></footer>
</body>
所有的HTML5结构标签本质上来说是一个div标签
 

II.HTML5音频和视频
1.音视频的发展史
早期:embed+object+文件
不是所有的浏览器都支持,而且embed不是标准
现在:Realplay、WindowsMedia、QuickTime、Flash
每个厂商都有标准,网站格式和编码也都不相同,flash的出现解决了以上问题,
但是apple在2007年决定任何设备将不再支持flash
flash对系统消耗的资源是非常大的,如果在移动平台上播放,会很耗电
现在的Android4.0已经不再支持flash
HTML5认为浏览器应该原生支持音视频

 

2.视频格式
视频编码:H.264、Theora、VP8(google开源)
音频编码:ACC、MP3、Vorbis
HTML5能在完全脱离插件的情况下播放音视频
HTML5支持的视频格式
Ogg=Theora+Vorbis,支持浏览器:F、C、O
MEPG4=H.264+ACC,支持浏览器:S、C,即mp4格式的文件
WebM=VP8+Vorbis,支持I、F、C、O,播放很清晰

 

3.Video标签属性
<video src="文件地址" controls="播放控制"></video>
在标签内部写入不支持浏览器的文字,当用户的浏览器不支持时提示

<video src="三元悖论.mp4" controls="controls" height="200px">
  Your browser does not support the video tag!
</video>

一个video标签放入不同的资源,当第一个资源不能播放时,查找第二个

 

<video controls="controls" width="400px" poster="Dodecahedron.gif">
  <source src="movie1.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag!
</video>

 

Autoplay      视频就绪自动播放
controls     显示播放控件
width       像素宽度
height      像素高度
Loop        播放完毕后继续从头播放
Preload      加载完再播放
src         视频url
poster      加载等待的画面图片
Autobuffer   设置浏览器的缓存方式,不设置autoplay才有效

 

4.Video的API属性
play()      播放
pause()        暂停
currentTime     当前播放时间秒
muted         静音
playbackRate     播放倍速
volumn       音量,范围是从0到1

 

5.音频
音频格式:Ogg、MP3、Wav
<audio src="文件路径" controls="播放控制"></audio>


 


 


 

如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17