【Day02】甚麼是HTML? 以及HTML標籤div 、span、ol、ul、li介紹


根據MDN的定義,HTML(HyperText Markup Language)是一種標記語言,而非如C、Java等大家所熟知的程式語言,它會告訴瀏覽器如何呈現你的網頁。HTML包含一系列的元素(elements),而元素包含了標籤(tags)與內容(content),我們利用標籤來控制內容的呈現。例如字體大小、粗體等等。

例如與大家生活上密不可分的google搜尋引擎,用Chrome連上後按右鍵,檢視原始碼後可以發現,是由許多HTML標籤所構成的。

首先,讓我們來看看一個完整的HTML頁面它所包含的要素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
  </head>
  <body>
    Hello World!
  </body>
</html>

我們一起來看看這段HTML程式碼:

  1. "!DOCTYPE html" 代表了文件類型(doctype)。目的是要告訴瀏覽器目前網頁所編寫的HTML、XHTML的標籤是採用什麼樣的版本。
  2. "html" 元素,又被視為根元素(root element),包含了所有顯示在這個頁面上的內容。
  3. "head" 表頭元素,裡面放的是你想涵括的重要資訊,但不會顯示於網頁瀏覽者眼前的。例如,顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。
  4. "body" 元素,包含了所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲...等。
  5. " meta charset="utf-8"" — 這個元素指定了你的文件使用utf-8這種字元編碼, 如果網頁有中文字的話,必須要透過編碼類型告訴瀏覽器要採用何種編碼來處理中文字,才能讓文字正確呈現,才不會產生亂碼。
  6. "title" — 呈現於網頁瀏覽者眼前的網頁標題。

呈現效果如下:
https://jsfiddle.net/GRANTLI/4hosg7wr/

以上就是簡單的HTML介紹。
而在HTML中,最為重要的幾個標籤分別為"div"、"span"、"ol"、"ul"、"li"

首先,"div" tag

  • 透過 DIV 標籤可以在網頁中創造各個不同的區塊,每個區塊內還可以增加更小的區塊,設計師也可以利用 HTML div 區塊來進行排版,對網路瀏覽器來說,每組 HTML div 標籤都是一個區塊級元素,設計師也可以透過 div 的屬性設定來調整呈現的樣貌,現在的 div 屬性設定都是採用之後會提到的 CSS 來設計。

    <div style="background-color:#8282FF">
        Block1
    </div>
    <div style="background-color:#AC3BFF">
        Block2
    </div>
    

    呈現效果可以從剛剛的online html 編輯器中檢視,可以看出頁面被分割出了兩個區塊。

  • 再來的, "span" 標籤,在 HTML 可以表示一個行元素,與 DIV 區塊的用法有點類似,但瀏覽器會將 span 標籤包起來的元素視為一行。

但與 div 標籤不同的是,一個 span 標籤組只會佔用自己本身的空間,不會像 DIV 標籤那樣一次佔掉一整行的空間,切板時可以用 DIV 標籤與 span 標籤互相搭配,用 DIV 標籤做大範圍的排版,再用 span 標籤進行細部美化。

  • 最後,ol與ul是HTML中,用來條列品項的標籤,在網頁上可以用來陳列Item,兩者都是與 "li" 標籤做搭配,用起來幾乎相同,差別在於是否有自動排序項目的功能,"ul" 標籤預設僅有一個黑點的項目符號,類似「●」這樣(當然可以透過CSS遞換不同的呈現方法),在不同的瀏覽器下可能呈現不同的效果,而 "ol" 標籤則具有數字排序的功能,也就是預設在每個項目前會有數字顯示,從 1 開始依序排列。
    如:
    <ul>
       <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ul>
    <ol>
     <li>First</li>
      <li>Second</li>
      <li>Third</li>
    </ol>
    

以上就是Day2的文章,下一篇的文章,將會進入CSS的奇幻世界,要來介紹CSS的選擇器與優先權、網頁切版中最重要的Box model以及block、inline element。

#Web #前端切版 #html







你可能感興趣的文章

菜逼八寫Flutter(3) - 列表、圖片Widget

菜逼八寫Flutter(3) - 列表、圖片Widget

如何優雅的利用marktext撰寫markdown

如何優雅的利用marktext撰寫markdown

很重要的基礎-檔案格式

很重要的基礎-檔案格式






留言討論