HTML5初學

Html 5的優勢在於1)可以跨平臺開發,PC端的程序可以不經過任何修改就在移動端順利運行;2)支持在線視頻,不依賴於Flash插件,像微信裏面的小視頻就可以使用這種方法。

Html5主張行爲(JavaScript)、樣式(CSS)、結構(HTML)三者分離,以便於實現樣式複用、以後修改也更方便,不會影響到其他內容。我們在做H5案例的時候應該先做到內容展示再加載行爲,吸引用戶訪問網站。移動端開發相對於PC端尤其是IE6/7/8來說兼容性問題較少,主要分爲三種類型:a.原生開發(IOS/android應用開發) b.html5開發 c.混合開發。目前第三種開發方法佔據絕大多數,因爲H5的技術可以直接嵌入到安卓系統中。

下面是筆者關於H5標籤的理解和相應的Demo,但是因爲個人水平問題,可能會存在錯誤,希望有小夥伴發現的話可以在評論裏指出來。

首先,H5相比較Html4.0.1版本新增加了7個結構性標籤,如下所示:

1.<header></header>

這個標籤是表示頁面中一個內容區塊的頭部內容或者整個頁面的標題,是使用最普遍的H5新標籤之一,用來代替以前版本里面的<div id="head"></div>這樣的內容,兩者誰更簡便一目瞭然。
2.<section></section>
這個標籤用來表示頁面中一個內容區塊,一個頁面中可以有多個section,與之相對的是main標籤,雖然也是規定文章的主要內容,但是頁面中通常只能有一個,而且裏面的元素對於文檔來說是唯一的,類似側邊欄、導航欄、版權信息、站點標誌都不能包含在main標籤裏面。
3.<footer></footer>
這個標籤是指頁面或頁面一個區塊中的頁腳,一個頁面中可以有多個這個標籤。
4.<nav></nav>
這個標籤是指網頁的導航欄,而且是指主導航欄,如果文檔中有前後按鈕的必須包含在nav標籤裏面。
5.<article></article>
這個標籤指頁面中獨立的、與其他內容不相干的內容,如一篇文章之類的。
6.<aside></aside>
表示<article>元素內容之外的並與<arti表cle>元素內容相關的輔助信息。實際開發中主要用於側邊欄,與article標籤一起使用。
7.<figure></figure>
表示一段獨立的流內容,一般表示主體文檔內容中的一個獨立單元。使用<figcaption>元素爲<figure>元素組添加標題。
結構標籤演示代碼如下所示:

    

頭部標籤

第一個section第二個section第三個section

頁腳



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章