---
disqus: aboofrontnote
---
# 一.HTML是什麼?-HTML基本介紹

<h2>1.前言</h2>
---

在初學網頁前端開發的時候，應該很容易找到關於前端學習的三大基本工具的描述，通常聽起來會是這樣子的：

HTML＝結構=骨架，所有網頁文章的內容與架構
CSS=樣式=皮膚，網頁呈現的視覺外在包裝
JavaScript=互動=靈魂，影響所有與使用者互動的功能

而在這三大語言中，HTML是前端學習者首先要先學會的語言，在學會非之前，要先會起跑；學會起跑前，要先學會走路。就讓阿布透過整理HTML的學習筆記，一起學會最基本的走路功吧！

補充個笑話:
(8.24更新梗圖)

<h2>
2.HTML是什麼?
</h2>
===

HTML（HyperText Markup Language，超文本標記語言）是打造網頁的基石。它表述並定義網頁的內容，本質上是描述資料跟結構的工具。伴隨 HTML 而來的技術還有描述網頁外觀（CSS）及功能性的程式語言（JavaScript）。

「超文本」（HyperText）是指從某個網頁連到其他網頁的連結，不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中，你的網頁就能積極成為全球資訊網（World Wide Web)的一份子。

HTML 是一種**標記語言（markup language）**，而*非一般熟知的程式設計語言*；它會告訴瀏覽器該如何呈現你的網頁──單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的**元素（elements）**，而元素包含了**標籤（tags (en-US)）與內容（content）**，我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、在文字或圖片設置超連結等。

<h6>

*本段改寫自[MDN Web Docs-HTML：超文本標記語言 初學者教學](https://developer.mozilla.org/zh-TW/docs/Web/HTML)*

</h6>

<h2>
3.HTML長什麼樣子?
</h2>
===

HTML最基本的樣子，會至少包含了一個**起始標籤（The opening tag）**，按照標籤類型不同，它必須或可以包含**結束標籤（The closing tag）、內容（The content）、屬性（Attribute）、值(value)**等元件，而這些統稱為**元素（The element）**。


形象化範例:
<起始標籤 屬性="值">內容<結束標籤>

實體範例:
<p class=“sentence”>你喜歡吃蘋果嗎？<p>

1. **起始標籤 （The opening tag）：** 先打角括弧，也就是大於、小於的符號「< >」，裡面再放入元素名稱，如上面的例子「`<p>`」。起始標籤代表這個元素從這裡開始。
1. **結束標籤 （The closing tag）：** 與起始標籤一樣，只是在元素名稱前面多了個前置斜線「/」。非常直觀，內容的最後加上結束標籤，代表這個元素的尾端。在寫HTML時，很容易忘了最後的結束標籤，雖然現在多數的HTML編輯器都有補充結束標籤的功能，但有時候難免會在不方便的程式上編輯，請多加小心。
1. **內容（The content）：** 這個元素的內容，以上面的例子來說，內容就是*你喜歡吃蘋果嗎？* 這句文字。
1. **屬性（Attribute）:** 屬性值能賦予標籤不同的呈現方式，如表格的合併儲存格，影音的預設播放狀態等。
1. **值(value):** 針對屬性的細節設定，可以是數字或文字，但須符合屬性的性質。
1. **元素（The element）：** 由起始標籤、結束標籤、內容、屬性、值所組成。

阿布小補充：屬性這個字常見有兩種翻譯，分別為Attribute與property，但兩者還是有差異，中文詳情請參考:[HTML attribute與DOM property之間的區別？](https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/26913/)

<h6>

*本段改寫自[MDN Web Docs-HTML：超文本標記語言 初學者教學](https://developer.mozilla.org/zh-TW/docs/Web/HTML)*
</h6>

<h2>
4.結語
</h2>
===

HTML容錯度算高，有時候寫錯還是能顯示，但可以顯示不代表寫法正確。
正確的HTML標籤與結構，可以讓文字閱讀器或是搜尋引擎看懂，提高網站可以被搜尋到的機會(也就是SEO優化），所以請努力把基本功練習紮實吧！

<h6>參考資料:

[五倍紅寶石- I’m coding it! 微痛轉職工程師 線上課程](https://iamcoding.tw/)
[MDN Web Docs](https://developer.mozilla.org/zh-TW/docs/Web/HTML)
[HTML&CSS：網站設計建置優化之道](https://www.books.com.tw/products/0010546014)(作者： Jon Duckett 出版社：碁峰 )
</h6>

- [↳回筆記首頁](https://hackmd.io/@a91929s/SJdkV0okY)

###### tags: `六角筆記王` `阿布的前端學習筆記` `HTML`

{%hackmd Iiu5mOixR7yWkPHKCkabBg %}
<iframe class="LikeCoin" height=210 src="https://button.like.co/in/embed/a91929s/button?referrer=https://hackmd.io/@a91929s" width="100%"></iframe>