整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          什么是 HTML5-

          什么是 HTML5?

          TML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。

          HTML5的設計目的是為了在移動設備上支持多媒體。

          HTML5 簡單易學。

          HTML5 是下一代 HTML 標準。

          HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后,Web 世界已經經歷了巨變。

          HTML5 仍處于完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。

          HTML5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。。

          WHATWG 致力于 web 表單和應用程序,而 W3C 專注于 XHTML 2.0。在 2006 年,雙方決定進行合作,來創建一個新版本的 HTML。

          HTML5 中的一些有趣的新特性:

          • 用于繪畫的 canvas 元素

          • 用于媒介回放的 video 和 audio 元素

          • 對本地離線存儲的更好的支持

          • 新的特殊內容元素,比如 article、footer、header、nav、section

          • 新的表單控件,比如 calendar、date、time、email、url、search

          <!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單

          下面是一個簡單的HTML5文檔:

          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>文檔標題</title></head><body>文檔內容......</body></html>

          HTML5 的改進

          • 新元素

          • 新屬性

          • 完全支持 CSS3

          • Video 和 Audio

          • 2D/3D 制圖

          • 本地存儲

          • 本地 SQL 數據

          • Web 應用

          HTML5 多媒體

          使用 HTML5 你可以簡單的在網頁中播放 視頻(video)與音頻 (audio) 。

          • HTML5 <video>

          • HTML5 <audio>

          HTML5 應用

          使用 HTML5 你可以簡單地開發應用

          • 本地數據存儲

          • 訪問本地文件

          • 本地 SQL 數據

          • 緩存引用

          • Javascript 工作者

          • XHTMLHttpRequest 2

          HTML5 圖形

          使用 HTML5 你可以簡單的繪制圖形:

          • 使用 <canvas> 元素。

          • 使用內聯 SVG。

          • 使用 CSS3 2D 轉換、CSS3 3D 轉換。

          HTML5 使用 CSS3

          • 新選擇器

          • 新屬性

          • 動畫

          • 2D/3D 轉換

          • 圓角

          • 陰影效果

          • 可下載的字體

          了解更多CSS3知識請查看本站的 CSS3 教程。

          HTML5 表單

          新表單元素, 新屬性,新輸入類型,自動驗證。

          已移除元素

          以下的 HTML 4.01 元素在HTML5中已經被刪除:

          • <acronym>

          • <applet>

          • <basefont>

          • <big>

          • <center>

          • <dir>

          • <font>

          • <frame>

          • <frameset>

          • <noframes>

          • <strike>

          TML5是HTML的最新版本,HTML又稱為超文本語言。如今幾乎所有的智能手機和平板電腦都能支持HTML5。HTML5培訓認為它的主要目的是用來開發更優秀、更高效的Web應用,它是在開放Web標準下開發的API和規范的。對于iOS和Android設備,都能很好的支持HTML5,因為它們運行的瀏覽器Safari、Chrome都基于WebKit,WebKit對HTML5有相當出色的支持。

          Web應用

          Web應用是指與桌面應用相似的web應用(Word、IE、Web瀏覽器),簡而言之,Web應用就是不直接在計算機上打開,而是通過Web瀏覽器來運行。使用HTML5為iOS和Android設計Web頁面的好處是在未來的設備上可以繼續使用。

          HTML5中的新標簽

          <article>-文檔或站點的一個獨立部分

          <aside>-頁面或站點主題之外的內容

          <figcaption>-figure元素的標題

          <figure>-獨立于文本流之外的一段流內容(圖形、圖表)

          <footer>-文檔或章節的頁腳

          <header>-文檔或標題的頁眉

          <hgroup>-標題組

          <nav>-導航

          <section>-章節部分

          以下是一小段代碼:

          在許多Web設計中,<div id="header">,在HTML5中將寫成<header>,還有一些其他不同變化。

          HTML5新的多媒體標簽

          <audio>-內嵌音頻文件

          <canvas>-內嵌動態圖形

          <embed>-增添其他不包含特定H5元素的技術

          <source>-內嵌音頻及視頻的源文件

          <track>-內嵌音頻及視頻的輔助多媒體軌道

          <video>-內嵌視頻文件

          HTML5 的新屬性

          onabort-操作終止時觸發

          onbeforeonload、onbeforeonunload、onunload-在某一元素記載或卸載之前或同時觸發

          oncontextmenu-打開菜單時觸發

          ondrag、ondragend、ondragenter、ongragleave、ongragstart、ongrop-發生拖拽時觸發

          onerror及onmessage-錯誤或彈出信息時觸發

          onscroll-用戶滾動瀏覽器滾動條時觸發

          onresize-調整元素大小時觸發

          HTML5擁有與視頻、音頻、Web應用程序、編輯頁面內容、拖拽以及展示瀏覽器歷史等功能相關的API,另外H5開放Web還提供于地理定位、Web存儲及離線Web應用程序的API,這些都非常適合在移動設備上使用。

          用CSS3設計移動頁面樣式

          CSS(層疊樣式表),是移動Web開發中的一個重要組成部分,CSS用于定義HTML文檔的外觀,Web頁面顯示或特定移動設備來定制HTML樣式。創建CSS樣式表,CSS由附加了樣式屬性的一個或者多個選擇器組成。例如在更改段落的文本顏色時,可以寫為:

          p {

          color:red;

          }

          p為選擇器,樣式屬性為color:red。如果要加入第二個選擇器,需要逗號隔開

          p, .redText }

          color: red

          }

          樣式表附加到Web頁面的方法:

          1、內聯在標簽中

          2、內嵌于HTML開頭

          3、放在一個獨立文檔作為樣式表

          內聯:

          將單一段落的文本顏色定位為紅色

          <p : red;">

          內聯的缺點是只能定義所在標簽的樣式,如果要講所有段落都定義為紅色時,需要就愛那個樣式屬性添加在每個段落。

          內嵌:

          內嵌樣式表位于文檔的<head>標簽中,使用<style>標簽,下面是講所有段落文本設置為紅色

          效果如下:

          內嵌樣式與內聯樣式一樣,只能影響所處頁面的樣式。如果我們需要將同一樣式作用于其他Web頁面,需要將它們分別粘貼到每個頁面,這個時候獨立的樣式表的好處就體現出來了。

          外聯樣式表

          創建外聯樣式表的步驟:

          1.打開一個新文檔

          2.編寫樣式表,但是要去掉<style>標簽

          3. 講該文件保存為擴展名為.css的樣式表文件,例如 :style.css

          下面的代碼是將段落定義為紅色并包含其他樣式的樣式表

          ps:完成樣式表,要記得講它附加到Web頁面中,在文檔開頭加一個指向樣式表的<link>標簽。代碼如下:

          <link href="styles.css" rel="stylesheet">

          ps:外聯樣式表可以提高網站加載速度,如果將所有樣式放在同一個文檔中的外聯樣式表

          學習無止境,鄭州HTML5培訓哪里好,快來藍鷗HTML5培訓看看吧,督促自己不斷前進!

          、什么是 HTML5?

          • HTML5 是最新的 HTML 標準;
          • HTML5 是專門為承載豐富的 web 內容而設計的,并且無需額外插件;
          • HTML5 擁有新的語義、圖形以及多媒體元素;
          • HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建;
          • HTML5 是跨平臺的,被設計為在不同類型的硬件(PC、平板、手機、電視機等等)之上運行;

          二、HTML5的一些新特性

          • 用于繪畫的 canvas 元素;
          • 用于媒介回放的 video 和 audio 元素;
          • 對本地離線存儲的更好的支持;
          • 新的特殊內容元素,比如article、footer、header、nav、section;
          • 新的表單控件,比如 calendar、date、time、email、url、search;

          三、video 元素

          • <video> 元素提供了播放、暫停和音量控件來控制視頻;
          • <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸;
          • <video> 與</video> 標簽之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的;

          video 元素的三種視頻格式:

          • Ogg:帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件;
          • MPEG4:帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件;
          • WebM:帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件;

          video 元素的屬性:

          • src:要播放的視頻的 URL;
          • width:設置視頻播放器的寬度;
          • height:設置視頻播放器的高度;
          • autoplay:自動播放;
          • controls:如果出現該屬性,則向用戶顯示控件,比如播放按鈕;
          • loop:循環播放;
          • preload:如果出現該屬性,則視頻在頁面加載時進行加載,并預備播放,如果使用 "autoplay",則忽略該屬性;

          video 元素的方法:

          • pause():暫停當前播放的視頻;
          • play():開始播放視頻;
          • load():重新加載視頻元素;
          • canPlayType():檢測瀏覽器是否能播放指定的視頻類型;
          • addTextTrack():向音頻/視頻添加新的文本軌道;

          四、audio元素

          • HTML5 規定了在網頁上嵌入音頻元素的標準,即使用 <audio> 元素;
          • <audio>元素能夠播放聲音文件或者音頻流;

          audio元素的三種音頻格式:

          • MP3:適用于Internet Explorer、Chrome、Safari 等瀏覽器;
          • Wav:適用于Firefox、Opera等瀏覽器;
          • Ogg:適用于Firefox、IE9、Chrome 瀏覽器;

          audio元素的屬性:

          • src:要播放的音頻的 URL;
          • autoplay:自動播放;
          • controls:如果出現該屬性,則向用戶顯示控件;
          • loop:循環播放;
          • preload:如果出現該屬性,則音頻在頁面加載時進行加載,并預備播放,如果使用 "autoplay",則忽略該屬性;

          audio元素的方法:

          • pause():暫停當前播放的音頻;
          • play():開始播放音頻;
          • load():重新加載音頻;

          五、canvas 元素

          什么是 Canvas?

          • HTML5 的 canvas 元素通過 JavaScript 在網頁上繪制圖像,元素本身并沒有繪制能力,它只是圖形容器,必須使用腳本來繪制圖形;
          • canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法;
          • 創建一個畫布
          <canvas id="myCanvas" width="200" height="100"></canvas>
          

          Canvas在HTML5 中的新屬性有:

          • height:設置 canvas 的高度;
          • width:設置 canvas 的寬度;

          六、繪制三角形

          getElementById():可返回對擁有指定 ID 的第一個對象的引用;

          getContext():返回一個用于在畫布上繪圖的環境,2d表示二維繪圖;

          beginPath():開始一條路徑,或重置當前的路徑;

          moveTo():把路徑移動到畫布中的指定點,不創建線條。

          lineTo():添加一個新點,然后創建從該點到畫布中最后指定點的線條(該方法并不會創建線條);

          closePath():創建從當前點到開始點的路徑;

          strokeStyle屬性:設置或返回用于筆觸的顏色、漸變或模式;

          stroke():會實際地繪制出路徑;

          fillStyle屬性:設置或返回用于填充繪畫的顏色、漸變或模式;

          fill():填充當前的圖像(路徑),默認顏色是黑色;

          //空心三角形
          var canvas=document.getElementById("myCanvas");
          var cxt=canvas.getContext("2d");
          cxt.beginPath();
          cxt.moveTo(50,50);
          cxt.lineTo(100,50);
          cxt.lineTo(75,100);
          cxt.closePath();//填充或閉合 需要先閉合路徑才能畫
          cxt.strokeStyle="red";
          cxt.stroke();
          //實心三角形
          cxt.beginPath();
          cxt.moveTo(150,50);
          cxt.lineTo(250,50);
          cxt.lineTo(200,150);
          cxt.closePath();
          cxt.fillStyle="#89E1BF"
          cxt.fill();
          

          演示圖



          圖1

          七、使用Canvas繪制一個空心圓

          arc():創建弧或曲線(用于創建圓或部分圓);

          <body>
           <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
          </body>
          <script type="text/javascript">
           var can=document.getElementById("myCanvas") 
           var ctx=can.getContext("2d"); //創建context對象
           ctx.beginPath();//標志開始一個路徑
           ctx.arc(100,100,50,0,2*Math.PI);//在canvas中繪制圓形
           ctx.stroke()
           </script>
          

          演示圖



          圖2

          八、繪制一個實心圓

          <body>
           <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
          </body>
          <script type="text/javascript">
           var c=document.getElementById("myCanvas");
           var ctx=c.getContext("2d"); 
           ctx.beginPath();
           ctx.arc(100,100,50,0,2*Math.PI);
           ctx.fillStyle="#deffff";
           ctx.fill();
           ctx.strokeStyle="red"
           ctx.stroke();
           </script>
          

          演示圖



          圖3

          九、繪制一個空心矩形

          strokeRect():繪制矩形(不填色),筆觸的默認顏色是黑色;

          <body>
           <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
          </body>
          <script type="text/javascript">
           var can=document.getElementById("myCanvas"); //獲得畫板數據
           var ctx=can.getContext('2d'); //獲得筆刷
           ctx.strokeStyle="blue"; //設置線條顏色
           ctx.strokeRect(100,100,100,100); //線條畫矩形
           </script>
          

          演示圖



          圖4

          十、繪制一個實心的矩形

          fillRect():繪制“已填色”的矩形,默認的填充顏色是黑色;

          <body>
           <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
          </body>
          <script type="text/javascript">
          var can=document.getElementById("myCanvas");//獲得畫板數據
          var ctx=can.getContext('2d'); //獲得筆刷
           ctx.strokeStyle="blue"; //設置線條顏色
           ctx.fillStyle="#ddedee"; //填充矩形
           ctx.fillRect(100,100,100,100);
           ctx.strokeRect(100,100,100,100);//線條畫矩形
           </script>
          

          演示圖



          圖5


          主站蜘蛛池模板: 亚洲福利一区二区| 一区二区三区精品高清视频免费在线播放 | 日韩一区二区电影| 无码国产精品一区二区高潮 | 精品国产一区二区三区www| 国产精品成人一区二区| 国内精品一区二区三区在线观看| 久久精品岛国av一区二区无码| 精品3d动漫视频一区在线观看| 亚洲欧美日韩一区二区三区| 精品熟人妻一区二区三区四区不卡| 制服丝袜一区二区三区| 国产品无码一区二区三区在线蜜桃 | 国产福利电影一区二区三区,亚洲国模精品一区 | 国产一区在线电影| 国产一区二区三区小说| 亚洲香蕉久久一区二区| 精品无码一区二区三区电影| 精品性影院一区二区三区内射 | 一区二区三区日本视频| 精品成人一区二区三区免费视频 | 麻豆高清免费国产一区| 无码国产精品一区二区免费16| 高清一区二区三区日本久| 在线精品国产一区二区三区| 国精品无码一区二区三区在线蜜臀| 高清一区二区三区| 上原亚衣一区二区在线观看| 国产高清一区二区三区四区| 超清无码一区二区三区| 精品一区二区三区中文字幕| 亚洲AV色香蕉一区二区| 久久久老熟女一区二区三区| 综合无码一区二区三区四区五区| 国产日韩一区二区三区在线播放| 欧美一区内射最近更新| 日韩精品一区二区三区视频 | 亚洲视频一区在线| 狠狠做深爱婷婷久久综合一区 | 一区二区中文字幕| 麻豆精品人妻一区二区三区蜜桃 |