html5整理（一）

bottle_發表於2019-02-16
HTML

對於html5雖然用得多，但還是有一些知識點比較混亂，記得不清，所以想專門整理一下

HTML5瀏覽器支援

最新版本的Safari、Chrome、Firefox、Opera支援某些HTML5特性，IE9將支援某些HTML5特性

此外，所有瀏覽器，包括舊的新的，對無法識別的元素會作為內聯元素自動處理。

IE9以下版本瀏覽器相容HTML5的方法，使用靜態資源的html5shiv包

<!--[if lt IE 9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> 
<![endif]-->

或者直接將指令碼檔案程式碼展示出來

<!--[if lt IE9]>
<script>
    (function(){
        if(!*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,event,source,figure,footer,header,hgroup,mark,menu,nav,outputmprogress,section,time,video".split(`.`),
            i = e.length;
        while(i--){
            document.createElement(e[i])
        }
    })
</script>
<![endif]-->

也可以將這段程式碼單獨放在html5.js中，同時需要把這一部分放在head裡面
載入後，初始化新標籤的CSS

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

HTML5 新元素

<canvas>

canvas通過指令碼來繪製圖形

例項

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById(`myCanvas`);
    var ctx = canvas.getContext(`2d`);
    ctx.fillStyle="#ff0000";
    ctx.fillRect(0,0,80,100);
</script>

新多媒體元素

  • <audio>

  • <video>

  • <source>

  • <embed>

  • <track>

<audio>

audio定義音訊內容
屬性：
autoplay 如果出現該屬性，則音訊在就緒後馬上播放
control 如果出現該屬性，則向使用者顯示音訊控制元件（比如播放/暫停按鈕）
loop 如果出現該屬性，則每當音訊結束時重新播放
muted 如果出現該屬性，則音訊輸出為靜音
preload 值有auto,metadata,none,規定當網頁載入時，音訊是否預設被載入以及如何被載入
src 規定音訊檔案的url

例項

<audio control>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的瀏覽器不支援audio元素
</audio>

<video>

video標籤定義視訊，比如電影片段或其他視訊流
支援三種視訊格式：MP4、WebM、Ogg
屬性：
除了擁有audio的全部屬性，同時還增加了width,height兩個屬性

例項

<video control>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支援video標籤
</video>

<embed>

定義了一個容器，用來嵌入外部應用或者互動程式（外掛）
屬性：
height,
src,
type 規定嵌入內容的MIME型別,
width

例項

<embed src="helloworld.swf">

<track>

為諸如<video>和<audio>元素之類的媒介規定外部文字軌道

新表單元素

  • <datalist>

  • <keygen>

  • <output>

<datalist>

定義選項列表

IE 9 和更早版本的 IE 瀏覽器 以及 Safari 不支援 <datalist> 標籤。

例項

<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<keygen>

規定用於表單的金鑰對生成器欄位。
當提交表單時，私鑰儲存在本地，公鑰傳送到伺服器。

IE不支援該元素

屬性：
autofocus 是<keygen>欄位在頁面載入時獲得焦點.
challenge 如果使用，則將keygen的值設定為在提交時詢問
disabled 禁用keygen欄位
form 定義該<keygen>欄位所屬的一個或多個表單
keytype 值包括rsa,dsa,ec,定義金鑰的安全演算法
name 定義<keygen>元素的唯一名稱，name屬性用於雜提交表單時蒐集欄位的值

例項

<form action="demo_keygen.asp" method="get">
  使用者名稱: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<output>

作為計算結果輸出顯示(比如執行指令碼的輸出)

IE不支援

屬性：
`for` 描述計算中使用的元素與計算結果之間的關係
form 定義輸入欄位所屬的一個或多個表單
name 定義物件的唯一名稱（表單提交時使用）

例項

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

新的語義和結構元素

  • <article>

  • <aside>

  • <bdi> 允許您設定一段文字，使其脫離其父元素的文字方向

  • <command> 定義命令按鈕，比如單選按鈕、核取方塊或按鈕,只有IE9支援

  • <details>

  • <dialog>

  • <summary>

  • <figure>

  • <figcaption>

  • <footer>

  • <header>

  • <mark>

  • <meter> 定義度量衡。僅用於已知最大和最小值的度量

  • <nav>

  • <progress>

  • <ruby> 定義ruby註釋（中文注音或字元）

  • <rt> 定義字元（中文注音或字元）的解釋或發音

  • <section>

  • <time>

  • <wbr> 規定在文字中的何處適合新增換行符

例項

<bdi>
目前只有 Firefox 和 Chrome 支援 <bdi> 標籤。

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
將使用者名稱從周圍的文字方向設定中隔離出來

<summary>
為<details>元素定義一個可見的標題。當使用者點選標題時會顯示出詳細資訊。

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<progress>
定義執行中的任務進度（顯示進度條）

<progress value="22" max="100"></progress>

<wbr>
如果單詞太長，或者您擔心瀏覽器會在錯誤的位置換行，那麼您可以使用 <wbr> 元素來新增 Word Break Opportunity（單詞換行時機）。

<p>學習 AJAX ,您必須熟悉 <wbr>Http<wbr>Request 物件。</p>

相關文章