2016年5月21日 星期六

基本HTML5架構 & XML說明

基本HTML5架構(HTML5 + CSS3 + JavaScript)

HTML5

HTML5是HTML最新的修訂版本,2014年10月由全球資訊網協會(W3C)完成標準制定。目標是取代1999年所製定的HTML 4.01和XHTML 1.0標準,以期能在網際網路應用迅速發展的時候,使網路標準達到符合當代的網路需求。廣義論及HTML5時,實際指的是包括HTML、CSSJavaScript在內的一套技術組合。它希望能夠減少網頁瀏覽器對於需要外掛程式豐富性網路應用服務(Plug-in-Based Rich Internet Application,RIA),例如:AdobeFlashMicrosoft SilverlightOracle 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)定義骨架
4.空格,換行有幾個都無所謂、大小也無所謂


對html完全沒有概念的人可以參考下方網站的介紹 : HTML入門 #1 - 網頁基本架構


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








沒有留言:

張貼留言

[java] 條件控制

前言: 在 java 的條件控制中可分為 if-else 架構、三元運算子、switch-case 架構這三類,其中 if-else、三元運算子為條件型的判斷,條件必須為 true/false布林值;switch-case 為比對變數型的判斷,條件值比較多可以是 char、...