html5简单代码,html5常用

找一点html5写的源代码案例，供初学者学习

首先准备好11张图片，放到img文件夹下供调用

成都创新互联是一家专注于成都网站建设、网站设计与策划设计,罗庄网站建设哪家好?成都创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:罗庄等地区。罗庄做网站价格咨询:13518219792

代码如下：

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

/head

body

p/p

img src="img/0.JPG" /

img src="img/0.JPG" /

img src="img/colon.JPG" /

img src="img/0.JPG" /

img src="img/0.JPG" /

img src="img/colon.JPG" /

img src="img/0.JPG" /

img src="img/0.JPG" /

script

//var oBody=document.body;

var oP=document.getElementsByTagName("p")[0];

var aImg=document.getElementsByTagName("img");

fn();

setInterval(fn,1000)

function fn(){

var mytime=new Date(); //当前的系统时间  年月日 时分秒 星期 对象

var iHour=mytime.getHours();//小时

var iMin=mytime.getMinutes();//分钟

var iSen=mytime.getSeconds() ;//秒钟

var str="";

//220640

str=toZero(iHour)+":"+toZero(iMin)+":"+toZero(iSen);

oP.innerHTML=str;

for(var i=0;iaImg.length;i++){

if(str.charAt(i)==":"){

aImg[i].src="img/colon.JPG";

}else{

aImg[i].src="img/"+str.charAt(i)+".JPG";

}

}

}

function toZero(n){

if(n10){

return n="0"+n;

}else{

return n=""+n;

}

}

/script

/body

/html

html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边

代码如下：

!DOCTYPE html

html

body

canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;"

Your browser does not support the HTML5 canvas tag.

/canvas

script

var c=document.getElementById("myCanvas");

var ctx = c.getContext("2d");

var x = 0;

var ss = setInterval(function(){

  ctx.clearRect(0,0,700,550);

//ctx.translate(x,0);

ctx.beginPath();

ctx.arc(x,200,50,0,Math.PI*2,true);

ctx.stroke();

//ctx.fillRect(x,10,100,50);

if (x 700  ) {

clearInterval(ss);

}

    x += 20;

},100);

/script

/body

/html

试试看，只是简单一个demo，效果图如下：

求html5代码

这个是基础的表格，你可以去研究改一下就可以了。

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

title表格/title

/head

body

table border="2" cellpadding="12"

tr

td colspan="3"商品类目/td

/tr

tr

td rowspan="3"虚拟/td

td移动/td

td联通/td

/tr

tr

td充值卡/td

td彩票/td

/tr

tr

td梦幻/td

tdQQ/td

/tr

tr

td rowspan="3"护肤/td

td美容护肤/td

td美体/td

/tr

tr

td彩妆/td

td香水/td

/tr

tr

td个人护理/td

td保健/td

/tr

/table

/body

/html

用HTML5设计简单动画代码

!DOCTYPE html

html

head

meta charset="UTF-8"

titleanimation/title

style

#box {

height: 200px;

width: 200px;

background-color: aqua;

position: absolute;

left:0;

margin-top:50px; 

}

input {

width: 100px;

height: 30px;

}

/style

/head

body

div id="box"/div

input type="button" value="前进"

script

var box = document.getElementById('box');

var bt = document.getElementsByTagName('input');

var timer = null;

bt[0].onclick = function () {

ani(box,600);

}

function ani(ele,target) {

clearInterval(ele.timer);

ele.timer = setInterval(function() {

var step = (target - ele.offsetLeft)/10;

step = step0?Math.ceil(step):Math.floor(step);

ele.style.left = ele.offsetLeft + step + "px";

console.log(1);

if (Math.abs(target - ele.offsetLeft) = Math.abs(step)) {

ele.style.left = target + "px";

clearInterval(ele.timer);

}

},30);

}

/script

/body

/html

如何写html5代码调用打开本机的摄像头

先简单的添加需要的控件

video id="video" autoplay=""style='width:640px;height:480px'/video

button id='picture'PICTURE/button

canvas id="canvas" width="640" height="480"/canvas

并在script中定义

var video = document.getElementById("video");

var context = canvas.getContext("2d")

var errocb = function () {

console.log('sth wrong!');

}

然后，简单的说就是利用html5的api navigator.getUserMedia来开启设备的摄像头，浏览器上会出现图示中的提示

if (navigator.getUserMedia) { // 标准的API

navigator.getUserMedia({ "video": true }, function (stream) {

video.src = stream;

video.play();

}, errocb);

} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API

navigator.webkitGetUserMedia({ "video": true }, function (stream) {

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errocb);

}

网上有些例子中，navigator.getUserMedia第一个参数是‘video’，这可能是早期的版本，现在必须是obj

还有关于getUserMedia和webkitGetUserMedia 的判断，网上有这么写的

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

但要注意，他们绑定video.src的方法不一样，本人没有测过createObjectURL是否通用

拍照功能就是简单的调用canvas中的drawImage即可

document.getElementById("picture").addEventListener("click", function () {

context.drawImage(video, 0, 0, 640, 480);

});

所有script代码如图示

然后浏览器中就能看到摄像头，点击picture，就会在把当前摄像头的图片就会出现在右边了

HTML5的代码标准格式是什么

你想问的应该是，在搭建一个HTML文件时，基本的文件结构是什么样子吧？

标准的HTML文件由“文档声明、文件头、文件体”组成。

对于HTML5，文档声明也应该采取HTML5.0的声明方式，具体代码如下：

!doctype html

html

head

meta charset="UTF-8"

titleHTML5学堂（码匠）  言成科技 联合出品/title

meta name="viewport" content="width=device-width,user-scalable=no"

link rel="stylesheet" href="../css/reset.css"

/head

body

div具体内容/div

/body

/html

在html标签当中包含head标签和body标签两种，而head标签表示的是文件头，body标签表示文件体，文件头当中需要包含“字符编码”（head标签中的第一行）、“标题”（title标签）、“其他元信息”（除了字符编码外的其他meta），而文件体当中书写的具体代码就是在网页当中会显示的内容。

此外，在文件头部或文件体当中还可以使用link标签引入CSS文件，或者使用script标签引入JS文件。

关于文档声明，在传统的HTML4当中，有另外三种声明方法，请详见《文档声明 DOCTYPE常见的文档类型》