前言
這篇包括接下來的三篇筆記都是當時第一次接觸到網頁時寫的，其實在這之前也有相關的筆記，所以這些筆記已經算是整理第二次之後的，所以第一次寫的就不會再放上來。
內容其實也蠻基礎的，已經有經驗的人應該找不到什麼可以參考的部分，不過對於剛入門的人而言應該多少還是有點參考價值。
網頁本質
網頁的本質其實就是純文字檔案，你所看到的「畫面」是經由瀏覽器將純文字檔案的內容「渲染」而成。
也不要忘記，瀏覽器之所以可以處理網頁，是因為瀏覽器其可以辨識 ( 看得懂 ) 裡面的結構。
HTML ( HyperText Markup Language )
HTML 為「超文本標記語言」，這些文字語言轉換到瀏覽器渲染成你的所見所聞，這邊所指為 HTML 語法，而非副檔名。
從這邊可以了解它不是程式碼，通常來說，你可以看到一份 HTML 有很多標籤。
這邊就來一一介紹這些標籤，但很基本的地方不會講太細，盡量寫出值得討論的部分和重點。
<!DOCTYPE HTML>
不一定要加，但不加可能會碰到一些 Bug
基本上，這個標籤的 DOCTYPE 是 Document Type 的縮寫，是在 HTML 4.01 版本時出現，簡單來說就是定義文件類型。
它的作用是要告訴各個瀏覽器，當瀏覽器在對其做識別時，看到 <!DOCTYPE HTML> 就會依照規範去對該文檔做處理，所以這個標籤的目的是為了統一規格，也就是標準化。
參考資料：http://www.webpage.idv.tw/maillist/maillist4/new/02/02.htm
<html>
象徵所包起來的為 html 語法。
<header> 與 <head>
<header> 是 HTML 5 之後新添加的標籤，意思同於 <div id="header">，根據 2016 年的參考資料，有些老瀏覽器不支援這樣的標籤寫法。
而 <head> 則是過去就一直使用的，我們在此區塊引入各種 CSS 和 JS 庫，也可以使用 title 與 meta 標籤等等。可以理解成語言中的頭文件。
至於兩者的差別，目前已知在這篇文章之中，使用起來是沒有差別，但實質上他們還是不同的，之所以可以運行，是代表瀏覽器對語法限制較寬鬆，而 還是依然是代表 html 結構之一的主要標籤。
<meta>
這個元素提供有關頁面的訊息，有很大的一個功能是在它的屬性 name，其中的 keyword 可以使這個網頁有利於搜尋引擎的關鍵字搜索。
在最早的使用上，我們加入 charset 這個屬性定義該網頁的編碼。
<body>
網頁的本體，通常來說，大部分的編寫都在這個區塊。
<nav> 與 <footer>
其實本質是 <div> ，之所以賦予新標籤名稱是因為在檢視 html 語法結構時可增加易讀性。
<!-- 與 -->
網頁的註解，可以當作是 JS 的 /* 與 */
以下我們會介紹 <body/> 內的標籤
<h1> 至 <h6>
標題的意思，被這個標籤包住的字體會變大變粗，隨著數字越大，級別越小。
<p>
內文的意思，可以想像成段落，內中的段落會無視段落預設的空格與換行
<pre>
也是內文，但格式會與編碼內的格式相同，也就是預設的格式，所以即使加入空白也會顯示在頁面上
<br>
換行的意思，段落中只要 <br> 一出現，就會直接斷句並換行
<div> 和 <span>
body 內最常見的兩個標籤，就是包起來的東西為一個區塊，被包起來的東西是不會有任何變化，但實際上已經被包起來，這邊可以用 CSS 套用該區塊，對其做視覺上的變化。
<div> 會讓相鄰的元素垂直排列下來，<span> 則是會與相鄰的元素並排，若相鄰的元素也是 <span> 的話。
另外就是 <span> 也可以包住一個段落內的文字或句子，可以對一段特定文字用 CSS 做特殊處理。
在 HTML 5 之後，出現了語意化標籤 ( 一說為語義化 ) ，是將 <div> 用其他的名稱替代，一些新版標籤除了增加易讀性外，也會加入一些預設效果，如 <aside> 與 <article> ( 見參考資料 )
但目前我還是繼續使用 <div> ，等未來更熟練之後再考慮使用語義化標籤
比較有趣的一個討論是當實作按鈕時到底要用 <button> 還是 <div>，一說是看專案類型，也有一說是 <button> 可以自動將按鈕上的文字垂直置中。
參考資料：
<img>
也就是我們常用的圖片
src可以是網址與檔案位置
title滑鼠移上去會顯示該屬性內容
alt當圖片沒有顯示時會顯示該屬性內容作為替代文字
<ul> 和 <ol>
兩種標籤內部都是使用 <li>
簡單來說，<ul> 標籤包起來的就是無序列內容，<ol> 包起來的就是有序列，看 o 代表的意思為 order 就知道了
包起來的內容每一個元素都是使用 <li> 包起來，不要搞混
<ul> 示範
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
- 一
- 二
- 三
<ol> 示範
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
- 一
- 二
- 三
<table>
<table> 包住你的元素，<tr> 為橫列，<td> 為直行
而 <td> 的另外一個型態是 <th> ，意思一樣，只是包起來的部分會變粗體
<table>
<tr>
<th>課程</th>
<th>姓名</th>
<th>課程時間</th>
</tr>
<tr>
<td>英文課</td>
<td>老皮</td>
<td>一小時</td>
</tr>
<tr>
<td>國文課</td>
<td>老趙</td>
<td>一小時</td>
</tr>
</table>
出來就是這樣
課程 姓名 課程時間
英文課 老皮 一小時
國文課 老趙 一小時
<a> 連網頁外面 ( 超連結 ) 和裡面 ( 錨點 )
連結的意思，被 <a> 包起來的內文會變成一個連結，可以點下去
介紹幾個屬性
href有兩種用法
第一種為超連結，直接在屬性寫上網址就好
這邊搭配第二個屬性 target
target內中有 _self ( 預設值 )，直接從當下網頁連過去新網頁
_blank 則是新開分頁至超連結
第二種為錨點
寫一個語法
<a href=#go>haha</a>然後在妳要前往的目的地加上 #IDname
如此 haha 點下之後就可以到達該標籤了
語意化 UI 標籤
概念在上面有介紹過了，這邊提一下，在實質效果上，使用原本的 <div> 與語義化標籤是沒有任何差別的，但使用語義化標籤會更好
這邊有一個討論我覺得很棒 https://www.zhihu.com/question/271997896
簡單來說，使用語義化標籤可以讓你的 html 程式碼質感提升，而更重要的是對於 SEO 來說，語義化標籤的重要性就重要得多。
或許語義化標籤的份量會越來越重，全 <div> 的編寫方式可能也會被取代。
<iframe> 嵌入網頁
跟 <img> 概念很像，使用 src 屬性做 source
src填入要嵌入的網址，要注意的是不是每個網頁都可以嵌入，大部分網站都會將引用功能關掉，阻擋客戶端嵌入
<form> 表單
很重要的一個標籤，被表單包住的各種 <input> 都是預備要被表單輸出的元素
<input>
常用的 <input> 很多，可以使用 type 決定種類，type 預設為 text，是一個文字輸入框
type 還有 password 和 email 與 date 可以使用，可讓輸入框被限制於僅現於 Email 的格式或者讓使用者輸入的密碼內容為不可見
創造一個 <input> type 為 submit 可以將這個表單內所有的 input 內容送出 (發 request)
多介紹一下這次在作業多使用的一些屬性
placeholder輸入框致中預設的字，比如說：「請輸入電子郵件」
list當使用這個屬性，
<input>會變成下拉式選單，也可以輸入文字會讀取與該署性值相同的
<datalist>元素，比如說<input placeholder="Game's Name" list="data">下面可以用對應的
<datalist id="data">而
<datalist>內中就可以有很多的<option>包住的文本內容，可以讓你的輸入框可以自動連接到預設選項<input placeholder="Game's Name" list="data"/> <datalist id="data"> <option>League of Legends</option> <option>Counter-Strike: Global Offensive</option> <option>Apex Legends</option> <option>World of Warcraft</option> </datalist> <button class="search__btn">Search</button>radio多個
radio預設為複選，若要單選，則將他們的name指定為同一個如果要連
<input>後面的文字點選也能選到 radio，必須將文字以<label>包住，然後內使用屬性for，值為<input>內的 id<form> <div> <input type="radio" name="gender" id="male" /><label for="male">男性</label> <input type="radio" name="gender" id="female" /><label for="female">女性</label> <input type="radio" name="gender" id="other" /><label for="other">第三性</label> </div> </form>checkout基本上比照
radio，但由於通常使用於複選，所以不會有如radio般指定回同一個name的做法，而經過實測，加了
name也沒有作用另外介紹
<form>很重要的兩個屬性，action與methodaction即這個表單要提交到哪裏，值為 URL
method要使用何種方法提交，比如說 GET 和 POST
結語
是說使用框架之後，就真的很少直接在 HTML 檔案做編輯了，但不論是使用 React 寫 jsx 還是 Vue 的 template 都一定會使用到。
當然 HTML 標籤絕對不只上面幾種，比如說 <code> 這個標籤可以讓你在頁面上顯示程式碼區塊，又或是 <vedio> 標籤可以嵌入影片等等。
若有興趣，可以上網搜尋一下，有些時候搞不好一些功能都已經被標籤給做掉了，我自己當初也是在學習完之後才發現，原來還有很多自己沒看過而且很酷的標籤。
下一篇將會是 CSS 的部分，繼續整理。
_@uuko_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
