HTML5 基礎語法-結構 : <head>, <body>

Jerry Lin
A Part of Designer.
5 min readApr 14, 2018

--

HTML Hyper Text Markup Language(超文本標記語言),由 W3C定義與維護的標準網頁語言。

這裡是有個概念系列,適合想要入門的同學,先知道點概念再來找自學的資源是不錯的開始~

1.結構

一個html程式碼的基本架構會長這樣,會有基本的宣告還有頭 <head> 與身體 <body>

<!DOCTYPE html>

起頭命令句,告訴瀏覽器這個檔案是一個 html檔。

<html></html>

用來包裹整個html內含的程式碼。在開頭 <html> 可以加入語言判定的標籤,例如

<html lang="en-US">

表示這個網頁的內容為英語,且地區為美國,這行代碼是告訴搜尋引擎判斷網頁的內容為何,並不會影響網頁呈現。若寫作 <html lang="en">,便是沒有特定的地區。

2.Head

就像人由頭跟身體組成,一個html檔也有頭 <head> 跟身體 <body>。基本上 <head> 裡面的內容都不是給”人”看得,而是給機器運作、搜尋用得。

<head></head>

主要放置得標籤用來告訴搜尋引擎這個網頁有什麼樣的內容、控制網頁與外部程式碼的連結、定義網頁使用的樣式等等(例如你的css檔如何跟html運作)。常用的標籤有 <title>、<meta>、<link>、<script>、<style>、<base> 等等。

<title>This is a title</title>

網頁的標題,每個網頁只能有一個標題,裡面的內容會顯示在書籤頁上。

接著是學網頁通常會最先接觸的連結css的程式碼

<link rel="stylesheet" type="text/css" href="main.css"/>

這行程式的意思是導入一個 stylesheet 樣式表(告訴瀏覽器要用stylesheet編碼來解讀此文件)的 text/css 文件,外部連結(href)和名字為 main.css (這裡放的是完整的路徑連結,但如果只是在電腦裡同一個資料夾做測試就不需要路徑,他會自己抓)。

<meta> Metadata

Metadata是自我閉合標籤(也就是不需要 </標籤> 就可以跑的標籤),如同放在 <head> 裡的標籤一樣都是用來告訴瀏覽器訊息的標籤。

最常用的就三個,

<meta charset="UTF-8">

告訴瀏覽器這個網頁所用的編碼方式。UTF-8是一種字元的編碼方式,我們知道電腦只看得懂0101(也就是二進位編碼),例如大寫A寫成二進位編碼就是01100001。

<meta name="description" content="網頁簡短描述">

用來寫網頁的簡短描述。

<meta name="keywords" content="網頁關鍵字">

用來放置網頁關鍵字。

3.Body

給瀏覽器讀得部分寫完了,接下來開始寫網頁內容了。網頁真正會跑給使用者看的東西全部都在 <body>

3–1.文句:

<h1>This is headline</h1> headline

一篇文章會有標題與內文,標題會有六種大小,從 <h1> ~ <h6>,預設字體大小為24pt ~ 8pt,但主要用來分類,不會特地用這個來改字體大小。

jsbin線上範例

先知道html的註解寫法 <!--This is a comment—>

從這邊開始我直接寫在html裡面讓大家熟悉

3–2.超連結:

jsbin線上連結

3–3.目錄:

jsbin線上連結

Jerry Lin, 目前動態:穩定過勞中…
你可以拍多點手👏(壓著就會一直噴小花很舒壓喔!),為你喜歡的內容投票,或是用Like Coin ↓ 抖內我,一起創造更多值得擁有的內容/

--

--

Status: Overloading… | A Taiwan based UI/UX designer who works for a fintech company and love to share the case study from practical cases.