Html5入门

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34261739

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 网络 ViewUI

原文链接：https://my.oschina.net/686991/blog/496039

为什么80%的码农都做不了架构师？>>>

参考书籍:《 Head First HTML与CSS 第2版》和《Head First HTML5 Programming》
html5简单点就是html+css+javascript综合实践，当然包括一些新的标签
html4到html5的转变

<!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>

一些简单的API，1：地理API接口

<!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>

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;
}

```
画布API:
```

<!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>

```
视频API：
```

<!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>