前端新米

Heidi's Blog

0%

[week 6] HTML - 認識基礎標籤

發表於 更新於 分類於 ，
5.8k 5 分鐘

本篇為 [FE101] 前端基礎：HTML 與 CSS 這門課程的學習筆記。如有錯誤歡迎指正。

學習目標：

 P1 你知道 HTML 是在做什麼的
 P1 你知道如何使用有語意的（semantic）標籤
 P1 你知道基本 SEO 的概念

網頁是如何製作的？

  • 所有網站都使用 HTML 和 CSS 編寫，且根據不同需求，可能還會加入其他技術。
  • 網頁其實就是有結構的「文字檔」，藉由瀏覽器解析渲染，呈現我們看到的畫面。

什麼是 HTML？

  • 全名為 HyperText Markup Language，中文翻作「超文本標記語言」。
  • 由名字可知 HTML 是一種標記語言，而非程式語言。
  • HTML 使用「元素」來描述頁面結構，通常由兩個標記（tag）所組成：
    • 開始標記：可承載屬性，說明該元素的內容。例如：<p>
    • 結束標記：多一道斜線。例如：</p>

基本架構 - 必要的標籤

小技巧：在編輯器上輸入 ! 再按 tab 鍵，可快速生成基本架構。

<!-- 開頭需定義撰寫格式，告訴瀏覽器使用最新版本 HTML5 -->
<!DOCTYPE html>

<!-- 網頁的最根部元素 -->
<html lang="en">

  <!-- 包含網頁的基本資訊 -->
  <head>

  </head>

  <!-- 網頁顯示的內容 -->
  <body>

  </body>
  
</html>

<head> 內常見的標籤

head 中的文檔並不會呈現在瀏覽器上，通常會包含一些資訊，例如：標題（<title>）、meatadata（提供網頁資訊給瀏覽器或搜尋引擎）、引入 CSS 或 JavaScript 文件並應用於 HTML 檔。

<head>
    <!-- 聲明該頁面的編碼方式 -->
    <meta charset="UTF-8"> 
        
  　<!-- 在 RWD 網頁，用來設定在不同裝置下的顯示方式：
        width=device-width：符合裝置寬度最佳解析度
        initial-scale=1.0：設定手機螢幕畫面的初始縮放比例為 100% 
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 在瀏覽器 tab 標籤上的標題 -->
    <title>網頁標題</title>
    <!-- 在瀏覽器 tab 標籤上的小圖示 -->
    <link rel="icon" href="favicon.ico">
    <!-- 引入 main.css -->
    <link href="main.css" rel="stylesheet">
    <!-- 引入 common.js -->
    <script src="common.js"></script>
</head>

參考資料：HTML meta 標籤- Wibibi

<body> 內常見的標籤

  • <div>：為區塊元素（block）

文字相關標籤

  • <h1> ～ <h6>：標題有六階
    • 重要程度由高至低
    • 一個網頁通常只能有一個 h1
  • <p>：段落
  • <span>：為行內元素
  • <sup> 和 <sub>：用來將內容上標、下標。為行內元素。
<h3>上標（superscript）：常用來表示日期字尾、次方數</h3>
<p>Today is July 23<sup>rd</sup>.</p>

<h3>下標（subscript）：常用在註解或化學式上</h3>
<p>H<sub>2</sub>O</p>

sup sub

空白壓縮

當瀏覽器遇到兩個以上的空白字元時，只會顯示一個空白字元；同樣的，遇到斷行也會視為單一空白字元處理。

因此我們可以利用下列標籤幫助排版：

  • <pre>：保留完整格式，可用於顯示整段程式碼
  • <br /> 或 <br>：換行
  • <hr /> 或 <hr />：水平線，大小寫均可，斜線可加可不加

舉個例子：

我是標題
<hr>
我是段落一
<HR>
我是段落二

清單列表

  • <ul>：項目清單（unordered list）
  • <ol>：編號清單（ordered list）
  • <li>：清單中的每個項目（list item）
  • 去除清單預設樣式 CSS：list-style: none
<ol>
  <li>項目一</li>
  <li>項目二</li>
  <li>項目三</li>
</ol>

<a>：加入連結

  • href 屬性：指定要連結的目標網頁，可分為：
    • 絕對 URL：完整網址
    • 相對 URL：連到同一網站的其他頁面可使用，例如：contact.html
    • 上述兩種方式，也可使用 id 屬性：指定連結到網頁的目標元素
<h1 id="top">網頁前端</h1>
<a href="#html">前往 HTML</a>
<a href="#css">前往 CSS</a>

<h2 id="html">HTML 介紹</h2>
<p>Lorem數字 + tab 鍵：可產生假字</p>

<h2 id="css">CSS 介紹</h2>
<p>Lorem1000 + tab 鍵：產生 1000 個假字</p>

<a href="#top">回到 TOP</a>
  • target 屬性：
    • _self：為預設值，會在原頁面開啟連結
    • _blank：在新視窗開啟連結
<a href="https://www.google.com.tw/">連到 Google 首頁</a>
<a href="https://www.google.com.tw/" target="_blank">另開新視窗</a>

<img>：嵌入圖片

  • src 屬性：指定圖片來源
  • alt 屬性：當圖片無法顯示時的替代文字，可用來描述影像內容
  • title 屬性：滑鼠停留在圖片上的提示文字
<img src="https://www.google.com.tw/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="This is logo" title="google logo" >

  • <Iframe>：內嵌網頁

<figure>
  <img src="https://images.unsplash.com/photo-1528138326811-ec5dd3b594be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="photo" title="tasty break">
  <figcaption>
    Photo by Vita Marija Murenaite on <a href="https://unsplash.com/photos/HyO7jwH4C6g">Unsplash</a>
  </figcaption>
</figure>

figure

<table>：表格

表格是以一列一列的方式撰寫，每一列由 <tr> 元素來製作。

  • <tr>：表格列（table row），表示每一列的起始
  • <td>：表格資料（table data）
  • <th>：表格標題（table head），用法和 <td> 元素相同，會以粗體顯示
    • 使用 scope 屬性：可標明是行（row）或列（col）的標題
    • 使用 rowspan、colspan 屬性：可跨行或跨列
  • 製作長表格時，可分割成 <thead>、<tbody>、<tfoot>
  • 舉個例子：

table

<!-- 上述表格程式碼如下 -->
<table>
  <tr>
    <th></th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
  <tr>
    <th>內容</th>
    <td>漢堡</td>
    <td>薯條</td>
    <td>炸雞</td>
  </tr>
  <tr>
    <th>價格</th>
    <td>99</td>
    <td>25</td>
    <td>70</td>
  </tr>
</table>

<form>：表單

其實 Google 首頁中央的搜尋框，就是最為人熟知的表單。除此之外，表單還提供其他線上功能，例如：註冊網站會員、網路購物、問卷調查等。

表單控制項：
from、input、textarea

text：純文字
password：顯示會以符號代替文字
可以使用 maxlength and minlength 來控制輸入字數
email：會自動做簡單驗證
search：搜尋框
tel：電話
url：網址

（待補）

參考資料：

  1. [第六週] HTML - 表單 form 介紹 - Yakim shu

語意化元素（Semantic Elements）

使用 HTML5 的語意化元素取代 <div> 有以下優點：

  1. 可使網頁結構和區塊位置更精確
  2. 幫助優化 SEO（搜尋引擎最佳化）

圖片來源：快速了解HTML語意化標籤| by Kira Yang | Medium

  • <header> 頁首：常包含 Logo 圖案、導航列、搜尋欄位
  • <nav> 導航列：主選單、頁尾選單
  • <main> 主要內容
  • <footer> 頁尾，通常包含版權訊息、法律訊息連結
  • <article> 主要文章
  • <section> 段落
  • <aside> 側欄：與主要內文無關的區塊，也就是額外資訊（廣告、推薦文章等）

參考資料：

  1. 金魚都能懂 網頁設計入門 : 網頁入門第一步 (第二天)
  2. HTML&CSS：網站設計建置優化之道
  3. [第七週] HTML — Tag 基本標籤認識 - Miashu
  4. [第六週] HTML - tag 基礎標籤介紹 - Yakim

補充：如何引入 js 檔案

  1. 寫在 HTML 文件的 <script> 標籤內

也就是內嵌在 <head> 或 <body> 結束標籤之前。兩者差別在於：

  • head 部分：會在被調用的時候才執行。
  • body 部分：會在頁面載入的時候被執行。

由於 html 檔是由上而下依序載入，放在接近檔案底部，可確保 JavaScript 較晚被讀取，再去影響先被生成的 HTML 程式碼。但也可能導致腳本載入受阻，拖慢網站效能。

  1. 外部引入 JavaScript 文件

建立 .js 檔案後，在 HTML 檔案中的 <body> 或 <head> 透過 <script src= ""> 標籤引用。這是最常使用的方法，可橫跨多個 HTML 檔案使用。

<!-- .js 檔案路徑為:scripts/common.js -->

<script src="scripts/common.js"></script>

參考資料：

  1. JavaScript 寫在哪裡？ - HiSKIO
  2. JavaScript 是什麼? - 學習該如何開發Web | MDN