常用H5

来源:https://www.cnblogs.com/guojbing/archive/2019/02/15/H5.html
-Advertisement-
Play Games

HTML5筆記 瞭解HTML5 新語義標簽 網頁佈局結構標簽及相容處理 多媒體標簽及屬性介紹 新表單元素及屬性 智能表單控制項 表單屬性 HTMl5中的API 獲取頁面元素及類名操作和自定義屬性 文件讀取 獲取網路狀態 獲取地理定位 本地存儲 操作多媒體 Canvas畫布 繪圖工具 繪圖方法 漸變方案 ...


HTML5筆記

瞭解HTML5

 ☞HTML5屬於上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體！！！
   例如： video 標簽和 audio 及 canvas 標記
 
 ☞ 新特性：
      1. 取消了過時的顯示效果標記  <font></font> 和 <center></center> ...
      2. 新表單元素引入
      3. 新語義標簽的引入  
      4. canvas標簽（圖形設計）
      5. 本地資料庫（本地存儲）
      6. 一些API
 ☞ 好處：
      1. 跨平臺
          例如：比如你開發了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應用平臺，甚至可以通過封裝的技術發放到App Store或Google Play上，所以它的跨平臺性非常強大，這也是大多數人對HTML5有興趣的主要原因。
​
 ☞ 缺點：
      1. pc端瀏覽器支持不是特別友好，造成用戶體驗不佳

新語義標簽

網頁佈局結構標簽及相容處理

  <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  設置迴圈播放
 ☞ <audio></audio>  音頻
      屬性：controls 顯示控制欄
      屬性：autoplay 自動播放  
     屬性：loop  設置迴圈播放
 ☞ video標簽支持的格式    http://www.w3school.com.cn/html5/html_5_video.asp
 ☞ 多媒體標簽在網頁中的相容效果方式
​
     <video>
        <source src="code/多媒體標簽/trailer.mp4">
        <source src="trailer.ogg">
        <source src="trailer.WebM">
    </video>

新表單元素及屬性

智能表單控制項

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

表單屬性

 ◆form屬性：   
    autocomplete=on | off          自動完成
    novalidate=true | false        是否關閉校驗
​
  ◆ input屬性：
    *autofocus  ： 自動獲取焦點
    form：       表單域外的輸入控制項添加一個 form="表單域的id值" , 該輸入控制項會跟隨表單域一起提交
    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：    實現多選效果
    *placeholder ： 占位符  （提示信息）
    *required：    必填項
​
​
留下的疑問：
    ◆ 如何修改表單控制項中的預設提示信息 
         1. 表單驗證觸發oninvalid事件
         2. 通過setCustomValidity方法設置修改內容

HTMl5中的API

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

  ☞ document.querySelector("選擇器")；
     備註：
        選擇器： 可以是css中的任意一種選擇器
         通過該選擇器只能選中第一個元素。
​
  ☞ document.querySelectorAll("選擇器");
       備註：
          與document.querySelector區別： querySelectorAll 可以選中所有符合選擇器規則的元素，返回的是一個列表。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個用來讀取文件方法返回結果在result中
      readAsBinaryString    ---將文件讀取為二進位編碼
      readAsText           ---將文件讀取為文本
      readAsDataURL        ---將文件讀取為DataURL
​
 ☞  FileReader 提供的事件模型
     onabort        中斷時觸發
     onerror        出錯時觸發
     onload     文件讀取成功完成時觸發
     onloadend  讀取完成觸發，無論成功或失敗
     onloadstart    讀取開始時觸發
     onprogress 讀取中
​
 ☞ 分析讀取圖片小案例

獲取網路狀態

  ☞ 獲取當前網路狀態
         window.navigator.onLine 返回一個布爾值
​
  ☞ 網路狀態事件
         1. window.ononline
         2. window.onoffline

獲取地理定位

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

	   1. coords.latitude   維度
       2. coords.longitude   經度

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

  ☞ 分析地理定位小案例

本地存儲

   ☞發展：
      隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小隻有4k左右，並且解析也相當的複雜，給開髮帶來諸多不便，HTML5規範則提出解決方案，使用sessionStorage和localStorage存儲數據。 

    ☞  localStorage：
    	1. 永久生效
        2. 多視窗共用
        3. 容量大約為20M
        
        ◆window.localStorage.setItem(key,value)  設置存儲內容
        ◆window.localStorage.getItem(key)  		 獲取內容
        ◆window.localStorage.removeItem(key)	 刪除內容
        ◆window.localStorage.clear()			清空內容
        
    ☞ sessionStorage：
		  1. 生命周期為關閉當前瀏覽器視窗
           2. 可以在同一個視窗下訪問
           3. 數據大小為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 (預設)

線帽（線兩端的結束方式）：  lineCap: butt(預設值) | round | square 

閉合路徑： ctx.closePath()


--繪製一條直線演示代碼

--作業：
	   1. 從200,100的位置繪製寬為200高為150的矩形
        2. 準備一個600*400的畫布，三等分這個畫布，分別繪製正方形。直角三角形，梯形

漸變方案

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

  	  ctx.strokeStyle=grd;
      ctx.stroke();
      
      備註：
         addColorStop(offse,color);
         中漸變的開始位置和結束位置介於0-1之間，0代表開始，1代表結束。中間可以設置任何小數
         
  ☞ 徑向漸變
  
  	        ctx.createradialGradient(x0,y0,r0,x1,y1,r1);

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

            r0：開始圓的半徑

            (x1,y1)：漸變的結束圓的 x,y 坐標

            r1：結束圓的半徑

填充效果

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

非零環繞原則

 ☞ 繪製一個如下圖形

 

 ☞ 非零環繞原則：
	  1. 任意找一點，越簡單越好
	  2. 以點為圓心，繪製一條射線，越簡單越好（相交的邊越少越好）
	  3. 以射線為半徑順時針旋轉，相交的邊同向記為+1，反方向記為-1，如果相加的區域等於0，則不填充。
	  4. 非零區域填充
	  
 ☞ 非零環繞原則案例：

 

繪製虛線

	原理：

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

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

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

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

    繪製：
     ctx.setLineDash(數組);
     ctx.stroke();
     
     例如：
     	 ctx.moveTo(100, 100);
	 	 ctx.lineTo(300, 100);
	 	 ctx.setLineDash([2,4]);
	 	 ctx.stroke();

    註意：
        如果要將虛線改為實線，只要將數組改為空數組即可。

繪製動畫效果

   ☞ 繪製一個描邊矩形： content.strokeRect(x,y,width,height) 
   ☞ 繪製一個填充矩形： content.fillRect(x,y,width,height)  
   ☞ 清除：		   content.clearRect(x,y,width,height)  
   
   
   ☞ 實現動畫效果： 
   	      1. 先清屏
   	      2. 繪製圖形
   	      3. 處理變數

繪製文本

  ☞ 繪製填充文本
  	  content.fillText(文本的內容,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);

  ☞ 
  	 //將圖片繪製到指定區域大小的位置  x,y指的是矩形區域的位置，width和height指的是矩形區域的大小
     content.drawImage(圖片對象,x,y,width,height);
     
  ☞ 
  	 //將圖片的指定區域繪製到指定矩形區域內
     content.drawImage(圖片對象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
     
     sx,sy 指的是要從圖片哪塊區域開始繪製，swidth，sheight 是值 截取圖片區域的大小
     dx,dy 是指矩形區域的位置，dwidth,dheight是值矩形區域的大小
     

   ☞ 
   	  解決圖片繪製到某一個區域的按原比例縮放繪製：
        繪製寬：繪製高==原始寬：原始高

繪製圓弧

   ☞
     content.arc(x,y,radius,startradian,endradian[,direct]);
     
            x,y    圓心的坐標
​
             radius 半徑
​
             startradian   開始弧度
​
             endradian     結束弧度
        
             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) 的區別：
​
            moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而坐標系中的原點位置並沒有發生改變
​
            translate(x,y) 是將坐標系中的原點位置發生改變

旋轉【坐標系旋轉】

ctx.rotate(弧度)

伸縮

 ctx.scale(x,y)
​
   備註：
       沿著x軸和y軸縮放
​
       x,y 為倍數  例如： 0.5  1

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • oracle 臨時表的使用
    在oracle中，臨時表分為會話級別(session)和事務級別(transaction)兩種。 會話級的臨時表在整個會話期間都存在，直到會話結束；事務級別的臨時表數據在transaction結束後消失，即commit/rollback或結束會話時，會清除臨時表數據。 1、事務級臨時表 on com ...
  • mysql語句執行順序圖示
    ...
  • MySQL InnoDB Online DDL學習
    正文 MySQL Online DDL這個新特性是在 MySQL5.6.7 開始支持的，更早期版本的MySQL進行DDL對於DBA來說是非常痛苦的。現在主流版本都集中在5.6與5.7，為了更好的理解Online DDL的工作原理與機制，本文就對Online DDL的實現方式進行總結。 本文使用的My ...
  • MySql資料庫備份的幾種方式
    mysqldump工具備份 備份整個資料庫 $ mysqldump u root h host p dbname backdb.sql 備份資料庫中的某個表 $ mysqldump u root h host p dbname tbname1, tbname2 backdb.sql 備份多個資料庫 ...
  • Android調試神器stetho使用詳解和改造
    本文由雲+社區發表 作者：NaOH 概述 stetho是Facebook開源的一個Android調試工具，項目地址：facebook/stetho 通過Stetho，開發者可以使用chrome的inspect功能，對Android應用進行調試和查看。 功能概述 stetho提供的功能主要有： Net ...
  • MAC中使用APICloud同步代碼錯誤解決辦法
    在MAC上使用APICloud同步代碼時出現錯誤，其實就是git位置的問題，簡單點就是把路徑映射下。 問題提示： Can't locate SVN/Core.pm in @INC (you may need to install the SVN::Core module) (@INC contain ...
  • Android For OpenCV的環境搭建
    OpenCV是一個基於BSD許可（開源）發行的跨平臺電腦視覺庫，可以運行在Linux、Windows、Android和Mac OS操作系統上。它輕量級而且高效——由一系列 C 函數和少量 C++ 類，同時提供了Python、Ruby、MATLAB等語言的介面，實現了和電腦視覺方面的很多通用演算法 ...
  • 微信公眾號/訂閱號留言板使用介紹
    前言 由於新申請的微信公眾號沒有留言功能了，沒有留言就無法跟讀者進行交互，寫出去的文章好像得不到反饋一樣，感覺有蠻難受的，所以就參考Ethanm的插件自己製作了一個小程式用於留言，來代替原版公眾號的留言功能。 當然你也可以選擇在A5上買一個可以留言的公眾號進行遷移，畢竟有些人註冊的比較早是有留言功能 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類