HTML5与HTML4的区别
web浏览器之间的兼容性很低
文档结构不够明确
web应用程序功能受限制
语法的改变
DOCTYPE声明
<!DOCTYPE html>
指定字符编码
<meta charset=”UTF-8”>
可以省略标记的元素
具有boolean值得属性
省略引号
新增的元素和废除的元素
新增的结构元素
section、article、aside、header、hgroup、footer、nav、figure
新增的其他元素
video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbrcanvas、command、details、datalist、datagrid、keygen、output、source、menu
新增的input元素的类型
email、url、number、range、Date Pickers
废除的元素
frameset框架
basefont、big、center、font、s、tt、u
HTML5全局属性
contenteditable 元素可编辑
designmode 页面范围可编辑
hidden 隐藏元素
spellcheck 拼写语法检查
tabindex tab键切换元素
HTML5新增的主体结构元素（语义化）
article元素
表示独立的，可以被外部引用的内容，也可以嵌套使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article元素</title>
</head>
<body>
<article>
<header>
<h1>HTML5</h1>
<p>学习HTML5</p>
</header>
<article>
<header>
作者
</header>
<p>评论</p>
<footer>
时间
</footer>
</article>
<footer>
<p>底部</p>
</footer>
</article>
<article>
<object>
<embed src="#" width="500" height="500"></embed>
</object>
</article>
</body>
</html>
section元素
表示分块
标题与内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>section元素</title>
</head>
<body>
<section>
<h3>标题</h3>
<p>内容</p>
</section>
<article>
<h3>标题</h3>
<p>内容</p>
<section>
<h3>标题</h3>
<p>内容</p>
</section>
<section>
<h3>标题</h3>
<p>内容</p>
</section>
</article>
<section>
<h2>section标题</h2>
<article>
<h3>标题</h3>
<p>内容</p>
</article>
</section>
</body>
</html>
不要将section元素作为设置样式的页面容器
如果article、aside、nav更符合，就不要使用section
没有标题，不使用section
nav元素
导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav元素</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">主页</a></li>
<li><a href="#">主页</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3</h1>
<nav>
<ul>
<li><a href="#">HTML5</a> </li>
<li><a href="#">CSS3</a> </li>
</ul>
</nav>
</header>
<section>
<h3>HTML5</h3>
<p>...</p>
</section>
<section>
<h3>CSS3</h3>
<p>...</p>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>
aside元素
附属信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>正文</p>
<aside>
<h3>名词解释</h3>
<p>语法:...</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">回复</a></li>
<li><a href="#">回复</a></li>
<li><a href="#">回复</a></li>
</ul>
</nav>
</aside>
</body>
</html>
time元素与微格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>time元素与微格式</title>
</head>
<body>
<time datetime="2016-10-16">2016-10-16</time>
<time datetime="2016-10-16T20:00">2016-10-16</time>
<time datetime="2016-10-16T20:00Z">2016-10-16</time>
<time datetime="2016-10-16T20:00+09:00">2016-10-16</time>
</body>
</html>
pubdate属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pubdate属性</title>
</head>
<body>
<article>
<header>
<h1>XXX</h1>
<p>
日期
<time datetime="2016-10-16" pubdate>2016-10-16</time>
</p>
<p>
其他时间
<time datetime="2016-05-16">2016-05-16</time>
</p>
</header>
</article>
</body>
</html>
HTML5的非主体结构元素
header元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>web前端</h1>
<a href="#">web前端技术</a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</header>
</body>
</html>
footer元素
底部结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer元素</title>
</head>
<body>
<footer>
<ul>
<li>
<a href="#">底部标签</a>
</li>
<li>
<a href="#">底部标签</a>
</li>
<li>
<a href="#">底部标签</a>
</li>
</ul>
</footer>
<article>
<footer>文章底部</footer>
</article>
</body>
</html>
hgroup元素
标题分组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hgroup元素</title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>标题</h1>
<h2>子标题</h2>
</hgroup>
<p><time datetime="2016-01-01">2016-01-01</time></p>
</header>
<div>内容主体</div>
<footer>
这是底部
</footer>
</article>
</body>
</html>
address元素
联系信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>address元素</title>
</head>
<body>
<address>
<a href="#">why</a>
<a href="#">why</a>
</address>
<footer>
<div>
<address><a href="#">联系人</a></address>
<time datetime="2016-05-07">2016-05-07</time>
</div>
</footer>
</body>
</html>
网页编排规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页编排规则</title>
</head>
<body>
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>正文</p>
<section>
<div>
<article>
<h1>评论</h1>
<p>正文</p>
</article>
</div>
</section>
</article>
<footer><small>版权信息</small></footer>
</body>
</html>
HTML表单新增元素与属性
form属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form属性</title>
</head>
<body>
<form action="" id="myform">
<input type="text">
</form>
<textarea name="" id="" cols="30" rows="10" form="myform"></textarea>
</body>
</html>
formaction属性
指定提交按钮提交到某个action
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formaction属性</title>
</head>
<body>
<form action="">
<input type="submit" value="提交" formaction="">
<input type="submit" value="提交" formaction="">
<input type="submit" value="提交" formaction="">
</form>
</body>
</html>
formmethod属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formmethod属性</title>
</head>
<body>
<form action="">
<input type="submit" formmethod="get">
<input type="submit" formmethod="post">
</form>
</body>
</html>
formenctype属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formenctype属性</title>
</head>
<body>
<form action="">
<input type="text" formenctype="text/plain">
<input type="text" formenctype="multipart/form-data">
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</body>
</html>
formtarget属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formtarget属性</title>
</head>
<body>
<form action="">
<input type="submit" formtarget="_blank">
<input type="submit" formtarget="_self">
<input type="submit" formtarget="_parent">
<input type="submit" formtarget="_top">
<input type="submit" formtarget="frameName">
</form>
</body>
</html>
autofocus属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autofocus属性</title>
</head>
<body>
<form action="">
<input type="text">
<input type="text" autofocus>
</form>
</body>
</html>
required属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>required属性</title>
</head>
<body>
<form action="">
<input type="text" required>
<input type="submit" value="提交">
</form>
</body>
</html>
labels属性
表单验证提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>labels属性</title>
</head>
<body>
<script type="text/javascript">
function Validate() {
var input = document.getElementById("text_name");
var btn = document.getElementById("btn");
var form = document.getElementById("myform")
if(input.value.trim() == ""){
var label = document.createElement("label");
label.setAttribute("for","text_name");
form.insertBefore(label,btn);
input.labels[1].innerHTML = "请输入";
input.labels[1].setAttribute("style","color:red;font-size:10px;")
}
}
</script>
<form id="myform" action="">
<label id="mylabel" for="text_name"></label>
<input type="text" id="text_name">
<input type="button" id="btn" value="验证" οnclick="Validate()">
</form>
</body>
</html>
control属性
通过label的control属性获取其嵌套的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>control属性</title>
<script>
function setDefaultValue(){
var label = document.getElementById("mylabel");
var textbox = label.control;
console.log(textbox);
textbox.value = "100001";
}
</script>
</head>
<body>
<form action="">
<label id="mylabel">
邮编：
<input type="text" id="txt_zip" maxlength="6">
<small>请输入六位数字</small>
</label>
<input type="button" value="设置默认值" οnclick="setDefaultValue()">
</form>
</body>
</html>
placeholder属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeholder属性</title>
</head>
<body>
<input type="text" placeholder="请输入">
</body>
</html>
list属性
可编辑下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list属性</title>
</head>
<body>
<form action="">
<input type="text" name="name" list="nameList">
<dataList id="nameList" style="display: none">
<option value="张三">张三</option>
<option value="李四">李四</option>
<option value="王五">王五</option>
<option value="赵六">赵六</option>
</dataList>
</form>
</body>
</html>
AutoComplete属性
提交表单后，再次填写时会自动提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>autoComplete属性</title>
</head>
<body>
<input type="text" name="name" autocomplete="on">
</body>
</html>
indeterminate属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>indeterminate属性</title>
</head>
<body>
<input type="checkbox" indeterminate id="box">选项
<script>
var box = document.getElementById("box");
box.indeterminate = true;
</script>
</body>
</html>
Image提交按钮的width和height属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>image按钮的width和height属性</title>
</head>
<body>
<input type="image" width="50px" height="auto" src="image/1.jpg" alt="美女">
</body>
</html>
pattern属性
正则验证文本框内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pattern属性</title>
</head>
<body>
<form action="#">
<input type="text" pattern="[A-Z]{3}" name="test">
<br/>
<input type="submit" value="提交">
</form>
</body>
</html>
selectiondirection属性
获取用户对文本框选中的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selectiondirection属性</title>
</head>
<body>
<script>
function printSelectionDirection(){
var text = document.forms[0]['text'];
console.log(text.selectionDirection);
}
</script>
<form action="">
<input type="text" name="text">
<input type="button" value="按钮" οnclick="printSelectionDirection();">
</form>
</body>
</html>
HTML5改进的input元素
Input类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5改进的input元素</title>
</head>
<body>
<form action="">
url类型
<br/>
<input type="url" value="http://www.baidu.com">
<br/>
email类型
<br/>
<input type="email" value="wyh3265@vip.qq.com">
<br/>
date类型
<br/>
<input type="date" value="2016-05-30">
<br/>
time类型
<br/>
<input type="time" value="10:00">
<br/>
datetime类型
<br/>
<input type="datetime">
<br/>
datetime-local类型
<br/>
<input type="datetime-local">
<br/>
month类型
<br/>
<input type="month">
<br/>
week类型
<br/>
<input type="week">
<br/>
number类型
<br/>
<input type="number" min="0" max="100" step="10">
<br/>
<input type="submit" value="提交">
<br/>
range类型
<br/>
<input type="range" value="50" min="0" max="100" step="20" οnchange="document.getElementById('outputRange').value=this.value">
<output id="outputRange">50</output>
<br/>
search类型
<br/>
<input type="search">
<br/>
tel类型
<br/>
<input type="tel">
<br/>
color类型
<br/>
<input type="color" οnchange="document.body.style.backgroundColor=this.value;document.getElementById('currentColorValue').innerHTML=this.value;">
<span id="currentColorValue">#000000</span>
<br/>
</form>
</body>
</html>
表单验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
</head>
<body>
<script>
function validate(){
var email = document.getElementById("email");
if(email.value == ""){
alert("请输入email");
return false;
}else if(!email.checkValidity()){
alert("请输入正确的email格式");
return false;
}
return true;
}
</script>
<form action="#" novalidate="true" οnsubmit="return validate();">
<label for="email">
<input type="email" id="email">
</label>
<input type="submit" value="提交">
</form>
</body>
</html>
figure、figcaption、details、summary、mark元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure元素</title>
</head>
<body>
<figure>
<img src="image/1.jpg" alt="图片" width="300px">
<img src="image/2.jpg" alt="图片" width="300px">
<img src="image/3.jpg" alt="图片" width="300px">
<figcaption>美女</figcaption>
</figure>
<script>
function ShowDetail(detail) {
var p = document.getElementById("p");
if(detail.open){
p.style.visibility = "hidden";
}else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" οnclick="ShowDetail(this)">
<summary>概述</summary>
<p id="p" style="visibility: hidden;">详细信息</p>
</details>
<p><mark>mark</mark>元素的使用</p>
</body>
</html>
ol、dl、cite、small元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ol、dl、cite、small元素</title>
</head>
<body>
<p>ol列表</p>
<ol start="5" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<p>dl列表</p>
<dl>
<dt>hello</dt>
<dd>你好</dd>
<dt>world</dt>
<dd>世界</dd>
</dl>
<p>cite元素</p>
<h3><cite>最好的</cite>书籍</h3>
<p>small元素</p>
<h3><small>最好的</small>书籍</h3>
</body>
</html>
progress、meter元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>progress、meter元素</title>
</head>
<body>
<script>
function ShowProgress() {
// for(var i=0;i<=100;i++){
// setTimeout(updateprogress(i),100);
// }
var i = 0;
function progress_thread() {
if (i <= 100) {
updateprogress(i++);
} else {
clearInterval(timer);
}
}
var timer = setInterval(progress_thread, 100);
}
function updateprogress(value) {
var progress = document.getElementById("p");
p.value = value;
document.getElementById("myspan").innerHTML = value;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比
<progress id="p" max="100" style="background-color: burlywood;"><span id="myspan">0</span>%</progress>
</p>
<input type="button" value="点击" οnclick="ShowProgress();">
</section>
<p>meter元素</p>
<meter value="40" min="0" max="100" low="10" high="80" optimum="50"></meter>
</body>
</html>
Range对象
一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象</title>
</head>
<body>
<script>
function rangeTest() {
var html;
var showRangeDiv = document.getElementById("showRange");
var selection = document.getSelection();
if(selection.rangeCount > 0){
html = "您选取了->" + selection.rangeCount + "内容<br/>";
for(var i=0;i<selection.rangeCount;i++){
var range = selection.getRangeAt(i);
html += "第" + (i+1) + "段内容为：" + range + "<br/>";
}
showRangeDiv.innerHTML = html;
}
}
</script>
<p>Selection对象与Range对象的使用</p>
<input type="button" value="点击" οnclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>
Range对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function deleteChars() {
var div = document.getElementById("mydiv");
var textNode = div.firstChild;
var rangeObj = document.createRange();
rangeObj.setStart(textNode,1);
rangeObj.setEnd(textNode,4);
rangeObj.deleteContents();
}
</script>
<div id="mydiv" style="color: bisque">
这段文字是用来删除的
</div>
<button οnclick="deleteChars()">删除文字</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function deleteFirstRow() {
var table = document.getElementById("mytable");
if(table.rows.length > 0){
var firstRow = table.rows[0];
var rangeObj = document.createRange();
rangeObj.setStartBefore(firstRow);
rangeObj.setEndAfter(firstRow);
rangeObj.deleteContents();
}
}
</script>
<table id="mytable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<button οnclick="deleteFirstRow()">删除表格第一行</button>
</body>
</html>
deleteContents，删除Range区域的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function deleteRangeContent(isElement) {
var div = document.getElementById("mydiv");
var rangeObj = document.createRange();
if(isElement){
rangeObj.selectNodeContents(div);
}else{
rangeObj.selectNode(div);
}
rangeObj.deleteContents();
}
</script>
<div id="mydiv" style="background-color: burlywood;width: 500px;height: 300px;">
内容
</div>
<button οnclick="deleteRangeContent(true);">删除内容</button>
<button οnclick="deleteRangeContent(false);">删除元素</button>
</body>
</html>
cloneRange，拷贝Range区域对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function copyRange() {
var rangeObj = document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var cloneRange = rangeObj.cloneRange();
alert(cloneRange.toString());
}
</script>
<p id="p">四脚发的设计师地方都是</p>
<button οnclick="copyRange()">复制内容</button>
</body>
</html>
cloneContent，拷贝Rnage区域的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function cloneContent() {
var div = document.getElementById("mydiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(div);
var content = rangeObj.cloneContents();
div.appendChild(content);
}
</script>
<div id="mydiv">
一个div
<br/>
</div>
<button οnclick="cloneContent();">克隆</button>
<br/>
</body>
</html>
extractContents，拷贝Range区域的内容，并移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function moveContent() {
var srcDiv = document.getElementById("srcDiv");
var destDiv = document.getElementById("destDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv);
//拷贝内容，并移除
var content = rangeObj.extractContents();
destDiv.appendChild(content);
}
</script>
<div id="srcDiv" style="background-color: burlywood;width: 100px;height: 60px;">
内容
</div>
<div id="destDiv" style="background-color: aquamarine;width: 100px;height: 60px;"></div>
<button οnclick="moveContent();">移动内容</button>
<br/>
</body>
</html>
insertNode，在Range区域中动态插入元素节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的方法</title>
</head>
<body>
<script>
function moveBtn() {
var btn = document.getElementById("mybtn");
var selection = document.getSelection();
if(selection.rangeCount > 0){
var range = selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div id="srcDiv" style="background-color: burlywood;width: 100px;height: 60px;" οnmοuseup="moveBtn();">
内容
</div>
<button id="mybtn">移动按钮</button>
<br/>
</body>
</html>
compareBoundaryPoints，比较range区域的位置关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Range对象的compareBoundaryPoints方法</title>
</head>
<body>
<script>
function compare() {
var content = document.getElementById("content");
var contentRange = document.createRange();
contentRange.selectNodeContents(content);
var selection = document.getSelection();
if (selection.rangeCount > 0) {
var selRange = selection.getRangeAt(0);
if (selRange.compareBoundaryPoints(Range.START_TO_END, contentRange) > 0) {
alert("选中区域在内容之后");
} else {
alert("选中区域在内容之前");
}
}
}
;
</script>
<p>p元素的<a id="content">内容</a></p>
<input type="button" value="比较位置" οnclick="compare();">
</body>
</html>
HTML5音频播放
Audio（音频）
HTML5提供了播放音频文件的标准
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio元素</title>
</head>
<body>
<script>
function play() {
var player = document.getElementById("mp3_player");
if(player.paused){
player.play();
}else{
player.pause();
}
}
</script>
<audio id="mp3_player" src="mp3/Hillsong Young And Free - Wake.mp3">浏览器不支持audio</audio>
<input type="button" value="播放/暂停" οnclick="play()">
</body>
</html>
controls（控制器）
controls属性提供添加播放、暂停和音量控件
video（视频）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video元素</title>
</head>
<body>
<script>
function play(){
var player = document.getElementById("player");
if(player.paused){
player.play();
}else{
player.pause();
}
}
function larger(){
var player = document.getElementById("player");
player.width = "1500";
player.height = "1000";
}
function smaller(){
var player = document.getElementById("player");
player.width = "500";
player.height = "400";
}
</script>
<video id="player">
<source src="video/1.mkv">
浏览器不支持video
</video>
<input type="button" value="播放/暂停" οnclick="play();">
<input type="button" value="放大" οnclick="larger();">
<input type="button" value="缩小" οnclick="smaller();">
</body>
</html>
编码与解码工具
FFmpeg
HTML5拖放
ondragstart
ondragenter 拖拽进入监听
ondragover
ondrop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5拖放</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
float: left;
}
#box1 {
background-color: aqua;
}
#box2 {
background-color: aquamarine;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById("box1");
var img1 = document.getElementById("img1");
//拖拽监听
// box1.ondragenter = function (e) {
// console.log(e);
// }
//设置拖放数据
img1.ondragstart = function (e) {
e.dataTransfer.setData("imgId", "img1");
}
//阻止默认拖拽监听事件
box1.ondragover = function (e) {
e.preventDefault();
}
box2.ondragover = function (e) {
e.preventDefault();
}
//监听拖拽后事件，即松开鼠标
box1.ondrop = dropImg;
box2.ondrop = dropImg;
}
function dropImg(e) {
e.preventDefault();
//获取拖放数据，并追加
var img = document.getElementById(e.dataTransfer.getData("imgId"));
this.appendChild(img);
}
</script>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<img id="img1" src="image/2.jpg" alt="图片" width="150px" height="auto">
</body>
</html>
拖拽本地资源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5拖放本地资源</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
background-color: burlywood;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var container = document.getElementById("container");
container.ondragover = function (e) {
e.preventDefault();
}
container.ondrop = function (e) {
e.preventDefault();
console.log(e.dataTransfer.files);
var file = e.dataTransfer.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
container.innerHTML = "<img src='" + fileReader.result + "'>"
}
fileReader.readAsDataURL(file);
}
}
</script>
<div id="container">
</div>
</body>
</html>
HTML5画布标签
创建canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<style type="text/css">
.canvas1{
background-color: aquamarine;
}
</style>
</head>
<body>
<canvas class="canvas1" width="200px" height="200px"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<style type="text/css">
.canvas1{
background-color: aquamarine;
}
</style>
<script type="text/javascript">
window.onload = function () {
createCanvas();
}
function createCanvas() {
document.body.innerHTML = "<canvas id='newcanvas' width='200px' height='200px' class='canvas1'></canvas>";
}
</script>
</head>
<body>
<canvas class="canvas1" width="200px" height="200px"></canvas>
</body>
</html>
canvas绘制图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
var mycanvas,context;
window.onload = function () {
createCanvas();
drawRect();
}
function createCanvas() {
document.body.innerHTML = "<canvas id='mycanvas' width='200px' height='200px'></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
}
function drawRect() {
context.fillStyle = "#CCC";
//context.rotate(45); 旋转
// context.translate(20,50); 移动
context.scale(2,1); //缩放
context.fillRect(0,0,200,200);
}
</script>
</head>
<body>
</body>
</html>
canvas绘制图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
var mycanvas,context;
window.onload = function () {
createCanvas();
drawImg();
}
function createCanvas() {
document.body.innerHTML = "<canvas id='mycanvas' width='800px' height='800px'></canvas>";
mycanvas = document.getElementById("mycanvas");
context = mycanvas.getContext("2d");
}
function drawImg() {
var img = new Image();
img.onload = function () {
context.drawImage(img,0,0)
}
img.src = "image/3.jpg";
}
</script>
</head>
<body>
</body>
</html>
HTML5使用路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
context.fillStyle = "#FF4";
context.fillRect(0,0,600,600);
context.fillStyle = "rgba(0,255,0,0.3)";
for(var i=0;i<10;i++){
context.beginPath();
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
moveTo与lineTo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,600,600);
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
context.strokeStyle = "rgb(0,0,100)";
var deg = Math.PI / 15 * 11;
for(var i=0;i<30;i++){
x = Math.sin(i * deg);
y = Math.cos(i * deg);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
绘制贝塞尔曲线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,600,600);
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = "rgb(100,255,100)";
context.strokeStyle = "rgb(0,0,100)";
var deg = Math.PI / 15 * 11;
context.moveTo(dx,dy);
for(var i=0;i<30;i++){
x = Math.sin(i * deg);
y = Math.cos(i * deg);
context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
}
context.closePath();
context.fill();
context.stroke();
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
径向渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
var g1 = context.createRadialGradient(400,100,100,400,0,400);
g1.addColorStop(0.1,"rgb(255,255,0)");
g1.addColorStop(0.3,"rgb(255,0,255)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle = g1;
context.fillRect(0,0,600,600);
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
绘制渐变图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
var g1 = context.createLinearGradient(0,0,0,300);
g1.addColorStop(0,"rgb(255,255,0)");
g1.addColorStop(1,"rgb(0,255,255)");
context.fillStyle = g1;
context.fillRect(0,0,600,600);
var g2 = context.createLinearGradient(0,0,300,0);
g2.addColorStop(0,"rgba(0,0,255,0.5)");
g2.addColorStop(1,"rgba(255,0,0,0.5)");
for(var i=0;i<10;i++){
context.beginPath();
context.fillStyle = g2;
context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
绘制变形图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var mycanvas = document.getElementById(id);
if(mycanvas){
var context = mycanvas.getContext("2d");
context.translate(150,50);
context.fillStyle = "rgba(255,0,0,0.3)";
for(var i=0;i<50;i++){
context.translate(25,25);
context.scale(0.9,0.9);
context.rotate(Math.PI / 10);
context.fillRect(0,0,150,100);
}
}
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
绘制图形阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,255,0)";
context.fillRect(0,0,600,600);
context.translate(0,50);
context.shadowOffsetX = -15;
context.shadowOffsetY = -15;
context.shadowColor = "rgba(255,0,0,0.5)";
context.shadowBlur = 10;
for(var i=0;i<3;i++){
context.translate(100,100);
drawStar(context);
context.fill();
}
}
function drawStar(context) {
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
context.beginPath();
context.fillStyle = "rgba(255,0,0,0.3)";
var deg = Math.PI / 5 * 4;
for(var i=0;i<5;i++){
var x = Math.sin(i*deg);
var y = Math.cos(i*deg);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
图形组合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5画布</title>
<script type="text/javascript">
function draw(id) {
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
var operations = new Array("source-atop","source-in","source-in","source-over","destination-atop","destination-in","destination-out","destination-over","lighter","copy","xor");
context.fillStyle = "rgb(0,255,0)";
context.fillRect(0,0,100,100);
context.globalCompositeOperation = operations[4];
context.beginPath();
context.fillStyle = "green";
context.arc(60,60,15,Math.PI*2,false);
context.closePath();
context.fill();
}
</script>
</head>
<body οnlοad="draw('mycanvas')">
<canvas id="mycanvas" width="600px" height="600px"></canvas>
</body>
</html>
SVG
绘制SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5的SVG</title>
</head>
<body>
<svg viewBox="0 0 100 100" version="1.0" width="200" height="200">
<circle cx="60" cy="60" r="30"></circle>
</svg>
</body>
</html>
引入外部SVG文件
通过iframe引入
Web存储
localStorage 永久保存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5的本地存储</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var mytextarea = document.getElementById("mytextarea");
var saveBtn = document.getElementById("saveBtn");
if(localStorage.text){
mytextarea.value = localStorage.text;
}
saveBtn.onclick = function () {
console.log(mytextarea.value);
localStorage.text = mytextarea.value;
}
}
</script>
<textarea name="mytextarea" id="mytextarea" cols="30" rows="10"></textarea>
<br/>
<input type="button" value="保存" id="saveBtn">
</body>
</html>
sessionStorage session生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5的本地存储</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var mytextarea = document.getElementById("mytextarea");
var saveBtn = document.getElementById("saveBtn");
if(sessionStorage.text){
mytextarea.value = sessionStorage.text;
}
saveBtn.onclick = function () {
console.log(mytextarea.value);
sessionStorage.text = mytextarea.value;
}
}
</script>
<textarea name="mytextarea" id="mytextarea" cols="30" rows="10"></textarea>
<br/>
<input type="button" value="保存" id="saveBtn">
</body>
</html>
应用缓存与Web Workers
web worker是运行在后台的js脚本
postMessage()
terminate()
事件onmessage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Workers</title>
<script src="js/webworkers.js"></script>
</head>
<body>
<div id="mydiv"></div>
<input type="button" value="开始" id="start">
<input type="button" value="停止" id="stop">
</body>
</html>
/**
* Created by Why on 2016/10/23.
*/
var mydiv;
var worker;
window.onload = function () {
mydiv = document.getElementById("mydiv");
mydiv.innerHTML = new Date();
document.getElementById("start").onclick = function () {
if(!worker || null == worker){
worker = new Worker("js/count.js");
worker.onmessage = function (e) {
console.log(e);
mydiv.innerHTML = e.data;
}
}
}
document.getElementById("stop").onclick = function () {
if(worker){
worker.terminate();
worker = null;
}
}
}
/**
* Created by Why on 2016/10/23.
*/
function returnTime(){
postMessage(new Date());
setTimeout(returnTime,1000);
}
returnTime();
应用缓存
离线浏览
加载更快
减少服务器负载
实现应用程序缓存
html元素增加属性 manifest
HTML5服务器推送事件
传统服务器推送数据技术 WebSocket
HTTP协议，简易轮询
头信息
text/event-stream
var es = new EventSource(url); //事件源对象
onopen //开启连接事件
onerror //发生错误事件
onmessage //消息推送事件
响应式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<link rel="stylesheet" href="css/style1.css" media="only screen and (max-width:640px)">
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
</body>
</html>
*{background-color: aquamarine;}
@media screen and (min-width: 640px) {
*{
background-color: burlywood;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>响应式布局</title>
<link rel="stylesheet" href="css/style1.css">
</head>
<body>
<div class="header"></div>
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.header {
height: 50px;
background-color: antiquewhite;
}
.left {
background-color: aquamarine;
}
.right {
background-color: coral;
}
.main {
background-color: chocolate;
}
.footer {
height: 50px;
background-color: darkorange;
}
.header, .container, .footer {
margin: 10px auto;
}
@media screen and (min-width: 960px) {
.header,
.container,
.footer {
width: 960px;
}
.left, .main, .right {
float: left;
}
.left, .right {
width: 150px;
}
.main {
width: 620px;
margin-left: 20px;
margin-right: 20px;
}
.container,.left, .main, .right {
height: 500px;
}
}
@media screen and (min-width: 600px) and (max-width: 960px) {
.header,
.container,
.footer {
width: 600px;
}
.left, .main {
float: left;
}
.right{
display: none;
}
.left {
width: 150px;
}
.main {
width: 430px;
margin-left: 20px;
}
.container,.left, .main, .right {
height: 500px;
}
}
@media screen and (max-width: 600px){
.header,
.container,
.footer {
width: 300px;
}
.right{
display: none;
}
.left {
height: 100px;
}
.main{
height: 400px;
margin-top: 10px;
}
}
HTML5构建应用布局和页面
HTML5在移动开发中的准则
尽量使用单页面开发（SPA）
慎重选择前端UI框架
动画、特效使用准则（60fps）
长度单位使用rem
浏览器消耗最小的CSS属性
-transform:translate
-transform:scale
-transform:rotate
-opacity
csstriggers.com
页面基本布局构成
流式布局-适合内容型应用
绝对定位布局-适合交互类应用
Flexbox布局-适合局部使用
CSS Grid布局
IE6支持HTML5、CSS3
引入谷歌html5.js
添加behavior:url(“ie-css3.htc”);属性
