學HTML之前一定要知道的重要資訊
學HTML之前一定要知道的重要資訊

2018-04-26文章引用自:

什麼是HTML?

在網站架設中,都會使用HTML來做網頁的撰寫,HTML跟市面上的程式語言(java、C、C++)不同,他是標記語言,他會告訴瀏覽器網站該怎麼呈現,它包含一系列的元素,元素裡面包含標籤及內容。

常用的標籤

  • <a>

    定義超連結

  • <br>

    換行符

  • <button>

    定義按鈕

  • <div>

    區塊元素

  • <em>

    定義為強調的內容

  • <strong>

    定義為更強調的內容

  • <p>

    段落元素

  • <label>

    定義標記

  • <span>

    行內元素

  • <input>

    定義輸入框

  • <form>

    定義表單

  • <table>

    定義表格

  • <ul>

    定義無序列表

  • <ol>

    定義有序列表

那該如何使用呢?

以下舉個例子:

如果要把上面的句子變成一個段落,可以在前後加上<p>他就會變成一個元素。

元素的組成

網頁設計教學

1. 起始標籤:  在「<>」中放入元素名稱,代表這個元素的開始。

2. 結束標籤:  在「</>」中放入元素名稱,結束標籤跟起始標籤很類似,不同的地方就是元素名稱前面的「/」,這代表一個元素的結尾。但這要注意一點,有時很容易忘記加上結束標籤,導致整個畫面大破版,所以一定要記得加入結尾標籤。

3. 內容: 就是起始標籤與結束標籤中間的部分,就是整個元素的內容。

空元素

在HTML上,空元素是沒有內容的,最常見的就是<img>。圖片是直接把路徑引入在網站上,將圖片的路徑放入src這個屬性裡,這邊要注意,為了網站的seo一定要在上面加「alt=""」,可以讓搜尋引擎知道你這張圖是什麼,簡單來說就是告訴搜尋引擎這張圖的名字。

HTML基本架構

在上面的架構中我們可以看到

1. <!DOCTYPE html>:  這是文件的類型,他的位置會放在最上面,這元素看似不起眼,但他卻非常重要,少了他網站有很多部分都沒辦法執行。

2. <html></html>:  <html>元素叫做跟元素,裡面放的是所有顯示在頁面上的內容。

3. <head></head>:  <head>元素裡面放的是所有引入的重要資訊,但並不會顯示在瀏覽器畫面上,做網頁設計時會把該頁面的重要資源放在這,可包含<title>, <meat>, <link>, <style>, <script>

4. <body></body>:  <body>它裡面包含了,畫面上所有的內容。

5. <meta charset="utf-8">:  這元素非常重要,是宣告網站的編碼,他會告訴瀏覽器,這個頁面的編碼是utf-8,如果沒使用這元素,你的網站就會變成一堆亂碼。

6. <title></title>:  <title>元素我在「天啊!原來SEO這麼重要」有提過他的用法,他是整個網站的標題。

我們可以把HTML結構想像成蓋房子,<!DOCTYPE html>這是土地的地契,你需要打地基(<html></html>),要有屋頂(<head></head>),要有中間的磚塊水泥(<body></body>)....等等的。有好的地基才能蓋出堅固的高樓大廈,有好的基礎才能把網頁設計做的更好。