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="文件地址" 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>

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="三元悖论.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="movie1.ogg" type="video/ogg">
    <source src="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音视频的更多相关文章

HTML5_音视频标签 <audio> 和 <video>
HTML5_音视频标签 <audio> 和 <video> audio 和 video 都是 inline行内元素如果浏览器支持,则不显示标签文本 IE8 不支持 audio ...
Android音视频之MediaRecorder音视频录制
前言: 公司产品有很多地方都需要上传音频视频,今天抽空总结一下音频视频的录制.学习的主角是MediaRecorder类. MediaRecorder类介绍: MediaRecorder类是Androi ...
融云携新版实时音视频亮相 LiveVideoStack 2019
4 月 19 日,LiveVideoStack 2019 音视频大会在上海隆重开幕,全球多媒体创新专家.音视频技术工程师.产品负责人.高端行业用户等共襄盛会,聚焦音频.视频.图像.AI 等技术的最新探 ...
Android 音视频深入十一 FFmpeg和AudioTrack播放声音（附源码下载）
项目地址,求starhttps://github.com/979451341/AudioVideoStudyCodeTwo/tree/master/FFmpeg%E6%92%AD%E6%94%BE%E ...
从零到一，使用实时音视频 SDK 一起开发一款 Zoom 吧
zoom(zoom.us) 是一款受到广泛使用的在线会议软件.相信各位一定在办公.会议.聊天等各种场景下体验或者使用过,作为一款成熟的商业软件,zoom 提供了稳定的实时音视频通话质量,以及白板.聊天 ...
HTML5笔记2——HTML5音/视频标签详解
音视频的发展史早期:<embed>+<object>+文件问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
ios 音视频实现边播边缓存的思路和解决方案（转）
本片为转载内容,主要是以后自己看起来方便一些原文地址:iOS音视频实现边下载边播放其实音视频本地缓存的思想都差不多,都需要一个中间对象来连接播放器和服务器. 近段时间制作视频播放社区的功能,期间查 ...
p2p音视频通信
今年音频没事干了,根据业务需求,调研音视频p2p通信,减小服务器压力,一切从0开始. 需要信令服务器,打洞服务器,帮助链接打通双方,实现p2p音视频通信. 服务器和客服端交互等都需要实现. 谷歌web ...
ffmpeg 如何音视频同步
转自:http://blog.csdn.net/yangzhiloveyou/article/details/8832516 output_example.c 中AV同步的代码如下(我的代码有些修改) ...

随机推荐

CentOS下判断自己的VPS是OpenVZ的还是Xen的
一般来说,VPS的虚拟化技术,有Xen.OpenVZ.Xen HVM和VMware这几种,那么,如何判断自己的VPS是基于哪种虚拟化技术的呢? 1.执行:ls /proc/命令,一般Xen的VPS,/ ...
.NET单例模式-------各种写法&&验证
.NET单例模式-------各种写法&&验证前言单例模式对大家来说都不陌生,也很容易搞懂其原理,本篇文章也不提供单例模式的详细原理解析,本篇文章的目的是展示在C#中单例模式的各种 ...
struts2与struts1整合，java.lang.NoClassDefFoundError: org/apache/commons/logging/LogFactory
原因:我往项目的WEB-INF/lib中导入了struts2基本的包,还有struts1的core包,以及struts2-strut1-plugin的包,但是没有导入commons-loggin-1. ...
c# 获取字符串数组中最长的的字符串并输出最长的字符串
求字符串数组中最大长度的字符串: 实质就是比较字符串的长度: 方案一: class Program { static void Main(string[] args) { string[] array ...
MYSQL数据库错误代码提示汇总
Mysql出错代码表 1005:创建表失败 1006:创建数据库失败 1007:数据库已存在,创建数据库失败 1008:数据库不存在,删除数据库失败 1009:不能删除数据库文件导致删除数据库失败 1 ...
jdbc框架 commons-dbutils的使用
commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化jdbc编码的工作量,同时也不会影响程序 ...
AE 将地图导出为图片的两种方法
在ArcGIS的开发中,我们经常需要将当前地图打印(或是转出)到图片文件中.将Map或Layout中的图象转出有两种方法,一种为通过IActiveView的OutPut函数,另外一种是通过IExpor ...
转：java中scanner类的用法
声明:本文转自百度经验:http://jingyan.baidu.com/article/e73e26c0c74a1f24adb6a7fb.html Scanner是SDK1.5新增的一个类,可是使用 ...
JSON 之 SuperObject(10): Merge、Clone、ForcePath
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
如何将SQLite数据库（dictionary.db文件）与apk文件一起发布
可以将dictionary.db文件复制到Eclipse Android工程中的res\raw目录中,如图1所示.所有在res\raw目录中的文件不会被压缩,这样可以直接提取该目录中的文件.使用 ...

HTML5_布局and音视频

HTML5_布局and音视频的更多相关文章

随机推荐

热门专题