常見的 HTML elements

標題 headings

在 VS code 中輸入以下程式碼

<h1> HTML標題範例 </h1>
<h2> HTML標題範例 </h2>
<h3> HTML標題範例 </h3>
<h4> HTML標題範例 </h4>
<h5> HTML標題範例 </h5>
<h6> HTML標題範例 </h6>

程式執行後會顯示出

可以使用的標題有6層，這些標題組合成網頁內容大綱，當搜尋引擎找到你的網頁時，會依照標題來認識內容，因而判斷相關性。

段落標籤 paragraphs / 換行標籤(tag)

段落標籤就如標題所示，主要功用是分段，而換行標籤則是用來換行的
在平常記事本或word中想換行直接按Enter就可以達成目標
但寫網頁是沒用的ㄛ!他只會在程式撰寫區換行，但實際網頁打開卻沒有換行
這時候就需要用到段落標籤和換行標籤了

在 VS code 中輸入以下程式碼

<h1> HTML標題 </h1>
<p> HTML段落範例 </p>
<br>
<p> HTML段落範例2 </p>

程式執行後會顯示出

像這樣就可以達成我們想看到的效果了!

清單 list

清單分為兩種，項目符號的清單或有數字順序的清單。

• 無順序的項目符號清單

在 VS code 中輸入以下程式碼

<h2>清單 Lists</h2>

<p>這是沒有順序的項目符號清單</p>

<ul><!-- unordered list --></ul>
<li>沒有順序的清單範例</li>
<li>以 ul 元來定義清單的範圍</li>
<li>用 li 標示各別項目</li>

程式執行後會顯示出

• 有順序的清單

在 VS code 中輸入以下程式碼

<p>這是有數字順序的清單</p>

<ol><!-- ordered list --></ol>
<li>有順序的清單範例</li>
<li>以 ol 元來定義清單的範圍</li>
<li>用 li 標示各別項目</li>

程式執行後會顯示出

注意li元素必然被放在ul或ol的下一層，這是Mozilla Developer Network(MDN)所制定的標準。
清單的巢狀特性，特別適合被改造成網站的導覽選單。

強調用法：斜體 (emphasis)/粗體 (strong)

在 HTML 我們一般會用兩種方法來強調需要強調的內容

Emphasis (斜體)： 	<i>文字</i>
Strong (粗體)： 	<b>文字</b>

例如我們在 VS code 中輸入以下程式碼

<h2>斜體/粗體範例</h2>

<i>斜體字範例</i>
<br>
<b>粗體字範例</b>

程式執行後會顯示出

水平線 (horizontal rules)

在 VS code 中輸入以下程式碼

<p>以下是水平線範例</p>
<hr>
<p>以上是水平線範例</p>

程式執行後會顯示出

水平線的預設是一條橫線，開始使用CSS後，就可以加上更多外觀上的改造ㄛ!