HTML5---第二十二天

来源：互联网发布：无锡商脉网络编辑：程序博客网时间：2024/05/10 05:28

HTML5:

1 表单元素

文字描述<input placeholder="账号必须xxxx" name="xx"/><br/>

颜色<input type="color" name="x"/><br/>

日期<input type="date" /><br/>

时间<input type="time" /><br/>

日期时间--本地<input type="datetime-local" /><br/>

邮箱<input type="email" /><br/>

选择范围内的数字<input type="number" min=1 max=10 step=3 /><br/>

选择范围内的数字<input type="range" min=1 max=1000 step=3 /><br/>

搜索<input type="search" /><br/>

2 媒体：

插入音频

[你的浏览器不支持以上媒体]

</audio>

<body>

</body>

</html>

onload=function(){ //自动播放

document.getElementById("au").play();

}

</script>

插入视频

[你的浏览器不支持以上媒体]

</video>

事件流：冒泡捕获

冒泡：是从一个子节点元素向父节点元素的过程

捕获：跟冒泡完全相反，从父节点元素到子节点元素的过程

如何来阻止事件冒泡

通过event对象和ev.stopPropagation(); 来阻止

</div>

<body>

</body>

</html>

function xx(ev){

alert(ev.target.id);

ev.stopPropagation();

}

</script>

捕获：以前的网景浏览器采用的是捕获

NetScape

通过js代码强行的采用捕获

<style>

.green{ width:200px;height:200px;border:1px green solid}

.red{ width:100px;height:100px;border:1px red solid}

</style>

</head>

</div>

<body>

</body>

</html>

onload=function(){

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

alert(this.id);

},true)

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

alert(this.id);

},true)

}

</script>

拖拽drag 释放drop

总结：

关于拖拽的元素需要设置：

（1）设置可拖拽性：draggable=”true”

（2）设置开始拖拽，继而保存该元素的id，用于释放

ondragstart=””

释放元素需要设置:

(1) 设置可释放性 ondragover=””

(2) 获得那个被拖拽的元素的id从而根据id得到那个对象，然后通过节点的appendChild达到装元素的效果

ondrop=””

例子：一个图片可以在不同div来回拖拽

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

.green{ width:200px;height:200px;border:1px green solid}

.red{ width:200px;height:200px;border:1px red solid}

</style>

</head>

<body>

</body>

</html>

//保存被拖拽的元素的id

function drag(ev){

ev.dataTransfer.setData("id",ev.target.id);

}

//阻止浏览器默认不能够释放元素的行为

function allowDrop(ev){

ev.preventDefault();

}

//获取被拖拽的元素的id，然后根据id进行添加子元素

function drop(ev){

var id=ev.dataTransfer.getData("id");

ev.target.appendChild(document.getElementById(id));

}

</script>

作业：测试一个div装符合要求的图片

H5的布局：语义化-人性化:增强了语义，把我们常用的名字标签化：有利于SEO；其实实际作用和我们以前的标签一样

header :页头

nav:导航

aside:侧栏导航

article:正文

section:比正文小一级（放文字）

figure:独立流内容(装图片等媒体...)

footer:页脚

例子：

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

div{width:800px;margin:0 auto}

header{background-color:yellow;height:40px}

nav{background-color:#399;height:40px}

li{list-style-type:none;display:inline}

div .main{

background-color:green;height:400px;

}

aside{width:300px;height:400px;background-color:#999;float:left}

article{width:500px;height:400px;background-color:red;float:left}

section{width:200px;height:200px;border:1px black solid;}

footer{background-color:#00C;height:30px}

</style>

<body>

<div>

<nav>

<ul>

</ul>

</nav>

<aside>我是侧栏导航</aside>

<figcaption>图片的描素</figcaption>

</figure>

</article>

</div>

</div>

</body>

</html>

画布：canvas 需要搭配js

圆弧参考图：

阅读全文

0 0