《从0到1:HTML5+CSS3修炼之道》笔记

HTML、XHTML、HTML5的区别

HTML，超文本标记语言，通常指HTML4.01。

XHTML，扩展的超文本标记语言，是更严格、更纯净的HTML4.01。

        1、标签必须闭合

        2、标签必须小写

        3、标签属性必须用引号

        4、id属性代替name属性，

HTML5，HTML4.01的升级版。

        1、文档声明<! DOCTYPE html>

        2、标签不区分大小写

        3、标签属性可不加引号

        4、部分属性值可以忽略

HTML5新增的语言化标签，以及好处。

<header>、<nav>、<article>、<aside>、<section>、<footer>

好处是可以帮助完善页面的语义化，提高可读性、可维护性，以及SEO搜索引擎优化。

HTML5新增的input元素类型

验证型：<input type="email" />、<input type="tel" />、<input type="url" />、

取值型：<input type="range" />滑动条；<input type="number" />微调数字按钮；<input type="color" />取色工具；<input type="date" />选择日历；<input type="time" />选择时间；<input type="month" />选择月份；<input type="week" />选择周数

对于以上类型的input，完备的验证效果还需结合pattern属性来实现。

HTML5新增的其他元素

表单元素：<output>展示数据；<datalist>可选列表，代替section；<keygen />暂时忽略；

其他元素：<address>语义化地址；<time>语义化时间；<progress>进度条；<meter>静态进度条；<figure>图片；<figcaption>图片注释；<fieldset>表单分组；<legend>表单标题；

HTML5改良元素

<a download="下载后的文件名">；<ol reversed>无序列表降序显示；<small>小字；<script>新增defer和async，两者都是异步加载脚本的意思，区别是defer会等HTML文档加载完成后执行，async是不等了，立马执行。

HTML5新增属性

公共属性：hidden=“hidden”隐藏；draggable=="true/false"可拖动；contenteditable="true/false"可编辑；data-*=“xx”自行设置属性与属性值，需用obj.dataset.*来获取xx。

input属性：autocomplete=“on/off”文本框自动提示，一般结合datalist使用；autofocus=“autofocus”文本框自动获取焦点；placeholder、required=“required”文本框内容不能为空、pattern=“正则表达式”等。

form属性：novalidate="novalidate"禁用form元素的所有文本框内置验证功能。

元素拖放

源元素：被拖拽元素，可以不是网页上的元素，浏览器外开始拖的也算。事件包括ondragstart，ondrag，ondragend。

目标元素：源元素最终被释放到的那个元素。事件包括ondragenter，ondragover，ondragleave，ondrop。

源元素和目标元素之间的数据传递：dataTransfer对象，包括setData和getData两个重要方法。在源元素的ondragstart中用setData，在目标元素的方法中用getData。

文件获取与读取

<input type="file" multiple="multiple" accept="image/jpeg, image/png" />

其中，multiple设置可选择多个文件；accept设置文件过滤类型（MIME类型）。

File对象：用于获取文件信息。

FileReader对象：用于读取文件内容。readAsText(File对象，编码方式)以某种编码方式读取文本；readAsDataURL(File对象)将文件转为base64编码。

Blob对象：

本地存储

为了解决Cookie存在的大小限制、数量限制、总数限制、不必要的跟随http请求等，HTML5新增了3种数据存储方式：localStorage、sessionStorage、indexedDB。

localStorage：永久、少量。

sessionStorage：临时、少量。

indexedDB：永久、大量。

视频音频

视频如下。video对象有很多属性与方法。音频同视频。

<video width="320" height="240" src="media/mp4" autoplay controls loop preload="auto/metadata/none">

 离线缓存

需要搭建虚拟服务器来做案例。实现离线缓存有三步。

总结：
一、在httpd.conf文件最后添加AddType text/cache-manifest .manifest​​
二、在HTML页面的html标签中添加manifest=“cache.manifest”属性
三、在www文件目录建立cache.manifest文件，文件内容如下

CACHE MANIFEST
#verson xx.xx.xx 这句注释方便更新缓存
CACHE:
xx.html
xx.css
images/logo.png
xx.js等文件

多线程处理

JS的执行环境是单线程的。HTML5提供了JS多线程的解决方案——Web Worker。

客户端：

​​//新建worker实例

var worker = new Worker(url);

//向后台发送数据

worker.postMessage(yourdata);

//接收后台处理完成的数据

worker.onmessage = function(e){
    console.log(e.data);

};​​

服务端：局限性是无法访问DOM、全局变量、全局函数、不支持跨域加载JS。

onmessage = function(e){
  
    //通过e.data获取前台发送来的数据
  
    var d = e.data;
  
    //数据处理
  
    var str = d.split("").reverse().join("");
    //向前台返回数据
  
    postMessage(str);

};​​

地理位置

window.navigator.geolocation有三个方法：getCurrentLocation(function(position){...})、watchPosition(function(position){...})、clearWatch(watchPositionID)。

还有使用百度地图API进行开发的方法，略。

 桌面通知

 Notification API

Canvas

HTML5的核心技术。可用于绘制图形、绘制图表、动画效果、游戏开发。

 canvas是行内块元素，

1、画直线。moveTo画线会与上一个点断开，lineTo画线会与上一个点连续。

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
ctx.moveTo(50,100);
ctx.lineTo(150,50);
ctx.lineTo(150,150);
ctx.stroke();

2、画矩形。 

cxt.fillStyle = "HotPink";
cxt.fillRect(50, 50, 80, 80);
cxt.strokeStyle = "rgba(0,0,255,0.3)";
cxt.fillRect(30, 30, 80, 80);

其他略。