01-HTML5講義

来源:https://www.cnblogs.com/vicky123/archive/2020/05/11/12850796.html
-Advertisement-
Play Games

瞭解HTML5 新語義標簽 "http://www.w3school.com.cn/html/html5_semantic_elements.asp" 語義標簽相容性處理 解決方案一：通過創建元素的方式，然後將元素轉化為塊級元素即可 解決方案二：通過引用第三方js插件方式(本質也是用createEl ...


瞭解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端瀏覽器支持不是特別友好，造成用戶體驗不佳

新語義標簽

http://www.w3school.com.cn/html/html5_semantic_elements.asp

<header></header>
<footer></footer>
<article></article>
<aside></aside>
<nav></nav>
<section></section>
....

語義標簽相容性處理

解決方案一：通過創建元素的方式，然後將元素轉化為塊級元素即可

document.createElement("header");

解決方案二：通過引用第三方js插件方式(本質也是用createElement方式)

    <!--[if lte IE 8]>
	<script type="text/javascript" src="html5shiv.min.js"></script>
    <![endif]-->

多媒體標簽及屬性介紹

☞<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： 自動獲取焦點
    placeholder： 占位符  （提示信息）
    multiple： 實現多選效果
    form：規定輸入欄位所屬的一個或多個表單。
          <form id="test">
                <input type="text" form="test" />
          </form>
          <input type="text" form="test" />
    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>
    required： 必填項, oninvalid="setCustomValidity('必填內容')"
		<form action="" method="get">
                      <input type="text" name="uname" pattern="^\d{4,11}" required class="uname">
		</form>
		<script type="text/javascript">
                      var input=document.querySelector(".uname");
                      input.oninvalid=function(){   	
                            if(this.validity.patternMismatch===true){
                                  this.setCustomValidity("請輸入4到11為數字");
                            }else{
                                  this.setCustomValidity("");
                            }
                      }
		</script>

HTMl5中的API

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

☞ document.querySelector("選擇器")；
    備註：
          選擇器： 可以是css中的任意一種選擇器
          通過該選擇器只能選中第一個元素。

☞ document.querySelectorAll("選擇器");
    備註： 與document.querySelector區別： querySelectorAll 可以選中所有符合選擇器規則的元素，返回的是一個列表。querySelector返回的只是單獨的一個元素

☞ Dom.classList.add("類名"): 給當前dom元素添加類樣式
☞ Dom.classList.remove("類名"); 給當前dom元素移除類樣式
☞ Dom.classList.contains("類名"); 檢測是否包含類樣式
☞ Dom.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	讀取中

<input type="file" name="">
<script type="text/javascript">
    var input=document.querySelector("input");
    input.onchange=function(){
          //獲取到文件
          var file=this.files[0];
          //開始讀取，創建讀取器
          var  reader=new FileReader();
          //開始讀取
          reader.readAsText(file);
          //獲取讀取的結果
          //當文件讀取完成後，才可以獲取文件信息內容
          reader.onload=function() {
                console.log(reader.result);
          }			
    }
</script>

獲取網路狀態

☞ 獲取當前網路狀態
    window.navigator.onLine 返回一個布爾值

☞ 網路狀態事件
    1. window.ononline
    2. window.onoffline

本地存儲

☞ 發展：
    隨著互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以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

註意：	
    chrome已不再支持html中audio/video標簽的autoplay屬性,據說是突然播放聲音怕到你，信？
    ◆ video   可配合muted(靜音)屬性可播放，或是video.play()；
    ◆ audio   就是不可以不可以不可以
              設置方法：(網友給的，不過我就是找不到“Autoplay policy”，嗯...)
                1、在chrome瀏覽器地址欄中輸入：chrome://flags
                2、搜索“Autoplay policy”，預設為“Default”，修改為 “No user gesture is required” 就可以了

Canvas畫布

繪圖工具

☞ 介紹canvas畫布
☞ 設置畫布大小： 使用屬性方式設置
☞ 解決畫布重繪問題
    1. 設置一次描邊
    2. 開啟新的圖層 ctx.beginPath();

繪圖方法

步驟：落筆(找落筆點坐標) -- 連線 -- 描邊

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

ctx.beginPath()；   開啟新的圖層
顏色： strokeStyle="值"
線寬： lineWidth="值"   備註：不需要帶單位

線連接方式：   lineJoin: round | bevel | miter (預設)

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

閉合路徑： ctx.closePath()

漸變方案

☞ 線性漸變
    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();

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

繪製動畫效果

☞ 繪製一個描邊矩形： ctx.strokeRect(x, y, width, height)
☞ 繪製一個填充矩形： ctx.fillRect(x, y, width, height)
☞ 清除：            ctx.clearRect(x, y, width, height)

☞ 實現動畫效果：
    1. 先清屏
    2. 繪製圖形
    3. 處理變數

繪製文本

☞繪製填充文本
    ctx.fillText(文本的內容,x,y)
  
☞繪製鏤空文本
    ctx.strokeText();
	   
☞設置文字大小：
    ctx.font="20px 微軟雅黑"
    備註： 該屬性設置文字大小，必須按照cssfont屬性的方式設置
	   
☞文字水平對齊方式【文字在圓心點位置的對齊方式】
    ctx.textAlign="left | right | center"
  
☞文字垂直對齊方式
    ctx.textBaseline="top | middle | bottom | alphabetic(預設)"
  
☞文字陰影效果
    ctx.shadowColor="red";  設置文字陰影的顏色
    ctx.ShadowOffsetX=值;   設置文字陰影的水平偏移量
    ctx.shadowOffsetY=值;   設置文字陰影的垂直偏移量
    ctx.shadowBlur=值;      設置文字陰影的模糊度(值越大越模糊)

繪製圖片

☞ 將圖片繪製到畫布的指定位置(圖片載入完成再繪製)
    ctx.drawImage(圖片對象,x,y);

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

☞ 解決圖片繪製到某一個區域的按原比例縮放繪製(失真效果):
  讓繪製的寬高比等於原始圖片寬高比

繪製圓弧

☞ ctx.arc(x,y,radius,startradian,endradian[,direct]);
  說明：
    x, y          圓心的坐標
    radius        半徑
    startradian   開始弧度（角度和弧度的關係： 角度:弧度= 180 : Math.PI）
    endradian     結束弧度
    direct        方向（預設順時針false） true 代表逆時針

☞ 0度角在哪？
    以圓心為中心向右為0角 順時針為正，逆時針為負
			 
☞ 特殊值：
    0度 = 0弧度
    45度 = Math.PI / 4
    60度 = Math.PI / 3
    90度 = Math.PI / 2
    180度 = Math.PI
    360度 = 2 * Math.PI
		   
☞ 繪製圓上任意點:（註意：弧度，角度和弧度的關係： 角度:弧度= 180 : Math.PI）
公式：
    x = ox + r * Math.cos(弧度)
    y = oy + r * Math.sin(弧度)

    ox: 圓心的橫坐標
    oy: 圓心的縱坐標
    r： 圓的半徑

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

ctx.translate(x,y);
    特點：
	通過該方法可以將畫布原點的位置進行重新設置。
    註意：
        1. translate(x,y) 中不能設置一個值
	2. 與moveTo(x,y) 的區別：
	    moveTo(x,y) 指的是將畫筆的落筆點的位置改變，而坐標系中的原點位置並沒有發生改變
	    translate(x,y) 是將畫布坐標系中的原點位置發生改變

旋轉【坐標系旋轉】

ctx.rotate(弧度) （註意是弧度，角度和弧度的關係： 角度:弧度= 180 : Math.PI）

伸縮

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

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

-Advertisement-
Play Games
更多相關文章
  • JavaScript連載9-三目運算符、綜合複習
    一、逗號表達式 1.程式中使用逗號表達式，通產是要分別求出逗號表示式內各表達式的值，並不一定要求整個表達式的值。 2.並不是所有出現逗號的地方都組成逗號表達式，例如在變數說明中，函數參數表中逗號，只是用作各個變數之間的間隔符。 var a,b; b = (a=3,--a,a*5); console. ...
  • JavaScript數據結構-集合
    介紹 集合是由一組無序且唯一(即不能重覆)的項組成的。比如由一個大於等於0的整數組成的集合：N={0,1,2,3,4,5,6,...}。 還有一個概念叫空集。用'{}'表示。 創建集合 我們使用對象來表示集合。 1 function Set() { 2 let items = {}; 3 } 常見方 ...
  • html post請求之a標簽的兩種用法舉例
    html post請求之a標簽的兩種用法舉例 1、使用ajax來發起POST請求HTML代碼如下： <a href="https://www.cnblogs.com/" class="a_post">發起POST請求</a> JQuery代碼如下： $(".a_post").on("click",f ...
  • 《Vue.js 2.x實踐指南》 已出版
    《Vue.js 2.x實踐指南》其實早在一年前就已經完稿，只是由於疫情的緣故耽擱了許久才下廠印刷。 本書旨在讓初學者能夠快速上手vue技術棧，並能夠利用所學知識獨立動手進行項目開發。我的寫作風格一向都是喜歡採用理論和實踐相結合的方式，這樣學習起來不會那麼枯燥，而且極具成效。時間是很寶貴的東西，所以盡 ...
  • Vular開發手記#1：設計並實現一個拼插式應用程式框架
    可視化編（rxeditor）輯告一段落，在知乎上發了一個問題，詢問前景，雖然看好的不多，但是關註度還是有的，目前為止積累了21w流量，因為這個事，開心了好長一段時間。這一個月的時間，主要在設計製作Vular，基於Vuetify跟larval實現的，可拼插式應用框架。並且把RXEditor可視化編輯也 ...
  • spring boot 使用 Thymeleaf +layui 使用到的功能實例
    spring boot 使用 Thymeleaf +layui 使用到的功能實例 ...
  • vue項目中使用bpmn-自定義platter
    內容概述 本系列“vue項目中使用bpmn-xxxx”分為七篇，均為自己使用過程中用到的實例，手工原創，目前陸續更新中。主要包括vue項目中bpmn使用實例、應用技巧、基本知識點總結和需要註意事項，具有一定的參考價值，需要的朋友可以參考一下。如果轉載或通過爬蟲直接爬的，格式特別醜，請來原創看：我是作 ...
  • 實戰 - JavaScript 函數式編程
    最近和做技術的朋友聊天的時候，發現自己居然不能將函數式編程思想講清楚，於是做一次複習 一、函數是“一等公民” 常常都能聽到這麼一句話：在 JavaScript 中，函數是“一等公民”，這句話到底意味著什麼？ 在編程語言中，一等公民可以作為函數參數，可以作為函數返回值，也可以賦值給變數 —— Chri ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類