一个具体功能的完整的网页，一般由3个部分组成
1.HTML
网页的具体内容和结构
2.css
网页的样式
3.JavaScript
网页的交互效果，比如对用户鼠标事件作出响应
HTML5新增标签
HTML5新增了27个标签元素，废弃了16个标签，主要包括结构性标签，级块性标签，行内语义性标签，交互性标签
1.结构性标签
负责web上下文结构的定义，确保html文档，包含：
* article 文章主体内容（一篇博客，一篇论坛帖子，一段用户评论，插件）
* header 标记头部区域内容
* footer 标记脚部区域内容
* section 区域章节表述
* nav 菜单导航，链接导航
2.块级性标签
完成web页面区域的划分，确保内容的有效分隔，包含
* aside 注记，贴士，侧栏，摘要，插入的引用作为补充主体的内容
* figure 对多个元素组合并展开的元素，常与figcation联合使用
* code 表示一段代码块
* dialog 人与人之间对话，包含dt和dd两个组合元素（dt 用于表示说话者，dd用于表示说话着的内容）
3.行行语义行标签
完成web页面具体内容的引用和表述，丰富展示内容，包含
* meter 特定范围内的数值，如工资，数量，百分比
* time 时间值
* progress 进度条，可用max，min，step进行控制，完成对进度的表示和监听
* video 视频元素，用于视频播放，支持缓冲预加载和多种视频媒体格式
* audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
<audio src="audio/石头李玉刚 - 雨花石 [mqms].mp3" controls="controls"></audio>
<video src="audio/223916230816be3143063373.mp4" controls="controls"></video>
4.交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包含：
* details 表达一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
* datagrid 控制客户端数据与显示，可用于动态脚本及时更行
* 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>数据采集</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>数据采集</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
说明
图标采用的是mui-icon，跳转和提示功能采用方式的mui，使用时需导入mui.min.css和mui.min.js
