2011年9月29日 星期四

HTML5筆記-part1

既上次的感慨小筆記提到HTML5來臨
HTML5是甚麼,其實就大概就是 
  HTML  +  CSS3 + Javascript   
 (在我的認知裡javascript被jQuery取代,因為我根本不會javascript 呵呵)

現在要大概概述一下HTML5是怎麼來的? 



我想好一陣子大家都有發現越來越多人用手機上網,但是手機看網站跟一般用PC看網站,其實有不相容的問題,這個問題是怎麼來的呢,以前製作網站是為了給使用PC的人看的,而現在智慧型手機普及就改變了人們上網的方式,所以,而HTML5呢,似乎是有點為了解決這個問題而生的(當然這也不是最大主因),應該是好多好多想要解決的事情突然一次用html5來解決的感覺XD

HTML5為甚麼會竄起,ㄜ..應該說呢HTML5跟CSS3之所以被喜歡,主要是因為很多瀏覽器都支援他,光是大多瀏覽器支援這點就夠重要了,總不可能排了老半天的版型,結果在不同瀏覽器開起來是不同畫面吧! 應該沒有人希望自己的網站會是這種結果。加上apple排擠flash,更顯的HTML5越來越重要。

還有一點就是網路應用程式的問題,像google的文件工具,應該就是一種網路應用程式,就是說你的電腦可以不用灌word,只要有網路,並且打開google文件,一樣可以編輯,這種利用網頁本身來做為應用程式的,就是網路應用程式。隨著這種便利的網路應用程式越來越多,就表是說html4能夠支援的越來越少,所以...或許你想使用這些網路應用程式的同時,通常很麻煩的他都會跳出一個希望你安裝外掛程式的請求,最常看到的就是activeX之類的這種。

所以 HTML5的出現,希望不要這麼麻煩去安裝這些外掛程式,連flash都排擠掉了呢...簡單一句就是他不想要有外掛。HTML5想脫離很單純的網頁標籤,開始發展有點類似程式語言的感覺了,而且還可以包含網頁應用程式API。



結尾 | HTML5或許會是未來很重要的網頁技術,以html5為基礎撰寫的程式碼,在大部分的瀏覽器下,就比較不會有看起來不一樣的結果,不必擔心為了符合各個瀏覽器撰寫多於的程式碼。


來說說flash的問題在哪?


其實我覺得flash沒有甚麼不好,一個月前我是一個很喜歡flash的人,因為說實在的設計能力很強的人,flash能夠表現的自由度真的很夠,重點是,不會寫成是怎麼辦?,學設計的只會用flash~~,只是用在網站真的很需要去注意大小的問題。

或許我只用過PC看過flash做的網站,因此我感受不到他的影響在哪。

不過為甚麼賈伯斯會不喜歡flash,最主要的原因在於,flash顯示在iphone的確有很大的不方便,檔案大,尤其影響效能,也會影響電力,因此ipad跟iphone都排擠flash,而這個現象使的html5開始受歡迎了,連google都支援html5。


不過像我這種很喜歡flash的人到是覺得這沒甚麼XD 其實也沒甚麼好擔心,我比較期待google提升flash的搜尋能力。




新標籤?


是的,這是一個非常廢話的標題,html5一定改變了甚麼,所以才值得學習與崇拜。
一個很重要的基礎-宣告-
DOCTYPE (DOCTYPE 就是告訴瀏覽器你現在的文件是甚麼類型)
這個非常重要,如果你沒有一開始就宣告你的網頁類型,那麼等於... 白做了? 可能會再不同瀏覽器有不同結果。不過html的DOCTYPE 非常短小,我想很多人會很愛這個
  • HTML5的宣告:
<!DOCTYPE html>  
就是這麼短耶,有點驚人的簡潔, = = 回去看看html4的宣告... 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 類似這樣,超長的... 

接下來是關於body本體會用到的標籤等等的改變。
這個嘛..先回憶一下網頁的基本架構
首先有個宣告

<! DOCTYPE html>
<html>
<head>
<--表頭區-->
<title>我的小筆記</title>
</head> 

<body>
<--本體-->
</body>
</html>

接下來要介紹的東西都是指放在<body>與</body>裡面的標籤
有一件事要說一下,就是呢...即使沒有使用html5新的標籤,照常使用<div>排版,一樣是能用的。但是,html5的標籤,並不是普通的標籤,他是
語意標籤(Semantic MarkUp),意旨本身帶有義意的標籤,這個算是突破呢,還是方便,我也不知道耶老實說,但是看起來只要不要濫用,就還ok,基本上html5的語意標籤,看起來應該是很方便的,因為可以馬上知道哪個是做甚麼用。



這個嘛...帶有語意的標籤到底是甚麼意思呢?
回顧一下平常是怎麼排<div>的
這個是我以前的範例























暫且不管float(浮動)的設定,我的html應該會是類似(只放大塊的)
</head>
<body>
<div id="#container"> 
  <div id="#header"> 我是header </div>
  <div id="#menu">我是menu </div>
  <div id="#content">我是左邊的content</div>
  <div id="#mylink"> 我是又</div>
  <div id="#footer"> </div>
</div>
</body>
</html>

從上面的架構可以知道一件事情,就是這一塊一塊的<div>標籤,都必須給他一個id ,為每個<div>取名子,得以辨識哪個<div> 誰是#container,誰是#footer,這樣是有點煩雜而且多餘的,重點是只看程式碼不好理解整個html文件的架構(我想在我的範例可能看不出來有這個問題 呵呵)。
所以為了改善這些或許沒有意義的<div>標籤,因此html5產出了具有意義的語意標籤,讓標籤本身就帶有意義,而且還可以有id,比方說在html4,上面那一句<div id="#header"> 我是header </div>,在html5就非常精簡的只要打<header>就等於同這一句了。
<div id="#header"> 我是header </div> = <header>我是header</header>

所以這些語意標籤,一用就可以讓看的人方便辨識,另外是有聽說對於搜尋網頁內容有幫助。所以這裡有一些html5的語意標籤 :

<header>
使用上的意義就是平常的header
<nav>
這個<nav>很特別,他指的是一般網頁的那種導覽列,像是menu之類的。有的資料說這是一個導航作用的標籤..
<section>
文檔的節
<article>
文件內容
<aside>
這個有點像是放一些比較無關緊要的東西,放在側邊,所以有side。通常就是一放些標籤雲阿,超連結,有國外的網站說會放一些拉報價之類的,哈哈
<footer>
使用上的意義就是平常的footer


所以如果以上面那個範例用html5來看,可能會變成這樣:(可能..因為我是猜的)

























待續....part2好了,睏! 


參考文獻 |
一定要學會的HTML5+CSS3網頁設計實作應用 高京希/著 博碩文化 

沒有留言:

張貼留言

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...