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

來源:互聯網
上載者:User

標籤: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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: