WP-05 HTML 語法簡介

這邊要很簡單的說一下HTML語法的概念,雖然用Wordpress 就算完全不懂 html 語法也可以建置網站,但是會 html 能讓你更有彈性地去改造、微調網頁,製作出和別人不一樣的網站。而且當別人都不會時,你會一點點就贏了。

我們現在看到的網頁,最終端幾乎都是html語法建構出來的,為什麼說「最終端」呢?因為產生出 html 語法的方式有百百種,有可能是透過 PHP、Javascript 、Java 等等,也可能是和資料庫溝通後才「製造」出最終的 html 語法,讓瀏覽器可以辨識,而知道要呈現出什麼內容和樣式出來。

所有的 html 都是從 <html> 這樣的標籤開始的,那在這個標籤前面還會有一行,像是<!doctype html>這樣的標籤,這個是宣告這個檔案的版本,比如說這是html5的格式,不過如果這個聽不懂也沒關係,因為說實在少了這一個標籤,網頁大部分的時候照樣可以運作。

我們就從<html>個標籤開始吧,這是一個html文件的開頭,而結尾通常是</html>,是的只要出現「/」通常就是宣告這個區段結束了,什麼意思,聽不懂沒關係,再看下去就會懂。

一個基本的、還沒有內容的html檔案通常會有以下這些標籤

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Untitled Document</title>
XXX
</head>
<body>
<a href=”abc.html”>連結到另一頁</a>
<img src=”abc.png” width=”200″>
</body>
</html>

———-以下逐一說明這些標籤的意思—–

<!doctype html> ←宣告html版本
<html> ←html 開始
<head> ←head 開始 head 通常放一些宣告,或是 javascript 、CSS 都有可能
<meta charset=”UTF-8″>  ←這個html使用的編碼,utf-8是中文常用的編碼
<title>這是一個網頁</title> ←這個title裡的字,會出現在瀏覽器分頁標籤上

XXX←如果有一些這個頁面專用的CSS 或 Javascript 通常會放在這邊

</head> ←head 結束

<body> ←body 開始 ,主要的網頁內容都會放在這個 body 區段

這個區段寫的字會直接出現在網頁上

<img src=”abc.png” width=”200″> ←這個語法代表要顯示一張名為「abc.png」的圖,寬為 200 pixel

<a href=”abc.html”>連結到另一頁</a> ←這個語法在頁面上只會顯示「連結到另一頁」點了之後就會連結到 abc.html

</body> ←body 結束
</html> ←html 結束

 

可能會有人有疑惑,為什麼在wordpress裡面的文章編輯頁面,切換到文字模式,都沒有看到什麼<html>、<head>、<body>等標籤。那是因為,WORDPRESS讓你編輯的只有<body>裡面的東西,當然還是以些外掛可以破解這一道,讓我們可以在<head>裡面加東西,或是使用 javascript,這個之後再說。

目前先懂這樣就可以了,因為現在很多外觀的部分,像是文字的大小、顏色、粗細等等都是用CSS控制,所以懂CSS反而更重要。

下一章再來講CSS

如果想了解所有 HTML 語法,可以參考這一個網站 https://www.w3schools.com/

 

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…