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同步的代码如下(我的代码有些修改) ...

随机推荐

Java：异常的处理
异常分两种大的异常类型,运行时异常和受检查异常. 用户既可以使用系统的异常类来处理异常信息,也可以创建系统的异常类的子类来自定义异常,这种方式比较灵活,虚拟机可以报出自己设置的异常信息,清楚明白. 1 ...
设置PL/SQL Developer记住用户名密码
基于Theano的DNN框架Blocks使用简要总结
Blocks官方代码地址:https://github.com/mila-udem/blocks Blocks是加拿大Montreal大学Bengio实验室牵头开发的基于Python的神经网络模型框架 ...
USACO Section 2.3: Controlling Companies
这题的dp里的check里的函数要考虑k control i control j和i control j control k的情况 /* ID: yingzho1 LANG: C++ TASK: co ...
MVC 的知识
MVC 的知识下载地址: 1. NET Framework4下载地址: http://www.microsoft.com/downloads/zh-cn/details.aspx?FamilyI ...
锁定方式SDE中插入要素
[C#] public static void LoadOnlyModeInsert(IFeatureClass featureClass, List < IGeometry > geom ...
eclipse中tomcat使用add and remove无法发布web项目
继上次启动eclipse中的tomcat报classNotFound的问题后,这次又遇到新问题.就是右键点击tomcat使用add and remove发布web项目至tomcat后,启动tomcat ...
Commons-Collections
package com.bjsxt.others.commons; import java.util.ArrayList; import java.util.List; import org.apac ...
Linux屏幕录制gif的工具及教程
准备要两个工具配合使用.它们可以用命令行安装,也可以用软件管理器安装. 1,byzanz 安装后有两个命令 byzanz-record 录制,既能录制 Gif 动画,又可录制 Ogv 视 ...
boot.img的分析
1 boot.img boot.img是由文件头信息,内核数据以及文件系统数据组成,它们之间非页面对齐部分用0填充文件头信息的具体结构可以在system/core/mkbootimg/bootim ...

HTML5_布局and音视频

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

随机推荐

热门专题