HTML

關於 HTML 的基本介紹以及如何製作純 HTML 網頁

Previous網頁的歷史 NextCSS

Last updated 2 years ago

HTML

關於 HTML 的基本介紹以及如何製作純 HTML 網頁

HTML 是什麼

HyperText Markup Language，超文本標記語言，定義網頁的內容，使用「標記」（markup）來詮釋。

元素與標籤

元素的組成為起始標籤<>、結束標籤</>與內容，如 <p>content</p>，其中<p>稱為「標籤」。標籤不分大小寫，可全大、全小寫或混用，一般為了可讀性、ㄧ致性與習慣，使用全小寫。

標籤都有其代表的意義，必須視您想呈現的內容，選擇對應、有意義的標籤，以下舉例：

網頁主要標題使用 <h1>
副標題使用 <h2><h3><h4><h5><h6>
段落使用 <p>
超連結使用<a>
主要內容區域使用 <main>

標籤正確的使用對於瀏覽網頁會有更好的體驗，建議盡您所能地達成無障礙網頁設計的標準。

所有標籤意義都可以在 w3school 網頁找到。

標籤可以包含標籤，例如： <p>我喜歡上了 <a href="ilovehtml.html" title="前往 HTML 教學">HTML</a></p> 但是區塊元素不能被行內元素包起來。

這是什麼意思呢？讓我們繼續看下去。

區塊元素與行內元素

區塊元素：在頁面中單獨佔據一行，在它前後的內容都將以一個換行分隔。區塊級元素傾向於作為頁面上的結構化元素，區塊級元素不會被包含在行內元素中，但有可能會包含在其他區塊元素中。
行內元素：放在區塊級元素之中的內容，這些元素只由文件內容的一小部分組成，而非由完整段落或群組式內容組成。一個行內元素不會在文件中產生新的一行，它們通常只會出現在一段文字中。

空元素

不一定所有標籤都有結束標籤，例如<img src="iloveyou3000.png">

屬性

每個標籤都可以輸入屬性，屬性有分通用的，或是只專屬於某些標籤使用的。

例如：<div title="Hi">Hi</div>、<a href="hi.html" title="Hi">Hi</a>

title 屬性是通用，但 href 只能用在特定元素，關於屬性可前往 w3school 查閱相關特性與用法。

製作第一個 HTML 檔案，並開啟觀看網頁

先試著查看以下 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

我們已經在上面的文件中學會標籤、元素以及屬性，現在我們將應用這些知識製作一個最簡單的網頁。但還有一些小知識必須學習：

<!DOCTYPE html>：文件類型(doctype)，目前 HTML 5 只需要寫這樣即可。
<html>：使用這個包住所有網頁內容，通常也會稱為根元素
<head>：在<head>中間的東西並不會呈現在網頁上，其內容有跟 SEO 、無障礙以及 CSS 有關。
<body>：在<body>之間的內容，會呈現在網頁上。

現在，您可以嘗試看看在任何純文字編輯器裡打上這些文字，並加入看看不一樣的元素，完成後儲存成一個檔案，檔案的副檔名請儲存為 .html，點擊該檔案，就會使用您電腦系統預設的瀏覽器打開網頁。（如果您是使用 codepen 線上服務的話，僅需要輸入 <body> 內的內容即可。）

網頁內容

恭喜您已經會製作一個網頁了，接下來就是學習如何豐富網頁內容：

HTML 中的空格不管用多少空格(whitespace，包括空白字元與換行字元)，HTML 的語法分析器都只會留一個空格。
HTML 中的實體與符號特殊字元有些時候我們會需要在內容輸入特殊符號，但這些特殊符號又可能是原本 HTML 的標籤寫法，例如：「<」、「>」，所以為了避免混淆，HTML 的把這些特殊符號使用特定寫法來判別：「<"」為 less than (小於)；「>」為 great than (大於)；「""」為 quotation (引號)；「'」為 apostrophe (單引號)；「&;」為 ampersand (和號)；「 」為 No-Break Space(不換行空格)；「&ensp;」為 En Space(半形空格)；「&emsp;」為 Em Space(全形空格)；也就是如果我們的 HTML 是
```
<p>這是 &lt;p&gt; 元素</p>
```
將會輸出： 這是 <p> 元素 如果想更深入暸解，可以前往w3school 的實體符號
註解註解像是上課的時候寫的筆記一樣，主要是幫助我們理解內容。HTML 的註解寫法為：  通常會用在以下情形： - 結構太複雜，寫一些註解幫助之後回來看的時候恢復記憶。 - 共同協作，當一起編輯程式碼時，需要清楚傳遞資訊給共同編輯者理解內容。 - 做一些趣味性的嘗試，留下某種足跡或辨識度。註解沒有一定格式，只要確保團隊定義出大家都可以理解的內容即可，能順利溝通最重要
架構就好一像一篇文章，可能需要標題、副標題、內文、參考來源等，具有結構性才能讓使用者方便閱讀。同理網頁也是一樣，基礎網頁就是在傳遞資訊，那麼就需要良好的架構，才能有效傳遞資訊。而要達成這件事，您必須清楚暸解每個元素被設計出來的意義及使用方式。例如： - 標題類： <h1>、<h2>、<h3>、<h4>、<h5>、<h6>， - 版面類：<main>、<header>、<footer> 更多元素請前往 w3school 閱讀。暸解元素的意義之後，在呈現網頁時的版面、內容順序也是重要的一環，此部分將會在 CSS 部分深入暸解。
多媒體在 HTML 裡，您可以加入圖片、音訊與影片，讓您的網頁更加生動與吸引使用者，常見標籤如下： - <img> - <svg></svg> - <video></video> - <audio></audio> 更多控制項與屬性請前往 w3school 查閱。
表格表格是網頁經常會用來呈現資訊、數據的一種方式，讓使用者方便快速地查看內容並理解其相關性。表格的常見標籤如下： - <table>：表格最外面的標籤。 - <caption>：描述此表格呈現的是什麼資訊。 - <th>：標頭，用來表示此欄/列所代表的意義。 - <tr>：列。 - <td>：儲存格。
```
<table>
  <caption>動物種類與數量</caption>
  <tr>
    <th>動物</th>
    <td>斑馬</td>
  </tr>
  <tr>
    <th>數量</th>
    <td>10</td>
  </tr>
</table>
```
表格也可以利用屬性來達成合併儲存格等意義，詳細用法請參閱 w3school。

比較早期的網頁，會使用表格來作為排版工具，在現在來看是非常糟糕的事，請注意千萬不要使用表格來排版，除了不符合 HTML 設計原意外，也會造成無障礙困擾。

小結

至此您的 HTML 知識大致上已具備，剩下的就是去琢磨很多小細節以及多加練習，例如此篇文章並沒有著墨很多關於 <head> 裡面的內容，您就可以找資料練習寫裡面的內容。尤其是現在的線上編輯程式的服務也很多，可以選擇自己喜歡的服務，打鐵趁熱直接在線上練習看看。

您需要自動自發的練習，這種精神在程式領域，尤其是前端領域裡特別重要，因為技術也在快速迭代，若沒有跟上最新思維，您就沒辦法更近一步精進。

但也不是說學了新技術就一定要用，重要的是有沒有新技術的觀念，理解其背後意義，這樣在未來您需要做選擇的時候，才有背景知識下決策。

作業

請使用 Codepen 或是 VSCode 或是文字編輯器，練習完成一個網頁，並盡可能地練習多種標籤。例如新聞文章、球賽資料、或是練習標籤等...。

Codepen 的 HTML 編輯區，只需要寫 <body></body> 之間的內容即可。

參考來源

Previous網頁的歷史 NextCSS

Last updated 2 years ago

HTML 是什麼

HyperText Markup Language，超文本標記語言，定義網頁的內容，使用「標記」（markup）來詮釋。

元素與標籤

標籤都有其代表的意義，必須視您想呈現的內容，選擇對應、有意義的標籤，以下舉例：

網頁主要標題使用 <h1>
副標題使用 <h2><h3><h4><h5><h6>
段落使用 <p>
超連結使用<a>
主要內容區域使用 <main>

標籤正確的使用對於瀏覽網頁會有更好的體驗，建議盡您所能地達成無障礙網頁設計的標準。

所有標籤意義都可以在 w3school 網頁找到。

標籤可以包含標籤，例如： <p>我喜歡上了 <a href="ilovehtml.html" title="前往 HTML 教學">HTML</a></p> 但是區塊元素不能被行內元素包起來。

這是什麼意思呢？讓我們繼續看下去。

區塊元素與行內元素

區塊元素：在頁面中單獨佔據一行，在它前後的內容都將以一個換行分隔。區塊級元素傾向於作為頁面上的結構化元素，區塊級元素不會被包含在行內元素中，但有可能會包含在其他區塊元素中。
行內元素：放在區塊級元素之中的內容，這些元素只由文件內容的一小部分組成，而非由完整段落或群組式內容組成。一個行內元素不會在文件中產生新的一行，它們通常只會出現在一段文字中。

空元素

不一定所有標籤都有結束標籤，例如<img src="iloveyou3000.png">

屬性

每個標籤都可以輸入屬性，屬性有分通用的，或是只專屬於某些標籤使用的。

例如：<div title="Hi">Hi</div>、<a href="hi.html" title="Hi">Hi</a>

title 屬性是通用，但 href 只能用在特定元素，關於屬性可前往 w3school 查閱相關特性與用法。

製作第一個 HTML 檔案，並開啟觀看網頁

先試著查看以下 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

我們已經在上面的文件中學會標籤、元素以及屬性，現在我們將應用這些知識製作一個最簡單的網頁。但還有一些小知識必須學習：

<!DOCTYPE html>：文件類型(doctype)，目前 HTML 5 只需要寫這樣即可。
<html>：使用這個包住所有網頁內容，通常也會稱為根元素
<head>：在<head>中間的東西並不會呈現在網頁上，其內容有跟 SEO 、無障礙以及 CSS 有關。
<body>：在<body>之間的內容，會呈現在網頁上。

網頁內容

恭喜您已經會製作一個網頁了，接下來就是學習如何豐富網頁內容：

HTML 中的空格不管用多少空格(whitespace，包括空白字元與換行字元)，HTML 的語法分析器都只會留一個空格。
HTML 中的實體與符號特殊字元有些時候我們會需要在內容輸入特殊符號，但這些特殊符號又可能是原本 HTML 的標籤寫法，例如：「<」、「>」，所以為了避免混淆，HTML 的把這些特殊符號使用特定寫法來判別：「<"」為 less than (小於)；「>」為 great than (大於)；「""」為 quotation (引號)；「'」為 apostrophe (單引號)；「&;」為 ampersand (和號)；「 」為 No-Break Space(不換行空格)；「&ensp;」為 En Space(半形空格)；「&emsp;」為 Em Space(全形空格)；也就是如果我們的 HTML 是
```
<p>這是 &lt;p&gt; 元素</p>
```
將會輸出： 這是 <p> 元素 如果想更深入暸解，可以前往w3school 的實體符號
註解註解像是上課的時候寫的筆記一樣，主要是幫助我們理解內容。HTML 的註解寫法為：  通常會用在以下情形： - 結構太複雜，寫一些註解幫助之後回來看的時候恢復記憶。 - 共同協作，當一起編輯程式碼時，需要清楚傳遞資訊給共同編輯者理解內容。 - 做一些趣味性的嘗試，留下某種足跡或辨識度。註解沒有一定格式，只要確保團隊定義出大家都可以理解的內容即可，能順利溝通最重要
架構就好一像一篇文章，可能需要標題、副標題、內文、參考來源等，具有結構性才能讓使用者方便閱讀。同理網頁也是一樣，基礎網頁就是在傳遞資訊，那麼就需要良好的架構，才能有效傳遞資訊。而要達成這件事，您必須清楚暸解每個元素被設計出來的意義及使用方式。例如： - 標題類： <h1>、<h2>、<h3>、<h4>、<h5>、<h6>， - 版面類：<main>、<header>、<footer> 更多元素請前往 w3school 閱讀。暸解元素的意義之後，在呈現網頁時的版面、內容順序也是重要的一環，此部分將會在 CSS 部分深入暸解。
多媒體在 HTML 裡，您可以加入圖片、音訊與影片，讓您的網頁更加生動與吸引使用者，常見標籤如下： - <img> - <svg></svg> - <video></video> - <audio></audio> 更多控制項與屬性請前往 w3school 查閱。
表格表格是網頁經常會用來呈現資訊、數據的一種方式，讓使用者方便快速地查看內容並理解其相關性。表格的常見標籤如下： - <table>：表格最外面的標籤。 - <caption>：描述此表格呈現的是什麼資訊。 - <th>：標頭，用來表示此欄/列所代表的意義。 - <tr>：列。 - <td>：儲存格。
```
<table>
  <caption>動物種類與數量</caption>
  <tr>
    <th>動物</th>
    <td>斑馬</td>
  </tr>
  <tr>
    <th>數量</th>
    <td>10</td>
  </tr>
</table>
```
表格也可以利用屬性來達成合併儲存格等意義，詳細用法請參閱 w3school。

小結

但也不是說學了新技術就一定要用，重要的是有沒有新技術的觀念，理解其背後意義，這樣在未來您需要做選擇的時候，才有背景知識下決策。

作業

請使用 Codepen 或是 VSCode 或是文字編輯器，練習完成一個網頁，並盡可能地練習多種標籤。例如新聞文章、球賽資料、或是練習標籤等...。

Codepen 的 HTML 編輯區，只需要寫 <body></body> 之間的內容即可。