HTML:超文本標記語言
HTML 的全稱是 Hypertext Markup Language,中譯「超文字標記語言」。注意,他是 markup language,而不是 programming language,在分類上 HTML 並不是「程式語言」。
超文本就是今天俗稱的網頁,前網頁時代的人只看過紙上的「文字 (text)」,所以遇到網頁這種可以連來連去的文件,就稱為「超文字 (hypertext)」,這是一個很有時代感的用詞。
而「標記語言 (markup language)」是一種專門把內容結構化、資訊化的語言,markup 這個字描述了類似螢光筆劃記的感覺,把文字標記起來,賦予某種特性。
常見 HTML 元素
接下來讓我們熟悉一些常見的 HTML 元素,在這個單元我們會認識和內容整理直接相關的 HTML 標籤。在這裡主要是讓大家試著玩一下 CodePen,快速認識常用的標籤,熟悉開發環境。可能無法一口氣消化 HTML 的細節,請放心,之後我們實作「我的履歷切版」時,都會複習關於每個標籤的細節說明。
現在,請準備好你的 CodePen,準備試玩!
文字
首先在 CodePen 的 HTML 編輯區裡輸入一段文字,並且刻意換行。這段文字內容出現在顯示區裡,但卻沒有跟著換行。
段落文字:p
如果我們想強調「一段文字」,需要使用 <p>
標籤,被包起來的內容就自動換行了:
<p>
標籤的意思很直白,就是一段文字,paragraph 的意思。
斷行:br
如果不打算強調「文字段落」的感覺,只是很單純想換行,可以使用 <br>
標籤,這個標籤是 break 的意思:
文字換行了,而且行與行之間的距離比 <p>
標籤小。
標題
在 HTML 規格裡為你準備了六級標籤,分別用 <h1>
到 <h6>
依序表示:
不同層級的標題大小不同,很明顯 h1 最大,然後依序變小。
愈有意義的資訊,就應該使用愈高的標題層級。
項目清單
除了標題與內文以外,有時候還會需要舉例,列出幾點類似的觀點整理在一塊,在網頁語言中當然也有相對應的存在:
這個 <ol>
跟辦公室辦公的 OL 是完全不ㄧ樣的概念,<ol>
是 ordered list 的縮寫,而 <li>
就是 list。工程師為了讓程式語言兼具可讀性和短小精悍,因此電腦語言中往往存在許多「縮寫」。
當你使用 <ol>
標籤的時候,它會自動幫你在每個內文的前面加上數字索引!
如果你今天不想要數字,你也可以使用另一個叫做 <ul>
的標籤:
原本的數字就會變成小黑點!
超連結
我們可以使用 <a>
在文件中加上超連結,超連結 (hyperlink) 就是會連到另一個網頁的入口,它需要和 href
屬性搭配使用:
<a>
是 anchor 的縮寫,也就是「錨點」,剛問世時都叫他「超連結」。網頁上的內容可以互相連來連去,這種互相串聯的特質叫做 hyper,超文字、超連結等用語裡的「超」都是在對譯這個 hyper。現代人對這種功能沒那麼驚奇了,叫他「連結」就好。
<a>
需要和 href
屬性搭配使用,href 是 hyper reference 的縮寫,代表「超連結的參照位址」,這都是正經八百的用語,總之我們需要用 href
屬性設定目標網址。
圖片
插入圖片
有了連結還不夠,我想加點圖片,讓畫面好看一點,這對網頁而言也是小菜一碟:
<img>
就是 image。這個標籤要搭配 src
屬性,代表來源 (source),這裡我們準備好一張書桌圖片給你試玩:https://bit.ly/2OHjuJJ
alt
屬性用來設定圖片的替代內容 (alternative),當瀏覽器無法成功顯示圖片時,就會直接提供這種替代內容。平常可以空白沒關係,但如果是專業的網站就需要考慮無障礙使用,當使用者用語音撥放網站內容時,就會把圖片的 alt
屬性內容念出來。
沒有結尾標籤
雖然說 <img>
是不用寫結尾標籤的!雖然就算你寫了,瀏覽器也不會說你錯:
瀏覽器相當博愛的一視同仁,它不會硬要你修正,畫面也是正常秀出,不過這算是好事嗎?很難說,因為開發者難免會在無意間犯下一些顯而易見的錯誤,加上 <img>
標籤官方也表明是不需要結束標籤的,網頁結構越照著規則走,瀏覽器自然也越能正確解讀你所撰寫的 HTML。
圖片不預設換行
最後我們來注意一個小細節,請在 img 標籤下方隨意輸入內容,看看新的文字出現在哪裡:
新文字會接在圖片旁邊,這表示瀏覽器沒有把「圖片」當成一個「段落」,對瀏覽器來說,圖片像文字一樣都是互相黏在一起的元素。
分割區塊:div
如果想要讓圖片獨立佔用一行的話,常見作法是在外層包一個 <div>
元素:
<div>
代表 division,也就是一個分割區塊。這個標籤本身沒有暗示「裡面放了什麼內容」,但我們常常用 <div>
把元素「打包」在一起。
做為一個「區塊」,被 <div>
會佔滿一整行,所以被打包成獨立區塊的圖片就和後面的文字分開了。
這個 <div>
是一個超級常用的標籤,這裡我們先簡單介紹一下,大概有個印象就好,之後還會一直出現。
註解
想要在 .html 文件裡寫點筆記,但又不想干擾程式碼時,就可以使用註解 (comment),HTML 的註解是用 <!--
和 -->
來包圍一段內容:
被註解包圍的內容會被瀏覽器忽略。
這篇文章帶你快速瞭解所謂的「網頁」就是 HTML 文件,而瀏覽器是一種能夠解析 HTML 的工具,「HTML 是一種標記語言 (markup language)」的意思,最基本的 HTML 語法格式,如開頭/結尾標籤、屬性,與巢狀結構也可以看這篇HTML 語法教學,HTML 入門新手必學。。