文档章节

Html5入门

zhchl2010
 zhchl2010
发布于 2015/08/23 20:22
字数 796
阅读 147
收藏 10
  1. 参考书籍:《 Head First HTML与CSS 第2版 》和 《Head First HTML5 Programming》

  2. html5简单点就是html+css+javascript综合实践,当然包括一些新的标签

  3. html4到html5的转变

     

  4. <!DOCTYPE html><!-- h5 文档标志,而且向新版本兼容 -->
    <html>
    <head>
    <meta charset="UTF-8"><!-- h5更简单的meta标记,这种写法老浏览器也支持 -->
    <title>Insert title here</title>
    <link rel="stylesheet" href="../xxx.css"/>
    <!-- h5中css作为标准样式,不需要指明type='text/css' -->
    <script src="../xxx.js"></script>
    <!-- h5中默认javascript为默认脚本,所以也不需要指明type,以下为内联写法 -->
    <script>
        alert("hello h5");
    </script>
    </head>
    <body>
    
    </body>
    </html>

     

  5. 一些简单的API,1:地理API接口

  6. <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Where am I?</title>
        <script src="myLoc.js"></script>
        <link rel="stylesheet" href="myLOc.css">
    </head>
    <body>
        <div id="location">
            your location will go there
        </div>
    </body>
    </html>
  7. window.onload=getMyLocation;
    
    function getMyLocation(){
        if(navigator.geolocation){
            /*利用这个检查来确保浏览器支持地理定位API,如果
             * navigator.geolocation存在,说明浏览器支持这个API
             * 如果浏览器支持地理定位API,则调用getCurrentPosition方法
             * 并传入一个处理函数displayLocation,稍后就会实现这个函数*/
            navigator.geolocation.getCurrentPosition(displayLocation,displayError);
        }else{
            alert("Oops, no geolocation support");
        }
    } 
    
    function displayLocation(position){
        //获取经度和纬度
        var latitude=position.coords.latitude;
        var longitude=position.coords.longitude;
        
        var div=document.getElementById("location");
        div.innerHTML="You are at Latitude:"+latitude+",Longitude"+logitude;
    }
    
    function displayError(error){
        var errorTypes={
            0:"Unknown error",
            1:"Permission denied by user",
            2:"Position is not available",
            3:"Request tome out"
        };
        var errorMessage=errorTypes[error.code];
        
        if(error.code==1||error.code==2){
            errorMessage=errorMessage+" "+error.message;
        }
        
        var div=document.getElementById("location");
        div.innerHTML=errorMessage;
    }
  8. 画布API:
  9. <!doctype html>
    <html>
    <head>
        <title>Look what I Draw</title>
        <meta charset="utf-8">
        <style>
        canvas{
            border:1px solid #fff;
            background-color:#eef;
        }
        </style>
        <script>
            window.onload=function(){
                var canvas=document.getElementById("tshirtCanvas");
                if(canvas.getContext){//支持条件下才进行操作
                    //获取2D绘制工具
                    var context=canvas.getContext("2d");
                    //绘制一个长方形,x(10) y(10) 宽度100长度100
                    context.fillRect(10,10,100,100);
                }
                
            }
        </script>
    </head>
    <body>
        <!-- cancas画布元素,默认width=300,height=150,用CSS设置width,height会产生缩放效果,
        所以最佳实践是在canvas上指定width,height属性 -->
        <canvas id="tshirtCanvas" width="600" height="200">你的浏览器不支持画布,请升级</canvas>
    </body>
    </html>
  10. 视频API:
  11. <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" href="webvilletv.css">
    <script>
    var position=0;
    var playList;
    var video;
    window.onload=function(){
        playList=["video/preroll.ogv",
                  "video/areyoupopular.webm",
                  "video/destinationearth.ogv"];
        video=document.getElementById("video");
        video.addEventListener("ended",nextVideo,false);
        //html5当前标准下没有onended事件,所以addEventListener进行实体绑定,
        //addEventListener属于通用绑定方法,第一个参数不是"onended",第三个参数大部分false
        video.src=playList[position];
        video.load();
        video.play();
    }
    function nextVideo(){
        position++;
        if(position>playList.length){
            position=0;
        }
        video.src=playList[position];
        video.load();
        video.play();
    }
    //测试浏览器支持的视频类型
    function getFormatExtension(){
        if(video.canPlayType("video/mp4")!="") return ".mp4";
        else if(video.canPlayType("video/webm")!="") return ".webm";
        else if(video.canPlayType("video/ogg")!="") return ".ogv";
    }
    </script>
    </head>
    <body>
    <div id="tv">
        <div id="tvConsole">
            <div id="highlight">
                <img src="image/highlight.png" alt="hightlight for tv">
            </div>
            <div id="videoDiv">
                <video controls="controls" id="video">
                    <!-- <source src="video/demovideo2.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'> -->
                    <!-- mp4属于闭源格式,苹果微软支持,type指定文件类型(MIME,视频解码器和音频解码器)可以加快浏览器测速视频支持度 -->
                    <!-- <source src="video/preroll.ogv" type='video/ogg;codecs="theora,vorbis"'> -->
                    <!-- h265开源实现,火狐谷歌支持 -->
                    <!-- <source src="video/areyoupopular.webm" type='video/webm;codecs="vp8,vorbis"'> -->
                    <!-- ogv开源格式,谷歌领导,火狐支持 -->
                    
                    <object></object><!-- Flash 兼容解决方案 -->
                    <p>你的浏览器不支持视频</p>
                </video>
            </div>
        </div>
    </div>
    </body>
    </html>
10:其他API如:WebSocket...

© 著作权归作者所有

zhchl2010
粉丝 3
博文 80
码字总数 77710
作品 0
成都
程序员
私信 提问
再来 10 个新鲜的 HTML5 教程

HTML5 火吗?看看 oschina 三天两头的 xx 个 xxx 就知道了。本文为你推荐最新的 10 个 HTML5 相关的教程,或许能启发你项目中的思路。 1. HTML5 canvas – Creating own Paint program Canva...

红薯
2011/11/15
3.9K
4
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEB_HTML5在LBS社区中的应用 5、WebQQ_3.0:...

邓剑彬
2012/11/30
1K
6
推荐 10 个优秀的 HTML5 编码工具

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。 假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样...

小编辑
2011/08/22
3.2K
8
推荐10款非常优秀的HTML5开发工具

HTML5发展如火如荼,随着各大浏览器对HTML5技术支持的不断完善以及HTML5技术的不断成熟,未来HTML5必将改变我们创建Web应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助...

长平狐
2012/10/09
211
0
好程序员HTML5大前端常用开发工具大集合

HTML5作为当前最为流行的编程语言,广为适用。语言的使用人数急剧增长,更多地开发人员使用这种语言来创建各种内容并放到互联网上。随着每一个新版本的发布,HTML通过更好的功能和技术渐渐占...

好程序员IT
06/12
68
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
32分钟前
5
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
33分钟前
4
0
IE之css3效果兼容

本文转载于:专业的前端网站▷IE之css3效果兼容 一、兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-sha...

前端老手
37分钟前
4
0
NiushopB2C开源商城功能列表说明:

B2C单商户免费版:PC商城+微商城 B2C单商户标准版:PC商城+微商城组合套餐+阶梯优惠核销功能 B2C单商户企业版:PC商城+微商城拼团+组合套餐阶梯优惠+核销功能 B2C单商户分销版:PC商城+微商城...

niushop-芳
38分钟前
4
0
图片如何转GIF图片呢

如何将生活中拍摄的好玩有趣的图片制作成GIF动图呢?相信很多小伙伴都不知道要如何制作,其实制作方法非常的简单,下面分享一个图片转GIF动图的方法,希望这个方法能够帮助大家在与好友斗图时...

白米稀饭2019
45分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部