認識 HTML
認識 HTML
前言
HTML（HyperText Markup Language），中文全名為「超文字標示語言」，是一種用來組織架構並呈現網頁內容的程式語言(或是說 : 網頁呈現的文件格式，更為恰當)。網頁內容的組成，可能包含了段落、清單、圖片或表格...等。
大綱
- HTML 到底是什麼？
- HTML 網頁的文件的架構
- 網頁基本架構
- 標籤 Tab 內容說明
- HTML 元素的組成
- 元素的屬性
- 空元素
HTML 到底是什麼？
HTML 是一種標記語言（markup language），而非一般熟知的程式設計語言；它會告訴瀏覽器該如何呈現你的網頁 - 單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的元素（elements），而元素包含了 標籤（tags (en-US)）與 內容（content），我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。例如以下這個句子：
歡迎來到Aron阿龍的世界!
寫成HTML格式，呈現在瀏覽器上的文字，如下
<p>歡迎來到Aron阿龍的世界!</p>
HTML 網頁的文件的架構
網頁基本架構如下
- <html>
- <head></head>
- <body></body>
- </html>
架構標籤 Tab 內容說明
- <!DOCTYPE html> — 文件類型（doctype）。 在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。
- <html></html> — <html> 元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。
- lang="zh-Hant-TW" : 語言屬性 lang，這裡使用參數 : zh-Hant-TW 臺灣使用的簡體中文。
- <head></head>：<head> 元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。
- <meta> (中繼資料) : <meta charset="utf-8"> — 這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。
- <title></title> : 呈現於網頁瀏覽者眼前的網頁標題。
- <script></script> : JavaScript 程式碼區塊
- <link> : 外部連結、
- <style></style> : CSS樣式。
- <body></body>：<body> 元素，包含了所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲...等。
- 這些標籤需以巢狀結構包覆閉合(close)，才是符合HTML結構的語法。
HTML 元素的組成
讓我們來仔細的觀察一下，內容、標籤和元素的關係：
我們可以看到基本的架構：
- 起始標籤 （The opening tag）：先打角括弧，也就是大於、小於的符號「< >」，裡面再放入元素名稱，如上面的例子「<p>」。起始標籤代表這個元素從這裡開始。
- 結束標籤 （The closing tag）： 與起始標籤一樣，只是在元素名稱前面多了個前置斜線「/」。很容易理解地，內容的最後加上結束標籤，代表這個元素的尾端。在寫HTML時，很容易忘了最後的結束標籤，提醒大家要多注意唷！
- 內容（The content）： 這個元素的內容，以上面的例子來說，內容就是這句文字。
- 元素（The element）： 由起始標籤、結束標籤、內容所組成。
元素的屬性
元素的起始標籤內還可以有「屬性（Attribute）」，請大家看看下面的例子：
屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。
屬性的組成包含：
- 在元素名稱和屬性之間有一個空格（如果有多個屬性，屬性之間也需要有空格）
- 屬性名稱後面接著等於符號「=」
- 屬性包在起始標籤裡面，如範例所示
空元素
有些元素沒有內容，我們稱為「空元素（empty elements）」。
圖片元素 <img> 為例：
<img src="images/firefox-icon.png" alt="My test image">
它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。因為圖片元素是直接把圖檔嵌在 HTML 網頁上。
另外換行元素 <br/> ，也是空元素。
...........完整的HTML教程，請參考 : MDN 的「學習專區（Learning Area）」， w3schools - HTML 教程
參考資料
特色、摘要，Feature、Summary:
關鍵字、標籤，Keyword、Tag:
- html,htmlcss-web,codeindex,
留言
張貼留言
Aron阿龍，謝謝您的留言互動!