HTML5+CSS3總體回顧

時間 2019-12-09

標籤 html5+css3 html css 總體回顧欄目 HTML5 简体版

原文原文鏈接

轉載請聲明原文連接javascript

這篇文章主要總結H5的一些新增的功能以及一些基礎概括，並非很詳細，後面會一直完善補充新的內容，本文是一些筆記記錄，放在這裏供本身參考也供他人學習！css

第一課 HTML5結構

HTML5 是新一代的 HTMLhtml
DTD聲明改變 <!DOCTYPE html>html5
- 新的結構標籤java
- 注意的地方css3
  - ie8 不兼容git

經常使用的一些新的結構標籤

刪除的`HTML`標籤

純表現的元素：github
- basefontweb
- bigajax
- center
- font
- s
- strike
- tt
- u
對可用性產生負面影響的元素：
- frame
- frameset
- noframes

產生混淆的元素：
- acronym
- applet
- isindex
- dir

從新定義的HTML標籤
- <b> 表明內聯文本，一般是粗體，沒有傳遞表示重要的意思
- <i> 表明內聯文本，一般是斜體，沒有傳遞表示重要的意思
- <dd> 能夠同details與figure一同使用，定義包含文本，ialog也可用
- <dt> 能夠同details與figure一同使用，彙總細節，dialog也可用
- <hr> 表示主題結束，而不是水平線，雖然顯示相同
- <menu> 從新定義用戶界面的菜單，配合commond或者menuitem使用
- <small> 表示小字體，例如打印註釋或者法律條款
- <strong> 表示重要性而不是強調符號
嶄新新的頁面佈局

第二課 HTML5智能表單

HTML4.01 form表單複習

input表單type屬性值
- type="text" 單行文本輸入框
- type="password" 密碼（maxlength=""）
- type="radio" 單項選擇（checked="checked"）
- type="checkbox" 多項選擇
- type="button" 按鈕
- type="submit" 提交
- type="file" 上傳文件
- type="reset" 重置

HTML5智能表單

input表單type屬性值：
- type = "email" 限制用戶輸入必須爲Email類型
- type="url" 限制用戶輸入必須爲URL類型
- type="date" 限制用戶輸入必須爲日期類型
- type="datetime" 顯示完整日期含時區
- type="datetime-local" 顯示完整日期不含時區
- type="time" 限制用戶輸入必須爲時間類型
- type="month" 限制用戶輸入必須爲月類型
- type="week" 限制用戶輸入必須爲周類型
- type="number" 限制用戶輸入必須爲數字類型
- type="range" 生成一個滑動條
- type="search" 具備搜索意義的表單results="n"屬性
- type="color" 生成一個顏色選擇表單
- type="tel" 顯示電話號碼

Input 類型 - Date Pickers（日期選擇器）

**HTML5 擁有多個可供選取日期和時間的新輸入類型：
date 選取日、月、年
month 選取月、年
week 選取周和年
time 選取時間（小時和分鐘）
如下兩個沒有做用
- datetime 選取時間、日、月、年（UTC 時間）
- datetime-local 選取時間、日、月、年（本地時間）

HTML5新增表單屬性

required: required 內容不能爲空
placeholder: 表單提示信息
autofocus:自動聚焦
pattern: 正則表達式輸入的內容必須匹配到指定正則範圍
autocomplete:是否保存用戶輸入值
- 默認爲on，關閉提示選擇off
formaction: 在submit裏定義提交地址
datalist: 輸入框選擇列表配合list使用 list值爲datalist的id值
output: 計算或腳本輸出

表單驗證

validity對象，經過下面的valid能夠查看驗證是否經過，若是八種驗證都返回true,一種驗證失敗返回false
- oText.addEventListener("invalid",fn1,false)
- ev.preventDefault(): 阻止默認事件
- valueMissing: 當輸入值爲空的時候，返回true
- typeMismatch: 控件值與預期不吻合，返回true
- patternMismatch: 輸入值不知足pattern正則，返回true
- cusomError
  - setCustomValidity()

第三課 css3選擇器

CSS3發展史簡介
- HTML的誕生 20世紀90年代初
- 1996年末， CSS初版誕生
- 1998年5月 CSS2正式發佈
- 2004年 CSS2.1發佈
- CSS3的發佈 2002 2003 2004 2005 2007 2009 2010
模塊化開發
- CSS1 中定義了網頁的基本屬性：
  - 字體、顏色、基本選擇器等
- CSS2中在CSS1的基礎上添加了高級功能
  - 浮動和定位、高級選擇器等(子選擇器、相鄰選擇器、通用選擇器)
- CSS3遵循的是模塊化開發。發佈時間並非一個時間點，而是一個時間段
CSS選擇器複習
- 通用選擇器：* 選擇到全部的元素
- 選擇子元素：> 選擇到元素的直接後代
- 相鄰兄弟選擇器：+ 選擇到緊隨目標元素後的第一個元素
- 普通兄弟選擇器：~ 選擇到緊隨其後的全部兄弟元素
- 僞元素選擇器：
  - ::first-line 匹配文本塊的首行
  - ::first-letter 選擇文本塊的首字母
- 僞類選擇器：
  - :before,:after在元素內容前面、後面添加內容(至關於行內元素)
CSS3結構選擇器

Css3 屬性選擇器

CSS3僞類選擇器
- UI僞類選擇器：
  - :enabled 選擇啓用狀態元素
  - :disabled 選擇禁用狀態元素
  - :checked 選擇被選中的input元素（單選按鈕或複選框）
  - :default 選擇默認元素
  - :valid、invalid 根據輸入驗證選擇有效或無效的input元素
  - :in-range、out-of-range選擇指定範圍以內或者以外受限的元素
  - :required、optional 根據是否容許:required屬性選擇input元素
- 動態僞類選擇器：
  - :link 選擇連接元素
  - :visited 選擇用戶以訪問的元素
  - :hover 鼠標懸停其上的元素
  - :active 鼠標點擊時觸發的事件
  - :focus 當前獲取焦點的元素
- 其餘僞類選擇器：
  - :not(<選擇器>) 對括號內選擇器的選擇取反
  - :lang(<目標語言>) 基於lang全局屬性的元素
  - :target url片斷標識符指向的元素
    - :empty選擇內容爲空的元素
  - :selection 鼠標光標選擇元素內容

第四課 CSS3新增文本屬性

CSS文本屬性複習
- white-space：對象內空格的處理方式
  - nowrap 控制文本不換行
  - pre 空白會被瀏覽器保留
  - pre-line 合併空白保留換行符
  - pre-wrap 保留空白正常換行
- direction：文本流的方向
  - ltr 文本從左向右
  - rtl 文本從右往左
- unicode-bidi：用於同一個頁面裏存在從不一樣方向讀進的文本顯示。與direction屬性一塊兒使用
CSS3新增文本屬性
- color:rgba();
- text-overflow:是否使用一個省略標記（...）標示對象內文本的溢出
- text-align:文本的對齊方式
- text-transform:文字的大小寫
- text-decoration:文本的裝飾線，複合屬性
- text-shadow:文本陰影
- text-fill-color:文字填充顏色
- text-stroke:複合屬性。設置文字的描邊
- tab-size:製表符的長度
- word-wrap:當前行超過指定容器的邊界時是否斷開轉行
- word-break:規定自動換行的處理方法
text-overflow:是否使用一個省略標記（...）標示對象內文本的溢出
- clip：默認值無省略號
- ellipsis：當對象內文本溢出時顯示省略標記（...）。
- 注意：該屬性需配合over-flow:hidden屬性(超出處理)還有 white-space:nowrap(禁止換行)配合使用，不然沒法看到效果
text-align:文本的對齊方式
- css1
- left:默認值左對齊
- right:右對齊
- center:居中
- justify：內容兩端對齊。
- css3
- start:開始邊界對齊
- end:結束邊界對齊
text-transform:文字的大小寫
- css1
  - none：默認值無轉換
  - capitalize：將每一個單詞的第一個字母轉換成大寫
  - uppercase：轉換成大寫
  - lowercase：轉換成小寫
- css3
  - full-width：將左右字符設爲全角形式。不支持
  - full-size-kana：將全部小假名字符轉換爲普通假名。不支持
    - 例如：土耳其語
text-decoration:文本的裝飾線，複合屬性(只火狐支持)
- text-decoration-line ：
  - 指定文本裝飾的種類。至關於CSS1時的text-decoration屬性
- text-decoration-style ：
  - `指定文本裝飾的樣式。
- text-decoration-color：
  - `指定文本裝飾的顏色。
- blink：指定文字的裝飾是閃爍。 opera和firefox
- text-decoration : #F00 double overline CSS3實例
text-shadow:文本陰影
- 取值：x y blur color,......
  - x 橫向偏移
  - y 縱向偏移
  - blur 模糊距離(灰度)
  - color 陰影顏色
text-fill-color:文字填充顏色
text-stroke:複合屬性。設置文字的描邊
- text-stroke-width:文字的描邊厚度
- text-stroke-color:文字的描邊顏色
tab-size:製表符的長度
- 默認值爲8(一個tab鍵的空格字節長度)，在 pre標籤以內纔會有顯示
word-wrap:當前行超過指定容器的邊界時是否斷開轉行
- normal：默認值
- 容許內容頂開或溢出指定的容器邊界。
break-word：
- 內容將在邊界內換行。若是須要，單詞內部容許斷行

第五課 CSS3盒模型

CSS盒模型複習

CSS3彈性盒模型
- display:box或者display:inline-box; 設置給父元素
- box-orient 定義盒模型的佈局方向設置給父元素
  - horizontal 水平顯示
  - vertical 垂直方向
- box-direction 元素排列順序設置給父元素
  - normal 正序
  - reverse 反序
- box-ordinal-group 設置元素的具體位置設置子元素
flex佈局語法篇

拓展閱讀
- flex佈局語法篇
- flex佈局實例篇

第六課 css3新增背景屬性

CSS背景屬性複習
- background:
  - background-color:背景顏色
  - background-image:背景圖片
  - background-repeat:背景重複
  - background-position:背景定位
  - background-attachment:背景固定(scroll/fixed)
CSS3新增背景屬性
background-size 背景尺寸
- background-size:x y
- background-size:100% 100%
- background-size:cover 比例放大
- background-size:contain 包含（圖片不溢出）
多背景
- background:url() 0 0,url() 0 100%;
- background-origin 背景區域定位
- border-box：從border區域開始顯示背景。
- padding-box：從padding區域開始顯示背景。
- content-box：從content內容區域開始顯示背
- background-clip 背景繪製區域
- border-box：從border區域向外裁剪背景。
- padding-box：從padding區域向外裁剪背景。
- content-box：從content區域向外裁剪背景。
- text:背景填充文本
- no-clip：從border區域向外裁剪背景
顏色漸變
- 線性漸變：linear-gradient(起點/角度，顏色位置，...,)
- - 起點：left/top/right/bottom/left top...... 默認top
  - 角度：逆時針方向 0-360度
  - 顏色位置：red 50%, blue 100%(紅色從50%漸變到100%爲藍色)
徑向漸變：radial-gradient(起點(圓心位置), 形狀/半徑/大小，顏色1，顏色2)
- 起點：left/top/right/bottom或具體值/百分比
- 形狀：ellipse(橢圓)、circle(正圓)
- 大小：具體數值或百分比，也能夠是關鍵字（closest-side(最近端), closest-corner最近角), farthest-side(最遠端), farthest-corner(最遠角), contain(包含) ,cover(覆蓋)）;

第七課 css3新增顏色屬性

CSS顏色屬性複習
- color name 顏色英文名稱命名
- HEX方式十六進制方式
- rgb方式三原色配色方式
CSS3新增顏色屬性
- rgba()

名稱	顏色	顏色	取值
r	red	紅色	0-255
g	green	綠色	0-255
b	blue	藍色	0-255
a	alpha	透明	0-1

HSL模式 HSLA模式
- H： Hue(色調)。
  - 0(或360)表示紅色，120表示綠色，240表示藍色，也可取其餘數值來指定顏色。取值爲：0 - 360
- S： Saturation(飽和度)。取值爲：0.0% - 100.0%
- L： Lightness(亮度)。取值爲：0.0% - 100.0%
- A: alpha 透明度 0~1之間
- 語法:HSLA(H,S,L,A)
HSL色輪

透明顏色：transparent
- 實例：border實現三角箭頭、風車等
透明度：
- opacity
- 取值：0-1之間
- 注：低版本的IE瀏覽器不兼容,需用IE瀏覽器的濾鏡實現相同效果，filter:alpha(opacity=50)
- 對於低版本的火狐瀏覽器需添加內核前綴，-moz-opacity

第八課 CSS3邊框系列

圓角-陰影

邊框圓角
- 在 CSS2 中添加圓角矩形須要技巧。咱們必須爲每一個圓角使用不一樣的圖片
- 在 CSS3 中，建立圓角是很是容易的
- 在 CSS3 中，border-radius 屬性用於建立圓角
border-radius邊框圓角寫法
- 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;

box-shadow方框添加陰影
- 語法：box-shadow:x-shadow y-shadow blur spread color inset;
- box-shadow的API
  - x-shadow 必需。水平陰影的位置。容許負值。
  - y-shadow 必需。垂直陰影的位置。容許負值。
  - blur 可選。模糊距離。
  - spread 可選。陰影的尺寸。
  - color 可選。陰影的顏色。請參閱 CSS 顏色值
  - inset 可選。將外部陰影 (outset) 改成內部陰影
- 實例：box-shadow:10px 10px 5px 5px #888888;

邊框系列-圖片

border-image語法

屬性	版本	簡介
border-image	CSS3	設置或檢索對象的邊框使用圖像來填充
border-image-source	CSS3	設置或檢索對象的邊框是否用圖像定義樣式或圖像來源路徑
border-image-slice	CSS3	設置或檢索對象的邊框背景圖的分割方式
border-image-width	CSS3	設置或檢索對象的邊框厚度
border-image-outset	CSS3	設置或檢索對象的邊框背景圖的擴展
border-image-repeat	CSS3	設置或檢索對象的邊框圖像的平鋪方式

border-image-slice
- 設置或檢索對象的邊框背景圖的分割方式

border-image-repeat
- 用於指定邊框背景圖的重複方式
- 取值：
  - stretch：指定用拉伸方式來填充邊框背景圖。 *默認的
  - repeat：指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時，若是超過則被截斷。
  - round：指定用平鋪方式來填充邊框背景圖。圖片會根據邊框的尺寸動態調整圖片的大小直至正好能夠鋪滿整個邊框。寫本文檔時僅Firefox能看到該效果

第九課 CSS3運動體系

過渡

過渡：給改變添加過程
- 什麼是過渡
- 過渡效果由哪幾部分組成
- 過渡能夠幹些什麼
transition 過渡屬性
transition: property duration timing-function delay;
- transition-property:過渡屬性的名稱
  - none 沒有過渡屬性
  - all 全部屬性都過渡(默認值)
  - property 具體屬性名稱(property1,property2...)
- transition-duration:過渡屬性花費的時間
  - time 秒或毫秒
- transition-timing-function:過渡效果速度曲線
  - time 秒或毫秒
- transition-delay:過渡效果延遲時間
transition-timing-function:過渡效果速度曲線
- linear:規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
- ease:規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in:規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
- ease-out :規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
- ease-in-out :規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n):在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。
過渡完成事件
Webkit內核：

obj.addEventListener('webkitTransitionEnd',function(){})

標準:

obj.addEventListener('transitionend',function(){})

動畫

什麼是CSS3 動畫？
- 經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript
動畫接口

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定動畫什麼時候開始。
animation-iteration-count	規定動畫被播放的次數。
animation-direction	規定動畫是否在下一週期逆向地播放。
animation-play-state	規定動畫是否正在運行或暫停。
animation-fill-mode	規定對象動畫時間以外的狀態。

animation-timing-function速度曲線

值	描述
linear	動畫從頭至尾的速度是相同的。
ease	默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

在谷歌瀏覽器裏面須要加上-webkit-
IE6,7,8,9不支持css3運動
拓展閱讀
- CSS3動畫簡介
CSS3盒模型陰影
- box-shadow:inset x y blur spread color
- inset：投影方式
- inset：內投影
- outset：外投影默認(不能設置)
- x、y：陰影偏移
- blur：模糊半徑（灰度）
- spread：擴展陰影半徑
- 先擴展原有形狀，再開始畫陰影
- color
CSS3盒模型倒影
box-reflect 倒影
- 方向 above|below|left|right;
- 距離
- 漸變（可選）
CSS3其餘盒模型
- box-sizing 盒模型解析模式
- content-box 標準盒模型(和css2同樣的計算)
- width/height=border+padding+content
- border-box 怪異盒模型 width/height與設置的值同樣，content減少
擴展閱讀
- 學會使用css3的box-sizing佈局

第十課 transform 2D轉換

Css3平面轉換方法
- translate() 移動
- rotate() 旋轉
- scale() 縮放
- skew() 翻轉
- matrix() 矩陣
transform:
- rotate() 旋轉函數 (deg)
  - deg 度數
- skew(X,Y) 傾斜函數 (deg)
  - skewX()
  - skewY()
- scale(X,Y) 縮放函數 (正數、負數和小數)
  - scaleX()
  - scaleY()
- translate(X,Y) 位移函數(px)
  - translateX()
  - translateY()
rotate() 旋轉方法
- 用於旋轉元素角度
- 例：rotate(30deg)
  - 把元素順時針旋轉 30 度
translate()位置方法
- 用於移動元素位置
  - 例：translate(50px,100px)
    - 把元素從左側移動 50 像素，從頂端移動 100 像素。
- 其實有些相似於咱們的相對定位
scale()尺寸方法
- 方法用於改變元素尺寸
  - 例：scale(2,4)
    - 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高度的 4 倍
skew() 翻轉方法
- 經過 skew() 方法，元素翻轉給定的角度
  - 例：transform: skew(30deg,20deg);
    - 把元素圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度

第十一課 transform 3D轉換

Css3立體轉換
- transform-style（preserve-3d） 創建3D空間
- Perspective 視角
- Perspective- origin 視角基點
- transform-origin：座標軸基點
transform 新增函數
- rotateX()
- rotateY()
- rotateZ()
- translateZ()
- scaleZ()

第十二課視頻音頻

視頻音頻格式的簡單介紹
- 常見的視頻格式
  - 視頻的組成部分：畫面、音頻、編碼格式
  - 視頻編碼：H.26四、Theora、VP8(google開源)
- 常見的音頻格式
  - 視頻編碼：ACC、MP三、Vorbis
HTML5支持的格式

HTML5能在徹底脫離插件的狀況下播放音視頻,可是不是全部格式都支持。
支持的視頻格式：
- Ogg=帶有Theora視頻編碼+Vorbis音頻編碼的Ogg文件
- MEPG4=帶有H.264視頻編碼+AAC音頻編碼的MPEG4文件
- WebM=帶有VP8視頻編碼+Vorbis音頻編碼的WebM格式

`Video`的使用

單獨用法
- <video src="文件地址" controls="controls"></video>
帶提示用法

< video src="文件地址" controls="controls">
    您的瀏覽器暫不支持video標籤。播放視頻
</ video >

兼容用法

< video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的瀏覽器暫不支持video標籤。播放視頻
</ video >

Video的常見屬性

屬性	值	描述
Autoplay	Autoplay	視頻就緒自動播放
controls	controls	向用戶顯示播放控件
Width	Pixels(像素)	設置播放器寬度
Height	Pixels(像素)	設置播放器高度
Loop	Loop	播放完是否繼續播放該視頻，循環播放
Preload	load{auto,meta,none}	規定是否預加載視頻。
Src	url	視頻url地址
Poster	Imgurl	加載等待的畫面圖片
Autobuffer	Autobuffer	設置爲瀏覽器緩衝方式，不設置autoply纔有效

Video的API方法

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType()	videoHeight	error

第十三課 canvas

標籤 <canvas>
- 不支持canvas 的瀏覽器能夠看到的內容
<canvas> 繪製環境
- getContext("2d");目前支持2d的場景
繪製矩形
- rect(L,T,W,H):建立一個矩形
- fillRect(L,T,W,H):繪製填充的矩形
- strokeRect(L,T,W,H)繪製矩形(無填充)
  - 默認一像素黑色邊框
設置繪圖
- fillStyle:填充顏色(繪製canvas是有順序的)
- lineWidth:線寬度，筆跡粗細
- strokeStyle:邊線顏色
繪製路徑
- stroke ：繪製，劃線(黑色默認)
- fill :填充(黑色默認)
- rect(矩形區域)
- clearRect 擦除一個矩形區域
- save 進入到XXX（高逼格）狀態
- restore 退出xxx（高逼格）狀態
繪製圓形
- arc(x,y,半徑,起始弧度,結束弧度,旋轉方向)
- x，y起始位置
- 弧度與角度：弧度=角度 x π / 180
- 旋轉方向：順時針（默認：false），逆時針（true）
繪製字體
- font：設置字體大小
- fillText：填充字體
- strokeText：繪製字體
擴展閱讀
- canvas學習之API整理筆記（一）
- HTML5 API大盤點

第十四課 SVG繪圖

svg是什麼
- 矢量圖
- 與canvas的區別
svg的引入方式
方式一：

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"          "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"></svg>

方式二：
- 圖片、背景、框架
方式三:
- html頁面中添加svg
circle:圓形
- 圓心座標 cx,cy
- 半徑 r
- fill stroke stroke-width stlye樣式
- fill = "none/transparent"
ellipse:橢圓
- cx屬性定義的橢圓中心的x座標
- cy屬性定義的橢圓中心的y座標
- rx屬性定義的水平半徑
- ry屬性定義的垂直半徑
rect : 矩形
- width height 寬高
- 座標 x, y
- 圓角 rx,ry
line :線條
- x1,y1,x2,y2
- stroke-opacity 透明 fill-opacity
polyline:折線
- points:點座標（x1 y1 x2 y2...）或(x1,y1,x2,y2....)
polygon:多邊形
- 折線閉合 fill-rule:evenodd/nonzero;
path: 路勁
- d屬性
- M(起始座標),L(結束座標),H(水平線),V(垂直線),A(圓弧),Z(閉合路勁)
  - C,S,Q,T 貝塞爾曲線
  - 大寫爲絕對座標(具體的座標位置)
  - 小寫爲相對座標(相對起始座標點的具體長度)
- A命令
  - x半徑 y半徑角度弧長(0 小弧 1大弧) 方向(0逆時針 1順時針)
  - 終點(x y)
C命令：三次貝塞爾曲線
- (x1,y1,x2,y2,x,y) x1,y1 控制點一 x2,y2 控制點二 x,y 結束點
S命令：平滑貝塞爾曲線(自動對稱一個控制點)
- (x2,y2,x,y) x2,y2控制點 x,y結束點
Q命令：二次貝塞爾曲線
- (x1,y1,x,y) x1,y1控制點 x,y結束點
T命令：一次貝塞爾曲線
- (x,y)結束點
g標籤:組合元素設置元素公共屬性
- 共用屬性
- transform = "translate(0,0)"
text標籤
- x, y, text-anchor(對齊start end middle) font-size
image 標籤
- x, y, width height
- xlink:href(圖片地址)

第十五課地理信息與本地存儲

地理位置

經度 : 南北極的鏈接線
緯度 : 東西鏈接的線
位置信息從何而來
- IP地址
- GPS全球定位系統
- Wi-Fi無線網絡
- 基站
avigator.geolocation
- 單次定位請求：getCurrentPosition(請求成功,請求失敗,數據收集方式)
- 請求成功函數
  - 經度 : coords.longitude
  - 緯度 : coords.latitude
  - 準確度 : coords.accuracy
  - 海拔 : coords.altitude
  - 海拔準確度 : coords.altitudeAcuracy
  - 行進方向 : coords.heading
  - 地面速度 : coords.speed
  - 請求的時間: new Date(position.timestamp)
- 請求失敗函數
  - 失敗編號：code
    - 0 : 不包括其餘錯誤編號中的錯誤
    - 1 : 用戶拒絕瀏覽器獲取位置信息
    - 2 : 嘗試獲取用戶信息，但失敗了
    - 3 : 設置了timeout值，獲取位置超時了
- 數據收集 : json的形式
  - enableHighAcuracy : 更精確的查找，默認false
  - timeout : 獲取位置容許最長時間，默認infinity
  - maximumAge : 位置能夠緩存的最大時間，默認0
- 屢次定位請求* : watchPosition
  - 移動設備有用，位置改變纔會觸發
  - 配置參數：frequency 更新的頻率
  - 關閉更新請求 : clearWatch
- 百度地圖API

<script src="http://api.map.baidu.com/api?v=2.0&ak=qZfInp9MaT9Qa0PoNy4Rmx3Y9W9ZXMfw"></script>

本地存儲

Storage
- sessionStorage
  - session臨時回話，從頁面打開到頁面關閉的時間段
  - 窗口的臨時存儲，頁面關閉，本地存儲消失
- localStorage
  - 永久存儲（能夠手動刪除數據）
Storage的特色
- 存儲量限制 ( 5M )
- 客戶端完成，不會請求服務器處理
- sessionStorage數據是不共享、 localStorage共享
Storage API
- setItem():
  - 設置數據，(key,value)類型，類型都是字符串
  - 能夠用獲取屬性的形式操做
- getItem():
  - 獲取數據，經過key來獲取到相應的value
- removeItem():
  - 刪除數據，經過key來刪除相應的value
- clear():
  - 刪除所有存儲的值
存儲事件:
- 當數據有修改或刪除的狀況下，就會觸發storage事件
- 在對數據進行改變的窗口對象上是不會觸發的`
- Key : 修改或刪除的key值，若是調用clear(),key爲null
- newValue : 新設置的值，若是調用removeStorage(),key爲null
- oldValue : 調用改變前的value值
- storageArea : 當前的storage對象
- url : 觸發該腳本變化的文檔的url
- 注：session同學口才能夠,例子：iframe操做

第十六課 HTML5新增JS方法

新增選擇器
- document.querySelector() 選擇單個元素
- document.querySelectorAll() 選擇全部的
- document.getElementsByClassName() 經過類名選擇
延遲加載JS
- JS的加載會影響後面的內容加載
  - 不少瀏覽器都採用了並行加載JS，但仍是會影響其餘內容
- Html5的defer和async
  - defer=「defer 」: 延遲加載，會按順序執行，在onload執行前被觸發
  - async =「async」: 異步加載，加載完就觸發，有順序問題
- 瀏覽器兼容性：Labjs庫
獲取class列表屬性
- classList
  - length : class的長度
  - add() : 添加class方法
  - remove() : 刪除class方法
  - toggle() : 切換class方法
  - contains() : 判斷類名是否存在返回bool值
JSON的新方法
- parse() : 把字符串轉成json
  - 字符串中的屬性要嚴格的加上引號
- stringify() : 把json轉化成字符串
  - 會自動的把雙引號加上
- 與eval的區別
  - eval()：對任何的字符串進行解析變成js
  - parse()：字符串中的屬性要嚴格的加上引號
- 其餘瀏覽器兼容
  - 去下載json2.js
歷史管理
- onhashchange ：改變hash值來管理
- history ：
  - 服務器下運行
    - pushState : 三個參數：數據標題(都沒實現) 地址(可選)
    - onpopstate事件 : 讀取數據 event.state

第十七課 HTML5拖拽事件

圖片自帶拖拽功能
其餘元素可設置draggable屬性
draggable ：true
- 拖拽元素(被拖拽元素對象)事件 :
  - ondragstart : 拖拽前觸發
  - ondrag :拖拽前、拖拽結束之間，連續觸發
  - ondragend :拖拽結束觸發
- 目標元素(拖拽元素被拖到的對象)事件 :
  - ondragenter :進入目標元素觸發
  - ondragover :進入目標、離開目標之間，連續觸發
  - ondragleave :離開目標元素觸發
  - ondrop :在目標元素上釋放鼠標觸發
    - 須要在ondragover事件裏面阻止默認事件
拖拽兼容問題
- 火狐瀏覽器下需設置dataTransfer對象才能夠拖拽除圖片外的其餘標籤
  - dataTransfer對象
  - setData() : 設置數據 key和value(必須是字符串)
  - getData() : 獲取數據，根據key值，獲取對應的value
  - effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
  - setDragImage ：三個參數（指定的元素，座標X，座標Y）
  - files：獲取外部拖拽的文件，返回一個filesList列表
    - filesList下有個type屬性，返回文件的類型
讀取文件信息
- FileReader(讀取文件信息)
  - readAsDataURL
- 參數爲要讀取的文件對象
  - onload當讀取文件成功完成的時候觸發此事件
  - this. result 獲取讀取的文件數據

第十八課跨文檔操做

跨文檔請求
同域跨文檔
- iframe內頁：
  - 父頁面操做子頁面：contentWindow
  - 子頁面操做父頁面：window.top(找到最頂級的父頁面)/parent(第一父頁面)
  - 新窗口頁：
    - 父頁面操做子頁面：window.open
    - 子頁面操做父頁面：window.opener
不一樣域跨文檔
- postMessage（「發送的數據」,」接收的域」）
  - message事件監聽
  - ev.origin 發送數據來源的域
  - ev.data 發送的數據
- 經過判斷髮送的數據來執行相應的需求
ajax跨域
- XMLHttpRequest 新增功能
- - 跨域請求：修改服務端頭信息
進度事件：
- upload.onprogress(ev) 上傳進度(實現文件上傳進度條)
  - ev.total 發送文件的總量
  - ev.loaded 已發送的量
- FormData 構建提交二進制數據