開始之前

請先打開線上編輯器你會看到以下畫面。

網頁原始碼都可以放在左邊變點擊RUN，結果會顯示在右邊（自行操作印象會更深刻）。

文章開始

在開始之前，如果以下文字看不懂或者不清楚效果為何，請一定要多利用線上編輯器，會比較了解每個標籤在做什麼事。

！首先要先了解HTML並不是程式語言，它是一個標籤語言。

簡單介紹網站架構

<html>
    <head>
        <!--這裡是頭部常用來設置網站標題、SEO、js、css等...-->
        <title>用來設置你的網站標題</title>
    </head>
    <body>
        <!--這裡是身體主要用來放置網站內容-->
    </body>
</html>

網頁基本就是一個標籤一個標籤慢慢的疊出來的，所以比較困難的是在於css的運用。

如果要在網頁標籤上增加樣式基本上css樣式都會獨立出來再進行引用

1	<h1 style="color:blue;">可以利用style增加css樣式，但記得此舉只會套用在該標籤上</h1>

網頁超連結

<a href="你要去的網頁地址" target="目標">
    這邊介紹一下target有哪些選項可以用 個人用最多的是_blank這個
    _blank - 額外開一個新的頁面打開連結
    _self - 默認選項
    _parent - 在父框架中打開連結
    _top - 在整個窗口中打開連結
</a>

網頁表格

<table border="1px">
    <tr>
        <td>我是第一列第一行</td>
        <td>我是第一列第二行</td>
    </tr>
    <tr>
        <td>我是第二列第一行</td>
        <td>我是第二列第二行</td>
    </tr>
</table>

格式化元素基本上這幾個標籤通常會用在文字格式化上

<b>把元素變粗</b>
<strong>重要的元素</strong>
<i>把元素變斜</i>
<em>強調元素</em>
<mark>標記元素 類似螢光筆效果</mark>
<small>較小的元素</small>
<del>元素上增加刪除線</del> 
<ins>元素上增加底線</ins>
<sub>元素下標 類似靠下對齊</sub>
<sup>元素上標 類似銬上對齊</sup>

常用網頁標籤持續補充

<div>我是一個區塊，我會直接佔用整行</div>
<span>我也是一個區塊，但是我跟div不一樣的是我只會佔用一個我本身的大小的區塊</span>
<p>我是一個段落，我會換兩行</p>
<br>我是一個換行標籤，我跟p的差別在於，我只會換一行
<h1>我是h1的標題 h1~h6分別代表大到小</h1>

參考文獻

w3school_HTML