首页 > 代码库 > HTML5_布局and音视频
HTML5_布局and音视频
HTML5_布局and音视频
I.HTML5标签的改变
1.文档声明
HTML语法是不区分大小写的
HTML5的DTD声明为：<!doctype html>
确保浏览器能在HTML5的标准模式下进行渲染
\App3_HTML5\Module1_Layout\html5.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body></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标签
纯表现元素：内容和样式要分离
basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素：搜索引擎无法抓取框架里的实际内容
frame、frameset、noframe
产生混淆的元素：
acronym、applet、isindex、dir
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标签
7.演示
D:\Workspaces\IntelliJ_IDEA\App3_HTML5\Module1_Layout\html5-layout.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>html5标准布局</title> <style> /*所有的HTML5结构标签本质上来说是一个div标签*/ /* { border: 1px solid tomato; height: 20px; }*/ /*页面头部 header*/ header { height: 100px; background-color: lightblue } p { height: 20px; margin: 0px; } nav { height: 50px; background: greenyellow; margin-top: 30px; } nav ul { list-style-type: none; } nav ul li { width: 100px; background: mediumpurple; float: left; line-height: 46px; margin: 2px; text-align: center; } /*页面中间 div*/ div { margin-top: 4px; height: 1000px; } section { height: 1000px; background-color: deepskyblue; width: 70%; float: left; } section article { background: yellowgreen; width: 500px; margin: 0 auto; text-align: center; } section article p { height: auto; } aside { height: 1000px; background-color: cadetblue; width: 29.5%; float: right; } aside hgroup { color: darkblue; } /*页面底部 footer*/ footer { height: 100px; background-color: dodgerblue; width: 100%; clear: both; margin-top: 4px; } </style></head><body><header> <p>This is header Tag</p> <nav> <ul> <li>首页</li> <li>读书</li> <li>音乐</li> <li>视频</li> <li>杂志</li> <li>关于</li> </ul> </nav></header><div> <section> <p>This is section Tag</p> <article> <h2>Never Again 青木カレン</h2> <p> drownig anyway, from the start to the end<br> and you sailing away, and no where else to strain<br> come and take my all the way<br> so far away, from the start to the end<br> and everything seems so veiled and blue<br> </p> </article> <article> <h2>灰色七月</h2> <p> 一个人的日子真心难熬。<br> 你永远不知道幸福什么时候才来敲门。<br> 困在这里已经很久了，每一天都像一潭死水。<br> 身边的一切都像是和我无关，<br> 一个人吃饭，一个人睡觉，一个人发呆，无聊到一种极致。<br> 同病才会相怜，身边连同病相怜的人都没有。<br> </p> </article> <hr> <figure> <figcaption>UFO</figcaption> <p>unknow flying object</p> </figure> <figure> <dt>oschina</dt> <dd>开源中国</dd> </figure> <hr> <!-- 这里的内容谷歌浏览器不显示，火狐浏览器显示 --> <dialog> <dt>你为什么能这么断定啊。</dt> <dd>曾经的我也是这样。你也是，对自己诚实一点比较好吧。不然总有一天会崩溃的哦。</dd> <dt>我才不会上你的当，我们夫妇十分恩爱。</dt> <dd>是嘛，很明白对方的心情是吧。</dd> </dialog> <hr> <menu> <li>点击</li> <li>右键单击</li> </menu> <hr> <!-- 这里的内容只有火狐浏览器支持，可以添加右键菜单 --> <span contextmenu="menu1">右键单击</span> <menu type="context" id="menu1"> <menuitem label="menu11" onclick="alert(‘菜单一‘)" icon="http://static.cnblogs.com/favicon.ico"></menuitem> </menu> <hr> <!-- 显示温度计 --> <p> <meter min="0" max="10" value="2" low="3" high="8"></meter> <meter min="0" max="10" value="5" low="3" high="8"></meter> <meter min="0" max="10" value="9" low="3" high="8"></meter> </p> <!-- 显示进度条 --> <p> <progress max="10" value="2"></progress> <progress max="10" value="4"></progress> <progress max="10" value="8"></progress> <progress max="100" value="0" id="prog"></progress> <script> var pro = document.getElementById("prog"); setInterval(function () { ++pro.value; }, 100); </script> </p> <details> <dt>TO BE OR NOT TO BE</dt> <dd>that is a question</dd> <dt>你不过是想做些打破平凡生活，让你感觉到兴奋的事情罢了。</dt> <dd>如果不能做朋友，那就成为共犯吧。</dd> <dt>总有一些缘分，因一时的任性，滑落指间；</dt> <dd>有些感情，因一时的冲动，遗憾一生。</dd> </details> <hr> <p> <ruby>夼<rt>kuang</rt></ruby> </p> <hr> <p> 自别后, 寂静的心城化作了<mark>残破的废墟</mark><br> 美丽<mark>安静的眼睛</mark>里, 再流露不出无忧的笑容<br> </p> </section> <aside> <p>This is aside Tag</p> <hgroup> <h3>秋天的心情</h3> <h3>有些人忘不掉，但永不再见</h3> <h3>因为无奈，所以逞强 </h3> <h3>有些话，这么短，那么伤</h3> </hgroup> </aside></div><footer> <p>This is footer Tag</p> <hr> <small>法律条文</small> <small>联系我们</small> <small>客户意见</small> <small>商户合作</small></footer></body></html>
页面的显示结果如下：
8.发布RunJs网页
网址：http://runjs.cn/code/jdox5j8i
在线编辑、展示、分享、交流你的 JavaScript 代码
查看我发布的页面：http://sandbox.runjs.cn/show/jdox5j8i
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="http://www.mamicode.com/文件地址" controls="播放控制"></video>
在标签内部写入不支持浏览器的文字，当用户的浏览器不支持时提示
<video src="http://www.mamicode.com/三元悖论.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="http://www.mamicode.com/movie1.ogg" type="video/ogg">
<source src="http://www.mamicode.com/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="http://www.mamicode.com/文件路径" controls="播放控制"></audio>
6.演示
\App3_HTML5\Module1_Layout\html5-video.html
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>html5音视频</title></head><body><!--谷歌浏览器不支持Idea的服务器上打开视频，IE11和火狐浏览器可以--><!--<video src="http://www.mamicode.com/三元悖论.mp4" controls="controls" height="200px"> Your browser does not support the video tag!</video><hr>--><!--一个video标签放入不同的资源，当第一个资源不能播放时，查找第二个--><!--<video controls="controls" width="400px" poster="Dodecahedron.gif"> <source src="http://www.mamicode.com/movie1.ogg" type="video/ogg"> <source src="http://www.mamicode.com/movie.webm" type="video/webm"> Your browser does not support the video tag!</video><hr>--><!--使用video标签的API--><video src="movie.webm" controls="controls" id="video" poster="昼颜.jpg"> Your browser does not support the video tag!</video><ul> <li onclick="play()">播放</li> <li onclick="pause()">暂停</li> <li onclick="forward()">快进10秒</li> <li onclick="back()">快退10秒</li> <li onclick="mute(this)">静音</li> <li onclick="accelerate()">加速</li> <li onclick="normal()">正常</li> <li onclick="moderate()">减速</li> <li onclick="turnUp()">音量加</li> <li onclick="turnDown()">音量减</li></ul><style> ul{ background: mediumpurple; height: 50px; list-style-type: none; margin: 0; } ul li{ background: lawngreen; width: 85px; height: 44px; float: left; text-align: center; line-height: 44px; margin: 3px 1.5px; }</style><script> var video = document.getElementById(‘video‘); function play(){ video.play(); } function pause(){ video.pause(); } function forward(){ video.currentTime += 10; } function back(){ video.currentTime -= 10; } function mute(caller){ caller.innerHTML = (video.muted = !video.muted) ? "发音" : "静音"; } function accelerate(){ video.playbackRate = 3; } function normal(){ video.playbackRate = 1; } function moderate(){ video.playbackRate = 1/2; } function turnUp(){ video.volume += 0.2; } function turnDown(){ video.volume -= 0.2; }</script><hr><!--音频标签--><audio src="黒石ひとみ-Stories.mp3" controls="controls"> Your browser does not support the audio tag!</audio></body></html>
页面的显示结果如下：
7.发布RunJs网页
因为RunJs不允许上传规定格式之外的文件，所以使用了一些其它资源的链接
访问网址进行体验：http://sandbox.runjs.cn/show/hf2ydkks
以上内容参考了:[lampbrother丛浩:HTML5]
更多文章请关注：http://www.cnblogs.com/kodoyang/
kongdongyang
2014/10/4
HTML5_布局and音视频