什麼是HTML?
HTML
HTML（HyperText Markup Language，超文本標記語言）
它表述並定義網頁的內容，包含了一系列的元素（elements），而元素包含了標籤（tags）與內容（content），我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。
伴隨 HTML 而來的技術還有描述網頁外觀（CSS）及功能性的程式語言（JavaScript）。
HTML的元素組成
- 起始標籤 （The opening tag）：**先打大於、小於的符號「< >」，裡面再放入元素名稱，如上面的例子「
<p>」。起始標籤代表這個元素從這裡開始。 - 結束標籤 （The closing tag）： 與起始標籤一樣，只是在元素名稱前面多了個前置斜線「/」。
- 內容（The content）： 這個元素的內容，以上面的例子來說，內容就是這句文字。
- 元素（The element）： 由起始標籤、結束標籤、內容所組成。
巢狀元素
元素裡面可以在放進元素，我們稱之為「巢狀元素（nesting element）」。
例如這個句子：「My cat is very grumpy.」，若想強調「very」，就可以把「very」顯示為粗體的元素。
1 | <p>My cat is <strong>very</strong> grumpy.</p> |
空元素
有些元素沒有內容，稱為「空元素（empty elements）」。 以圖片元素 為例：
1 | <img src="images/firefox-icon.png" alt="My test image"> |
HTML文件架構
一個完整的 HTML 頁面它所包含的要素：
1 | <!DOCTYPE html> |
<!DOCTYPE html>— 文件類型（doctype）,表示這是一份標準的HTML5 文件。<html>元素，又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。<head>元素，裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集…等。<body>元素，包含了所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲…等。<meta charset="utf-8">— 這個元素指定了你的文件使用 utf-8 這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。<title>— 呈現於網頁瀏覽者眼前的網頁標題。
加入圖片
1 | <img src="images/firefox-icon.png" alt="My test image"> |
- 透過圖片來源（src ，source）這個屬性，提供了連到圖片檔案的路徑。
- 加上alt (alternative) 這個屬性。在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。
文章標題(heading)
HTML 最多可以有六層的 heading， <h1> ~ <h6>。
1 | <h1>My title</h1> |
My title
段落 (paragraph)
呈現一般文字。
1 | <p>This is a single paragraph</p> |
This is a single paragraph
清單(list)
清單包含無順序性與有順序性的：
- 無順序性清單（Unordered lists）
1
2
3
4
5<ul>
<li>國文</li>
<li>英文</li>
<li>數學</li>
</ul>- 國文
- 英文
- 數學
- 有順序性清單（Ordered lists）
1
2
3
4
5<ol>
<li>第一天</li>
<li>第二天</li>
<li>第三天</li>
</ol>- 第一天
- 第二天
- 第三天
連結 (link)
讓文字變成連結
- 例如「GOOGLE」，包在
<a>元素裡：1
<a>GOOGLE</a>
- 在
<a>中加上 href，屬性屬性值就是你要連結網址：1
<a href="https://www.google.com.tw/">GOOGLE</a>
參考資料