[第七週] HTML — Tag 基本標籤認識

MiaHsu
4 min readApr 14, 2020

學習目標:學習使用 HTML5 基本標籤

HTML

  • 全名 HyperText Markup Language ;中文為超文本標記語言。
  • 從名字可以知道是一種標記語言而不是程式語言(意思就是 HTML 不是程式)
  • 我們常常說到的 HTML5 指的是版本,也是目前最新版本。
  • 內容為許多的標籤組合而成
  • 瀏覽器對於 .html 有著不同的解析方式,就如同 word 對於 .word 有有著不同的解析方式一樣,因此我們才可以看到現在的網頁畫面

必要標籤

<head> 內常見的標籤

<body> 內常見的標籤

區塊性標籤(具語意化的標籤)

  • <header> 頁頭,經常包含 Logo、導航列、搜尋欄位
  • <nav> 導航列
  • <main> 主要內容
  • <footer> 頁尾,通常包含版權訊息、法律訊息連結
  • <section> 段落
  • <address> 聯絡資訊

內容性標籤

  • <div> 通用容器(block)
  • <ul> 清單&<ol> 數列清單
    底下子項目為 <li>

文字相關標籤

  • <h1><h6> 內容標題,重要程度由高至低
  • <p> 文字段落
  • <span> 文字的通用容器(block)
  • <pre> 保留排版

在瀏覽器解析後,不管內容有多少連續空白,都只會顯示一個,也不會換行,要換行需使用<br> 標籤。

  • <blockquote> 表示引用其他文字內容
  • <figure> 與文字有關的圖例
  • <figcaption> 圖例說明
  • <em> 強調文字,會變成斜體
  • <strong> 重要文字
  • <mark> 高亮引用文字
  • <a> 超連結或錨點

必要屬性 — — —
1. href 網址
2. trager 跳轉方式
_self : 原頁面跳轉
_blank:另開頁面跳轉

  • <code> 程式碼
  • <time> 日期與時間
  • <hr> 分隔線
  • <br> 換行

嵌入内容相關標籤

  • <img> 圖片

必要屬性 — — —
1. src 圖片路徑
2. title 滑鼠停留在圖片上顯示出的文字
3. alt 無法顯示圖片的替代文字

  • <iframe> 內嵌網頁

必要屬性 — — —
1. src:網頁路徑

  • <embed> 嵌入一個外部資源,可是影片、圖片、程序
  • <video> 影片
  • <audio> 音訊
  • <source><video><audio> 這類媒體元素指定媒體源 。
  • <canvas> 通過 JavaScript 實現繪圖功能,甚至是動畫、遊戲。
  • <svg> 向量圖

<table> 相關標籤

  • <caption> 表格標題
  • <tbody> 表格主內容
  • <tr>
  • <td> 單元格
  • <th> 頭部單元格
  • <thead> 頭部行

<form> 相關標籤

[第七週] HTML — 表單標籤認識

HTML 轉義字串(Escape Sequence)

如果想在最後看到的網頁中顯示 <div> 是可以的嗎?

不行,因為 < 與 > 為 HTML 中的保留字符

保留字符的意思是 HTML 不把這些字符當作一般的字符(<> html 作為標籤使用),因此如果想要在最終的網頁中正確顯示這些字符就必須利用轉義字串,常見的轉義字串可參考:Some Useful HTML Character Entities

<p>   div tag : <div></p><p>   div tag :   &lt;div&gt;</p>

js 引入標籤應該注意的地方

雖然前面範例我們將 <script> 標籤放在 <head> ,但其實放在 <body> 也可的,要特別注意的是 html 檔也是由上至下依序載入,如果 JS 檔很大,放在 head 時就會影響到 <body> 的載入,所以也蠻常看到 <script> 放在 body 的最尾端,其實 JS 載入模式影響的層面很深(暫不討論),因此 HTML5 針對這個部分提供了以下兩個新的屬性:

async

  • 非同步模式加載,下載後立刻執行,但同時也繼續載入頁面與其他 JS 檔
  • 適合此 JS 可以獨立運作,不依賴於其他 JS 的情況下使用。
<script async src="common.js"></script>

defer

  • 下載完會先等著,等頁面都解析完成,觸發 DOMContentLoaded 事件才執行。
  • 類似把 JS 檔放在頁尾的意思,適合此 js 在等頁面繪製完才執行。
<script defer src="common.js"></script>

下方圖清楚地說明載入順序的差別,供參考

image form Growing with the Web

參考資料

以上有任何錯誤的地方歡迎指正,感謝。

--

--

MiaHsu

每件事都是最好的安排,成為更好的自己