前言：這是我之前在看后盾網(wǎng)html5視頻時做的一些小樣例泪酱，現(xiàn)在我把我認為一些有意思的東西拿出來跟大家分享一下，還望多多指教序宦。
1.datalist標簽滥玷，這個標簽制作的下拉可省了不少事呢……此處注意input里的list=“l(fā)i”與datalist里的id=“l(fā)i”。
datalist使用展示.gif
貼上一段簡短的代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
請輸入姓名：<input type="text" list="li"/>
<datalist id="li">
<option>
張三
</option>
<option>
李四
</option>
<option>
王五
</option>
</datalist>
</body>
</html>
2.div的拖拽寒屯，這個效果可以做出一些跟隨鼠標在瀏覽器內(nèi)移動的有意思的東西荐捻。
效果如圖顯示：
div跟隨鼠標移動.gif
貼上代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#one{background-color: red;height: 30px;width: 30px;position: absolute;}
</style>
<script>
window.onload = function () {
var one = document.getElementById("one");
one.onmousedown = function () {
document.onmousemove = function (e){
one.style.left = e.clientX + "px";
one.style.top = e.clientY + "px";
}
}
}
</script>
</head>
<body>
<div id="one">
</div>
</body>
</html>
3.progress標簽
progress標簽進度條.gif
貼上代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function (){
var pro = document.getElementsByTagName("progress")[0];
var t = setInterval(
function (){
if (pro.value == 10){
clearInterval(t);
document.body.removeChild(pro);
var spans = document.createElement("span");
spans.innerHTML = "加載文成";
document.body.appendChild(spans);
}else{
pro.value++;
}
},1000
);
}
</script>
</head>
<body>
<progress min=0 max=10 value=5></progress>
</body>
</html>
4.部分在頁面布局上的標簽
網(wǎng)頁布局標簽
貼上代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*,a{margin:0px;padding:0px;list-style: none;text-decoration: none;}
header{width: 100%;height:100px;font-size: 20px;color:#909090;background-color: bisque;
text-align: center;line-height:100px;vertical-align:middle; }
section{float: left;width: 80%;height:300px;background-color: #323232;}
aside{float:left;width:20%;height:300px;}
.main{background-color: #909090;}
</style>
</head>
<body>
<header>
我是網(wǎng)頁的header！
</header>
<div class="main">
<nav>
<a>首頁</a>
<a>首頁</a>
<a>首頁</a>
</nav>
<section>
<hgroup>
<h1>hGroupH1標題</h1>
<h2>hGroupH2標題</h2>
</hgroup>
<artical>
這里是artical的文章內(nèi)容寡夹！ 這里是artical的文章內(nèi)容处面！ 這里是artical的文章內(nèi)容！
這里是artical的文章內(nèi)容菩掏！ 這里是artical的文章內(nèi)容魂角！ 這里是artical的文章內(nèi)容！
這里是artical的文章內(nèi)容智绸！ 這里是artical的文章內(nèi)容野揪！ 這里是artical的文章內(nèi)容！
</artical>
</section>
<aside>
這是文章的側邊欄瞧栗！
</aside>
</div>
<footer>
網(wǎng)頁的底部斯稳！
</footer>
</body>
</html>
由于這些東西是之前做的了，現(xiàn)在也并沒什么有感覺的地方迹恐，就自己看看復習復習挣惰，然后拿出來分享分享……
