從HTML5菜鳥到入門，一篇總結得很好的文章！

來千鋒武漢HTML5前端培訓班已經有接近三個月了，作為一個零基礎的學員，相對其他科班出生的同學基礎要差很多，而且也是在外工作一年多因為一些原因想到轉行過來的。第一階段的學習已經告一段落，主要從以下幾個方面總結一下自己的感受：

第一，為什么要選擇來千鋒武漢HTML5前端培訓班學習。之前的工作感覺自己已經能夠看到幾十年后的自己，毫無動力毫無目標而言，正好有個朋友去年在千鋒學習過前端課程并且工作狀況也不錯，于是就毅然決然選擇離職來到千鋒參加培訓，對于我而言也是一個很大的改變，一切從零開始。

第二，談一下來到班級一個月的感受。從第一天的開班典禮到最后考完第一階段的試卷大家一起出去玩，感覺就像回到以前的學校時光，自我感覺也是很不錯的，和身邊的同學的相處也比較融洽，所以每天學習的心態也會比較好。不懂得一起交流或者問問老師，知識越來越多，感覺越來越踏實。但是有一點不足的是，只認識前后兩排的同學，班級上一大半的同學會叫不出名字，也不知道以后會有什么機會能夠認識更多的同學。

第三，談一下自己一個月的學習狀況。我從小到大的學習習慣就是，該學的時候就好好學，該休息放松的時候一定要好好休息，只有勞逸結合才能事半功倍。所以每天我在班級里就認真聽講，做好筆記，把老師講的所有知識都務必搞懂，回家了學習效率會比較低下，一般選擇休息。

其實學習沒什么捷徑可走，只有努力，上課認真聽，練習的時候認真寫代碼，不懂的要經常問老師和學的好的同學。千鋒武漢HTML5前端培訓課后時候要復習當天的內容，并且學會預習第二天要學習的課程，這樣自己學習起來要輕松一些。在空閑的時候應該抽出時間來練習代碼，都是十萬代碼十萬年薪，所謂勤能補拙，基礎是可以通過努力提升上來的。

在做前端，如果說自己不會h5，你很有可能被你的客戶嘲笑，說什么最新技術都不會！h5其實沒什么，只不過是html技術的進一步發展，主要是增加了一些新的元素而已。

HTML5 <!DOCTYPE>

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

新特性

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

用于繪畫的 canvas 元素

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

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

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

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

HTML5 添加了很多語義元素如下所示：

標簽	描述
<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 表單

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

已移除元素

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

<acronym> 標記一個首字母縮寫，h5用abbr代替

<applet> 用object代替

<basefont>規定頁面上的默認字體顏色和字號：

<big>呈現大號字體效果。

<center> 這個...這么常用為什么去掉？？

<dir> 簽定義目錄列表。類似于ul

<font> //這個也是比較常用的，但是取消了

<frame> 標簽定義 frameset 中的一個特定的窗口（框架）

<frameset>定義一個框架集

<noframes> 元素可為那些不支持框架的瀏覽器顯示文本。noframes 元素位于 frameset 元素內部。

<strike>標簽可定義加刪除線文本定義。

HTML5 瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用的靜態資源的html5shiv包：（菜鳥教程）

載入后，初始化新標簽的CSS：

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

HTML 5 視頻

寫法：<video src="movie.ogg" controls="controls" width="320" height="240">文字</video>

control 屬性供添加播放、暫停和音量控件。

<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：

注意：要確保適用于 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。所以video 元素允許多個 source 元素

所以寫成：

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video> 標簽的屬性

autoplay：值為：autoplay，如果出現該屬性，則視頻在就緒后馬上播放。

controls：值為：controls如果出現該屬性，則向用戶顯示控件，比如播放按鈕。height：pixels設置視頻播放器的高度。

loop：值為：loop，如果出現該屬性，則當媒介文件完成播放后再次開始播放。

preload：值為：preload，如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。

src：值為：url，要播放的視頻的 URL。

width：值為：pixels，設置視頻播放器的寬度。

同時還可以支持dom事件支持：play()，pause()，load()，canPlayType();

HTML 5 音頻

寫法：<audio src="song.ogg" controls="controls">Your browser does not support the audio tag.</audio>

control 屬性供添加播放、暫停和音量控件。

<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示

當前，audio 元素支持三種音頻格式：mp3，mav和ogg，Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。多個 source 元素支持。

<audio> 標簽的屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
preload	preload	如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。

HTML 5 拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

draggable="true" 設置元素為可拖放 <img draggable="true" />

ondragstart 和 setData()規定當元素被拖動時，會發生什么

ondragoverondragover 事件規定在何處放置被拖動的數據。

Ondrop：當放置被拖數據時，會發生 drop 事件。

(說實話真心不好理解，看一下w3c給的案例吧：)

<script type="text/javascript">
function allowDrop(ev)
{ev.preventDefault();}
function drag(ev)
{ev.dataTransfer.setData("Text",ev.target.id);//方法設置被拖數據的數據類型和值：
}
function drop(ev)
{
ev.preventDefault();//阻止對元素的默認處理方式,默認不接受拖拽元素的
var data=ev.dataTransfer.getData("Text");//獲得被拖的數據
ev.target.appendChild(document.getElementById(data));//放置進去
}
</script>
<div id="div1" ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"ondragstart="drag(event)" width="336" height="69" />

這個拖拽看起來比較費勁，一般我們也用不到，大家可以先收藏起來，如果需要用到的時候，再返回來直接套用案例！

未完待續.....

看不懂沒關系，多用幾次，平時寫網頁的時候，可以慢慢的增加使用h5標簽，因為除了ie8一下，大部分瀏覽器還是可以支持的！本教程是結合了w3c，菜鳥教程，慕課網的內容總結的，如果不妥多多指教！

知不覺，在千鋒武漢HTML5培訓學習已經三個月了。最近這段時間，我一直在學習原生js的相關知識，而這周，正好是第二階段第二個月的考試周。為了過關，在這里進行知識點的回顧和總結。

首先，js的概念是：JavaScript 是一門跨平臺、面向對象的動態的弱類型的輕量級解釋型語言，是一種基于對象和事件驅動并具有相對安全性的客戶端腳本語言。應用于 HTML 文檔能夠在網站上提供動態的交互能力，他不同于Java。

其次，js由三部分構成：BOM、DOM、ECMAScript核心。注意，script標簽要放在body上面，需要在其中加上Window.onload。

最后，我們在最近這兩周做了來到千鋒武漢HTML5培訓之后的第一個項目，在這次做項目中，暴露出很多不足，我總結在下面：

這次做項目，遇到很多以前沒見過的bug，也通過和同學交流學習，了解到很多以前不知道的小技巧，這些是資料上學不來的，可以說是受益匪淺。在這里，我總結一些自己遇到的bug，解決的附上解決辦法，沒解決的，希望有看到的大佬可以幫忙解決。

1、一個很容易產生的bug，許多程序猿編寫html和css時，都會遇到浮動和定位引起的高度塌陷的問題，我們都知道解決高度塌陷的方法，但是有時寫的high了，會不看效果，一直編寫，最后打開頁面一看，一團亂麻，不僅不好找錯誤，而且看著亂七八糟，容易產生厭煩心理。這時候，就需要一個方便解決高度塌陷的辦法。

解決方法：用我們以前學過的BFC的知識，在每個功能結構下面加一個div，class設置成clear，css樣式就寫成以前學習的萬能清除法，這樣就有效避免高度塌陷。

2、輪播圖bug。這次項目中，主頁的輪播和以前做過的不太一樣，小圖是三張一起運動，而每張鼠標時，有一個給其他可視兄弟元素添加遮罩的事件，這個用jquery可能很好寫，但是我大部分用原生寫的，再用jquery就會遇到很多問題，比如下面的span滑塊設置了進度條功能，但是不生效，也不報錯。

3、購物車總計有問題，點擊減少購買數量按鈕時，會出現input框中的數字為1，但是總計的價格依然可以減少。

在千鋒武漢HTML5培訓的三個月讓我明白了，自己仍然是井底之蛙，前端的知識博大精深，我不懂的還有很多，希望能通過這次考試，讓我可以繼續學習新的知識，為自己的將來做準備，爭取高薪！

在線咨詢

上一篇：HTML <area> 標簽
下一篇：Python將HTML轉換為JPG、PNG圖像