重新認識切版 - Ep01

在某次的面試中，被問到 meta 相關問題，卻回答不出來，才發覺有些HTML的觀念非常的重要。
切版看似簡單，但要在短時間內切出1px不差，且不會破版的版，是需要經過大量練習的。

所以才有此系列的誕生，會記錄過往學習切版時，被自己忽略的重點。

HTML 簡介

在 HTML 文件最開頭的第一行，要寫上 DOCTYPE，意思是 Document Type，就是文件類型的意思。

<!DOCTYPE html> 的作用，是告訴瀏覽器這是一份以「HTML 標記語言(markup language)」所撰寫的文件，所以，請用 HTML 的定義來解讀我。

1
2
<!-- HTML5 的寫法 -->
<!DOCTYPE html>

<html lang="en"> ，代表語系是使用英文。

1
2
3
4
5
6
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
1
<head>

此標籤是定義一個標題區塊，裡面可以有標題，介紹文字還有網頁最上方的網頁標頭區塊中會有的網站名稱，logo。

meta tag 用來描述 HTML 文件 (document) 的元資訊 (metadata)，透過 <meta> 我們可以設定很多不同類型的網頁資訊。

以下提及三種：

1
<meta charset="UTF-8">

此行是用來指定網頁的編碼。如果此行沒有加的話，在 ie 就會出現亂碼。

1
meta http-equiv="X-UA-Compatible" content="IE=edge">

為舊版的 ie 設計的，讓 ie 更新可以到最新。

1
meta name="viewport" content="width=device-width, initial-scale=1.0">

設定 RWD，會需要這段語法，針對網頁的螢幕解析度做調整與優化。

  • width=device-width，指定瀏覽器頁面的寬度同裝置 (device) 的寬度。
  • initial-scale=1.0，指定畫面初始縮放比例為 100%，即不放大也不縮小。

img lat=”給視障人士看得”，使用播報軟體，讀出網頁

HTML5 結構語意化

HTML5 標準中有很多新的語意標籤 (semantic elements)，讓網頁可以建立更語意化的結構內容，幫助搜尋引擎和開發者可以更清楚的解讀網頁結構。所以，善用 HTML5 語意標籤也可以增強網頁的 SEO (search engine optimization)。

HTML5 主要的語意結構標籤有 <section>、<article>、<nav>、<header>、<footer>、<main>、<aside>，使用方法是在適當的語意區塊，使用這些語意標籤來取代舊有慣用無語意的 <div>。

  • <section>: 有自己明顯含義的區塊
  • <article>: 內容本身是獨立且完整的區塊
  • <nav>: 導航連結區塊
  • <header>: 標頭區塊
  • <footer>: 頁尾區塊
  • <main>: 頁面主要內容區塊
  • <aside>: 跟主要內容無關的區塊

參考資料

HTML DOCTYPE 檔案類型聲明 - HTML 語法教學 Tutorial

菜鳥工程師 肉豬: HTML 的意思

Web Accessibility 的重要性

HTML 語意結構區塊 SEO Semantic Layout Section - HTML 語法教學 Tutorial

切版
#HTML&CSS
重新認識切版 - Ep01
https://phoebeho.com/切版/20210530/3609728305/
作者
Phoebe
發布於
2021年5月30日
許可協議