HTML5&CSS3——让你的页面美如画（2）
二、HTML4与HTML5
1.doctype
在HTML非常年轻的时候（1991、2年左右），doctype是用来作为一组规则的链接，HTML页面必须遵循这些规则才能被认为是好的HTML，这些规则会用来检测网页是不是存在问题。 然而，这些年没有人真正的关心doctype，他们只是一个历史产物必须包含在页面中。
严格的文档类型：
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
宽松的文档类型：
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/HTML4/loose.dtd">
HTML5文档类型：
<!DOCTYPE HTML>
2.HTML4与HTML5的区分
（1）结构
doctype声明简化为<!DOCTYPE HTML>
meta的声明简化为<meta charset="UTF-8">
（2）兼容性
HTML4兼容性更好一些（在众多浏览器中有统一的显示）
HTML5 主要用于webapp的开发（目前在不同浏览器中显示不统一或不支持显示）
（手机打开网页android默认浏览器为chrome(google)，ios默认浏览器为safari）
（3）新增了很多新特性
语义化标签（
HTML5新增的语义化标签（样式与div类似）
header <div class="header"></div>
nav <div class="nav"></div>
footer <div class="footer"></div>
address
article
section
aside
）
新增了表单的元素和属性（
HTML5新增的表单元素
progress 进度条
output 动作结果
meter 范围数量值
datalist 其他控件可用值
HTML5新增的表单属性（input的type）
date 日期控件（年，月，日，不包含时间）
datetime-local 日期时间控件
time 时间控件
month 日期插件（年，月）
week 日期插件（年，周）
（只能被chrome,opera支持）
number 数字控件（只能输入数字）
range 范围控件（通过控制条可以调整取值）
search 搜索控件，
tel 电话控件
url 地址控件
color 颜色控件
email email控件
HTML5新增的表单属性
form
在H5中，可以将表单内的从属元素书写在页面上的任何地方，然后为该元素指定一个form属性，属性值为该表单的id。
formaction
一般用于提交按钮和图片按钮上，用于指定处理表单提交的后台程序，可以重写form中的action属性。
formenctype
一般用于提交按钮和图片按钮上，用于指定处理表单的内容类型。
formmethod
一般用于提交按钮和图片按钮上，用于指定表单的提交方式。
formnovalidate
一般用于提交按钮和图片按钮上，布尔类型，提交时表单不被验证。
formtarget
一般用于提交按钮和图片按钮上，用于指定表单提交后在哪里显示响应页面。
autofocus
当页面加载完毕的时候，默认聚焦。在页面中，只能有一个表单元素具有该属性，值为boolean类型，
list
取值为<datalist>元素的id，用于显示提示内容。
max/min
表单组件能够接受到的最大值/最小值。
placeholder
对用户的输入进行提示，常用于搜索框，不要出现回车换行。
pattern
取值为正则表达式，用于表单验证。
required
表示在表单提交之前必须表单组件中必须输入值。
）
3.HTML5对多媒体播放的支持
在HTML5问世之前，要在网络上展示视频，音频，动画，除了使用第三方自主开发的播放器之外，使用得最多的工具就是Flash，但是需要在浏览器上安装各种插件，并且有时速度很慢。HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签就是<video>和<audio>。
嵌入视/音频（视频需要使用流媒体文件格式（如mp4、webm、ogg等））
<video src="" id="" width="640" height="360">视频播放器无法使用</video>
<audio src="" id="">音频播放器无法使用</audio>
标签之间的元素表示后备内容，在浏览器不支持这两种媒体元素的情况下显示。
source可以指定不同媒体来源
并不是所有的浏览器都支持所有媒体格式，可以指定多个不同的媒体来源。由于不同的浏览器支持不同的编解码器，一般要指定多种格式的媒体来源，提高播放成功率。
src：指播放媒体的URL地址
type：媒体类型，值为媒体类型/格式
<video id="video_1"> <source src="example.mp4" type="video/mp4"/> <source src="example.webm" type="video/webm"/> <source src="example.ogg" type="video/ogg"/> 视频播放器无法使用 </video> <audio id="audio_1"> <source src="./1.mp3" type="audio/mp3"/> <source src="./1.wma" type="audio/wma"/> <source src="./1.flac" type="audio/flac"/> 音频播放器无法使用 </audio>
当需要自定义播放器控制使可利用它们的这些属性：
src：播放文件的路径
width,height：播放控件的宽度和高度
controls：默认播放控制条是否显示
autoplay：自动播放
preload：预加载（缓冲）
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
poster：视频预览图（视频不用或者不可用时）
loop：循环播放
currentTime：当前播放位置 00:00/30:00
duration：文件总的播放
palyed：是否播放中
paused：是否暂停
ended：是否播放完毕
defaultPlaybackRate：播放速度
playbackRate：设置播放速度 1
volume：音量 0-1
muted：静音 ture/false
方法：
play()：播放
pause()：暂停
附自定义视频控制条例子的代码（需相应控件图片）:
<style> #video{ width: 500px; } .control_box{ width: 500px; height: 35px; background: #ccc; } .btn_wrap{ width: 570px; } .play_btn,.pause_btn,.fullscreen_btn{ width: 40px; height: 35px; float: left; background: url('./image/sprite.png') 0 0 no-repeat; } .pause_btn{ background-position: -40px 0; } .fullscreen_btn{ margin-left: 7px; background-position: -150px 0; } .progress_box{ width: 280px; height: 10px; background: gray; border-radius: 5px; float: left; margin-top: 13px; } .current_bar{ position: relative; border-radius: 5px; height: 10px; width: 0px; background: url('./image/play-bar.png') left repeat-x; } .bar_btn{ width: 16px; height: 17px; position: absolute; background: url('./image/handle.png'); top: -3px; right: -7px; } .time_box{ height: 35px; line-height: 35px; margin-left: 3px; float: left; font-size: 11px; } .vol_btn{ width: 11px; height: 10px; background: url('./image/volume.png'); position: absolute; top: 0px; right: -2px; } .volume_box{ width: 60px; height: 10px; background: gray; border-radius: 5px; float: left; margin-top: 13px; margin-left: 4px; } .volume_bar{ position: relative; width: 50%; height: 10px; border-radius: 5px; background: green; } </style> <div class="video_box"> <video id="video"> <source src="./video/example.webm"> <source src="./video/example.mp4"> </video> </div> <div class="control_box"> <div class="btn_wrap"> <i class="play_btn"></i> <i class="pause_btn" style="display: none"></i> <div class="progress_box"> <div class="current_bar"> <i class="bar_btn"></i> </div> </div> <div class="time_box"> <span class="cur_time">00:00</span> <span>/</span> <span class="t_time">06:20</span> </div> <div class="volume_box"> <div class="volume_bar"> <i class="vol_btn"></i> </div> </div> <div class="fullscreen_box"> <i class="fullscreen_btn"></i> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> var video = $('#video'); video.bind('canplay',function(){ var total_time = video[0].duration; $('.t_time').text(toString(total_time)); $('.play_btn').click(function(){ video[0].play(); if (!video[0].paused) { $('.play_btn').css('display','none'); $('.pause_btn').css('display','block'); } }) $('.pause_btn').click(function(){ video[0].pause(); if (video[0].paused) { $('.play_btn').css('display','block'); $('.pause_btn').css('display','none'); } }) video.bind('timeupdate',function(){ var cur_time = video[0].currentTime; var scale = cur_time/video[0].duration; var cur_W = scale * 100 + '%'; $('.current_bar').css('width',cur_W); $('.cur_time').text(toString(cur_time)); }) $('.progress_box').click(function(event){ var offsetX = event.offsetX; var total_W = $('.progress_box').width(); var scale = offsetX/total_W; var cur_W = scale * 100 + '%'; $('.current_bar').css('width',cur_W); var cur_time = scale * video[0].duration; video[0].currentTime = cur_time; }) $('.volume_box').click(function(event){ var offsetX = event.offsetX; var total_W = $('.volume_box').width(); var scale = offsetX/total_W; var cur_W = scale * 100 + '%'; $('.volume_bar').css('width',cur_W); video[0].volume = scale; }) video.bind('ended',function(){ video[0].currentTime = 0; video[0].pause(); $('.play_btn').css('display','block'); $('.pause_btn').css('display','none'); }) $('.fullscreen_box').click(function(){ if(video[0].webkitRequestFullscreen){ video[0].webkitRequestFullscreen(); }else if(video[0].mozRequestFullScreen){ video[0].mozRequestFullScreen(); }else if(video[0].msRequestFullscreen){ video[0].msRequestFullscreen(); } }) }) function toString(time){ var min = Math.floor(time/60); var sec = Math.floor(time%60); min = min>9?min:'0'+min; sec = sec>9?sec:'0'+sec; return min+':'+sec; } </script>
<video>元素支持MP4、WebM和Ogg三种视频格式，当前浏览器对视频格式的支持如下：
浏览器 MP4 WebM Ogg
Internet Explorer YES NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES
4.HTML5的canvas画布元素
canvas画布元素，有width和height属性。
canvas的基础使用：
// 获取canvas元素
var Mycanvas = document.getElementById('Mycanvas');
// 获取canvas元素操作上下文getContext对象
var c = Mycanvas.getContext("2d");
开始绘制：beginPath();
结束绘制：closePath();// 闭合路径
清除画布：clearRect(x,y,width,height);
（1）绘制线段
涉及属性：
strokeStyle：线条颜色
lineWidth：线条粗细
设计方法：
moveTo(x,y);// 起始位置
lineTo(x,y);// 途经位置
stroke();// 绘制动作
（2）绘制矩形
涉及属性：
fillStyle
涉及方法
fillRect(x,y,width,height);// 实心矩形
strokeRect(x,y,width,height);// 空心矩形
fill();// 填充
（3）绘制圆形
涉及属性：
arc(x,y,r,beginAngle,endAngle,anticlockwise);
圆心、半径、弧度、顺逆时针
涉及方法：
弧度取值：0*Math.PI/180&180*Math.PI/180
stroke();// 空心圆
fill();// 实心圆
（4）绘制文字
涉及属性：
font("style(italic/bold),size,type");
粗细、尺寸、字体样式类型
涉及方法：
strokeText(str,x,y);// 空心字
fillText(str,x,y);// 实心字
（5）图像翻转
设计方法：
save();// 产生一块新相同的画布，漂浮在原来的画布上方
translate(x,y);// 设置旋转点
rotate(angle);// 设置弧度
restore();// 将旋转后的图形映入画布
（6）绘制渐变图形
涉及方法：
var color = c.createLinearGradient(0,0,0,500);// 创建渐变
color.addColorStop(0,"blue");
color.addColorStop(1,"yellow");// 追加颜色
c.fillStyle=color;
c.fillRect(0,0,500,500);
（7）canvas存储
设计属性：
window.location=Mycanvas.toDataURL("image/png").replace("image/png","image/octet-stream");
附简单画布例子的代码：
<style> *{ margin-left: 0; } #mycanvas{ border: 1px solid #999; } .wrap{ width: 800px; margin: 0 auto; } </style> <div class="wrap"> <canvas id="mycanvas" width="800px" height="500px"></canvas> <button class="cancle">撤销</button> <button class="clear">清屏</button> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ var image = []; var canvas = $('#mycanvas')[0]; var cxt = canvas.getContext('2d'); $('#mycanvas').bind('mousedown',function(event){ var x1 = event.clientX - canvas.offsetLeft; var y1 = event.clientY - canvas.offsetTop; cxt.beginPath(); cxt.moveTo(x1,y1); var imageData = cxt.getImageData(0,0,canvas.width,canvas.height); image.push(imageData); $('#mycanvas').bind('mousemove',function(event){ var x2 = event.clientX - canvas.offsetLeft; var y2 = event.clientY - canvas.offsetTop; cxt.strokeStyle = "blue"; cxt.lineTo(x2,y2); cxt.stroke(); }) $('#mycanvas').bind('mouseup',function(event){ $('#mycanvas').unbind('mousemove'); cxt.closePath(); }) }) $('.cancle').click(function(){ cxt.putImageData(image.pop(),0,0); }) $('.clear').click(function(){ cxt.clearRect(0,0,canvas.width,canvas.height); }) }) </script>
5.HTML5对元素拖拽操作的支持
在HTML4.01中超链接和图片默认可以被拖动
第一步：设置可拖放属性draggable为true
第二步：根据需求选择拖放的事件进行处理（与click、change等事件用法相同）
事件类型
dragstart：开始拖放
drag：拖放中
dragenter：拖放中进入本元素
dragover：拖放中再本元素移动
dragleave：拖放中离开本元素
drop：放开移动元素
document.ondragover =function(e){e.preventDefault();}
document.ondragend =function(e){e.preventDefault();}
dragend：拖放结束
事件对象方法
preventDefault();不执行默认处理（默认拒绝被拖放）
stopPropagation();停止事件传播
事件数据处理对象：dataTransfer
dataTransfer对象有两个主要的方法：getData()方法和setData()方法。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是用来保存数据类型的字符串，取值是”text”或”URL”。
IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。
dataTransfer对象属性：
effectAllowed：控制特效
effectAllowed：表示允许拖动元素的哪种行为(dropEffect)，取值如下：
uninitialized：没有给被拖动元素设置任何放置行为
none：被拖动的元素不能有任何行为
copy：只允许值为”copy”的dropEffect
link：只允许值为”link”的dropEffect
move：只允许值为”move”的dropEffect
copyLink：允许值为”copy”和”link”的dropEffect
copyMove：允许值为”copy”和”move”的dropEffect
linkMove：允许值为”link”和”move”的dropEffect
all：允许任意dropEffect
dropEffect：控制特效，通过这个属性可以知道被拖动的元素（目标）能够执行哪种行为，这个属性的四个值如下：
none：不能把拖动的元素放在这里，这是除了文本框之外所有元素默认的值
move：应该把拖动的元素移动到放置目标
copy：应该把拖动的元素复制到放置目标
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接，有URL地址)
把元素拖动到放置目标上的时候，以上每一个值都会导致光标显示为不同的符号。
setData(mime_type,data);// 存储数据
getdata(mime_type);// 取出数据
支持的mime类型：text/plain text/html text/xml text/url-list
附简单拖放演示例子的代码：
<style> #a1{ width: 200px; height: 200px; background-color: skyblue; } #a2{ width: 400px; height: 400px; background-color: #666; margin-top: 200px; } </style> <div id="a1" draggable="true"></div> <div id="a2"></div> <script> var a1 = document.getElementById('a1'); var a2 = document.getElementById('a2'); a1.addEventListener('dragstart',function(even){ console.log("你拖我了"); a1.style.background = "green"; var data = even.target.id; even.dataTransfer.setData('data_id',data); },false); a1.addEventListener('drag',function(){ console.log("我在页面上移动"); },false) a2.addEventListener('dragenter',function(){ console.log("你来我家里了"); a2.style.background = "yellow"; },false) a2.addEventListener('dragover',function(){ console.log("你在我家移动"); },false) a2.addEventListener('dragleave',function(){ console.log("你离家出走了"); a2.style.background = "#666"; },false) a2.addEventListener('drop',function(even){ console.log("你放开我了"); a1.style.background = "skyblue"; var data_id = even.dataTransfer.getData('data_id'); var con = document.getElementById(data_id).cloneNode(); a2.appendChild(con); },false); a1.addEventListener('dragend',function(){ console.log("拖放结束了"); },false); document.ondragover =function(even){even.preventDefault();} </script>
6.HTML5的离线应用
所谓离线Web应用，就是在设备不能上网的情况下，仍然可以运行的应用。前端开发者一直希望Web应用能够与传统的客户端应用同场竞技。为了让Web应用程序在离线状态时也能正常工作，就必须要把所有构成Web应用程序的资源文件，如HTML文件，CSS文件，JavaScript脚本文本等放到本地缓存中，当服务器没有和Internet建立连接的时候，也可以利用本地缓存中的资源文件来正常运行Web应用程序。
本地缓存是为整个Web应用程序服务的，而浏览器的网页缓存只服务于单个网页，任何网页都可以进行网页缓存，而本地缓存只缓存哪些你指定的缓存网页。
网页缓存是不安全，不可靠的。而本地缓存是可靠的，我们可以控制对哪些内容进行缓存，哪些不进行，开发人员开可以利用编程的手段来控制缓存的更新。
manifest文件是一个简单文本文件，在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称，以及这些资源文件的访问路径。你可以为每个页面单独制定一个manifest文件，也可以对整个Web应用程序指定一个总的manifest文件。
在H5中规定manifest文件的MIME类型是text/cache-manifest，在测试离线Web应用程序的时候，需要对服务器进行配置，让服务器支持text/cache-manifest这个MIME类型，例如在Apache服务器进行配置的时候，需要找到{apache_home}/conf/mime.types这个文件，并在文件最后添加代码：text/cache-manifest manifest。
manifest文件内容例如：
global.manifest
CACHE MANIFEST
CACHE:
index.html
other.html
hello.js
images/myphoto.jpg
NETWORK:
*
FALLBACK:
online.js locale.js
在manifest文件中，第一行必须是CACHE MANIFEST
指定资源文件时，文件路径可以是相对路径也可以是绝对路径，每个资源文件为一行。并且可以将资源文件分为三类：
CACHE：指定需要被缓存在本地的资源文件
NETWORK：指定不进行本地缓存的资源文件。这些资源文件只有当客户端与服务器端建立连接的时候才能访问。"*"表示没有在本minifest文件中指定的资源文件都不进行本地缓存
FALLBACK：每行指定两个资源文件，第一个资源文件为能够在线访问时使用的资源文件，第二个资源文件为不能在线访问时候使用的备用资源文件
为了让浏览器能够正常阅读该文本文件，需要在Web应用程序页面上的html标签的manifest属性中指定manifest文件的URL地址，如：
<html manifest="global.manifest">
</html>
当要对本地缓存区的内容进行修改时，只需要修改manifest文件就可以了，文件被修改后，浏览器可以自动检查manifest文件，并自动更新本地缓存区中的内容。
在Chrome中，可以使用查看你chrome://appcache-internals/缓存在本地的资源文件。
applicationCache对象代表了本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。
事件
checking：在浏览器为应用缓存查找更新时触发
error：在检查更新或下载资源期间发生错误时激发
noupdate：在检查描述文件发现文件无变化时触发
downloading：在开始下载应用缓存资源时触发，在文件下载应用缓存的过程中不断触发
cached：在应用缓存完整可用的时候触发
updateready：当浏览器对本地缓存进行更新，装入新的资源文件时，会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。用户需要手工刷新页面来得到最新版本的应用程序
方法
applicationCache.swapCache()：用来手工立即执行本地缓存的更新，它只能在applicationCache对象的updateReady事件触发时调用
applicationCache.update()：检查服务器上的manifest文件是否有更新
属性
status：状态，0表示无缓存，1表示闲置，2表示检查中，3表示下载中，4表示更新完成
7.HTML5的数据存储
Http Cookie，通常直接叫做cookie，最初是在客户端用于存储会话信息的，该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头作为响应的一部分，其中包含会话信息，例如，这种服务器响应的头可能如下：
HTTP/1.1 200 OK
Content-type:text/html
set-Cookie: name=value
Other-header:other-header-value
这个HTTP响应设置以name为名称，以value为值得一个cookie，名称和值在传送时都必须是URL编码的。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie Http头将信息发送回服务器：
GET /index.html HTTP/1.1
Cookie: name=value
other-header: other-header-value
发送回服务器的额外信息可以用于唯一验证客户来自发送的哪个请求。
由于Cookie是存在客户端计算机上，还加入了一些限制确保cookie不会被恶意使用，同时不会占用太多磁盘空间，每个域上的cookie总数是有限的，每个浏览器不同。IE6以下是20，IE7以上是50，Firefox是50，Opera是30，Safari和Chrome没有规定。
当超过单个域名限制之后还要载设置cookie，浏览器就会清除以前设置的cookie
cookie的构成：
名称：不区分大小写，唯一
值：存储在cookie中的字符串值，值必须被URL编码
域：cookie对于哪个域是有效的，如.wrox.com
路径：对于指定域中的那个路径，应该向服务器发送cookie
http://www.wrox.com/books指定路径，可以访问
http://www.wrox.com不可以访问
失效时间：默认情况下，浏览器会话结束时会将所有cookie删除，但是也可以自己设置时间，时间值为GMT格式日期（Wdy,DD-Mon-YYYY HH:MM:SS GMT）
安全标志：指定后，cookie只有在使用SSL连接时才发送到服务器
Set-Cookie: name=value;
expires=Mon,22-Jan-07 07:10:24 GMT;
domain=.wrox.com;
path=/;
secure
在JavaScript中处理cookie比较复杂，需要使用BOM的document.cookie属性。
由于所有的cookie都会由浏览器作为请求头发送，所以在cookie中存储了大量信息会影响到特定域的请求性能。cookie信息越大，完成服务器响应时间就越长，并且不能再cookie中存储如银行卡或个人信息之类的数据，因为不能保证其安全性。
