一個具體功能的完整的網(wǎng)頁梯码，一般由3個部分組成
1.HTML
網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)
2.css
網(wǎng)頁的樣式
3.JavaScript
網(wǎng)頁的交互效果，比如對用戶鼠標(biāo)事件作出響應(yīng)
HTML5新增標(biāo)簽
HTML5新增了27個標(biāo)簽元素杀餐，廢棄了16個標(biāo)簽时甚，主要包括結(jié)構(gòu)性標(biāo)簽，級塊性標(biāo)簽，行內(nèi)語義性標(biāo)簽撒顿，交互性標(biāo)簽
1.結(jié)構(gòu)性標(biāo)簽
負(fù)責(zé)web上下文結(jié)構(gòu)的定義，確保html文檔荚板，包含：
* article 文章主體內(nèi)容（一篇博客核蘸，一篇論壇帖子，一段用戶評論啸驯，插件）
* header 標(biāo)記頭部區(qū)域內(nèi)容
* footer 標(biāo)記腳部區(qū)域內(nèi)容
* section 區(qū)域章節(jié)表述
* nav 菜單導(dǎo)航，鏈接導(dǎo)航
2.塊級性標(biāo)簽
完成web頁面區(qū)域的劃分祟峦，確保內(nèi)容的有效分隔罚斗，包含
* aside 注記，貼士宅楞，側(cè)欄针姿，摘要，插入的引用作為補(bǔ)充主體的內(nèi)容
* figure 對多個元素組合并展開的元素厌衙，常與figcation聯(lián)合使用
* code 表示一段代碼塊
* dialog 人與人之間對話距淫，包含dt和dd兩個組合元素（dt 用于表示說話者，dd用于表示說話著的內(nèi)容）
3.行行語義行標(biāo)簽
完成web頁面具體內(nèi)容的引用和表述婶希，豐富展示內(nèi)容榕暇，包含
* meter 特定范圍內(nèi)的數(shù)值，如工資喻杈，數(shù)量彤枢，百分比
* time 時間值
* progress 進(jìn)度條，可用max筒饰，min缴啡，step進(jìn)行控制，完成對進(jìn)度的表示和監(jiān)聽
* video 視頻元素瓷们，用于視頻播放业栅，支持緩沖預(yù)加載和多種視頻媒體格式
* audio 音頻元素秒咐，用于音頻播放，支持緩沖預(yù)載和多種音頻媒體格式
<audio src="audio/石頭李玉剛 - 雨花石 [mqms].mp3" controls="controls"></audio>
<video src="audio/223916230816be3143063373.mp4" controls="controls"></video>
4.交互性標(biāo)簽
功能性內(nèi)容的表達(dá)碘裕，有一定的內(nèi)容和數(shù)據(jù)的關(guān)聯(lián)携取，是各種事件的基礎(chǔ)，包含：
* details 表達(dá)一段具體的內(nèi)容娘汞，默認(rèn)不顯示歹茶，通過某種方式（單擊）與legend交互才會顯示
* datagrid 控制客戶端數(shù)據(jù)與顯示，可用于動態(tài)腳本及時更行
* menu 用于交互菜單
* command 用來處理命令按鈕
簡單登錄頁面
<!DOCTYPE html>
<html class="ui-page-login">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>數(shù)據(jù)采集</title>
<link href="css/mui.min.css" rel="stylesheet" />
<style>
a,
address,
b,
big,
blockquote,
body,
center,
cite,
code,
dd,
del,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
label,
legend,
li,
ol,
p,
pre,
small,
span,
strong,
u,
ul,
var {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-color: blue;
}
#panel .panel-top {
color: white;
height: 150px;
padding: 100px 100px 50px 100px;
}
#panel .panel-top h2 {
font-size: 28px;
border-bottom: 100px;
}
#panel .panel-content {
margin-top: 40px;
}
#panel .panel-content .int {
display: inline-block;
text-align: center;
/*水平居中*/
margin-bottom: 10px;
position: relative;
height: 45px;
width: 80%;
}
#panel .panel-content label {
position: absolute;
width: 45px;
height: 45px;
line-height: 45px;
}
#panel .panel-content .int input {
width: 100%;
height: 100%;
border: 1px solid #ddd;
padding-left: 40px;
box-sizing: border-box;
border-radius: 6px;
font-size: 18px;
fd
}
#panel .panel-content .int input:focus {
outline: none;
border: 1px solid orangered;
box-shadow: 0 0 2px orangered;
}
#panel .panel-content .setting a {
margin-left: 40px;
margin-right: 40px;
margin-top: 10px;
font-size: 16px;
text-decoration: none;
margin-bottom: 20px;
color: black;
}
#panel .panel-content a.pwd-login-left {
float: left;
}
#panel .panel-content a.pwd-login-rigth {
float: right;
}
#panel .panel-content button {
width: 60%;
height: 50px;
border: 0;
color: white;
margin-bottom: 10px;
border-radius: 6px;
background-color: orange;
font-size: 18px;
}
#panel .panel-content button:active {
background-color: darkorange;
}
#panel .panel-content button:focus {
outline: none;
}
</style>
</head>
<body>
<div id="panel">
<div class="panel-top">
<h2>數(shù)據(jù)采集</h2>
</div>
<div class="panel-content">
<div class="int">
<label class="mui-icon mui-icon-person"></label>
<input onkeyup="var reg = /^[\d\_a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';" id="mnumber" type="text" placeholder="請輸入用戶名" value="">
</div>
<div class="int">
<label class="mui-icon mui-icon-locked"></label>
<input onkeyup="var reg = /^[\d\_a-zA-Z]+$/;if(!reg.test(this.value)) this.value='';" id="pwd" type="text" placeholder="請輸入密碼" value="">
</div>
<div class="setting">
<a href="#" class="pwd-login-left"><input type="checkbox"><span>記住密碼</span></a>
<a onclick="registered()" class="pwd-login-rigth"><span>注冊登陸</span></a>
</div>
<div>
<button onclick="Thelogin()">登陸</button>
</div>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
function Thelogin() {
var number = document.getElementById('mnumber').value;
var pwd = document.getElementById('pwd').value;
if(number.length > 0 && pwd.length > 0) {
if(number == 'admin' && pwd == 1234) {
mui.openWindow({
url: 'html/main.html',
id: 'main'
});
} else {
mui.toast('用戶名或密碼錯誤')
}
} else {
mui.toast('輸入不能為空')
}
}
function registered() {
mui.openWindow({
url: 'html/registered.html',
id: 'registered'
});
}
</script>
</body>
</html>
圖效果
登錄頁面.png
說明
圖標(biāo)采用的是mui-icon你弦，跳轉(zhuǎn)和提示功能采用方式的mui惊豺，使用時需導(dǎo)入mui.min.css和mui.min.js
