HTML5+CSS3整體回顧

轉(zhuǎn)載請聲明 原文鏈接

關注公眾號獲取更多資訊

這篇文章主要總結(jié)H5的一些新增的功能以及一些基礎歸納或南，這里只是一個提綱，并不是很詳細寥闪，后面會一直完善補充新的內(nèi)容敬飒，本文是一些筆記記錄，放在這里供自己參考也供他人學習硫豆！

HTML5概覽

第一課 HTML5結(jié)構(gòu)

  • HTML5 是新一代的 HTML
  • DTD聲明改變 <!DOCTYPE html>
    • 新的結(jié)構(gòu)標簽
    • 注意的地方
      • ie8 不兼容
一些總結(jié)--from-dunitian
常用的一些新的結(jié)構(gòu)標簽
結(jié)構(gòu)標簽
多媒體交互標簽
特殊樣式標簽
兼容性不是很好的標簽
  • 補充說明
    • small 這個元素表示邊欄評論龙巨，如附屬細則
    • cite這個元素可用于顯示作品標題（圖書、電影熊响、詩歌等）
    • adress這個元素顯示article或整個文檔的合同信息旨别，且位于footer這個元素之中
    • time顯示人和機器可讀的日期和時間，而且機器可讀的時間戳是屬性datetime的值第二個可選的是pubtime用于表示出版日期值
刪除的HTML標簽

  • 純表現(xiàn)的元素：

    • basefont
    • big
    • center
    • font
    • s
    • strike
    • tt
    • u

  • 對可用性產(chǎn)生負面影響的元素：

    • frame
    • frameset
    • noframes
    • 產(chǎn)生混淆的元素：
      • acronym
      • applet
      • isindex
      • dir

  • 重新定義的HTML標簽

    • <b> 代表內(nèi)聯(lián)文本汗茄，通常是粗體秸弛，沒有傳遞表示重要的意思
    • <i> 代表內(nèi)聯(lián)文本，通常是斜體洪碳，沒有傳遞表示重要的意思
    • <dd> 可以同details與figure一同使用递览，定義包含文本，ialog也可用
    • <dt> 可以同details與figure一同使用瞳腌，匯總細節(jié)绞铃，dialog也可用
    • <hr>表示主題結(jié)束，而不是水平線嫂侍，雖然顯示相同
    • <menu> 重新定義用戶界面的菜單儿捧，配合commond或者menuitem使用
    • <small> 表示小字體，例如打印注釋或者法律條款
    • <strong> 表示重要性而不是強調(diào)符號

  • 嶄新新的頁面布局

傳統(tǒng)的布局
HTML5標簽布局
實例-from-dunitian
草圖--from-dunitian

第二課 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" 顯示完整日期 含時區(qū)
    • type="datetime-local" 顯示完整日期 不含時區(qū)
    • type="time" 限制用戶輸入必須為時間類型
    • type="month" 限制用戶輸入必須為月類型
    • type="week" 限制用戶輸入必須為周類型
    • type="number" 限制用戶輸入必須為數(shù)字類型
    • 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內(nèi)容不能為空
  • placeholder: 表單提示信息
  • autofocus:自動聚焦
  • pattern: 正則表達式 輸入的內(nèi)容必須匹配到指定正則范圍
  • 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屬性快速一覽
css3屬性快速一覽

  • CSS3發(fā)展史簡介

    • HTML的誕生 20世紀90年代初
    • 1996年底鞭缭， CSS第一版誕生
    • 1998年5月 CSS2正式發(fā)布
    • 2004年 CSS2.1發(fā)布
    • CSS3的發(fā)布 2002 2003 2004 2005 2007 2009 2010

  • 模塊化開發(fā)

    • CSS1 中定義了網(wǎng)頁的基本屬性：
      • 字體剖膳、顏色、基本選擇器等
    • CSS2中在CSS1的基礎上添加了高級功能
      • 浮動和定位岭辣、高級選擇器等(子選擇器吱晒、相鄰選擇器、通用選擇器)
    • CSS3遵循的是模塊化開發(fā)沦童。發(fā)布時間并不是一個時間點仑濒，而是一個時間段

  • CSS選擇器復習

    • 通用選擇器：* 選擇到所有的元素
    • 選擇子元素：> 選擇到元素的直接后代
    • 相鄰兄弟選擇器：+選擇到緊隨目標元素后的第一個元素
    • 普通兄弟選擇器：~選擇到緊隨其后的所有兄弟元素
    • 偽元素選擇器：
      • ::first-line 匹配文本塊的首行
      • ::first-letter 選擇文本塊的首字母
    • 偽類選擇器：
      • :before,:after在元素內(nèi)容前面、后面添加內(nèi)容(相當于行內(nèi)元素)
  • CSS3結(jié)構(gòu)選擇器
CSS3結(jié)構(gòu)選擇器
  • Css3 屬性選擇器
Css3屬性選擇器

  • CSS3偽類選擇器

    • UI偽類選擇器：

      • :enabled選擇啟用狀態(tài)元素
      • :disabled 選擇禁用狀態(tài)元素
      • :checked選擇被選中的input元素（單選按鈕或復選框）
      • :default 選擇默認元素
      • :valid偷遗、invalid 根據(jù)輸入驗證選擇有效或無效的input元素
      • :in-range墩瞳、out-of-range選擇指定范圍之內(nèi)或者之外受限的元素
      • :required、optional根據(jù)是否允許:required屬性選擇input元素

    • 動態(tài)偽類選擇器：

      • :link選擇鏈接元素
      • :visited 選擇用戶以訪問的元素
      • :hover 鼠標懸停其上的元素
      • :active鼠標點擊時觸發(fā)的事件
      • :focus 當前獲取焦點的元素

    • 其他偽類選擇器：

      • :not(<選擇器>)對括號內(nèi)選擇器的選擇取反
      • :lang(<目標語言>) 基于lang全局屬性的元素
      • :target url片段標識符指向的元素
        • :empty選擇內(nèi)容為空的元素
      • :selection鼠標光標選擇元素內(nèi)容

第四課 CSS3新增文本屬性

  • CSS文本屬性復習

    • white-space：對象內(nèi)空格的處理方式

      • nowrap 控制文本不換行

      • pre 空白會被瀏覽器保留

      • pre-line 合并空白 保留換行符

      • pre-wrap 保留空白 正常換行

    • direction：文本流的方向

      • ltr 文本從左向右
      • rtl 文本從右往左

    • unicode-bidi：用于同一個頁面里存在從不同方向讀進的文本顯示氏豌。與direction屬性一起使用

  • CSS3新增文本屬性

    • color:rgba();
    • text-overflow:是否使用一個省略標記（...）標示對象內(nèi)文本的溢出
    • text-align:文本的對齊方式
    • text-transform:文字的大小寫
    • text-decoration:文本的裝飾線喉酌，復合屬性
    • text-shadow:文本陰影
    • text-fill-color:文字填充顏色
    • text-stroke:復合屬性。設置文字的描邊
    • tab-size:制表符的長度
    • word-wrap:當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行
    • word-break:規(guī)定自動換行的處理方法

  • text-overflow:是否使用一個省略標記（...）標示對象內(nèi)文本的溢出

    • clip： 默認值 無省略號
    • ellipsis：當對象內(nèi)文本溢出時顯示省略標記（...）泵喘。
    • 注意：該屬性需配合over-flow:hidden屬性(超出處理)還有 white-space:nowrap(禁止換行)配合使用瞭吃，否則無法看到效果

  • text-align:文本的對齊方式

    • css1
    • left:默認值 左對齊
    • right:右對齊
    • center:居中
    • justify： 內(nèi)容兩端對齊。
    • css3
    • start:開始邊界對齊
    • end:結(jié)束邊界對齊

  • text-transform:文字的大小寫

    • css1
      • none： 默認值 無轉(zhuǎn)換
      • capitalize： 將每個單詞的第一個字母轉(zhuǎn)換成大寫
      • uppercase： 轉(zhuǎn)換成大寫
      • lowercase： 轉(zhuǎn)換成小寫
    • css3
      • full-width： 將左右字符設為全角形式涣旨。不支持
      • full-size-kana：將所有小假名字符轉(zhuǎn)換為普通假名歪架。不支持
        • 例如：土耳其語

  • 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鍵的空格字節(jié)長度)，在 pre標簽之內(nèi)才會有顯示

  • word-wrap:當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行

    • normal： 默認值
    • 允許內(nèi)容頂開或溢出指定的容器邊界浆洗。

  • break-word：

    • 內(nèi)容將在邊界內(nèi)換行催束。如果需要，單詞內(nèi)部允許斷行

第五課 CSS3盒模型

  • CSS盒模型復習
標準盒子模型
IE盒子模型

  • CSS3彈性盒模型

    • 以下6個屬性設置在容器上

      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content

    • 屬性詳解

      • flex-direction: row | row-reverse | column | column-reverse;
      • flex-wrap: nowrap | wrap | wrap-reverse;
      • flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式伏社，默認值為row nowrap
        • flex-flow: <flex-direction> || <flex-wrap>;
      • justify-content屬性定義了項目在主軸上的對齊方式抠刺。
        • justify-content: flex-start | flex-end | center | space-between | space-around;
      • align-items屬性定義項目在交叉軸上如何對齊塔淤。
        • align-items: flex-start | flex-end | center | baseline | stretch;
      • align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線速妖，該屬性不起作用高蜂。
        • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    • 以下6個屬性設置在項目上

      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex
      • align-self

  • 屬性詳解

    • order屬性定義項目的排列順序。數(shù)值越小罕容，排列越靠前备恤，默認為0
    • flex-grow屬性定義項目的放大比例，默認為0锦秒，即如果存在剩余空間露泊，也不放大。
    • flex-shrink屬性定義了項目的縮小比例旅择，默認為1滤淳，即如果空間不足，該項目將縮小砌左。
    • flex-basis屬性定義了在分配多余空間之前脖咐，項目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個屬性汇歹，計算主軸是否有多余空間屁擅。它的默認值為auto，即項目的本來大小产弹。
    • flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫派歌，默認值為0 1 auto。后兩個屬性可選痰哨。
    • align-self屬性允許單個項目有與其他項目不一樣的對齊方式胶果，可覆蓋align-items屬性。默認值為auto斤斧，表示繼承父元素的align-items屬性早抠，如果沒有父元素，則等同于stretch撬讽。
      • align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex布局語法篇小結(jié)

第六課 css3新增背景屬性

  • CSS背景屬性復習

    • background:
      • background-color:背景顏色
      • background-image:背景圖片
      • background-repeat:背景重復
      • background-position:背景定位
      • background-attachment:背景固定(scroll/fixed)

  • CSS3新增背景屬性

  • background-size 背景尺寸

    • background-size:x y 水平 垂直方向的尺寸蕊连，像素/百分比/auto/…
    • background-size:100% 100%
    • background-size:cover 比例放大
    • background-size:contain 包含（圖片不溢出）

  • 多背景

    • background-image:url(1.jpg),url(2.jpg);

  • background-origin 背景區(qū)域定位

    • border-box： 從border區(qū)域開始顯示背景。
    • padding-box： 從padding區(qū)域開始顯示背景游昼。
    • content-box： 從content內(nèi)容區(qū)域開始顯示背

  • background-clip 背景繪制區(qū)域

    • border-box： 從border區(qū)域向外裁剪背景甘苍。
    • padding-box： 從padding區(qū)域向外裁剪背景。
    • content-box： 從content區(qū)域向外裁剪背景烘豌。

  • text:背景填充文本

    • no-clip： 從border區(qū)域向外裁剪背景

  • 顏色漸變

    • 線性漸變：linear-gradient(起點/角度载庭，顏色 位置，...,)

      • 起點：left/top/right/bottom/left top......默認top

      • 角度：逆時針方向 0-360度

      • 顏色 位置：red 50%, blue 100%(紅色從50%漸變到100%為藍色)

      • repeating-linear-gradient 線性漸變重復平鋪

        • IE低版本漸變(濾鏡)：
        • filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');

    • 徑向漸變：radial-gradient(起點(圓心位置), 形狀/半徑/大小，顏色1囚聚，顏色2)

      • 起點：left/top/right/bottom或具體值/百分比
      • 形狀：ellipse(橢圓)靖榕、circle(正圓)
      • 大小：具體數(shù)值或百分比靡挥，也可以是關鍵字（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(色調(diào))序矩。

      • 0(或360)表示紅色鸯绿，120表示綠色跋破，240表示藍色，也可取其他數(shù)值來指定顏色瓶蝴。取值為：0 - 360

    • S：Saturation(飽和度)毒返。取值為：0.0% - 100.0%

    • L： Lightness(亮度)。取值為：0.0% - 100.0%

    • A: alpha 透明度 0~1之間

    • 語法:HSLA(H,S,L,A)

  • HSL色輪

HSL色輪

  • 透明顏色：transparent

    • 實例：border實現(xiàn)三角箭頭舷手、風車等

  • 透明度：

    • opacity
    • 取值：0-1之間
    • 注：低版本的IE瀏覽器不兼容,需用IE瀏覽器的濾鏡實現(xiàn)相同效果拧簸，filter:alpha(opacity=50)
    • 對于低版本的火狐瀏覽器需添加內(nèi)核前綴，-moz-opacity

第八課 CSS3邊框系列

圓角-陰影

  • 邊框圓角

    • 在CSS2中添加圓角矩形需要技巧男窟。我們必須為每個圓角使用不同的圖片
    • 在 CSS3中盆赤，創(chuàng)建圓角是非常容易的
    • 在CSS3中，border-radius屬性用于創(chuàng)建圓角

  • 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) 改為內(nèi)部陰影

    • 實例：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
    • 設置或檢索對象的邊框背景圖的分割方式
Paste_Image.png
  • border-image-repeat
    • 用于指定邊框背景圖的重復方式
    • 取值：
      • stretch： 指定用拉伸方式來填充邊框背景圖咱娶。 *默認的
      • repeat： 指定用平鋪方式來填充邊框背景圖。當圖片碰到邊界時强品，如果超過則被截斷膘侮。
      • round： 指定用平鋪方式來填充邊框背景圖。圖片會根據(jù)邊框的尺寸動態(tài)調(diào)整圖片的大小 直至正好可以鋪滿整個邊框的榛。寫本文檔時僅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:規(guī)定以相同速度開始至結(jié)束的過渡效果（等于 cubic-bezier(0,0,1,1)）琼了。
    • ease:規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）雕薪。
    • ease-in:規(guī)定以慢速開始的過渡效果（等于 cubic-bezier(0.42,0,1,1)）昧诱。
    • ease-out :規(guī)定以慢速結(jié)束的過渡效果（等于 cubic-bezier(0,0,0.58,1)）。
    • ease-in-out :規(guī)定以慢速開始和結(jié)束的過渡效果（等于 cubic-bezier(0.42,0,0.58,1)）所袁。
    • cubic-bezier(n,n,n,n):在 cubic-bezier 函數(shù)中定義自己的值盏档。可能的值是 0至 1 之間的數(shù)值燥爷。

  • 過渡完成事件

    過渡完成事件

  • Webkit內(nèi)核：

obj.addEventListener('webkitTransitionEnd',function(){})
  • 標準:
obj.addEventListener('transitionend',function(){})
動畫

  • 什么是CSS3 動畫蜈亩？

    • 通過 CSS3，我們能夠創(chuàng)建動畫前翎，這可以在許多網(wǎng)頁中取代動畫圖片稚配、Flash 動畫以及 JavaScript

  • 動畫接口

屬性 描述
@keyframes 規(guī)定動畫。
animation 所有動畫屬性的簡寫屬性港华，除了 animation-play-state 屬性道川。
animation-name 規(guī)定 @keyframes 動畫的名稱。
animation-duration 規(guī)定動畫完成一個周期所花費的秒或毫秒立宜。
animation-timing-function 規(guī)定動畫的速度曲線冒萄。
animation-delay 規(guī)定動畫何時開始。
animation-iteration-count 規(guī)定動畫被播放的次數(shù)橙数。
animation-direction 規(guī)定動畫是否在下一周期逆向地播放尊流。
animation-play-state 規(guī)定動畫是否正在運行或暫停。
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)商模。
  • animation-timing-function速度曲線
值 描述
linear 動畫從頭到尾的速度是相同的奠旺。
ease 默認。動畫以低速開始施流，然后加快响疚，在結(jié)束前變慢。
ease-in 動畫以低速開始瞪醋。
ease-out 動畫以低速結(jié)束忿晕。
ease-in-out 動畫以低速開始和結(jié)束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中自己的值银受〖危可能的值是從 0 到 1 的數(shù)值。

  • 在谷歌瀏覽器里面需要加上-webkit-
    IE6,7,8,9不支持css3運動

  • 拓展閱讀

  • CSS3盒模型陰影

    • box-shadow:inset x y blur spread color
    • inset：投影方式
    • inset：內(nèi)投影
    • 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減小

  • 擴展閱讀

第十課 transform 2D轉(zhuǎn)換

  • Css3平面轉(zhuǎn)換方法
    • translate() 移動
    • rotate() 旋轉(zhuǎn)
    • scale() 縮放
    • skew() 翻轉(zhuǎn)
    • matrix() 矩陣
  • transform:
    • rotate() 旋轉(zhuǎn)函數(shù) (deg)
      • deg 度數(shù)
    • skew(X,Y) 傾斜函數(shù) (deg)
      • skewX()
      • skewY()
    • scale(X,Y) 縮放函數(shù) (正數(shù)顶霞、負數(shù)和小數(shù))
      • scaleX()
      • scaleY()
    • translate(X,Y) 位移函數(shù)(px)
      • translateX()
      • translateY()

  • rotate() 旋轉(zhuǎn)方法

    • 用于旋轉(zhuǎn)元素角度
    • 例：rotate(30deg)
      • 把元素順時針旋轉(zhuǎn) 30 度

  • translate()位置方法

    • 用于移動元素位置
      • 例：translate(50px,100px)
        • 把元素從左側(cè)移動 50 像素肄程，從頂端移動 100 像素锣吼。
    • 其實有些類似于我們的相對定位

  • scale()尺寸方法

    • 方法用于改變元素尺寸
      • 例：scale(2,4)
        • 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高度的 4 倍

  • skew() 翻轉(zhuǎn)方法

    • 通過 skew()方法蓝厌，元素翻轉(zhuǎn)給定的角度
    • 例：transform: skew(30deg,20deg);
      • 把元素圍繞 X軸把元素翻轉(zhuǎn)30 度玄叠，圍繞 Y 軸翻轉(zhuǎn) 20度

第十一課 transform 3D轉(zhuǎn)換

  • Css3立體轉(zhuǎn)換

    • transform-style（preserve-3d） 建立3D空間（指定元素的子元素展示的場景是在3D場景還是平面(投影)場景）
    • Perspective 視角（指定觀察者與z=0平面的距離，從而讓元素及子元素看起來有3D透視位置效果
      值：集體的帶單位數(shù)值）
    • Perspective- origin 視角基點
      • 值：取值類似于變換基準
    • transform-origin：坐標軸基點（變換基準）
      • 值：具體的坐標值/百分比/(left/right/center/top/bottom)
        默認 center center

  • transform 新增函數(shù)

    • rotateX()
    • rotateY()
    • rotateZ()
    • translateZ()
    • scaleZ()

第十二課 視頻音頻

  • 視頻音頻格式的簡單介紹

    • 常見的視頻格式
      • 視頻的組成部分：畫面拓提、音頻读恃、編碼格式
      • 視頻編碼：H.264、Theora代态、VP8(google開源)
    • 常見的音頻格式
      • 視頻編碼：ACC寺惫、MP3、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 播放完是否繼續(xù)播放該視頻必尼，循環(huán)播放
Preload load{auto,meta,none} 規(guī)定是否預加載視頻。
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 的瀏覽器可以看到的內(nèi)容
    • 默認寬度300px判莉，默認高度150px
    • 注意：canvas寬高需要設置在標簽中 否則繪制的東西可能出錯
  • <canvas> 繪制環(huán)境
    • getContext("2d");目前支持2d的場景
<canvas width="" height="" id="">
    您的瀏覽器不支持canvas，請更換瀏覽器育谬！
</canvas>

  • 繪制矩形

    • rect(L,T,W,H):創(chuàng)建一個矩形
    • fillRect(L,T,W,H):繪制填充的矩形
    • clearRect(x,y,w,h) 清除矩形選區(qū)
    • strokeRect(L,T,W,H)繪制空心矩形(無填充)
      • 默認一像素黑色邊框

  • 設置繪圖樣式

    • fillStyle:填充顏色(繪制canvas是有順序的)
    • lineWidth:觸筆寬度(線寬)
    • strokeStyle:觸筆顏色

  • 繪制路徑

    • beginPath() :開始路徑
    • closePath():結(jié)束路徑
    • moveTo(x,y):將觸筆移動到x,y點
    • lineTo(x,y):繪制到x,y點
    • stroke(): 觸筆方法 畫線 默認為黑色
    • fill():填充方法
    • rect(x,y,w,h):矩形路徑
    • save():保存繪圖信息 并新開辟一個異次元空間
    • restore():恢復路徑

  • 繪制曲線

    • arcTo(x1,y1,x2,y2,r)
      • x1,y1 坐標一 x2,y2坐標二 r圓弧半斤
    • quadraticCurveTo(dx,dy,x1,y1)
      • 貝塞爾曲線:dx,dy控制點 x1,y1結(jié)束坐標
    • bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
      • 貝塞爾曲線:dx1,dy1 控制點一 dx2,dy2控制點二
      • x1,y1結(jié)束坐標

  • 繪制圓形

    • arc(x,y,半徑,起始弧度,結(jié)束弧度,旋轉(zhuǎn)方向)
      • x券盅，y起始位置
      • 弧度與角度：弧度=角度值*Math.PI/180
      • 旋轉(zhuǎn)方向：順時針（默認：false），逆時針（true）

  • 繪制文本

    • strokeText(文本,x,y); 繪制空心文本
    • fillText(文本,x,y); 繪制實心文本
    • font = "font-size font-family"注:尺寸 字體缺一不可
      • textAlign = "";文本左右對齊方式 start center end left right
      • textBaseline文本上下對齊方式
        • alphabetic默認膛檀。文本基線是普通的字母基線锰镀。
        • top 文本基線是 em 方框的頂端。咖刃。
        • hanging 文本基線是懸掛基線泳炉。
        • middle 文本基線是em 方框的正中。
        • ideographic 文本基線是表意基線嚎杨。
        • bottom 文本基線是 em 方框的底端花鹅。
        • measureText(文本).width; 文本實際寬度(只有寬度值)

  • 圖形邊界樣式

    • lineJoin: 邊界連接點樣式
      • miter(默認值),round(圓角),bevel(斜角)
    • lineCap: 端點樣式
      • butt(默認值),round(圓角),square(高度多出線寬一半)

  • 繪制圖片

    • 圖片預加載，獲取圖片文件

      • onload中調(diào)用
      • drawImage(img,x,y,w,h);繪制圖片(圖片,坐標x,坐標y,寬度,高度)

    • 設置背景

      • createPattern(img,平鋪方式)
      • 平鋪方式:repeat,repeat-x,repeat-y,no-repeat

  • canvas變換

    • translate(x,y)
    • 坐標基準點偏移 : 從起始點為基準枫浙，移動到當前位置
    • rotate(弧度): 旋轉(zhuǎn) 弧度公式 = 角度*PI/180
    • scale(wb,hb)縮放比例(縮放canvas繪制的圖片)

  • 顏色漸變

    • 線性漸變:createLinearGradient(x1,y1,x2,y2)
      • x1,y1起始坐標點
      • x2,y2結(jié)束坐標點
    • 徑向漸變:createRadialGradient(x1,y1,r1,x2,y2,r2)
      • x1,y1,r1內(nèi)圓坐標及半徑
      • x2,y2,r2外圓坐標及半徑
      • addColorStop(位置,顏色) 位置:漸變點 0-1之間 可多個

  • 陰影

    • shadowOffsetX,shadowOffsetY x軸刨肃、y軸偏移
    • shadowBlur 陰影模糊度
    • shadowColor 陰影顏色 默認顏色:rgba(0,0,0,0)

  • 像素

    • createImageData(sx,sy) 創(chuàng)建新的、空白的 ImageData 對象
    • getImageData(x1,y1,sx,sy)
      • 返回ImageData對象箩帚，該對象為畫布上指定的矩形復制像素數(shù)據(jù)putImageData(img,x2,y2)
      • 把圖像數(shù)據(jù)（從指定的 ImageData 對象）放回畫布上

  • 合成

    • globalAlpha 設置或返回繪圖的當前alpha或透明值
    • globalCompositeOperation 設置或返回新圖像如何繪制到已有的圖像上
    • source-over默認真友。在目標圖像上顯示源圖像。
    • source-atop在目標圖像頂部顯示源圖像紧帕。源圖像位于目標圖像之外的部分是不可見的盔然。
    • source-in 在目標圖像中顯示源圖像。只有目標圖像內(nèi)的源圖像部分會顯示，目標圖像是透明的轻纪。
    • source-out在目標圖像之外顯示源圖像油额。只會顯示目標圖像之外源圖像部分，目標圖像是透明的刻帚。
    • destination-over在源圖像上方顯示目標圖像潦嘶。
    • destination-atop在源圖像頂部顯示目標圖像。源圖像之外的目標圖像部分不會被顯示崇众。
    • destination-in在源圖像中顯示目標圖像掂僵。只有源圖像內(nèi)的目標圖像部分會被顯示，源圖像是透明的顷歌。
    • destination-out在源圖像外顯示目標圖像锰蓬。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的眯漩。
    • lighter顯示源圖像 + 目標圖像芹扭。
    • copy顯示源圖像。忽略目標圖像赦抖。
    • xor使用異或操作對源圖像與目標圖像進行組合舱卡。

第十四課 SVG繪圖

  • svg是什么

    • 矢量圖
    • 與canvas的區(qū)別

  • 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(結(jié)束坐標),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結(jié)束點

  • S命令：平滑貝塞爾曲線(自動對稱一個控制點)

    • (x2,y2,x,y) x2,y2控制點 x,y結(jié)束點

  • Q命令：二次貝塞爾曲線

    • (x1,y1,x,y) x1,y1控制點 x,y結(jié)束點

  • T命令：一次貝塞爾曲線

    • (x,y)結(jié)束點

  • g標簽:組合元素 設置元素公共屬性

    • 共用屬性
    • transform = "translate(0,0)"

  • text標簽

    • x, y, text-anchor(對齊start end middle) font-size

  • image 標簽

    • x, y, width height
    • xlink:href(圖片地址)

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

地理位置

  • 經(jīng)度 : 南北極的連接線

  • 緯度 : 東西連接的線

  • 位置信息從何而來

    • IP地址
    • GPS全球定位系統(tǒng)
    • Wi-Fi無線網(wǎng)絡
    • 基站

  • avigator.geolocation

    • 單次定位請求 ：getCurrentPosition(請求成功,請求失敗,數(shù)據(jù)收集方式)

    • 請求成功函數(shù)

      • 經(jīng)度 : coords.longitude
      • 緯度 : coords.latitude
      • 準確度 : coords.accuracy
      • 海拔 : coords.altitude
      • 海拔準確度 : coords.altitudeAcuracy
      • 行進方向 : coords.heading
      • 地面速度 : coords.speed
      • 請求的時間: new Date(position.timestamp)

    • 請求失敗函數(shù)

      • 失敗編號 ：code
        • 0 : 不包括其他錯誤編號中的錯誤
        • 1 : 用戶拒絕瀏覽器獲取位置信息
        • 2 : 嘗試獲取用戶信息轮锥，但失敗了
        • 3 : 設置了timeout值，獲取位置超時了

    • 數(shù)據(jù)收集 : json的形式

      • enableHighAcuracy : 更精確的查找要尔，默認false
      • timeout : 獲取位置允許最長時間舍杜，默認infinity
      • maximumAge : 位置可以緩存的最大時間，默認0

    • 多次定位請求* : watchPosition

      • 移動設備有用赵辕，位置改變才會觸發(fā)
      • 配置參數(shù)：frequency 更新的頻率
      • 關閉更新請求 : clearWatch
  • examp01 getCurrentPosition
<button id="btn">請求位置信息</button>
<div id="box"></div>

var btn = document.getElementById("btn");
var box = document.getElementById("box");
        
btn.onclick = function(){
            navigator.geolocation.getCurrentPosition(function(position){
                box.innerHTML +="經(jīng)度："+position.coords.longitude + "<br>";
                box.innerHTML +="緯度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的準確度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行進方向"+position.coords.heading + "<br>";
                box.innerHTML +="請求時間"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精確請求
                timeout:5000,//設置超時
                maximumAge:1000//緩存時間
            });
        }

在線演示

  • **examp02 **
var btn = document.getElementById("btn");
var box = document.getElementById("box");
        
btn.onclick = function(){
            navigator.geolocation.watchPosition(function(position){
                box.innerHTML +="經(jīng)度："+position.coords.longitude + "<br>";
                box.innerHTML +="緯度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的準確度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行進方向"+position.coords.heading + "<br>";
                box.innerHTML +="請求時間"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精確請求
                timeout:5000,//設置超時
                maximumAge:1000//緩存時間
            });
        }

在線演示

  • example03 高德地圖應用
#container {
    width:600px; 
    height: 300px;
    margin:40px auto;
    border:1px solid red;
} 

<div id="container"></div>  
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var map = new AMap.Map('container');

在線演示

  • examp04 搜索城市
#container {width:500px; height:500px; margin:100px auto;}  
.menu{
    width:100px;
    box-shadow: 0 0 5px #000;
    margin:auto;
    background:#fff;
}
.menu ul li{
    list-style:none;
    line-height:30px;
    text-align:center;
    cursor:pointer;
}
#box{
    width:400px;
    height:40px;
    position:absolute;
    top:150px;
    left:50%;
    margin-left:-200px;
    background:#fff;
    box-shadow:0 0 10px #000;
}
input{
    height:38px;
    width:300px;
    border:none;
    outline:none;
}
#btn{
    width:80px;
}

<div id="container"></div> 
<div id="box">
    <input type="text" id="city" placeholder="請輸入城市...">
    <input type="button" value="搜索" id="btn">
</div>
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var btn = document.getElementById("btn");
var city = document.getElementById("city");
var map = new AMap.Map('container');
var toolBar,mouseTool,contextMenu;
//在地圖中添加操作toolBar插件既绩、mouseTool插件
map.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){
    toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
    mouseTool = new AMap.MouseTool(map);
});
var menuContext = document.createElement("div");
menuContext.innerHTML = "<div class=menu><ul><li onclick='zoomMenu(0)'>縮小</li>
<li onclick='zoomMenu(1)'>放大</li>
<li onclick='distanceMeasureMenu()'>距離量測</li>
<li onclick = 'addMarkerMenu()'>添加標記</li></ul></div>";
//創(chuàng)建一個自定義的右鍵菜單
contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContext});
//給地圖綁鼠標右鍵功能彈出右鍵菜單
AMap.event.addListener(map,"rightclick",function(e){
    contextMenu.open(map,e.lnglat);//e.lnglat鼠標點擊的經(jīng)緯度
    contextMenuPosition = e.lnglat;
})
//右鍵菜單縮放地圖
function zoomMenu(n){
    if(n === 0){map.zoomOut();}
    if(n === 1){map.zoomIn();}
    contextMenu.close();
}
contextMenu.close();
//測量距離功能
function distanceMeasureMenu(){
    mouseTool.rule();
    contextMenu.close();
}
//添加標注功能
function addMarkerMenu(){
    mouseTool.close();
    var marker = new AMap.Marker({
        map: map,
        position: contextMenuPosition, //基點位置
        offset: {x:-5,y:-10} //相對于基點位置
    });
    contextMenu.close();
}
//搜索城市
btn.onclick = function(){
    var val = city.value;
    map.setCity(val);
}

在線演示

本地存儲

  • Storage

    • sessionStorage
      • session臨時回話，從頁面打開到頁面關閉的時間段
      • 窗口的臨時存儲匆帚，頁面關閉熬词，本地存儲消失
    • localStorage
      • 永久存儲（可以手動刪除數(shù)據(jù)）

  • Storage的特點

    • 存儲量限制 ( 5M )
    • 客戶端完成，不會請求服務器處理
    • sessionStorage數(shù)據(jù)是不共享吸重、 localStorage共享

  • Storage API

    • setItem():
      • 設置數(shù)據(jù)互拾，(key,value)類型，類型都是字符串
      • 可以用獲取屬性的形式操作
    • getItem():
      • 獲取數(shù)據(jù)嚎幸，通過key來獲取到相應的value
    • removeItem():
      • 刪除數(shù)據(jù)颜矿，通過key來刪除相應的value
    • clear():
      • 刪除全部存儲的值

  • 存儲事件:

    • 當數(shù)據(jù)有修改或刪除的情況下，就會觸發(fā)storage事件
    • 在對數(shù)據(jù)進行改變的窗口對象上是不會觸發(fā)的`
    • Key : 修改或刪除的key值嫉晶，如果調(diào)用clear(),key為null
    • newValue : 新設置的值骑疆，如果調(diào)用removeStorage(),key為null
    • oldValue : 調(diào)用改變前的value值
    • storageArea : 當前的storage對象
    • url : 觸發(fā)該腳本變化的文檔的url
    • 注：session同窗口才可以,例子：iframe操作

第十六課 HTML5新增JS方法

H5在JavaScript中新增的方法一覽

  • 新增選擇器

    • document.querySelector() 選擇單個元素
    • document.querySelectorAll() 選擇所有的
    • document.getElementsByClassName() 通過類名選擇

  • 延遲加載JS

    • JS的加載會影響后面的內(nèi)容加載
      • 很多瀏覽器都采用了并行加載JS田篇，但還是會影響其他內(nèi)容
    • Html5的defer和async
      • defer=“defer ”: 延遲加載，會按順序執(zhí)行箍铭，在onload執(zhí)行前被觸發(fā)
      • async =“async”: 異步加載泊柬，加載完就觸發(fā)，有順序問題
    • 瀏覽器兼容性：Labjs庫
/**
* 動態(tài)加載script文件 （推薦方法） 只需請求一次 可加載多個JavaScript文件诈火，減少請求次數(shù)以及頁面的加載阻塞
*/
function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//IE
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                onreadystatechange = null;
                callback();
            }
        }
        
    }else {
        script.onload = function(){
            callback();
        }
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("js/defer.js",function(){
    console.log("加載成功");
      //  加載成功回調(diào)
});
loadScript("js/async.js",function(){
    console.log("加載成功");
   //  加載成功回調(diào)
});

  • 獲取class列表屬性

    • classList
      • length : class的長度
      • add() : 添加class方法
      • remove() : 刪除class方法
      • toggle() : 切換class方法
      • contains() : 判斷類名是否存在返回bool值

  • JSON的新方法

    • parse() : 把字符串轉(zhuǎn)成json

      • 字符串中的屬性要嚴格的加上引號

    • stringify() : 把json轉(zhuǎn)化成字符串

      • 會自動的把雙引號加上

    • 與eval的區(qū)別

      • eval()：對任何的字符串進行解析變成js
      • parse()：字符串中的屬性要嚴格的加上引號

    • 其他瀏覽器兼容

  • 歷史管理

    • onhashchange ：改變hash值來管理
    • history ：
      • 服務器下運行
        • pushState : 三個參數(shù) ：數(shù)據(jù) 標題(都沒實現(xiàn)) 地址(可選)
        • onpopstate事件 : 讀取數(shù)據(jù) event.state

第十七課 HTML5拖拽事件

  • 圖片自帶拖拽功能

  • 其他元素可設置draggable屬性

  • draggable ：true

    • 拖拽元素(被拖拽元素對象)事件 :
      • ondragstart : 拖拽前觸發(fā)
      • ondrag :拖拽前逊谋、拖拽結(jié)束之間桂躏，連續(xù)觸發(fā)
      • ondragend :拖拽結(jié)束觸發(fā)
    • 目標元素(拖拽元素被拖到的對象)事件 :
      • ondragenter :進入目標元素觸發(fā)
      • ondragover:進入目標、離開目標之間喉刘，連續(xù)觸發(fā)
      • ondragleave :離開目標元素觸發(fā)
      • ondrop :在目標元素上釋放鼠標觸發(fā)
        • 需要在ondragover事件里面阻止默認事件

  • 拖拽兼容問題

    • 火狐瀏覽器下需設置dataTransfer對象才可以拖拽除圖片外的其他標簽

      • dataTransfer對象

      • setData() : 設置數(shù)據(jù) key和value(必須是字符串)

      • getData() : 獲取數(shù)據(jù)抄腔，根據(jù)key值科阎，獲取對應的value

      • effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove,move, all 和uninitialized)

      • setDragImage ：三個參數(shù)（指定的元素碗淌，坐標X掩完，坐標Y）

      • files： 獲取外部拖拽的文件，返回一個filesList列表

        • filesList下有個type屬性充活，返回文件的類型

  • 讀取文件信息

    • FileReader(讀取文件信息)
      • readAsDataURL
    • 參數(shù)為要讀取的文件對象
      • onload當讀取文件成功完成的時候觸發(fā)此事件
      • this. result 獲取讀取的文件數(shù)據(jù)

  • examp01 拖拽案例

<div id="drap" draggable="true"></div>
<div id="box"></div>

#drap {
    width: 100px;
    height: 100px;
    background: red;
}
#box {
    width: 500px;
    height: 500px;
    border: 2px solid blue;
    margin: 50px auto;
}

//被拖拽元素事件
drap.ondragstart = function(ev){ // 拖拽前
    var ev = ev || window.event;

    //火狐瀏覽器下需設置dataTransfer對象才可以拖拽除圖片外的其他標簽
    ev.dataTransfer.setData("key","poetries");

    //effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove,move, all 和uninitialized)
    ev.dataTransfer.effectAllowed = "copy";

    //設置被拖拽的小元素 setDragImage ：三個參數(shù)（指定的元素蜂莉，坐標X，坐標Y）
    ev.dataTransfer.setDragImage(pic,25,25);

    this.style.background = "green";
}

drap.ondrag = function(){ // 拖拽過程中
    this.innerText = "被拖拽中...";
}

drap.ondragend = function(){ // 拖拽結(jié)束
    this.style.background = "red";
    this.innerHTML = "";
}

//目標元素事件
box.ondragenter = function(){ //進入目標元素觸發(fā)
    this.innerHTML = "可將文件拖放到這里!";
}
box.ondragover = function(ev){ //進入目標堪唐、離開目標之間巡语，連續(xù)觸發(fā)
    var ev = ev || window.event;
    ev.preventDefault(); 
    this.style.background = "pink";
}
box.ondragleave = function(){ //離開目標元素觸發(fā)
    this.innerHTML = "";
    this.style.background = "none";
}
box.ondrop = function(ev){//在目標元素上釋放鼠標觸發(fā)
    //alert("拖放結(jié)束")
    this.innerHTML = ev.dataTransfer.getData("key");
}

在線演示

  • example02 拖拽相冊
<h1>請拖拽圖片到紅框中</h1>
<div id="box"><span>可以將文件拖放到這里ｔ岬浮淮菠！</span></div>
<div id="dustbin">垃圾回收站</div>

#box{
    position:relative;
    width:500px;
    height:500px;
    border:2px solid red;
    margin:100px auto 0px;
    
}
#box span{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    height:50px;
    width:192px;
    margin:auto;
    display:none;
}
img{
    width:100px;height:100px;
}
#dustbin{
    width:200px;
    height:100px;
    background:#000;
    color:#fff;
    font-size:40px;
    text-align:center;
    line-height:100px;
    margin:auto;
}

var box = document.getElementById("box");
var dusTbin = document.getElementById("dustbin");
var span = box.getElementsByTagName("span")[0];
//目標元素事件
var img = '';
box.ondragenter = function(){//進入目標元素觸發(fā)
    span.style.display = "block";
}
box.ondragover = function(ev){//在目標元素上連續(xù)觸發(fā)
    var ev = ev||window.event;
    ev.preventDefault();//阻止默認事件
    span.style.display = "block";
}
box.ondragleave = function(){//離開目標元素
    span.style.display = "none";
}
box.ondrop = function(ev){//在目標元素上面釋放鼠標觸發(fā)
    //alert("拖拽結(jié)束！荤堪！");
    var ev = ev||window.event;
    ev.preventDefault();//阻止默認事件
    span.style.display = "none";
    var file = ev.dataTransfer.files;
    //alert(file[0].type);
    for (var i=0; i<file.length ;i++ )
    {
        if (file[i].type.indexOf("image")!=-1)
        {
            var read = new FileReader();//新建一個讀取文件對象
            read.readAsDataURL(file[i]);//讀取文件
            read.onload = function(){//讀取文件成功之后調(diào)用什么函數(shù)
                var img = document.createElement("img");
                //alert(this.result);
                img.src = this.result;
                box.appendChild(img);
                //獲取img節(jié)點 實現(xiàn)刪除功能
                var oImg = document.getElementsByTagName("img");
                if (oImg)
                {
                    for (var j=0;j<oImg.length ;j++ )
                    {
                        oImg[j].ondragstart = function(ev){
                            ev.dataTransfer.setData("data",ev.target.innerHTML);
                            img = ev.target;
                        }
                        oImg[j].ondragend = function(ev){
                            ev.dataTransfer.clearData("data");//清楚數(shù)據(jù)
                            img = null;
                        }
                    }

                }
                //實現(xiàn)刪除功能(移除img節(jié)點)
                dusTbin.ondragover = function(ev){
                    ev.preventDefault();
                }
                dusTbin.ondrop = function(){
                    if (img)
                    {
                        img.parentNode.removeChild(img);
                    }
                }
            }
        }else{
            alert("請上傳圖片合陵！");
        }
        
    }
    
}

在線演示

  • example03 拖拽排序
<div class="wrap" id="wrap">
  <ul id="box">
    <li style="background:#f3f" draggable="true">1</li>
    <li style="background:#ff6" draggable="true">2</li>
    <li style="background:#c60" draggable="true">3</li>
    <li style="background:#903" draggable="true">4</li>
    <li style="background:#0f6" draggable="true">5</li>
    <li style="background:#636" draggable="true">6</li>
    <li style="background:#36f" draggable="true">7</li>
    <li style="background:#033" draggable="true">8</li>
  </ul>
</div>

.wrap{
  width:500px;
  height:500px;
  margin:50px auto;
}
ul li{
  list-style:none;
  width:500px;
  height:50px;
  color:#fff;
  text-align:center;
  line-height:50px;
  font-size:40px;
  font-weight:bold;
}

var oUl = document.getElementById("box");
var oLi = oUl.getElementsByTagName("li");
var curr = 0;
function sort(){
  for (var i = 0;i < oLi.length;i++) {
    oLi[i].index = i;
    oLi[i].ondragstart = function(ev){
      var ev = ev || window.event;
      ev.dataTransfer.setData("data",this.innerHTML);
      //this.innerHTML = "被拖拽中...";
      curr = this.index;
    }

    oLi[i].ondragenter = function(){
      for(var i = 0;i < oLi.length;i++){
        oLi[i].style.border = "none";
      }
      if(curr != this.index){
        this.style.border = "2px solid #000";
      }
    }
    oLi[i].ondragover = function(e){
      var e = e || window.event;
      e.preventDefault();
    }
    oLi[i].ondrop = function(ev){ //鼠標釋放的時候
      //oUl.insertBefore(oLi[curr],this);//insertBefore(新節(jié)點，目標節(jié)點)
      inserAfter(oLi[curr],this);
      this.style.border = "none";
      //oLi[curr].innerHTML = ev.DataTransfer.getData("data");
      sort();
    }
  }
}
sort();

function inserAfter(newItem,targerItem){
  var parentItem = targerItem.parentNode;
  if(parentItem.lastChild == targerItem){
    parentItem.appendChild(newItem);
  }else {
    parentItem.insertBefore(newItem,targerItem.nextSibling);
  }
}

在線演示

第十八課 跨文檔操作

  • 跨文檔請求

  • 同域跨文檔

    • iframe內(nèi)頁：
      • 父頁面操作子頁面：contentWindow
      • 子頁面操作父頁面：window.top(找到最頂級的父頁面)/parent(第一父頁面)
      • 新窗口頁：
        • 父頁面操作子頁面：window.open
        • 子頁面操作父頁面：window.opener

  • 不同域跨文檔

    • postMessage（“發(fā)送的數(shù)據(jù)”,”接收的域”）
      • message事件監(jiān)聽
      • ev.origin發(fā)送數(shù)據(jù)來源的域
      • ev.data 發(fā)送的數(shù)據(jù)
    • 通過判斷發(fā)送的數(shù)據(jù)來執(zhí)行相應的需求

  • ajax跨域

    • XMLHttpRequest 新增功能

      • 跨域請求：修改服務端頭信息
      • IE兼容：XDomaiRequest

    • 進度事件：

      • upload.onprogress(ev) 上傳進度(實現(xiàn)文件上傳進度條)
        • ev.total 發(fā)送文件的總量
        • ev.loaded 已發(fā)送的量
      • FormData 構(gòu)建提交二進制數(shù)據(jù)

  • 拓展閱讀

附錄一　css3響應式布局

  • 媒體類型

    • *all 所有媒體
    • braille 盲文觸覺設備
    • embossed 盲文打印機
    • *print 手持設備
    • projection 打印預覽
    • *screen 彩屏設備
    • speech '聽覺'類似的媒體類型
    • tty不適用像素的設備
    • tv 電視

  • 關鍵字

    • and
    • not not關鍵字是用來排除某種制定的媒體類型
    • only only用來定某種特定的媒體類型

  • 媒體特性

    • (max-width:600px)
    • (max-device-width: 480px) 設備輸出寬度
    • (orientation:portrait) 豎屏
    • (orientation:landscape) 橫屏
    • (-webkit-min-device-pixel-ratio: 2) 像素比
    • devicePixelRatio 設備像素比
    • window.devicePixelRatio = 物理像素 / dips

  • 樣式引入

<link rel="stylesheet" href="css/index.css" media="print" />

 @import url("css/demo.css") screen;
 @media screen{    }

<link rel=”stylesheet” media=”all and
 (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all
 and (orientation:landscape)”href=”landscape.css”>

@media screen and (min-width:360px) and (max-width:500px) {}

<link rel="stylesheet" type="text/css" 
href="indexA.css"  media="screen and (min-width: 800px)">

<link rel="stylesheet" type="text/css" 
href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" 
href="indexC.css"    media="screen and (max-width: 600px)">
附錄二　HTML5速查表
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末澄阳，一起剝皮案震驚了整個濱河市拥知，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌碎赢，老刑警劉巖低剔，帶你破解...
    沈念sama閱讀 206,126評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異肮塞，居然都是意外死亡襟齿，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門枕赵，熙熙樓的掌柜王于貴愁眉苦臉地迎上來猜欺，“玉大人，你說我怎么就攤上這事拷窜】螅” “怎么了涧黄？”我有些...
    開封第一講書人閱讀 152,445評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長赋荆。 經(jīng)常有香客問我笋妥，道長，這世上最難降的妖魔是什么窄潭？ 我笑而不...
    開封第一講書人閱讀 55,185評論 1贊 278
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任挽鞠，我火速辦了婚禮，結(jié)果婚禮上狈孔，老公的妹妹穿的比我還像新娘信认。我一直安慰自己，他們只是感情好均抽，可當我...
    茶點故事閱讀 64,178評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布嫁赏。 她就那樣靜靜地躺著，像睡著了一般油挥。 火紅的嫁衣襯著肌膚如雪潦蝇。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 48,970評論 1贊 284
  • 城市分裂傳說
    那天深寥，我揣著相機與錄音攘乒，去河邊找鬼。 笑死惋鹅，一個胖子當著我的面吹牛则酝，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播闰集，決...
    沈念sama閱讀 38,276評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼沽讹，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了武鲁？” 一聲冷哼從身側(cè)響起爽雄，我...
    開封第一講書人閱讀 36,927評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎沐鼠，沒想到半個月后挚瘟，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,400評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡饲梭，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年乘盖，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片排拷。...
    茶點故事閱讀 37,997評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡侧漓，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出监氢，到底是詐尸還是另有隱情布蔗，我是刑警寧澤藤违，帶...
    沈念sama閱讀 33,646評論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站纵揍，受9級特大地震影響顿乒，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜泽谨，卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一璧榄、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧吧雹，春花似錦骨杂、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0贊 19
  • 一樁弒父案搓蚪，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至丁鹉，卻和暖如春妒潭，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背揣钦。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1贊 260
  • 情欲美人皮
    我被黑心中介騙來泰國打工雳灾， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人冯凹。 一個月前我還...
    沈念sama閱讀 45,423評論 2贊 352
  • 代替公主和親
    正文 我出身青樓谎亩，卻偏偏與公主長得像，于是被迫代替她去往敵國和親谈竿。 傳聞我的和親對象是個殘疾皇子团驱，可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font空凸，text－align，li...
    love2013閱讀 2,303評論 0贊 11
  • 1寸痢、屬性選擇器：id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,619評論 0贊 7
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color呀洲，font，text－align啼止，li...
    wzhiq896閱讀 1,730評論 0贊 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案道逗？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,728評論 1贊 92
  • 這會兒，是九點四十三分的莫愁湖献烦，躺在床上懶洋洋的滓窍，感覺全身的細胞都在放輕松，好舒服巩那，耳邊響起的是輕音樂吏夯，腦海里想到...
    紅豆小妮閱讀 339評論 4贊 1