技術類文章

金魚也能學會寫網頁-HTML超入門

一開始只是興趣使然，寫了一篇關於網頁框架的簡單筆記，不過幾經思考後，還是想把它寫成網頁相關的系列筆記，希望在忘了一些東西時，能有個地方可以快速找回記憶。☺️

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 簡單介紹 HTML

HTML (Hyper Text Markup Language，超文字標記語言) 是用來製作網頁的 “標記式” 語言。標記(Markup)，指在某內容的開頭及結尾加上 “標籤(Tag)”，用以定義該段內容的意義。

例如:

1
<p>Hello HTML</p>

以上面的例子來說，<p>(開始標籤)與</p>(結束標籤)之間的內容，就被定義為段落。

💡 Hint: 但不一定都是雙標籤，也有單標籤存在，例如:<br/>就是一個單標籤。

✏️ HTML 的組成要件

  1. 元素(Element): 開始標籤與結束標籤之間所框住的範圍稱為元素，而元素是構成 HTML 的最小單位。
1
<p>Hello 元素</p>
  1. 屬性(Attribute): 屬性是用來對元素進行各種設定。如下面設定了 a 元素的 href 屬性。a 元素主要是用來定義超連結(Hyperlink)，href 屬性則指明了要連結的位置。
1
<a href="https://www.google.com.tw/">Google</a>

✏️ HTML 的文件結構

  • 最基本的架構

  1. DOCTYPE 宣告: 用來宣告使用的 HTML 版本

  2. html 元素: HTML 文件的最上層元素，以下分成 head 和 body，通常在 html 標籤上會設定 “lang” 屬性，作語言識別之用，例如: zh-TW (繁體中文)

1
<html lang="zh-TW">

  1. head 元素: 記載頁面的標題、文字編碼、關鍵字、內容概要或其他連結檔案等…，不會在瀏覽器中顯示出來

  2. body 元素: 記載頁面內容並顯示在瀏覽器上

🚀 BONUS: head 內的常見元素

  • 除了 title 元素外，其他都不會顯示在網頁上
元素 說明
<title>頁面標題</title> 設定 HTML 文件的標題
<meta charset="utf-8"> 記載文字編碼
<meta name="description" content="網頁概述"> 網頁內容的大致說明
<meta name="keywors" content="關鍵字"> 設定網頁的關鍵字
  • 網頁原始碼
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
分享到