HTML5 學習01——瀏覽器問題、新元素、canvas

最後更新：2017-09-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：rect source tail summary figure 欄位 dialog 部分圖形

Internet Explorer 瀏覽器問題

問題：Internet Explorer 8 及更早 IE 版本的瀏覽器不支援HTML5的方式。

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

解決：html5shiv.js 引用代碼必須放在 <head> 元素中，先載入該檔案。

HTML5 新元素<canvas> 新元素

<canvas>標籤：定義圖形，比表和其他映像。該標籤基於 JavaScript 的繪圖 API

新多媒體元素

<audio> 標籤：定義音頻內容
<video>標籤：定義視頻（video 或者 movie）
<source>標籤：定義多媒體資源 <video> 和 <audio>
<embed>標籤：定義嵌入的內容，比如外掛程式。
<track>標籤：為諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。

新表單元素

<datalist>標籤：定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
<keygen>標籤：規定用於表單的金鑰組產生器欄位。
<output>標籤：定義不同類型的輸出，比如指令碼的輸出。

新的語義和結構元素

<article>	定義頁面獨立的內容地區。
<aside>	定義頁面的側邊欄內容。
<bdi>	允許您設定一段文本，使其脫離其父元素的文本方向設定。
<command>	定義命令按鈕，比如選項按鈕、複選框或按鈕
<details>	用於描述文檔或文檔某個部分的細節
<dialog>	定義對話方塊，比如提示框
<summary>	標籤包含 details 元素的標題
<figure>	規定獨立的流內容（映像、圖表、照片、代碼等等）。
<figcaption>	定義 <figure> 元素的標題
<footer>	定義 section 或 document 的頁尾。
<header>	定義了文檔的頭部地區
<mark>	定義帶有記號的文本。
<meter>	定義度量衡。僅用於已知最大和最小值的度量。
<nav>	定義導航連結的部分。
<progress>	定義任何類型的任務的進度。
<ruby>	定義 ruby 注釋（中文注音或字元）。
<rt>	定義字元（中文注音或字元）的解釋或發音。
<rp>	在 ruby 注釋中使用，定義不支援 ruby 元素的瀏覽器所顯示的內容。
<section>	定義文檔中的節（section、區段）。
<time>	定義日期或時間。
<wbr>	規定在文本中的何處適合添加分行符號。

HTML5 Canvas

<canvas>標籤：使用指令碼 (通常是JavaScript)來繪製圖形——預設情況下 <canvas> 元素沒有邊框和內容。

在畫布上（Canvas）畫一個紅色矩形，漸層矩形，彩色矩形，和一些彩色的文字。

<canvas id="myCanvas" width="200" height="100"></canvas>

註：指定一個id屬性 (指令碼中經常引用), width 和 height 屬性定義的畫布的大小，使用 style 屬性來添加邊框:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> HTML5 canvas 標籤</canvas>

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

<script>var c=document.getElementById("myCanvas");//找到 <canvas> 元素var ctx=c.getContext("2d");//建立 context 對象ctx.fillStyle="#FF0000";//fillStyle屬性可以是CSS顏色，漸層，或圖案。fillStyle 預設設定是#000000（黑色）ctx.fillRect(0,0,160,75);//fillRect(x,y,width,height) 方法定義了矩形當前的填充方式</script>

HTML5 學習01——瀏覽器問題、新元素、canvas

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More