HTML 是一份可以給瀏覽器讀取的文件，副檔名為.html，我們在網頁上所看見的元件，基本上都是由 HTML 標籤所生成，後續再由CSS 、JS去做美化編輯。今天要學習的內容，就是如何利用HTML的標籤規則，寫出一份瀏覽器能看得懂的文件，那我們就開始吧！
HTML的基本結構是由標籤和內容所組成，標籤使用的格式為下：<標籤名稱> 文字內容或內層標籤 </標籤名稱>
在HTML文件中，通常包含幾個主要的標籤：
<!DOCTYPE html>
<html>
<head>
<title> 網站標題 </title>
</head>
<body>
<h1> 網頁內容 </h1>
</body>
</html>
宣告<!DOCTYPE html> ，每份HTML都要先宣告其版本，注意宣告要寫文件的第一行，讓瀏覽器知道怎麼正確的讀取展示你的文件。
< html ><html> 稱為「根元素」，包住了所有網頁上的內容，裡面固定會有 <head>、<body> 標籤。
< head ><head> 標籤裡面涵蓋了網頁重要資訊，稱為「標頭」，不要顯示在頁面上，但會關聯到搜尋引擎及其他網路服務，像是網頁標題、搜尋關鍵字、外部連結、css等。
在 <head> 標籤內的 <title></title> 就是控制網頁標題的地方，這裡可以修改你想被搜尋到的網頁標題喔！
< body ><body> 涵蓋的是使用者能直接在頁面上看到的內容，也是網頁的核心，包含文字、圖片、影片、互動都會在這個區塊裡面。
除了主要的標籤外，還有一些經常會使用到的基本標籤，也跟大家簡單的做介紹：
<h1>Title</h1>
<h1> ~ <h6> 共分為六個標題等級，瀏覽器會依據你的標題等級來判斷內容輕重， <h1> 為主標題，後面等級依次下降。
<p>文字</p>
<p> 標籤包含文字段落，在呈現文字時我們最常用的標籤形式。
<div class="box">
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
</div>
<div> 標籤常用作為容器來包裹其他標籤，把文件整理出幾個區塊（block），方便後續做CSS、JS的排版和操作，<div> 本身不帶任何標籤語意。
<ul> 為無順序的清單，選項的順序變動不會有影響<ul>
<li>A選項</li>
<li>B選項</li>
<li>C選項</li>
</ul>
<ol> 為有順序的清單，須按照先後做排列
<ol>
<li>第一步驟</li>
<li>第二步驟</li>
<li>第三步驟</li>
</ol>
清單的標籤寫法常用於網頁的導覽列部分，後續加上CSS可以學習如何做編排，要注意使用上 <li> 標籤必須放在 <ul> 或 <ol> 標籤的下層。
<img src=" 輸入連結 " alt=" 說明文字" >
<img> 標籤是透過 src 屬性直接把圖檔嵌入HTML文件中，另外可以在 <img> 標籤中加入 alt 屬性，在圖片無法正確顯示時，就會顯示出說明名字。
<a href=" 輸入網址 "> 輸入文字 </a>
<a> 標籤用於網頁的連結，要把我們輸入的文字變成可點擊的連結，需要在標籤內加入 herf 屬性，並置入網址。
以上就是基礎的HTML介紹，更進階的標籤類型，在之後的文章中如果有使用到會再另外做講解。在開發人員工具中，可以檢視網頁的程式碼，試著去找到以上的標籤練習看看吧，大家如果對其他標籤有疑惑，也可以到 W3School 瞭解更多詳細的資料！
iThome鐵人賽
看影片追技術