[ 筆記 ] HTML - tag 基礎標籤

#html

Posted by krebikshaw on 2020-07-11

好用開頭

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet">
  <link href="./main.css" rel="stylesheet">

  <title>week6-hw2|by krebikshaw</title>
</head>

標籤語意化(Semantic Elements)

使用HTML標籤來標記網頁內容，讓網頁內容文字具備明確的含意

圖片來源

必要基本標籤

<!DOCTYPE HTML>： HTML5 的宣告方式

  • 對於未支援 HTML5 的瀏覽器會忽略 HTML5 的特性。
  • 是一個宣告，所以沒有關閉標籤

html：網頁的最根部元素

head：網頁的資訊，包含 CSS & JS 檔案的網址

  • 內容不會顯示在頁面上

body：所有在畫面看得到的元素都放在裡面

  • 網頁的主要內容

常見的 <head> 內容

title：設定網頁頁籤的文字

meta：敘述網頁的標籤，包含作者、文字編碼、網站說明文字、關鍵字

  • 常用的屬性有： charset 、 name 、 content 、 http-equiv

link：連結 CSS 的語法

  • 亦可用來在頁籤上加入小圖示

script：連結 JavaScript 的語法

<head>
    <!-- 在瀏覽器 tab 標籤上的標題 -->
    <title>網頁標題</title>
    <!-- 聲明該頁面的編碼方式 -->
    <meta charset="UTF-8"> 
    <!-- 行動裝置的顯示方式，initial-scale=1.0 代表不縮放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在瀏覽器 tab 標籤上的小圖示 -->
    <link rel="icon" href="favicon.ico">
    <!-- 連接 main.css -->
    <link href="main.css" rel="stylesheet">
    <!-- 連接 common.js -->
    <script src="common.js"></script>
</head>

常見的 <body> 標籤

表示 - 區塊

<header> ：網頁標頭，經常包含 logo、標題、導航列
<nav> ：導航列
<main> ：主要內容
<section> ：段落
<article> ：主要文章
<aside> ：跟主要內文沒有太直接關係的側欄
<footer> ：網頁結尾，經常包含版權資訊、聯絡方式

表示 - 內容

<div> ：分組用 ( block )
<ul> ：有序清單 & <ol> 無序清單

  • 底下清單都是 <li>
  • 去除清單預設樣式 CSS：list-style: none

表示 - 圖片相關

<img> ：圖片

  • src 圖片網址
  • title 鼠標停留在圖片上的提示文字
  • alt 圖片連結失效的替代文字

<figcaption>：圖片說明文字

表示 - 文字

<h1> ~ <h6> 網頁標題

  • 數字越小越重要

<p> 網頁內文

<span> 分組用 ( inline )

  • 通常放在 <p> 裡面

<em> 強調文字

  • 斜體
    <strong> 重要文字
  • 粗體
    <blockquote> 表示引用自其他內容
    <a> 超連結 or 錨點
  • 超連結：
    • href 填 網址
    • target 內連 or 外連
      • _self 在同一個標籤頁跳轉
      • _blank 另開標籤頁
  • 錨點：
    • href 填 #id
    • 例如網頁要跳到 h1
      • <h1 id="title">標題</h1>
      • <a href="#title">跳到標題</a>

<pre> 保留格式

  • 因為在瀏覽器解析裡，不管內文有多少空白，都只會顯示成 1 個空白，也不會換行。所以如果要換行可以使用 <br> 標籤

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

表示 - 嵌入內容

<ifram> 內嵌網頁

  • src 填上要內嵌的網址
  • 但 server 端可以設定擋掉被其他網頁嵌入的功能。

<embed> 嵌入一個外部資源，可以是影片、圖片、程序
<video> 一段影片檔
<audio> 一段聲音檔
<source> 可填入不同的 <video> or <audio> 類型，讓瀏覽器選擇支援度高的媒體播放。
<canvas> 通過 JavaScript 實現繪圖功能，甚至是動畫、遊戲
<svg> 繪製一個向量圖

表示 - 表格

<thead> 表格頭部
<tbody> 表格主體
<tr> 橫排

  • 放 <td> 表格內容
  • 第一排通常會放 <th> 表頭
<table>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>小花</td>
        <td>20</td>
    </tr>
    <tr>
        <td>小明</td>
        <td>10</td>
    </tr>
</table>

表示 - 表單

[ 筆記 ] HTML - 表單 form 介紹

js 的引入標籤 <script>

預設用法：

下載後立刻執行 src 的內容，在執行完之前會停止繪製頁面，所以如果 js 檔案很大，畫面會卡住。
HTML5 新屬性：

async
用非同步模式加載，下載後立刻執行，但同時也繼續載入頁面與其他 js 檔案。
適合此 js 可以獨立運作，不依賴於其他 js 的情況下使用。

  • 例： <script async src="common.js"></script>

defer
下載完會先等著，等到頁面都解析完成，觸發 DOMContentLoaded 事件才執行。
類似把 js 放在頁尾的情況，適合此 js 在等頁面繪製完才執行。

  • 例： <script defer src="common.js"></script>

參考資料：
[HTML5] script 的新增屬性 defer, async
async vs defer attributes

參考資料：HTML5 标签列表


#html

krebikshaw




Related Posts

[Week 3] JavaScript - ES6 語法

[Week 3] JavaScript - ES6 語法

 Mily
【隨堂筆記】網路概論與Web網頁應用基礎

【隨堂筆記】網路概論與Web網頁應用基礎

 fiona90178
HTML 標籤元素與屬性介紹

HTML 標籤元素與屬性介紹

 你的程式助教

Comments