HTML基礎認識

Hypertext Markup Language(HTML)：
是一種標記語言(markup language)，主要用於組織架構以及呈現網頁內容。
HTML的基本架構

資料來源：MDN-HTML基礎

• 起始標籤(Opening Tag)：<p>(中間為元素名稱)，表示一元素的起始位置。
• 結束標籤(Closing Tag)：</p>(在元素名稱前加/)，表示一元素的結束位置。
• 內容(Content)：在起始標籤與結束標籤中間的東東。
• 元素(Element)：由起始標籤、結束標籤和內容所組成，即為元素。
• 屬性(Attribute)：href="styles/style.css"，提供更多的元素資訊。書寫在起始標籤裡，與元素名稱間要一個空格，若是有多個屬性，屬性之間也要以空格區分。

巢狀元素
元素裡還可以再加進元素，多個元素疊加即為巢狀元素(Nesting Element)。
空元素
無內容的元素稱為空元素(Empty Element)。
HTML文件的架構

資料來源：MDN-HTML基礎

圖片(Image)
圖片元素是透過來源屬性(src |是Source的簡寫，提供連結到圖檔的路徑)將圖檔直接鑲嵌在HTML網頁上。因有不少視能障礙瀏覽者，以及連線出錯等問題，常會另外加上alt(Alternative)屬性，在圖片無法顯示時，呈現描述圖片的說明文字。若是想進一步了解無障礙網頁相關資訊，這邊已連結相關說明網頁。
文件標題(Heading)
<h1>，數字越小，標題文字越大，目前HTML提供到六層heading。
段落(Paragraph)
<p>，主要用來呈現文字。
清單(List)

• 無順序性清單(Unordered List)：<ul>，項目順序的變動不影響結果，例如待辦事項清單。
• 有順序性清單(Ordered List)：<ol>，項目順序的變動會影響結果，例如蛋糕製作步驟。寫法為小於符號+ol+大於符號。

要注意的是，不管是無順序性清單，還是有順序性清單，裡面的項目則是放在清單項目元素(List Item)中，<li>。清單元素有外層的清單類別，以及裡層的項目共兩層。
連結(Link)
要形成連結，我們會需要用到Anchor(a)元素和href(Hypertext Reference)屬性。href屬性如同其他屬性，加在Anchor元素的起始標籤中，而href屬性的屬性值即為欲前往網頁的網址。

小試身手

[此貓貓圖為CC0授權]
新的學習新的成就感，內容開始豐富啦~

參考網站：MDN