1. 程式人生 > >web開發 常用概念的理解 以及 H5標籤概念的重新解讀

web開發 常用概念的理解 以及 H5標籤概念的重新解讀

一、簡單談談剛接觸web時的概念  

1.   一般來講,我們對全球資訊網的準確定義為:  是一個有許多相互連線的超文字組成的系統。通過網際網路訪問 。  簡單的來說,就是 一個資源互聯的網路------ps:最早由Sir Tim Berners-Lee (蒂姆-伯納斯-李爵士搭建)。web的定義資訊資源的網路。


    2.  html :  超文字編輯語言。可能很多開發者早對次耳熟能詳,但我們更應該關注的是他的本質作用:承載結構化的資訊。

     3.web標準:簡單的來說

div+css就可以說是web標準。也可以說大家的開發習慣給規約起來。

     4.web語義化: 給全球資訊網上的文件新增能夠被計算機識別的元資料)(mate 、data、script、等)。web標準很大程度上都是為web的語義化服務的。


二、H5  部分

1、 語義化:幫助html更好的實現結構化可以說是HTML5的首要核心技術增強,具體的就是提供了很多語義化的標籤 ,下面列出常見的一些語義化的標籤。     


<section></section>用於對網站或應用程式中頁面上的內容進行分塊。通常由內容及其標題組成。

<article></article>代表文件、頁面或應用程式中獨立的、完整的、可以獨自被外部引用的內容。當我們描述一件具體的事物的時候,通常使用article來代替section。如一個帖子,一段使用者評論等。

<aside></aside>表示當前頁面或者文章的附屬資訊部分。如與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組等。

<nav></nav>用作頁面導航的連結組,其中可以包括<ul><li><p>元素等。

<time></time>表示某個時間或者某個日期。其中pubdate屬性代表了文件的釋出日期,可以用到time標籤裡。

<header></header>整個頁面或者頁面內容區塊的標題,可以包含其他內容。

<footer></footer>頁尾,頁面底部或者版塊的內容。

<hgroup></hgroup>頁面上標題的組合,通常對h1~h6進行分組。

<address></address>文件作者或者文件維護者的聯絡資訊。

<figure></figure>通常用於圖片,統計圖或程式碼示例,帶有可選標題。將其從網頁上移除後不會對網頁上其他內容產生影響。

<figcaption></figcaption>表示figure的標題,從屬於figure元素。

<mark></mark>頁面中需要凸顯出或者高亮顯示的,對於當前使用者具有參考作用的一段文字。

<progress></progress>代表一個任務完成的進度。

<details></details>描述文件或者使用者要求得到並且可以得到的細節資訊。與summary元素配合使用。

<summary></summary>給details元素提供標題或者圖例。標題是可見的,使用者點選標題時,會顯示細節資訊。

<datelist></datelist>選項列表。與input元素配合使用,來定義input可能的值。

<keygen></keygen>給表單新增一個公鑰.

<menu></menu>選單列表。HTML4中不推薦使用。

html5中新標籤在ie6到ie8下的相容性解決方法:在html頭部加入html5.js來解決。

2、離線儲存 H5中的AppCache、localStorage、IndexDB和fileAPI  這些技術標準使得web應用程式更加循速,並提供了離線使用的能力。下邊提供關於這幾點技術的使用參考:

     AppCache:https://www.cnblogs.com/shaojun/p/4104410.html

     localStorge:https://www.cnblogs.com/st-leslie/p/5617130.html

    IndexDB:https://www.cnblogs.com/dengyulinBlog/p/6141636.html


3、裝置訪問 (重力感應   地理定位)參考技術:Orientation API (重力) Geolocation(地理定位)

4、通訊(Connectivity) 參考技術webSocket  Serev-sent Events。

5、多媒體

6、圖形和特效 SVG  Canvas  WebGL等功能使得2D  3D遊戲方面的不二之選

7、呈現(css3)

8、效能  webwork的出現使得瀏覽器也可以多執行緒處理任務而不阻塞使用者的介面渲染。


2      2