一、HTML5核心技术
1、了解H5的概念及发展趋势
html5是唯一一个通配PC、mac、iPhone、ipad、Android、Windows phone等主流平台的跨平台语言。实现一次开发，多终端部署使用。
H5应用适合移动开发的几大特别如下：
- 1、离线缓存成为H5开发应用提供了基础
- 2、音频、视频自由嵌入，使多媒体形式更为灵活
- 3、地理定位功能可以使人们随时随地 分享位置
- 4、Canvas绘图功能提升了移动平台的绘图能力
- 5、专为移动平台定制的表单元素
- 6、丰富的交互方式支持
- 7、H5使用上的优势
- 8、CSS3视觉设计师的辅助利器
- 9、实时通信
- 10、档案及硬件支持
- 11、语义化
- 12、双平台融合的APP开发方式，提高了工作效率
H5的发展趋势
- 1、移动优先
- 2、游戏开发者领衔“主演”
- 3、响应式设计&自动变化的屏幕尺寸
- 4、设备访问
- 5、离线缓存
- 6、开发工具的成熟
2、H5的基本原理
H5 APP 前端开发应用主要由3部分组成：结构（Structure）、表现（Presentation）、行为（Behavior），大多数应用与层叠样式表（CSS）相集成，CSS定义HTML组件在浏览器和JavaScript中如何渲染。
3、H5新增的结构元素
- header：定义页面或区段的头部，表示页面中一个内容区块或整个页面的标题
- section：定义页面或区段的主体部分，例如章节、页眉、页脚或页面中的其他部分
- nav：定义页面或区段的导航区域，表示页面中导航链接部分
- aside：定义补充相关内容，表示article元素内容之外的，与article元素的内容相关的辅助信息
- article：定义正文或一篇完整的内容，表示页面中一块玉上下文不相关的独立内容，例如博客中的一篇文章
- footer定义页面或区段的尾部，表示整个页面或者页面中一个内容区块的脚注
如图：这种布局模式下，搜索引擎能很直观地读取并理解页面的内容。
H5标签语义化优点:
- 1、去掉样式能让页面结构呈现更清晰。
- 2、屏幕阅读器会按标签“读”你的网页
- 3、有益于SEO（搜索引擎优化）
- 4、便于团队开发和维护
H5元素类型:
H5元素标签根据用途可分为：节点元素标签、文本元素标签、分组元素标签、嵌入元素标签。
time元素也是文本标签，因为是全新的标签，所以单独说明下。time元素用来标记一篇文章的发布时间。代码所示：
<time datetime="2012-02-15" pubdate="2012年02月15日"</time>
4、H5 APP页面
开发工具：DreamWeaver、Editplus、WebS太肉麻、Sublime等。
1）一个H5基本页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>检测浏览器是否支持H5</title>
<style type="text/css">
<!--
body{font-size:12px}
canvas{border:1px solid #ccc;backgroud:#f3f3f3;}
-->
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">当前浏览器不支持全新的画布标签</canvas>
<p>1233</p>
</body>
</html>显示效果
2）实现输出Hello H5
<!DOCTYPE html> ---这里声明 此为html文档
<html>
<head>
<meta charset="utf-8"> ---声明字符类型，不区分带下写，和双引号，等价于<MetA charset=utf-8>
<title>在页面输出Hello H5</title> ---标题
----CSS层叠样式
<style type="text/css">
<!--
body{font-size:12px}
-->
</style>
</head>
<body>
---文本内容
<p>Hello H5</p>
</body>
</html>3）H5新元素分栏设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面结构</title>
<style type="text/css">
<!--
header,nav,article,footer
{border:solid 1px #666;padding:5px}
header{width:500px}
nav{float:left;width:60px;height:100px}
article{float:left;width:428px;height:100px}
footer{clear:both;width:500px}
-->
</style>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>效果图：
5、CSS技术
CSS(Casading StyleSheet) 用于网页中样式的定义，称为层叠样式表。可有效的对页面布局、字体、颜色、背景和其他效果实现更加精确和控制。
margin、background-color、backgound-image、padding、content、border
CSS的引入方法：
1）链接式
<link rel="stylesheet" type="text/css" href="layout.css"/>
这里layout.css文件存储在跟html相同路径（这时可以直接指定文件即可）
链接式引入方法会在装在页面主体部分之前装载css文件，这样显示出来的网页从一开始就带有样式效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面结构</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>2）导入式
<style type="text/css">
@import "layout.css";
</style>
导入式引用方法会在整个页面装载完成后再装载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积较大，则会先显示无样式的页面，闪烁一下之后再出现设置样式的后果，从浏览者的感受来说，这时导入式的一个缺陷。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面结构</title>
<style type="text/css">
@import "layout.css";
</style>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>3）内嵌式
不建议使用内部css样式，因为这种做法需要在html文档内嵌入css样式定义，主要由三大劣势：1）只针对当前html文档有效；2）导致html文档过大；3）修改整站风格时，导致重复修改增加工作量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面结构</title>
<style type="text/css">
header,nav,article,footer
{border:solid 1px #666;padding:5px}
header{width:500px}
nav{float:left;width:60px;height:100px}
article{float:left;width:428px;height:100px}
footer{clear:both;width:500px}
</style>
</head>
<body>
<header class="bgColor">导航部分</header>
<nav>菜单部分</nav>
<article>内容部分</article>
<footer>底部说明部分</footer>
</body>
</html>4）行内样式
行内样式需要将表现和内容混杂在一起，当样式仅需要在一个元素上应用一次时。由于行内样式优先级最高，一般用于解决页面兼容性问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<p style="color:#ff00;font-size:12px;">H5 Study</p>
</body>
</html>6、css基本语法
使用花括号来包围声明
值具有不同的写法和单位，以红色为例：
p{color:red;}---英文单词表示
p{color:#ff0000;}--十六进制表示
p{color:#f00;}--缩写样式
p{color:rgb(255,255,0)}--RGB表示方法
p{color:rgb(100%,100%,0%)}
当使用RGB 百分比时，即使值为0也要写百分比符号。在其他情况下就不需要这么做，例如尺寸为0像素时，0之后不需要单位px，因为0就是0，无论单位是什么。
如果值为若干单词，则要给值加引号，代码如：p{font-family:"sana seif";}
如果定义不止一个声明，则需要用分号将每个分号声明分开，代码如下：p{font-family:"sana seif";color:red;}
在编写代码时，每行只描述一个属性，这样可以增强样式定义的可读性，例如：
p{
font-family:"sana seif";
color:red;
}
7、CSS选择器
8、CSS盒模型Box Model
元素内容（element content）、内边距（padding）、边框（border）、外边距（margin）。在html中每个元素都有盒模型。
padding属性：定义元素边框与元素内容之间的空白区域，书写方式为从top开始，顺时针方向。padding不允许有负值。
padding-top：设置距离顶部的内边距
padding-right：设置距离右端的内边距
padding-botton：设置距离底部的内边距
padding-left：设置距离左端的内边距
padding:10px; 盒子四周都需要设置padding时简写，以优化CSS。
padding:5px 10px; 表示上下边距相等，左右边距相等。
padding:5px 6px 7px;上边距为5px，下边距为7px，左右边距为6px
padding:5px 6px 7px 8px;上边距为5px，右边距为6px，下边距为7px，左边距8px
border属性，允许规定元素边框的样式、宽度、颜色。
img {border: #ccc 1px solid;}表示把一幅图片（四周）定义为1px灰色实线边框。
扩写代码如下：
img{
border-width:1px;
border-style:solid;
border-color:#ccc;
}
img {border-right:1px red dotted;}表示把右侧边框定义为红色虚线边框。
如果边框样式为none或0，那么边框根本不存在。
margin属性，指元素周围生成额外的空白区，称为外边距，可以视觉角度上达到将原色相互隔开的目的。
margin属性特征如下：
- margin始终是透明的
- margin值左右相加，上下塌陷
- margin可以为负值
- margin值左右为auto时，盒子居中对齐
- margin语法结构与padding相同
margin是用来设置元素与元素的间距，padding是用来设置元素与内容的间隔的。
案例：CSS Box Model布局
本案例功能是编写一段用BOx Model布局的代码，分别使用盒模型的margin、border、padding属性实现盒子布局。
执行结果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Box Model</title>
<style type="text/css">
body {
background: #eee;
}
div {
height: 240px;
width: 360px;
border: 5px solid yellow;
background: blue;
margin: 0 auto;
}
span {
display: block;
width: 50%;
height: 50%;
background: red;
border: 5px solid yellow;
color: white;
font-weight: bold;
margin: auto;
margin-top: 60px;
line-height: 120px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div> <span>Box Model的内容</span> </div>
</body>
</html>9、CSS 3 动画
通过CSS3创建的动画，在许多网页中取代了Flash动画及JavaScript。CSS3属性有关的制作动画的3个属性：transform、transition、animation
1）transform 变形动画是让某个元素改变形状、大小和位置。
包括几种动作：旋转（rotate）、倾斜（skew）、缩放（scale）、移动（translate）、及矩阵变形（matrix）。
transform: rotate(30deg);将一个元素顺时针旋转30度。
transform:translate(100px,20px);把某个元素水平移动100像素，垂直移动20像素。
2）transition 允许CSS的属性值在一定的时间区间内平滑地过渡，这种效果可以在鼠标单击、获得焦点、被单击或对元素所做的任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
语法结构：transition:[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]
transition属性具体描述如下：
transition：简写属性，用于在一个属性中设置4个过渡属性
transition-property：规定应用过渡的CSS属性的名称
transition-duration：定义过渡效果花费的时间。默认为0.
transition-timing-function：规定过渡效果的时间曲线。默认是“ease”
transition-delay：规定过渡效果何时开始。默认是0.
过渡效果：
linear匀速、ease逐渐慢下来、ease-in加速、ease-out减速、ease-in-out先加速、后减速。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition</title>
<style type="text/css">
img {
height: 150px;
width: 150px;
transition: width 3s ease ls, height 3s ease ls;
}
img:hover {
height: 450px;
width: 450px;
}
</style>
</head>
<body>
<img src="自拍.jpg" alt="我自己">
</body>
</html>3）animation
@keyframes的规则是创建动画。keyframes的语法规则为：命名由“keyframes”开头，后面紧跟着动画的名称，再加上一对花括号。
例如：定义一个动画，背景从红色变为黄色，代码如下：
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
当利用@keyframes创建动画时，要把他绑定到一个选择器上，否则动画不会有任何效果。
例如，把上面定义的myfirst动画绑定到div元素上，时长5s，代码如下：
div{
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
}
必须定义动画的名称和持续时间。如果省略持续时间，动画将无法运行，因为默认值是0
案例：CSS3动画泡面按钮
本案例采用CSS3的linear-gradient（线性渐变）和radial-gradient（径向渐变）实现按钮的泡沫状态，当鼠标悬停在按钮上时，产生泡沫跳动的效果。
109.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Animated Bubble Buttons | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/page.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
</head>
<body>
<div id="buttonContainer">
<a href="#" class="button big blue">Big Button</a>
<a href="#" class="button big green">Big Button</a>
<a href="#" class="button big orange">Big Button</a>
<a href="#" class="button big gray">Big Button</a>
<a href="#" class="button blue medium">Medium Button</a>
<a href="#" class="button green medium">Medium Button</a>
<a href="#" class="button orange medium">Medium Button</a>
<a href="#" class="button gray medium">Medium Button</a>
<a href="#" class="button small blue">Small Button</a>
<a href="#" class="button small green">Small Button</a>
<a href="#" class="button small blue rounded">Rounded</a>
<a href="#" class="button small orange">Small Button</a>
<a href="#" class="button small gray">Small Button</a>
<a href="#" class="button small green rounded">Rounded</a>
</div>
<p class="note">最佳浏览器 Safari & Chrome</p>
</body>
</html>page.css
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
color:#eee;
background:url('../img/page_bg.jpg') repeat-x #f3f3f3;
font:15px Calibri,Arial,sans-serif;
border-top:5px solid #212121;
}
#buttonContainer{
background:url('../img/section_bg.png');
border:1px solid #F4F4F4;
margin:120px auto 0;
overflow:hidden;
padding:20px 0 35px 45px;
width:440px;
-moz-box-shadow:0 0 10px #C4C4C4;
-webkit-box-shadow:0 0 10px #C4C4C4;
box-shadow:0 0 10px #C4C4C4;
}
#buttonContainer a{
float:left;
margin:15px 15px 0 0;
}
#footer{
background-color:#212121;
position:fixed;
width:100%;
height:70px;
bottom:0;
left:0;
}
a.tzine{
background:url("../img/tzine.png") no-repeat right top;
border:none;
color:#FCFCFC;
font-size:12px;
height:70px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
width:290px;
}
p.note{
color:#999999;
font-style:italic;
margin:50px 0 120px;
text-align:center;
text-shadow:1px 1px 0 #FFFFFF;
}
.tri{
border-color:transparent transparent #212121;
border-style:solid;
border-width:20px 17px;
height:0;
left:50%;
margin:-40px 0 0 -400px;
position:absolute;
top:0;
width:0;
}
h1{
font-size:20px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:25px 0;
position:absolute;
width:400px;
}
a, a:visited {
text-decoration:none;
outline:none;
border-bottom:1px dotted #97cae6;
color:#97cae6;
}
a:hover{
border-bottom:1px dashed transparent;
}
.clear{
clear:both;
}page.css
buttons.css
@charset "utf-8";
/* CSS Document */
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient(center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('button_bg.png'), url('button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('button_bg.png'), url('button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('button_bg.png'), url('button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('button_bg.png'), url('button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}buttons.css
效果图
10、CSS布局
1）相对定位 position:relative;
使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此移动元素会导致它覆盖其他框。
#box_relative{
position:relative;
left:30px;
top:20px;
}2）绝对定位 position-absolute;
绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素。可以通过设置z-index属性来控股之这些框的对方次序。z-index的值设置越高，越会显示在上层。
#box_relative{
position:absolute;
left:30px;
top:20px;
}3）float详解
float时CSS的定位属性，类似“文本环绕”，除了简单的在图片周围包围文字外，float可用于创建全部网页布局。
#sidebar { float:left; }
float属性有4个可用值：left和right分贝会浮动元素到各自方向，none（默认的）使元素不浮动，inherit会从父级元素获取float值
#footer { clear:both; }
clear（清除）是float的相关属性，设置了清除float的元素不会产生float，而会忽视float向下移动
clear也有4个值，常用的是both，用于清除左右两边的float；left和right只能清除一个方向的float；none是默认值，只在需要移除已制定的清除值使用。
浮动如何影响父元素？如果父元素只包含float元素，那么它的高度就会塌陷为0；如果父元素不包含任何的可见背景，这个问题很难被发现。
float产生的bug，大多数来自IE6
4）实现案例：圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
body{
min-width:550px;
}
#header{
display: block;
min-height: 100px;
background: #666666;
}
#container{
padding-left:200px;
padding-right:150px;
border-radius: 7pt;
}
#container .column{
float:left;
position:relative;
}
#center{
width:100%;
height: 600px;
background-color: #d6d6d6;
}
#left{
width:200px;
height: 600px;
background-color: #77bbdd;
margin-left:-100%;
right: 200px;
}
#right{
width:150px;
height: 600px;
background-color: #ff6633;
margin-right: -150px;
}
#footer{
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
background: #666666;
clear:both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
</body>
</html>11、H5表单
H5表单拥有多个新的表单输入类型，提供了更好的输入控制和验证。
新元素：email、number、range、date picker
新属性：placeholder、pattern、requaired、antofoccus、multiple
新样式：新的伪类样式，比如focus、require、valid等
H5表单的具体应用包括APP的登录、注册、订单提交、员工信息录入等。
为了更好的输入控制和验证，在H5中包含的输入类型包括：
url
number
range
data pickle（date、month、week、time、datetime、datetime-local）
search
color
案例：验证邮件地址是否合法
112.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>使用email</title>
<link rel="stylesheet" type="text/css" href="css/email.css" />
</head>
<form id="frmTmp">
<fieldset>
<legend>请输入邮件地址：</legend>
<input name="txtEmail" type="email" class="inputtxt" multipletrue/>
<input name="frmSubmit" type="submit" class="inputbtn" value="提交"/>
</fieldset>
</form>
<body>
</body>
</html>email.css
@charset "utf-8";
/* CSS Document */
body{
font-size:12px;
}
.inputbtn{
boder:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px;
}
.inputtxt{
border:solid 1px #ccc;
padding:3px;
line-height:18px;
font-size:12px;
width:160px;
}
fildset{
padding:10px;
width:280px;
float:left;
}效果：
案例：自动弹出日期和时间输入框
H 5中提供了多个可供选取的日期和时间的新输入类型，具体说明如下：
date 选取日 月 年
month 选取月 和年
week 选取周和年
time 选取时间（时和分）
datetime 选取时间、日、月、年（UTC时间）
datetime-local 选取时间、日、月、年（本地时间）
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>选择日期</title>
<link rel="stylesheet" type="text/css" href="css/date.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>日期+时间类型：</legend>
<input name="txtDate_1" type="date" class="inputtxt" />
<input name="txtDate_2" type="time" class="inputtxt" />
</fieldset>
<fieldset>
<legend>月份+星期类型：</legend>
<input name="txtDate_3" type="month" class="inputtxt" />
<input name="txtDate_4" type="week" class="inputtxt" />
</fieldset>
<fieldset>
<legend>日期+时间类型：</legend>
<input name="txtDate_5" type="datetime" class="inputtxt" />
<input name="txtDate_6" type="datetime-local" class="inputtxt" />
</fieldset>
</form>
</body>
</html>效果：
案例：获取光标的位置
本案例时通过<input>元素的autofocus属性实现的，主要功能是当加载页面完成后，设置光标是否自动锁定<input>元素，即是否元素自动获取焦点。在<input>元素中，如果要将该属性的值设置为true，或直接输入autofocus属性名称，那么对应的元素将自动获取焦点。
autofocus属性是H5新增的属性，除此之外，还新增了如下所示的表单属性。
新的form属性：autocomplete、novalidate
新的input属性：autocomplete、autofocus、form、form verrides(formaction、formenctype、formmenthod、formnovalidate、formtarget)、height和widt、list、min/max/step、multiple、pattern(regexp)、placeholder、required
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>使用autofocus属性</title>
<link rel="stylesheet" type="text/css" href="css/focus.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>属性autofocus</legend>
<p>输入姓名：<input type="text" name="txtName" class="inputtxt" autofocus="true"/></p>
<p>输入密码：<input type="password" name="txtPws" class="inputtxt"</p>
<p class="p_center">
<input name="frmSubmit" type="submit" class="inputbtn" value="提交" />
<input name="frmReset" type="reset" calss="inputtxt" value="取消"/>
</p>
</fieldset>
</form>
</body>
</html>效果：
案例：在输入框显示提示信息
在H5中，placeholder属性提供了一种提示，此提示用于描述输入域所有期待的值。placeholder属性适用于<input>标签的text、search、url、telphone、email及password类型。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>使用placeholder属性</title>
<link rel="stylesheet" type="text/css" href="css/tip.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>使用placeholder属性</legend>
邮箱：
<input name="txtEmail" type="email" class="inputtxt" placeholder="请输入正确的邮件地址！"/>
<input name="frmSubmit" type="submit" class="inputbtn" value="提交"/>
</fieldset>
</form>
</body>
</html>效果：
案例：验证表单内容是否为空
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>使用input元素</title>
<link rel="stylesheet" type="text/css" href="css/notnull.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>属性required</legend>
姓名：
<input name="txtUserName" type="text" class="inputtxt" required />
<input name="frmSubmit" type="submit" class="inputbtn" value="提交" />
</fieldset>
</form>
</body>
</html>效果：
案例：在输入框中自动提示文本
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用datalist</title>
<link rel="stylesheet" type="text/css" href="css/tip.css">
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>请输入H5 APP：</legend>
<input type="text" id="txtWork" list="lstWork" class="inputtxt"/>
<datalist id="lstWork">
<option value="H5 前端工程师"></option>
<option value="H5 全栈工程师"></option>
</datalist>
</fieldset>
</form>
</body>
</html>效果：
案例：上传文件
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>上传单个文件</title>
<link rel="stylesheet" type="text/css" href="css/upload.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>上传单个文件：</legend>
<input type="file" name="fileUpload" id="fileUpload" />
<p></p>
<input type="submit" name="frmSubmit" id="inputbtn" value="上传"/>
</fieldset>
</form>
</body>
</html>效果：
案例：验证表单数据是否合法
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>使用pattern属性</title>
<link rel="stylesheet" type="text/css" href="css/check.css" />
</head>
<body>
<form id="frmTmp">
<fieldset>
<legend>使用pattern属性：</legend>
用户名：
<input name="txtAge" type="text" class="inputtxt" pattern="^[a-zA-Z]\w{5,7}$" />
<input name="frmSubmit" type="submit" class="inputbtn" value="提交"/>
<p class="p_color">
亲，必须以字母开头，包括字符或数字和下划线，长度在6~8之间！
</p>
</fieldset>
</form>
</body>
</html>效果：
13、H5 APP多媒体应用
本节需要掌握的只是点：
熟悉<video>标签属性，方法及video标签支持的3种音频格式
熟悉<audio>标签属性，方法及audio标签元素支持的3种视频格式
<source>标签及<source>标签在H5 APP多媒体应用中的作用
1）在H5中控制播放的视频
使用controls属性在网页中孔子播放的视频。controls属性的功能是设置浏览器为视频提供播放控件。设置浏览器控件应该包括如下控制功能：播放、暂停、定位、音量、全屏切换、字幕、音轨。
<!doctype html>
<html>
<head></head>
<body>
<video controls="controls" controls="controls">
<source src="video/不得姐.mp4" type="video/mp4" />
你的浏览器不支持！
</video>
</body>
</html>效果图：
2）在H5中控制播放的音频
<!doctype html>
<html>
<head></head>
<body>
<audio controls="controls">
<source src="audio/song.ogg" type="audio/ogg" />
<source src="audio/audio.mp3" type="audio/mpeg" />
你的浏览器不支持！
</video>
</body>
</html>效果：
二、JavaScript基础
JavaScript语句是向浏览器发出命令，语句的作用是告诉浏览器该做什么。例如下面的代码：
document.getElementById("h5").innerHTML="Good!"; 表示 JavaScript语句表示向id=“h5”的HTML元素输出文本“Good！”。
1、直接写入HTML输出流
<!doctype html>
<html>
<head></head>
<body>
<script type="text/javascript">
document.writeln("<h2>Hello H5</h2>")
</script>
</body>
</html>效果：
2、查找HTML元素
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS代码</title>
<link rel="stylesheet" type="text/css" href="css/js.css" />
</head>
<body>
<p id="H5">ID 类型</p>
<p>标签类型</p>
<p class="h5">calss类型</p>
<hr />
<script type="text/javascript">
document.writeln(document.getElementById("H5").innerHTML);
document.writeln(document.getElementsByTagName("p")[1].innerHTML);
document.writeln(document.getElementsByClassName("h5")[0].innerHTML);
</script>
</body>
</html>效果：
3、操作HTML元素
在JavaScript中，对于操作HTML元素，DOM结构中提供了4种方式，分别为：改变HTML元素内容；改变HTML元素样式；对HTML DOM时间做出反应；添加或删除HTML元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JS代码</title>
<link rel="stylesheet" type="text/css" />
</head>
<body>
<p id="H5">Hello World！</p>
<button onClick="alert('欢迎来到H5创新学院')">开始学习</button>
<script type="text/javascript">
var child=document.createElement("p");
child.innerHTML="Hello China!";
document.getElementById("H5").innerHTML="GooD!";
document.getElementById("H5").innerHTML="red";
document.getElementById("H5").appendChild(child);
</script>
</body>
</html>效果：
4、JavaScript函数、事件
函数通过function关键字声明，只有在被调用时才能执行，可以重复使用。例如
function funcName{
执行代码;
}
JavaScript事件，当用户在HTML元素上单击时，使用JavaScript可以触发事件。例如，当按钮被单击时触发onclick事件，可以执行一段JavaScript代码，代码如下所示：
<button onClick="alert('欢迎来到H5创新学院')">开始学习</button>
也可以调用JavaScript函数，代码如下：
<input onchange="change()" type="text" class="inputtxt" id="h5" placeholder="请输入字母">
案例：捕鱼达人
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript函数以及事件/title>
<script type="text/javascript">
var sum_score = 0;
function catchFrish(p){
var score = 0;
if(p == "鲸鱼"){
score = 10;
}else if(p == "黄金蝙蝠鱼"){
score = 20;
}else if(p == "鲨鱼"){
score = 30;
}else if(p == "剑鱼"){
score = 40;
}else if(p == "狮子鱼"){
score = 80;
}else if(p == "鲂鱼"){
score = 100;
}
if(score > 0 ){
sum_score = sum_score + score;
alert("恭喜您，捕捉到了 " + p + " ,获取的了: " + score + " 积分.\n您的总积分为：" + sum_score);
}else{
alert("很抱歉，没有捕捉到鱼。");
}
}
</script>
</head>
<body>
<p id="h5">
<input type="button" name="btnCatchFrish" id="btnCatchFrish" value="捕鱼" onClick="catchFrish(prompt('请输入您要捕捉的鱼','鲸鱼'));">
</body>
</html>效果：
5、利用H5绘制图形
H5新增一个<canvas>元素，该元素用于绘制图形。实际上<canvas>元素自身并不绘制图形，它只是相当于一张空白的画布。如果开发者需要在<canvas>上绘制图形，则必须使用JavaScript脚本进行。
H5 canvas能做什么：
1）游戏，H5基于web的图像显示方面比Flash更加立体、更加精巧，运用Canvas制作的图像能够令H5游戏在流畅度和跨平台方面发挥更大的潜力
2）图标制作：现在一些开发者使用HTML/CSS完成图标制作，但完全可以用Canvas来实现。当然， 使用SVG（可缩放矢量图形）来完成图表制作也是非常好的方法。
3）banner广告：H5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果令人惊艳。
4）模拟器：无论是从视觉效果还是核心功能方面来说，模拟器产品完全由JavaScript来实现。
5）远程计算控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。
6）字体设计：对于字体的自定义渲染将完全可以基于Web，使用H5技术来实现。
7）图形编辑器：图形编辑器将能够100%基于web实现
8）其他可以嵌入网站的内容：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。
案例：为视频播放器设置截图功能
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>打造自己的视频播放器</title>
<style>
/*canvas{display:none;}*/
#win{display:none;position:absolute;left:270px;top:270px;width:400px;height:230px;border:1px solid #888;}
</style>
</head>
<body>
<video id="video" src="video/不得姐.mp4" width="400" controls>
你的浏览器不支持video元素
</video>
<button id="btnCatchPicture" onClick="CatchPicture()" />截图</button>
<div id="win"><br>
<canvas id="canvas" width="400" height="230"></canvas>
</div>
</body>
<script type="text/javascript">
var video = document.getElementById("video");
function CatchPicture()
{
document.getElementById("win").style.display="";
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
canvas.width=video.videoWidth;
canvas.height=video.videoHeight;
ctx.drawImage(video,0,0,400,230);
document.getElementById("win").style.display="block";
}
</script>
</html>效果：
6、H5的数据存储
H5的数据存储在H4的基础上多了3个功能，分别是：本地数据存储、session存储和离线存储，本节将详细介绍H5 APP数据存储的基本知识。
1）Web Storage的两种存储方式：sessionStorage（保存会话数据）、localStorage（在客户端长期保存数据）
2）sessionStorage/localStorage对象的方法：setItem()、getItem()、removeItem()、clear()
sessionStorage.setItem(key,value)其中key表示被保存内容的键名，value表示被保存数据的值。
sessionStorage.getItem(key)
3）sessionStorage/localStorage对象的length属性
应用场景：在H5 APP中本地存储主要用于在客户端存储用户名等简单的用户信息。
案例：保存并读取临时数据
206.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>使用sessionStorage</title>
<link rel="stylesheet" type="text/css" href="css/css206.css" />
<script type="text/javascript" language="jscript" src="js206.js" ></script>
</head>
<body>
<fieldset>
<legend>对象保存与读取临时数据</legend>
<input name="txtName" type="text" class="inputtxt" onchange="txtName_change(this);" size="30px" />
<input name="btnGetValue" type="button" class="inputbtn" onclick="btnGetValue_click();" value="读取" />
<p id="pStatus"></p>
</fieldset>
</body>
</html>js206.js
// JavaScript Document
function $$(id){
return document.getElementById(id);
}
//输入文本框内容时调用的函数
function txtName_change(v){
var strName=v.value;
sessionStorage.setItem("strName",strName);
$$("pStatus").style.display="block";
$$("pStatus").innerHTML = sessionStorage.getItem("strName");
}
//点击“读取”按钮时调用的函数
function btnGetValue_click(){
$$("pStatus").style.display="block";
$$("pStatus").innerHTML=sessionStorage.getItem("strName");
}css206.css
暂无
效果：
案例：保存并读取登录用户名和密码
P74
案例：在H5中保存、清空数据记录
P77
案例：本地存储
P78
三、初识WeX5
WebX5思维导图：
四、页面组件
五、页面代码
六、页面样式
七、App开发
八、项目实战
九、仿微店APP页面介绍
