既上次的感慨小筆記提到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 非常短小，我想很多人會很愛這個
就是這麼短耶，有點驚人的簡潔， = = 回去看看html4的宣告...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
類似這樣，超長的...
接下來是關於body本體會用到的標籤等等的改變。
這個嘛..先回憶一下網頁的基本架構
首先有個宣告
接下來要介紹的東西都是指放在<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是甚麼，其實就大概就是
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的宣告:
就是這麼短耶，有點驚人的簡潔， = = 回去看看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>
|
有一件事要說一下，就是呢...即使沒有使用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的語意標籤 :
所以如果以上面那個範例用html5來看，可能會變成這樣:(可能..因為我是猜的)
待續....part2好了，睏!
參考文獻 |
一定要學會的HTML5+CSS3網頁設計實作應用 高京希/著 博碩文化
<header>
|
使用上的意義就是平常的header
|
<nav>
|
這個<nav>很特別，他指的是一般網頁的那種導覽列，像是menu之類的。有的資料說這是一個導航作用的標籤..
|
<section>
|
文檔的節
|
<article>
|
文件內容
|
<aside>
|
這個有點像是放一些比較無關緊要的東西，放在側邊，所以有side。通常就是一放些標籤雲阿，超連結，有國外的網站說會放一些拉報價之類的，哈哈
|
<footer>
|
使用上的意義就是平常的footer
|
所以如果以上面那個範例用html5來看，可能會變成這樣:(可能..因為我是猜的)
待續....part2好了，睏!
參考文獻 |
一定要學會的HTML5+CSS3網頁設計實作應用 高京希/著 博碩文化
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD