Day2:網頁開發學習之路-HTML基本骨架（skeleton）

2022 iThome 鐵人賽

DAY 2

自我挑戰組

網頁開發（html.css）系列第 2 篇

14th鐵人賽

claireyang

2022-09-02 14:39:00

1217 瀏覽

分享至

要開始寫HTML必須要有一個好用的工具，網路上有幾款比較推薦的免費HTML編輯器
例：VS Code、Sublime Text、Notepad++

VS Code
Visual Studio Code ，由 Microsoft 所開發的軟體，
具有支援跨平台的開發功能，可以在Windows、Linux 和 Mac上使用
優點：支援跨平台、內建Git和git指令、擁有自訂和擴充功能
Sublime Text
是一套跨平台的文字編輯器，支援基於Python的外掛程式。
Sublime Text是專有軟體，可透過套件（Package）擴充功能。大多數的套件使用自由軟體授權釋出，並由社群建置維護，相容Windows、Linux和Mac操作系統。
優點：支援跨平台、軟體性能好、支援拆分編輯
Notepad++
Notepad++是Windows操作系統下的一套文本編輯器(軟件版權許可證: GPL)
有完整的中文化接口及支持多國語言編寫的功能(UTF8技術)。
本身是用 C++ 所開發完成，因此它擁有軟體容量小及程式執行速度快的優點。
支援平台：Windows、Linux
優點：程式碼自動補齊功能、輕巧且性能佳、支援多語言環境

我個人選用VS Code，放上安裝教學網址提供參考
VS Code 安装教程：https://www.runoob.com/w3cnote/vscode-tutorial.html

HTML基本骨架包含：

1. !DOCTYPE html

一份標準的HTML文件中，在第一行都會有!DOCTYPE html
DOCTYPE其實是Document Type的簡寫，也就是文件類型的意思
主要是告訴瀏覽器這是一份以「HTML標記語言(markup language)」所撰寫的文件，所以請用HTML的定義來解讀，目前為HTML5的DOCTYPE的宣告（不同的版本有不同的宣告方式）

2.html

包含了所有顯示在這個頁面上的內容，html中一定會包含兩個子元素(child elements)
分別為head與body

3.head

作用上是當作一個容器，裡面包含著不同用途的 HTML，被包含在head 裡面的標籤有這些：

title 網頁名稱
meta 網頁 metadata
style CSS 樣式
link CSS 樣式表
script JavaScript 程式碼
noscript 網頁不支援 JavaScript 時的處理
base base URL

meta 標籤可以用來提供網頁的內容資訊給瀏覽器或存取網頁的服務使用
例如常見的網頁內容描述、適用的螢幕解析度...等
<meta charset="utf-8">這個元素指定了你的文件使用utf-8 這種字元編碼，
它會幫助你免去許多文字無法正確呈現的煩惱。

<meta name="description" content=" ">網頁的描述(類似介紹你的網頁）

<meta name="keywords" content=" ">指出網頁的關鍵字
<meta name="author" content=" ">網頁的作者
<meta name="viewport" content=" "> 用來控制終端顯示網頁內容時的設定

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

4.body

包含了所有會顯示於網頁瀏覽者眼前的內容。無論是文字、圖片、影面、互動遊戲...等。

以下就是HTML基本樣板的範例

<!DOCTYPE html>
<html lang="en">
  <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>
  <body></body>
</html>

參考資料：