基本HTML5架構(HTML5 + CSS3 + JavaScript)
HTML5
HTML5是HTML最新的修訂版本，2014年10月由全球資訊網協會（W3C）完成標準制定。目標是取代1999年所製定的HTML 4.01和XHTML 1.0標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要外掛程式的豐富性網路應用服務（Plug-in-Based Rich Internet Application，RIA），例如：AdobeFlash、Microsoft Silverlight與Oracle JavaFX的需求，並且提供更多能有效加強網路應用的標準集。
ps: HTML5的分工概念(HTML : 骨架、CSS : 皮肉、JavaScript :神經)
Html 語法概念與架構
所有的HTML標籤(tag)都有固定的格式，必須由「<」符號與「>」符號括住，例如<html>。HTML 有分Container Tags、Single Tag兩種。
Container Tags:
成雙成對的起始標籤與終止標籤，利用這兩個標籤將所需的訊息圍住，已達到預期的效果。大部分的HTML標籤都是屬於此種標籤，終止標籤前會加上一個「/」。
例如:<title>我的網頁</title>
<head></head>
<body></body>
Single Tag:
單一標籤只有起始標籤沒有終止標籤，例如:<hr>、<img>等標籤都是屬於單一標籤，<hr>功能是加入分隔線，<img>是插入圖片。這些標籤加上終止標籤是沒有意義的，所以這時只要將標籤表示成<hr/>即可，不必寫成<hr></hr>。
HTML的組成
一份最簡單的HTML網頁，是由<html>與</html>標籤標示出出網頁的開始與結束，網頁內分為「頭部(head)」「身體(body)」兩部分。
1.<head></head>標籤:這裡通常會放置網頁的相關資訊，例如<title>、<meta>，這些資訊通常是不會直接呈現於網頁上。
2.<body></body>標籤:這裡通常是放置網頁的內容，這些內容將直接呈現在網頁上。
標籤屬性的運用:
有些標籤可以加上屬性(Attributes)，來改變其在網頁呈現的方式，屬性直接放置於起始標籤內，如果超過一個以上的屬性，則以空白隔開不同的屬性，語法如下。
<起始標籤 屬性名稱1=設定值 屬性名稱2=設定值 ......>
例如:<meta>標籤是用來描述網頁，有利於搜尋引擎能快速找到網站的分類。
補充:
1.用來統一電腦、手持式設備瀏覽器的規格
2.擴充原有HTML(4.0以前)的功能(GPS、存取外部硬碟、執行緒...等，主要是手持式設備)
3.用來為"畫面"(UI)定義骨架
WebMatrix3 (撰寫Html5的編輯器)
CSS標準語法
CSS全名為「串接樣式表(Cascade Style Sheet)」，簡稱CSS樣式表，1996年由W3C組織所定義，目前最新版本為CSS3，主要是用彌補HTML在樣式排版上的不足，也由於CSS可以豐富網站的視覺效果，因此又有網頁美容師之稱。CSS具有以下幾點特色。
1.語法簡單、撰寫容易:
CSS可以精準控制版面位置、網頁配色以及產生文字與圖片特效，功能強大但是語法卻很簡單。
2.增加網頁設計彈性，讓網頁更容易維護:
CSS語法事與HTML分開撰寫，兩者可以寫在同一份網頁文件裡，也可以將CSS另存之後，在HTML文件裡叫用。如果要調整網頁樣式時，只要更改CSS語法就好，大大減少網頁更新的麻煩。
3.加快網頁載入的速度:
套用CSS樣式之後，有些控制字形、段落的HTML標籤就可以從網頁中移除，將可減少程式碼的數量，程式碼越少，網頁載入的速度就越快。
4.統一網站的風格:
網站內所有網頁，都可以套用同一份CSS樣式表，如此一來，網頁風格就能夠輕鬆統一樣式。
練習範例
1.使用 style 標籤做處理，目前使用的選擇器為 class
2.selector {
樣式1 : 值;
樣式2 : 值;
….
}
demo1.html 與 網頁顯示效果
demo2.html 與 網頁顯示效果
Icon免費資源
http://www.iconarchive.com/
XML 與 HTML 的關係
http://yes.nctu.edu.tw/Lecture/NewTech/C05_NewEra/XML/IntroXML/chapter2.html
以Andorid layout 的架構來說明xml
沒有留言:
張貼留言