h5基础

来源：互联网发布：淘宝图片处理软件编辑：程序博客网时间：2024/04/29 07:37

<header> 头部

</header>

<article></article> 内容

1.能够搜索引擎迅速找到内容。

（2）声明与标签：

Html5 中可以省略<html>标签

头部非常简化。

语法标签：

1）不允许写结束符的标签：

Area meta br

<body>

<hgroup>导航相关的数据</hgroup>

</header>

</article>

<time>19:00</time>//主要是为了抓取

</body>

document.createElement(‘article’);

Html5

<metaname="apple-mobile-web-app-capable" content="yes" />

如果content设置为yes，web应用会以全屏的方式运行。

反之则不会，默认为no

<metaname="apple-mobile-web-app-status-bar-style"content="black" />

设置webapp的状态栏（屏幕顶部栏）的样式。

如果设置成blank，则状态栏有一个黑色的背景。

Viewport标签可以提升在设备上的表现效果，典型的，你可以设置视口的宽度和缩放比例。

如果你的页面的宽度小于980px，你可以设置视口的宽度以适应页面，如果你正开发一款web应用，你应该设置视口宽度为设备的宽度。

<strong><strong>:将字体加粗

Link 和 @import url区别：

Link是加载页面前把css加载完毕，@importurl是读取文件之后再加载，所以一开始就没有css样式。

@importurl(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic);

导入第三方的字体。

.no-mobile

{

}

@media screen and（判断条件 herf=“需要调用的样式表”）

通过判断媒体类型，执行不同的css

@media screen and （max-widht;240px）{

.box{width；200px;}

.title{color;red;}

}

@media screen属性标注媒体类型的判断事件，在括号中写出判断条件， max-width：240px

该判断意思

Media queries

Css部分：

选择器：

阴影：

Margin 50px 50px 前一个50px代表上下margin的值，后一个50px代表左右margin的值

Text-align：left 文字左对齐

Position：absolute

Left:100px

Top:150px

内联元素（inline）

元素的显示方式，1个按着1个，不独自占有1行

如标签有：<a> <input><label><img>

块元素

元素的显示方式：每一个元素独自占有1行，相当于前后都有换行符。

包含的元素有<h1><h6> <div> <hr>

Css 继承：

H5 拖拽

window.onload=function()

{

varbox=document.getElementById("box");

box.ondragenter=function(e)

{

e.preventDefault();

}

box.ondragover=function(e)

{

box.innerHTML="please songkai";

e.preventDefault();

}

box.ondragleave=function(e)

{

box.innerHTML="pleale likai";

e.preventDefault();

}

box.ondrop=function(e)

{

box.innerHTML="drop";

varfile=alert(e.dataTransfer.files[0]);

varformdata=new FormData;

formdata.append("aa",file);

var xml=newXMLHttpRequest();

xml.open("post","up.php");

xml.send(formdata);

e.preventDefault();

}

H5 视频

<sourcesrc="iceage4.mp4">

<inputtype="button" value="play" id="play">

</video>

Video控件

<body>

</video>

<divid="play" class="play">

</div>

</body>

Css 三角形

.play{width: 0px;height: 0px;

border-left:16pxsolid #fff;

border-top:12pxsolid rgba(255,255,255,0);

border-bottom:12pxsolid rgba(255,255,255,0);

float: left;

margin-top: 10px;

margin-left: 10px;

}

.pause{width:6px;height: 18px;

border-left: 4px solidyellow;

border-right: 4pxsolid #fff;

float: left;

margin-top: 10px;

margin-left: 10px;;

}

Css 暂停键

.pause{width: 6px;height:18px;

border-left: 4px solidyellow;

border-right: 4pxsolid #fff;

float: left;

margin-top: 10px;

margin-left: 10px;;

} border-right: 4px solid #fff;

float: left;

margin-top: 10px;

margin-left: 10px;;

}

Js 按钮切换

window.onload=function()

{

varbox=document.getElementById("box");

varvideo=document.getElementById("video");

varplay=document.getElementById("play");

play.onclick=function()

{

if(video.paused)

{

play.className="pause";

video.play();

}

else

{

play.className="play";

video.pause();

}

</script>

注意：span元素时行内元素。行内元素没有宽和高；

Position: absolute 是向对于窗体。

Position ：relative :相对于父控件

如果父控件是有position:relative

子空间设置position：absolute 参照改变随着他的父控件走

<spanid="bar">

</span>

<divid="control">

</div>

#progress{

float: left;

width: 65%;

height: 8px;

background: #fff;

border-radius:5px;

margin-top: 16px;

margin-left: 16px;

position:relative;

}

#bar{

width: 10%;height:100%;background: #ccc;border-radius: 3px;

display:block;position: absolute;left: 40px;

}

2.div元素中，margin-top:10px;如果其本身或者父元素不设float，将移动爷爷的div，即这个移动。

3.如果postion 和float同时存在，float将不起作用。Positon:absolute也不占文档流

#small{position:absolute;float:right;

float: left;position:relativie是有作用的。Relative的作用是子div包裹在其中。Float:作用，让其脱离文档流，margin-top时就可以移动元素本身。而不是爷爷的div一块移动。

4.z-index 必须用在两个都是position:absolute的div中.否则不起作用

Float :left margin-left :4px 是指两个div间距离，以前面的div为起点

Postion:absolute margin-left:4px 是以父盒子左边距为起点偏移；

5，float:left;position:relative; 合着用

7. Div{margin 0,auto} 将盒子居中 //用于块元素

Div{text-alin：center}将盒子的内容居中；//用于内联元素

8.块级元素设置width 和height，这个元素立即成为div元素，父级的text-align：center对它就不起作用。

内联元素，如span，a设置width，和height不起作用。水平方向的padding-left, padding-right,margin-left, margin-right都产生边距效果。但竖直方向的padding-top,padding-bottom, margin-top, margin-bottom不会产生边距效果。

9.块元素的后面只有是div元素，这个块元素浮动时，后面的会被覆盖。

如果后面是非div元素，这个元素float的无效。前一个div设置float，才

会有效。

内联元素中如果设置了float：left，就马上变成div；

内联元素设置display：block就变成了块元素，width，height，如果设置了就变成div。

6
document.getElementById("myDiv").addEventListener("click",myFunction, true);

true用冒泡法捕捉事件，flase用非冒泡法。

H5 表单的新特性

form action="1.php"method="post" id="myform">

</form>

Html5表单点击：

window.onload=function()

{

var myform=document.myform;

var email=myform.email;

myform.onsubmit=function()

{

if(email.value=="")

{

alert("ss");

}

return false;

}

</script>

Search ,placeholder,color:

<form>

seach:<inputtype="search" result="s" placeholder="html"/>

<inputtype="submit" value="sub" name="sub"/>

<inputtype="color"/>

</form>

正则的匹配：

<inputtype="text" pattern="^[a-z]\w{2,5}$"required="true"/>

autofocus:

seach:<input type="search" result="s"placeholder="html" autofocus="true"/>

表单免验证：

Multiple多选择：

<inputtype="file" multiple="true" name="img[]" />

enctype="multipart/form-data">

表单重写属性：

varmyform=document.myform;

varsub=myform.sub;

varsub1=myform.sub2;

sub.click=function()

{

myform.submit();

}

sub1.click=function()

{

alert("sss");

myform.action="2.php";

myform.submit();

}

</script>

下拉列表：

age：<input type="text" list="li"/>

<datalistid="li">

<option>1

</option>

<option>2

</option>

</datalist>

H5 位置：

functionsuccess(position)

{

var la=position.coords.altitude;

varlo=position.coords.latitude;

var map = newBMap.Map("map"); // 创建Map实例

map.centerAndZoom(new BMap.Point(lo,la), 11); // 初始化地图,设置中心点坐标和地图级别

map.addControl(newBMap.MapTypeControl()); //添加地图类型控件

map.setCurrentCity("北京"); // 设置地图显示的城市此项是必须设置的

map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

}

functionerror(error)

{

alert(error.code+error.message);

}

var options={};

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(success,error,options)

}

else

{

alert("out");

}

Js 和jq设置样式的不同方法：

save.setAttribute("style","font-weight:blod");

$("#save").attr("style","color:#ffoooo");想当于 $(“$save”).css(“color:#ffoooo”);

alert($("#save").attr("src"));

$(“#txt”).attr(“title”,”zz”);

Jq 中的attr 和css的区别

$("#content").attr("style","width:50px;color:red")//设置style属性的值

$("#content").css({"width":"50px","color":"red"})//也是设置style属性的值

你看看这二句是等价的，attr指向的是签标的属性，style就是其中属性之一，css其实就是代表style属性

css只能改style里的.

attr可以改元素所有的属性.id,name,style.什么都行

save.className="div2";

save.style.background=

save.names="";

save.setAttribute("names","ss");

Js面向对象

function Person(name){

this.name = name;

this.sayName =function(){

alert(this.name);

}}var person1 = newPerson("King");

//我们可以看到， 其用function来做class。

var Person = function(name, email, website){

    this.name = name;

    this.email = email;

    this.website = website;

    this.sayHello = function(){

        var hello = "Hello, I'm "+ this.name  + ", \n" +

                    "my email is: " + this.email + ", \n" +

                    "my website is: " + this.website;

        alert(hello);

};

};

<script>

        window.onload=function()

        //document.cookie="name=zhansan";

       // alert(document.cookie);

       // localStorage.setItem("name","lisi");

       // alert(localStorage.getItem("name"));

      //  sessionStorage.setItem("name","wangwu");

       // alert(sessionStorage.getItem("name"));

        var names=document.getElementsByName("names")[0];

        var pass=document.getElementsByName("pass")[0];

        var save=document.getElementsByName("save")[0];

        if(localStorage.getItem("names")&&localStorage.getItem("pass"))

            names.value=localStorage.getItem("names");

            pass.value=localStorage.getItem("pass");

            save.checked=true;

        save.onclick=function()

        if(save.checked)

          localStorage.setItem("names",names.value);

          localStorage.setItem("pass",pass.value);

        else

            localStorage.removeItem("names");

            localStorage.removeItem("pass");

var chenhao = new Person("Chen Hao", "haoel@hotmail.com",

                                     "http://coolshell.cn");

chenhao.sayHello();

H5 画布填充

window.onload=function(){

varcanvas=document.getElementById("canvas");

varcontext=canvas.getContext("2d");

context.fillStyle="green";

context.strokeStyle="red";

context.shadowColor="rgb(11,22,33)";

context.shadowOffsetX=3;

context.shadowBlur=4;//模糊

varimgobj=context.createPattern(document.getElementById("img"),"repeat-x");

varobj=context.createLinearGradient(0,0,100,0);//创建渐变

obj.addColorStop(0,"red");

obj.addColorStop(1,"green");

context.fillStyle=obj;

context.fillRect(0,0,100,100);

context.strokeRect(100,100,100,100);

}

</script>

Closepath beginpath应用：

context.moveTo(0,0);

context.lineTo(200,150);

context.stroke();

context.beginPath();

context.lineTo(10,50);

context.lineTo(300,300);

context.lineTo(40,200);

context.closePath();

context.stroke();

例子：画线：

canvas.onmousedown=function(e)

{

var mx= e.clientX;

var my= e.layerY;

context.moveTo(mx,my);

canvas.onmousemove=function(e)

{

var endx= e.layerX;

var endy= e.layerY;

context.lineTo(endx,endy);

context.stroke();

}

canvas.onmouseup=function()

{

canvas.onmousemove=null;

}

例子：自定义矩形

drawRect(3,4,100,100);

function drawRect(x,y,w,h)

{

context.beginPath();

context.moveTo(x,y);

context.lineTo(x+w,y);

context.lineTo(x+w,y+h);

context.lineTo(x,y+h);

context.closePath();

context.stroke();

}

画线的折线圆角

context.lineWidth=15;

context.lineJoin="round";

context.moveTo(100,100);

context.lineTo(100,50);

context.lineTo(300,100);

context.stroke();

Canvas

变换平移：

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

var mycontext=canvas.getContext("2d");

mycontext.strokeStyle="blue";

var i=0;

setInterval(function()

{

mycontext.clearRect(0,0,600,600);

i++;

mycontext.save();

mycontext.translate(i,0);

mycontext.fillStyle="blue";

mycontext.fillRect(0,0,100,100);

mycontext.restore();

},100 );

清楚画布的问题：

mycontext.translate(50,100);

mycontext.fillRect(-50,-50,100,100);

mycontext.clearRect(0,0,600,600);

Canvas是画布，varmycontent=document.getElecment(“canvas”);

Mycontent.translate(100,100);是将画图的区域平移100,100,

Mycontent.rolate(10*Math.PI/180);是按照绘图的区域进行旋转，即100,100开始绘图。

H5 旋转：

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

varmycontext=canvas.getContext("2d");

mycontext.translate(100,100);

mycontext.rotate(10*Math.PI/180);

mycontext.strokeRect(0,0,100,100);

Transform

mycontext.transform(1,0,0,1,100,100);

1,x轴的缩放

2，x轴的斜切

3 y轴的斜切

4.y 轴的缩放

5.6 x,y的平移。

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

var mycontext=canvas.getContext("2d");

mycontext.transform(0.5,10*Math.PI/180,0,0.5,50,100);

mycontext.strokeRect(50,50,100,100);

问题：

mycontext.translate(100,100);

mycontext.transform(0.5,10*Math.PI/180,0,0.5,50,100);

mycontext.strokeRect(50,50,100,100);

可以使用mycontext.setTransform(0.5,10*Math.PI/180,0,0.5,50,100);

自身旋转实例；
canvas.onclick=function(e)

{

var mx= e.layerX;

var my= e.layerY;

if(cobj.isPointInPath(mx,my))

{

setInterval(function()

{

cobj.clearRect(0,0,600,600);

num++;

cobj.save();

cobj.translate(100,100);

//cobj.scale(Math.sin(num*Math.PI/180),Math.sin(num*Math.PI/180));

cobj.rotate(num*Math.PI/180);

cobj.translate(-50,-50);

cobj.beginPath();

cobj.rect(0,0,100,100);

cobj.fill();

cobj.restore();

},100)

}

文字的对齐方式：

cobj.moveTo(100,200);

cobj.lineTo(400,200);

cobj.stroke();

cobj.beginPath();

cobj.textBaseline="middle";

cobj.fillText("aaa",120,200);

0 0