《html5秘籍》 笔记

查看各种浏览器对各版本中各个功能的兼容情况网址： http://caniuse.com

该书在线示例网址： http://www.prosetech.com/html5/

W3C官方HTML5标准的网址： http://www.w3.org/TR/html5

HTML53大主要原理：不破坏WEB，修补牛蹄子路，实用至上

1、语义元素（semantic element）:为它们标注的内容提供额外的含义。

可能的优点：（1）容易修改和维护，（2）无障碍性，（3）搜索引擎优化，（4）未来的功能

2、header、hgroup规范用法：

（1）如果有一个普通的标题，它本身不包含任何特殊的内容，则使用<h1>,<h2>...等标题元素就可以了。

（2）<hgroup>内容只能包含编号的标题元素。

（3）如果除了主标题外，还有其它内容（摘要、图片等），则应该集合放在一个<header>元素中。

（4）如果除了主标题，还有一个副标题，那就可以把这两个标题包装在一个<hgroup>元素中。

3、 用<figure>添加插图

<figure>

<img ...>

<figcaptioin>....</figcaption>

</figure>

img中如果设置alt成空字符串，则屏幕阅读器会忽略不读.

4、用<aside>添加附注

5、用<nav>标注导航链接

nav通常应用于页面中最大最主要的导航区。

6、Html5的纲要机制：每次遇到编号标题元素，只要该元素不在某个区块顶部，就会为它自动创建一个新的区块。

分块元素：<article>、<aside>、<nav>、<section>

7、time元素标注时间和日期。

通过datetime赋值通告时间。

pubdate属性说明时间为内容发表时间。

日期格式：YYYY-MM-DD。例：2012-01-01

?时间格式：MM-HH:MM 时区+24时间制。例：UTC- 5:00

日期时间格式：日期格式+T+时间格式。例：2012-03-21T16:30-17:00

8、output元素标注返回值

不可编辑内联元素

9、mark标注突显文本

浏览器会给突显文本添加黄色背景。

10、form表单

10.1 action属性:提交数据url

10.2 fieldset元素：逻辑块

legend元素：fieldset中的标题

例：<fieldset>

<legend>

...

...

</legend>

<fieldset>

10.3 表单控件 <input type='text/password/checkbox/radio/submit/image/reset/button/email'>...</input>

                    <input type='url/search/tel/number/range/color'>

<textarea>...<textarea>

<select>...</select>

10.4 placeholder属性 占位符添加提示。例：<input placeholder='name'>

10.5 required属性 表示必填。

10.6 novalidate属性 禁用表单的验证功能。

formnovalidate属性 实现额外功能？。

10.7 伪类样式。

required(必填)和optional（选填）

valid（有效）和invalid（无效）

in-range（范围内）和out-of-range（超出范围）

10.8 input.setCustomValidity(val) 当val不为空字符串时，弹出val字符提示框。

10.9 multiple属性 添加后可以在同一个字段里输入多个电子邮件地址，多个邮件地址之间只能用逗号分隔。

10.10 datalist元素

10.11 progress元素 进度条 ,meter元素计量条

10.12 command元素工具条，menu元素菜单

10.13 contentEditable=true时 编辑元素。designMode属性编辑页面。

11、audio元素 ，video元素

        11.1 src属性：文件url

        11.2 controls属性：是否包含基本的播放控件。

        11.3 preload属性：auto/metadata/none。auto自动预加载。none不预加载。metadata先加载音频文件开头数据。

        11.4 autoplay属性 ：加载完成后自动播放。

        11.5 loop属性：设置循环播放。

        11.6 video独有属性：width/height/poster属性。

                poster属性设置替换视频的图片，出现情况：(1)视频第一帧未加载完成。（2）把preload属性设置为none。（3）没有找到指定的视频文件。

        11.7 嵌套source元素，提供多种格式。

                例：<audio>

                            <source src='...' type='....'>

                            <source src='...' type='....'>

                        </audio>

        11.8 audio元素，video元素在浏览器中的兼容性处理。

        11.9 play(),pause(),canPlayType()。 canPlayType()传入mime类型，返回：（1）空字符串，表示浏览器不支持传入的类型。（2）prebably，表示浏览器支持。（3）maybe，表示希望浏览器可以。canPlayType()返回值不能保证真的可以播放，还要考虑：（1）容器编码器是否受浏览器支持。（2）浏览器是否支持编码设置。

        11.10 js中playbackRate属性：播放速度 1：1倍速度播放。

        11.11 currentTime当前播放时刻，duration总播放时间，onTimeUpdate事件：帧监听事件？。

12、 canvas元素

        12.1 getContext(str:string)、moveTo(x,y)、lineTo(x,y)、stroke()、lineWidth、strokeStyle、lineCap、beginPath()、closePath()、fillStyle、fill()、lineJoin、fillRect(x,y,width,height)，strokeRect(x,y,width,height)

                (1)getContext(str) 获取上下文 str="2d"/"3d"

                (2)moveTo(x,y) 画笔移动x,y位置

                (3)lineTo(x,y) 连接到x,y位置    

                (4)stroke() 执行线条绘制

                (5)lineWidth 线条宽度

                (6)strokeStyle 线条样式

                (7)lineCap 设置线条端点笔触。butt/round/square。默认值：butt 方头；round圆头；square加长方头，即在线头的两头各增加一半线宽的长度方头。

                (8)beginPath() 重新绘制线段。

                (9)closePath() 关闭路径。该方法会自动在最后一个绘制点与绘制起点间绘制一条线。

                (10)fillStyle 填充样式。

                (11)fill() 执行填充。

                (12)lineJoin 设置线段交点的形状。mitre/round/bevel 。默认值：mitre锐角斜接；round圆头；bevel平头斜接。

                (13)fillRect(x,y,width,height) 绘制矩形.

                (14)strokeRect(x,y,width,height) 绘制矩形框。

       12.2绘制曲线。

               绘制圆弧：arc(centerX,centerY,radius,startAngle,endAngle);

               绘制介于两条切线之间的圆弧：artTo(x1,y1,x2,y2,radius);

              绘制二次贝塞尔曲线：quadraticCurveTo(controlX,controlY,endX,endY);   

               绘制三次贝塞尔曲线：bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY);

      12.3 drawImage()

               语法1：drawImage(img,x,y)

               语法2：drawImage(img,x,y,width,height);

               语法3：drawImage(img,sx,sy,swith,sheight,x,y,width,height);

               

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

       12.4文本填充

       12.5阴影效果

       12.6填充图案 createPattern(img,repeat-type)

       12.7渐变填充 createLinearGradient,createRadialGradient。

                       createLinearGradient(sx,sy,ex,ey);

                       createRadialGradient(x0,y0,r0,x1,y1,r1)

13 CSS

   先列出兼容性最好的属性，然后再列出新属性，以覆盖之前的属性。

    

   13.1开发商前缀：

       -moz-           FireFox

       -webkit-        Chrome和Safari

       -ms-              Internet Explorer

       -o-                 Opera

              

      13.2@font-face{}注册字体       

       

  
  
@font-face{//注册字体
  font-family: 'fontname'; //定义字体名字
  src:url('fonttype');//url(url:string)在当前位置下载一个文件
  src:local('fonttype1url'),//local('')告诉浏览器字体名字
}

       13.3多行文本 column-count(栏数),column-width(栏宽度),column-gap(栏间距),column-rule（栏间分割线）

       13.4不同设备样式

           （1）对应媒体应用样式。

   
   
@media (media-query-property-name:value){
   /**/
}

           （2）浏览器窗口的宽度小于或等于480px时，应用样式。

    
    
@media (max-width:480){
   /***/
}

            max-width在手机上表示用户可以滚动页面的区域宽度。通常。手机屏幕视口的宽度是时间屏幕宽度的两倍。手机上应该使用max-device-width属性。手机设备无论真实的分辨率多少，大多数手机仍会告诉浏览器自己的宽度为480px。ipad无论是否旋转，都会告诉浏览器它的设备宽度(max-device-width)为768px，通过组合使用orientation属性判断ipad的旋转方向。

            

            （3）如果需要满足多个条件应用样式时，使用如下格式：

     
     
@media (condition0) and (condition1)...{
   /***/
}

            not关键字使用。

  14 多变的盒子

        14.1 实现透明效果的方法：

                （1）使用rgba()

                （2）opacity属性。

            建议使用opacity属性的情况：

                （1）实现多种颜色（元素）的半透明效果。使用opacity属性，不仅背景颜色，就连文本颜色、边框颜色都有效果；

                （2）在不知道颜色的情况下；

                （3）实现图片效果；

                （4）实现渐变动画效果；

        14.2 边框圆角

                    border-radius:  1-4 length | %  /  1-4 length | % ;

                   border-top|bottom-left|right-radius:num|% num|%;

                

例子 1

border-radius:2em;

等价于：

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于：

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

    
    

     
     来源： http://www.w3school.com.cn/cssref/pr_border-radius.asp
    
    

        14.3 盒子渐变效果：

            定位赋值：top,left,bottom,right，circle,%；

            例：上→下，白→蓝的渐变效果

    
    
selectorBox{
  background:linear-gradient(top,white,blue);
}

            例：左上→右下的渐变效果

     
     
selectorBox{
  background:linear-gradient(top left,white,lightblue)
}

            例：多种颜色渐变效果

      
      
selectorBox{
  linear-gradient(top,red,orange,yellow)
}

            例：控制渐变点

      
      
selectorBox{
  liner-gradient(top red 0%,orange 20%,yellow 80%,violet 100%)
}

        14.4 过渡

                 transition:  property   duration   timing-function   delay ;

        14.5 变换

                

语法

transform: none|transform-functions;

值	描述	测试
none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

15 web存储:localStorage和 sessionStorage

        localStorage:可用于长期保存本地数据。

        sessionStorage:用于临时保存针对窗口或者标签页的数据。关闭窗口或者标签页后，数据会被浏览器删除。

        注意：建议本地存储限制在5MB以下。

        localStorage['keyname']=value;

         添加键值对：localStorage.setItem(key,value)

　　获取键值：localStorage.getItem(key)

　　删除键值对：localStorage.removeItem(key)。

　　清除所有键值对：localStorage.clear()。

　　获取localStorage的属性名称（键名称）：localStorage.key(index)。

       还有一个和普通对象不一样的属性length:

　　获取localStorage中保存的键值对的数量：localStorage.length。

        window.onStorage 响应存储修改：（1）向存储添加新数据；（2）修改已有数据；（3）删除或清除数据。

        JSON.stringify(obj),JSON.parse(string)

16 读取文件 fileReader

17 缓存文件处理

18 地理位置获取 

       navigator.geolocation.getCurrentPosition(onSuccess?,onError?,data?)

        navigator.geolocation.watchPosition(onSuccess?,onError?,data?)

           navigator.geolocation.closeWatch();