七月 2, 2018

html

一、html介紹

html(HyperText Markup Language)超文件標示語言

是一種基礎技術，常與CSS、JavaScript一起被用於設計網頁、網頁應用程式及行動應用程式的使用者介面，HTML描述了一個網站的結構語意隨者線索的呈現，使之成為一種標示語言而非程式語言。

HTML包含一系列的元素( elements )讓你圍住、包裹或標記不同部分的內容，使得它們得以呈現出不同的風格樣式。跟一般文書處理器不同的地方在於，html具有超文字(HyperText)、超連結(HyperLink)、超媒體(HyperMedia)的特性，透過HTTP網路通訊協定，便能在世界各地透過WWW的架構做跨平台的交流。

二、了解HTML架構

1.元素

HTML 元素指的是從開始標籤（start tag）到結束標籤（end tag）的所有代碼。

1.起始標籤(opening tag)：包含了元素名字p，元素開始的地方

2.結束標籤(closing tag)：表示元素結束的地方，比起始標籤多了一條斜線

3.內容(content)：表示元素的內容，例；上圖中的”歡迎光臨”

4.元素(element): 以上三者加起來就是元素

實例說明：
<p>I am a girl.</p>

這個<p>元素定義了HTML 文檔中的一個段落。
這個元素擁有一個開始標籤<p>，以及一個結束標籤</p>。
元素內容是：I am a girl.

1.1空元素

沒有內容的HTML元素稱為空元素。
< br >是一個沒有結束標記的空元素（< br >標記定義換行）。

1 2	實例說明： I am a boy.<br>

2.屬性

HTML標籤可以擁有屬性。屬性提供了有關HTML元素的更多的信息。

屬性會再開始標記中指定，總是以名稱/值對的形式出現，比如：name=”value”。

實例1說明：href屬性
HTML 鏈接由<a> 標籤定義。鏈接的地址在href 屬性中指定：
< a href = "www.yahoo.com.tw"> This is a link </a>

實例2說明：src屬性
HTML圖像是用<img>標籤定義的。圖像的文件名在src屬性中指定：
<img src="img_girl.jpg">

3.標籤(Tags)

每一個標籤都是由「<」及「>」所包圍，通常都是成對出現

在成對的標籤中，第一個標籤是開始標籤，第二個標籤是結束標籤，兩個標籤之間為元素的內容

標籤大致可分為兩種：

1.出雙入對型：標籤會成對出現，基本格式為<標籤名>文件內容</標籤名>，例如：< body >hello< /body >

2.獨來獨往型：標籤只單獨出現，例如：< hr >、< br >等等

三、html文件的基本語法

<!DOCTYPE html>
    <html> 
      <head>
        <meta charset='utf-8'> 
        <title>標題</title>
      </head>
      <body>
        文件內容<!--註解-->
      </body>
    </html>

1.< !DOCTYPE html > 標記

通知Web瀏覽器正在使用哪個版本的HTML，並位於HTML文檔的開頭，只需在頁面頂部出現一次（在任何HTML標記之前）。

2.< html > 標記

< html > < /html >為 HTML 超文件檔案的開始與結束之宣告標記，所有網頁元件及相關的標記均放在此二標記之間，這組標記是用來表示此檔案為 HTML 檔案。
任何純文字檔 (如 .txt 檔) 的首尾加上此標記，並更換副檔名為 .htm 或 .html，即可由瀏覽器開啟閱讀。

超文件檔案的內容又分為頁首 (head) 及主體 (body) 兩大部份，分別以< head > < /head > 及< body > < /body > 隔開。

3.< head > 標記

< head > < /head > 這組標記是用來表示此二標記間的內容為網頁標題，所有與該 HTML 文件相關的資訊均放在此二標記之間，例如：標題 (title) 文字的設定，如不欲顯現標題，則可省略此標記。

4.< meta charset=’utf-8’ >標記

這個元素指定了你的文件使用utf-8這種字元編碼，可以幫助你免去許多文字無法正確呈現的問題。

5.< title > 標記

< title > 元素是用來設定網頁名稱，會顯示在分頁標籤上。

6.< body >標記

< body > < /body > 為超文件檔案主體的開始與結束之宣告標記，此二標記之間的內容為網頁主體部份，所有與主體相關的元件 (element) 及標記均放在此二標記之間，欲呈現之內容可以是任何訊息，包括文字、圖片、影像、聲音等。

主體之各類屬性 (attribute) 的設定均直接置於< body >的標記之內，以空白隔開。如果設定超過一個屬性，則以空白隔開不同的屬性。例如： < body bgcolor=#ffffff text=#000000 > 表示白底黑字網頁的設定。

7.< !- - - - >註解

在HTML中，就像大部分的程式語言，提供了一種方式讓我們可以在原始碼中加入註解，註解是會被瀏覽器忽略，並且不會被使用者看到的，目的是要讓你在原始碼中加入註解以說明你的原始碼是如何運作的、各個部分原始碼的作用等等。