[HTML5] html5 筆記1

01-HTML5基礎

了解HTML5

 ?HTML5屬于上一代HTML的新迭代語言信柿,設計HTML5最主要的目的是為了在移動設備上支持多媒體H筇荨>视琛!
   例如: video 標簽和 audio 及 canvas 標記
 
 ? 新特性:
      1. 取消了過時的顯示效果標記  <font></font> 和 <center></center> ...
      2. 新表單元素引入
      3. 新語義標簽的引入  
      4. canvas標簽(圖形設計)
      5. 本地數(shù)據(jù)庫(本地存儲)
      6. 一些API
 ? 好處:
      1. 跨平臺
          例如:比如你開發(fā)了一款HTML5的游戲蝌数,你可以很輕易地移植到UC的開放平臺、Opera的游戲中心痹仙、Facebook應用平臺闷游,甚至可以通過封裝的技術發(fā)放到App Store或Google Play上,所以它的跨平臺性非常強大烙样,這也是大多數(shù)人對HTML5有興趣的主要原因冯遂。

 ? 缺點:
      1. pc端瀏覽器支持不是特別友好,造成用戶體驗不 佳

新語義標簽

網(wǎng)頁布局結(jié)構(gòu)標簽及兼容處理

  <header></header>
  <footer></footer>
  <article></article>
  <aside></aside>
  <nav></nav>
  <section></section>
  ....
  http://www.w3school.com.cn/html/html5_semantic_elements.asp

多媒體標簽及屬性介紹

 ? <video></video> 視頻
      屬性:controls 顯示控制欄
      屬性:autoplay 自動播放  
     屬性:loop  設置循環(huán)播放
 ? <audio></audio>  音頻
      屬性:controls 顯示控制欄
      屬性:autoplay 自動播放  
     屬性:loop  設置循環(huán)播放
 ? video標簽支持的格式    http://www.w3school.com.cn/html5/html_5_video.asp
 ? 多媒體標簽在網(wǎng)頁中的兼容效果方式

     <video>
        <source src="code/多媒體標簽/trailer.mp4">
        <source src="trailer.ogg">
        <source src="trailer.WebM">
    </video>

新表單元素及屬性

智能表單控件

 
<input  type="email">
 email: 輸入合法的郵箱地址
 url:  輸入合法的網(wǎng)址
 number: 只能輸入數(shù)字
 range: 滑塊
 color: 拾色器
 date: 顯示日期
 month: 顯示月份
 week : 顯示第幾周
 time:  顯示時間

表單屬性

 ◆form屬性:   
    autocomplete=on | off          自動完成
    novalidate=true | false        是否關閉校驗

  ◆ input屬性:
    *autofocus  : 自動獲取焦點
    form:       
    list:
       <input type="text" list="abc"/>
         <datalist id="abc">
            <option value="123">12312</option>
            <option value="123">12312</option>
            <option value="123">12312</option>
            <option value="123">12312</option>
        </datalist>
    multiple:    實現(xiàn)多選效果
    *placeholder : 占位符  (提示信息)
    *required:    必填項


HTMl5中的API

獲取頁面元素及類名操作和自定義屬性

  ? document.querySelector("選擇器")谒获;
     備注:
        選擇器: 可以是css中的任意一種選擇器
         通過該選擇器只能選中第一個元素蛤肌。

  ? document.querySelectorAll("選擇器");
       備注:
          與document.querySelector區(qū)別: querySelectorAll 可以選中所有符合選擇器規(guī)則的元素,返回的是一個列表批狱。querySelector返回的只是單獨的一個元素
      

  ? Dom.classList.add("類名"): 給當前dom元素添加類樣式

  ? Dom.classList.remove("類名"); 給當前dom元素移除類樣式

  ? classList.contains("類名"); 檢測是否包含類樣式

  ? classList.toggle("active");  切換類樣式(有就刪除裸准,沒有就添加)




  ? 自定義屬性           (小案例分析體驗自定義屬性)
  
     data-自定義屬性名
     備注:
         在標簽中,以data-自定義名稱  
     

     1. 獲取自定義屬性   Dom.dataset   返回的是一個對象
        Dom.dataset.屬性名  或者  Dom.dataset[屬性名]
       
        注意: 
                屬性名是不包含data-

     2. 設置自定義屬性
        Dom.dataset.自定義屬性名=值  或者  Dom.dataset[自定義屬性名]=值精耐;

文件讀取

  ?  FileReader
      FileReader             接口有3個用來讀取文件方法返回結(jié)果在result中
      readAsBinaryString    ---將文件讀取為二進制編碼
      readAsText           ---將文件讀取為文本
      readAsDataURL        ---將文件讀取為DataURL

 ?  FileReader 提供的事件模型
     onabort        中斷時觸發(fā)
     onerror        出錯時觸發(fā)
     onload     文件讀取成功完成時觸發(fā)
     onloadend  讀取完成觸發(fā)狼速,無論成功或失敗
     onloadstart    讀取開始時觸發(fā)
     onprogress 讀取中

 ? 分析讀取圖片小案例

獲取網(wǎng)絡狀態(tài)

  ? 獲取當前網(wǎng)絡狀態(tài)
         window.navigator.onLine 返回一個布爾值

  ? 網(wǎng)絡狀態(tài)事件
         1. window.ononline
         2. window.onoffline

獲取地理定位

  ?  獲取一次當前位置
      window.navigator.geolocation.getCurrentPosition(success,error);

       1. coords.latitude   維度
       2. coords.longitude   經(jīng)度

  ?  實時獲取當前位置
      window.navigator.geolocation.watchPosition(success,error);

  ? 分析地理定位小案例

本地存儲

   ?發(fā)展:
      隨著互聯(lián)網(wǎng)的快速發(fā)展,基于網(wǎng)頁的應用越來越普遍卦停,同時也變的越來越復雜向胡,為了滿足各種各樣的需求,會經(jīng)常性在本地存儲大量的數(shù)據(jù)惊完,傳統(tǒng)方式我們以document.cookie來進行存儲的僵芹,但是由于其存儲大小只有4k左右,并且解析也相當?shù)膹碗s小槐,給開發(fā)帶來諸多不便拇派,HTML5規(guī)范則提出解決方案荷辕,使用sessionStorage和localStorage存儲數(shù)據(jù)。 

    ?  localStorage:
        1. 永久生效
        2. 多窗口共享
        3. 容量大約為20M
        
        ◆window.localStorage.setItem(key,value)  設置存儲內(nèi)容
        ◆window.localStorage.getItem(key)        獲取內(nèi)容
        ◆window.localStorage.removeItem(key)     刪除內(nèi)容
        ◆window.localStorage.clear()            清空內(nèi)容
        
    ? sessionStorage:
          1. 生命周期為關閉當前瀏覽器窗口
           2. 可以在同一個窗口下訪問
           3. 數(shù)據(jù)大小為5M左右
           
         ◆window.sessionStorage.setItem(key,value)
        ◆window.sessionStorage.getItem(key)
        ◆window.sessionStorage.removeItem(key)
        ◆window.sessionStorage.clear()

操作多媒體

http://www.w3school.com.cn/html5/html5_ref_audio_video_dom.asp

Canvas畫布

繪圖工具

  ? 介紹canvas畫布
  ? 設置畫布大屑恪: 使用屬性方式設置
  ? 解決畫布重繪問題
       1. 設置一次描邊
       2. 開啟新的圖層

繪圖方法

ctx.moveTo(x,y)    落筆
ctx.lineTo(x,y)    連線
ctx.stroke()       描邊

ctx.beginPath()疮方;   開啟新的圖層

演示: strokeStyle="值"
線寬: linewidth="值"   備注:不需要帶單位

線連接方式:   lineJoin: round | bevel | miter (默認)

線帽(線兩端的結(jié)束方式):  lineCap: butt(默認值) | round | square 

閉合路徑: ctx.closePath()

漸變方案

  ? 線性漸變
     var grd=ctx.createLinearGradient(x0,y0,x1,y1);
          x0-->漸變開始的x坐標
          y0-->漸變開始的y坐標
          x1-->漸變結(jié)束的x坐標
          y1-->漸變結(jié)束的y坐標
          
      grd.addColorStop(0,"black");      設置漸變的開始顏色
      grd.addColorStop(0.1,"yellow");   設置漸變的中間顏色
      grd.addColorStop(1,"red");        設置漸變的結(jié)束顏色

      ctx.strokeStyle=grd;
      ctx.stroke();
      
      備注:
         addColorStop(offse,color);
         中漸變的開始位置和結(jié)束位置介于0-1之間,0代表開始茧彤,1代表結(jié)束骡显。中間可以設置任何小數(shù)
         
  ? 徑向漸變
  
            ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

            (x0,y0):漸變的開始圓的 x,y 坐標

            r0:開始圓的半徑

            (x1,y1):漸變的結(jié)束圓的 x,y 坐標

            r1:結(jié)束圓的半徑

填充效果

  ctx.fill();         設置填充效果
  ctx.fillstyle="值"; 設置填充顏色

非零環(huán)繞原則

 ? 繪制一個如下圖形
 ? 非零環(huán)繞原則:
      1. 任意找一點,越簡單越好
      2. 以點為圓心曾掂,繪制一條射線惫谤,越簡單越好(相交的邊越少越好)
      3. 以射線為半徑順時針旋轉(zhuǎn),相交的邊同向記為+1珠洗,反方向記為-1溜歪,如果相加的區(qū)域等于0,則不填充许蓖。
      4. 非零區(qū)域填充
      
 ? 非零環(huán)繞原則案例:

繪制虛線

    原理:

     設置虛線其實就是設置實線與空白部分直接的距離,利用數(shù)組描述其中的關系

     例如: [10,10]  實線部分10px 空白部分10px

     例如: [10,5]  實線部分10px 空白部分5px

     例如: [10,5,20]  實線部分10px  空白5px  實線20px  空白部分10px 實線5px 空白20px....

    繪制:
     ctx.setLineDash(數(shù)組);
     ctx.stroke();
     
     例如:
         ctx.moveTo(100, 100);
         ctx.lineTo(300, 100);
         ctx.setLineDash([2,4]);
         ctx.stroke();

    注意:
        如果要將虛線改為實線蝴猪,只要將數(shù)組改為空數(shù)組即可。

繪制動畫效果

   ? 繪制一個描邊矩形: content.strokeRect(x,y,width,height) 
   ? 繪制一個填充矩形: content.fillRect(x,y,width,height)  
   ? 清除:           content.clearRect(x,y,width,height)  
   
   
   ? 實現(xiàn)動畫效果: 
          1. 先清屏
          2. 繪制圖形
          3. 處理變量

繪制文本

  ? 繪制填充文本
      content.fillText(文本的內(nèi)容,x,y)
  
  ? 繪制鏤空文本
       content.strokeText();
       
  ? 設置文字大谢着础:
       content.font="20px 微軟雅黑"
       備注: 該屬性設置文字大小拯腮,必須按照cssfont屬性的方式設置
       
  ? 文字水平對齊方式【文字在圓心點位置的對齊方式】
        content.textalign="left | right | center"
  
  ?文字垂直對齊方式
         content.textBaseline="top | middle | bottom | alphabetic(默認)"
  
  ?文字陰影效果
         ctx.shadowColor="red";  設置文字陰影的顏色

         ctx.ShadowOffsetX=值;   設置文字陰影的水平偏移量

         ctx.shadowOffsetY=值;   設置文字陰影的垂直偏移量

         ctx.shadowBlur=值;      設置文字陰影的模糊度

繪制圖片

  ?    
      //將圖片繪制到畫布的指定位置
     content.drawImage(圖片對象,x,y);

  ? 
     //將圖片繪制到指定區(qū)域大小的位置  x,y指的是矩形區(qū)域的位置,width和height指的是矩形區(qū)域的大小
     content.drawImage(圖片對象,x,y,width,height);
     
  ? 
     //將圖片的指定區(qū)域繪制到指定矩形區(qū)域內(nèi)
     content.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
     
     sx,sy 指的是要從圖片哪塊區(qū)域開始繪制蚁飒,swidth动壤,sheight 是值 截取圖片區(qū)域的大小
     dx,dy 是指矩形區(qū)域的位置,dwidth,dheight是值矩形區(qū)域的大小
     

   ? 
      解決圖片繪制到某一個區(qū)域的按原比例縮放繪制:
        繪制寬:繪制高==原始寬:原始高

繪制圓弧

   ?
     content.arc(x,y,radius,startradian,endradian[,direct]);
     
            x,y    圓心的坐標

             radius 半徑

             startradian   開始弧度

             endradian     結(jié)束弧度
        
             direct        方向(默認順時針 false)   true 代表逆時針
             
   ? 0度角在哪淮逻?
          以圓心為中心向右為0角 順時針為正琼懊,逆時針為負
             
   ? 備注:
        角度 和 弧度的關系: 角度:弧度= 180:pi
        
         特殊值

           0度 = 0弧度

           30度 = π/6   (180度的六分之一)

           45度 = π/4   

           60度 = π/3

           90度 = π/2

           180度 = π

           360度 = 2π
           
           
    ? 繪制圓上任意點:  
        公式:
           x=ox+r*cos( 弧度 )

           y=oy+r*sin( 弧度 )


         ox: 圓心的橫坐標

         oy: 圓心的縱坐標

         r: 圓的半徑

平移【坐標系圓點的平移】

ctx.translate(x,y);

   特點:
      通過該方法可以將原點的位置進行重新設置。

   注意:
       1. translate(x,y) 中不能設置一個值

       2. 與moveTo(x,y) 的區(qū)別:

            moveTo(x,y) 指的是將畫筆的落筆點的位置改變爬早,而坐標系中的原點位置并沒有發(fā)生改變

            translate(x,y) 是將坐標系中的原點位置發(fā)生改變

旋轉(zhuǎn)【坐標系旋轉(zhuǎn)】

ctx.rotate(弧度)

伸縮

 ctx.scale(x,y)

   備注:
       沿著x軸和y軸縮放

       x,y 為倍數(shù)  例如: 0.5  1
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末哼丈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子筛严,更是在濱河造成了極大的恐慌醉旦,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桨啃,死亡現(xiàn)場離奇詭異车胡,居然都是意外死亡,警方通過查閱死者的電腦和手機照瘾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門匈棘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人析命,你說我怎么就攤上這事主卫√幽” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵簇搅,是天一觀的道長完域。 經(jīng)常有香客問我,道長瘩将,這世上最難降的妖魔是什么筒主? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮鸟蟹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘使兔。我一直安慰自己建钥,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布虐沥。 她就那樣靜靜地躺著熊经,像睡著了一般。 火紅的嫁衣襯著肌膚如雪欲险。 梳的紋絲不亂的頭發(fā)上镐依,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音天试,去河邊找鬼槐壳。 笑死,一個胖子當著我的面吹牛喜每,可吹牛的內(nèi)容都是我干的务唐。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼带兜,長吁一口氣:“原來是場噩夢啊……” “哼枫笛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起刚照,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤刑巧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后无畔,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啊楚,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年檩互,在試婚紗的時候發(fā)現(xiàn)自己被綠了特幔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡闸昨,死狀恐怖蚯斯,靈堂內(nèi)的尸體忽然破棺而出薄风,到底是詐尸還是另有隱情,我是刑警寧澤拍嵌,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布遭赂,位于F島的核電站,受9級特大地震影響横辆,放射性物質(zhì)發(fā)生泄漏撇他。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一狈蚤、第九天 我趴在偏房一處隱蔽的房頂上張望困肩。 院中可真熱鬧,春花似錦脆侮、人聲如沸锌畸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽潭枣。三九已至,卻和暖如春幻捏,著一層夾襖步出監(jiān)牢的瞬間盆犁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工篡九, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谐岁,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓榛臼,卻偏偏與公主長得像翰铡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子讽坏,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353