來輕鬆聊聊

嗨 我是Jacky，今天要來談談HTML。
舉凡網頁開發、設計，不管聽過、看過甚至接觸過的朋友，可能知道藉由HTML與CSS這兩個程式語言，能夠組成我們所看到最基本的網頁畫面。
若將網頁的畫面比喻成一個Word檔案，
HTML就像編輯的標籤，你可以決定畫面上，有標題，有圖片，有表格、文字、超連結，甚至影片。
CSS就像上方萬年不變的編輯列，可以進行改變文字大小、編輯圖片效果、調整行高、版面配置......等等的顯示效果設定。

我是個想轉職前端且0經驗的白紙，自學的來源舉凡部落格文章(如 Medium、iT邦幫忙)、Youtube影片、互動式教學網站(W3school、freeCodeCamp)。
大家都用什麼網站或影片自學呢? 歡迎在下方與大家分享~~

認識HTML

HTML為一種標籤式語言，擁有起始標籤<>與結束標籤</>，標籤內必須填入相同的特定文字(只限小寫英文)。另外也有一些標籤只有起始標籤，但在HTML5(最新的HTML規範)發布後建議在標籤文字後加上"/"，例如＜img />、<input />等。

標題標籤

• <h1>~<h6>為標題標籤，h即是heading的縮寫，用在文章標題、段落標題或導覽列。
• 數字越大，字體越小，<h1>最大，<h6>最小。

範例

<h1>嗨 世界</h1>
<h2>嗨 世界</h2>
<h3>嗨 世界</h3>
<h4>嗨 世界</h4>
<h5>嗨 世界</h5>
<h6>嗨 世界</h6>

顯示效果如下

嗨 世界

嗨 世界

嗨 世界

嗨 世界

嗨 世界

嗨 世界

文章標籤、註解標籤、佔位字符

• <p>為段落標籤，paragraph的意思，可放入一個字、一段話或是一篇文章。
• <!-- -->為註解標籤，可將一段標籤連同內容標註起來，使其無效，或者用於片段程式碼解釋和提示。不同於其他標籤，除了直接打出標籤，也可以使用ctrl+/快速將目標範圍標註起來。
• 佔位字符(placeholder)常用在網頁開發階段，因為還沒有將實際內容放入網站，因此暫時用一段文字作為代表，對於排版上有幫助。

範例

<p>大家好</p>
<p>大家好 我是Jacky</p>

<!-- 大家好 我是Jacky Huang -->

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> <!-- 佔位字符可為任意文字 -->

顯示效果如下

大家好
大家好 我是Jacky

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

HTML5新增的標籤

• <nav>為導覽區塊標籤，為網頁提供導覽列或導覽按鈕。
• <header>為頁首標籤，可在其範圍內放入文字、圖片等。
• <main>為主要區塊標籤，可在其範圍內放入文字、圖片等。
• <section>為片段標籤，可在其範圍內放入文字、圖片等。
• <article>為文章標籤，可在其範圍內放入文字、圖片等。
• <footer>為頁尾標籤，可在其範圍內放入文字、圖片等，通常會包含聯絡資訊或版權聲明。
• <video>為影片標籤，必須在其src屬性(source)填入影片來源才能顯示出影片。有兩種寫法，請看範例。

範例

<nav>Home</nav> <nav>Menu</nav> <nav>Contact</nav>

<header>
    <h1>這是頁首</h1>
    <p>這也是頁首</p>
</header>

<main>
    <article>
        <section>
            <p>好對稱啊</p>
        </section>
    </article>
</main>

<footer>
    <p>聯絡我們<p>
</footer>

<video>
    <source src="test.mp4" type="video/mp4"/>
</video>
or
<video src="test.mp4"></video>

圖片標籤、超連結標籤

• <img>為圖片標籤，沒有結束標籤，與插入影片的方式相同，一樣必須在其src屬性(source)填入來源。
• <a>為超連結標籤，必須在其href屬性(hypertext reference)填入目標的url(網址或網頁目標區域)，在用戶點擊時連結到該目標位址。不僅文字能作為超連結，也可為圖片加上超連結。

範例

<img src="test.jpg" />

<a href="#"><p>Jacky's Page</p></a> // #代表是一個可點擊的超連結，但並不會連到任何地方
<a href="#footer">到頁尾<a> // 點擊文字會連結到網頁中標籤id為footer的位置
<a href="www.Jacky.com.tw"><img src="test,jpg" /><a> // 點擊圖片會連結到目標網址

今日的分享就到這邊了，學起來很快，沒想到要用文字打出來，需要用上不少時間呢!
有些範例在文章內不好呈現，我就不分享了，可以自行google，有很多資料可以學習。
內容基本上都是很基礎的概念，畢竟是基於紀錄的原因，才促使我打出這篇文章。
歡迎各位用力糾錯與指教，我也正積極尋求最正確的觀念。
最後再謝謝大家看到這裡，我們明天見!

內容來源:
freeCodeCamp