HTML 基礎概論
對於新手網頁工程師而言,認識什麼是 Html 是一件基礎的事,基本上瀏覽器開啟網頁,幾乎都是開啟 Html 的!
那什麼是 Html 呢?
詳細的歷史淵源、解釋這邊就不多說啦,大家若有興趣可以自己去 Goolge or Wiki
這邊簡單的說明一下,Html 是一種標籤語言,什麼是標籤?
<table></table> 這個就是標籤!
基本上在 Html 的世界,只要是用小括弧包起來的都可視為一個標籤!
Html 標籤基本上分成兩種,一種是 <table></table> 這樣的有頭有尾的格式,這種稱作雙標籤元素
另外一種則是 <input /> 這樣形式的單標籤元素,而這些標籤通常會稱作 Html 的<b>元素</b>!
所以這邊做個小整理總結:
- Html 是一種標籤語言,是由標籤所組成的
- Html 標籤分成兩種,分別是單標籤、雙標籤
- Html 裡面的標籤亦稱作元素
既然組成網頁的元素都是這些標籤所構成,那就來講一下網頁的基本結構吧!
一般網頁基本結構如下:
<!DOCTYPE html> <html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html>
第一行的 <!DOCTYPE html>,我們目前就先別理它,照寫就對了!
那第二行開始,你會發現都是一對對的標籤,從最外圍的 <html>,裡面分成 <head>、<body>,這就是網頁的基本結構!
head,顧名思義就是 Html 檔案的開頭,基本的 css、meta、JavaScrip 都會在這邊引用,那 css、meta、JavaScrip 這些是什麼?當然現在先不用知道沒關係!
在 head 裡面可以看到 title 標籤,這個標籤就是設定你的網頁標題!
body,代表著網頁內容,所有網頁可見的內容,都是要寫在這裡面的!
既然知道了這些,那就實作一下,首先在你的電腦內新增一個 Html 文字檔案,接著命名它為 index.html,然後用文字編譯器編輯它!
內容就貼上以下這段程式碼:
<!DOCTYPE html> <html> <head> <title>網頁標題</title> </head> <body> 網頁內容 </body> </html>
完成後儲存,接著用你的滑鼠大力的點兩下 index.html,亦或者把 index.html 拖到你的瀏覽器上,這樣你就會看到網頁瀏覽器執行了你的 index.html 囉!
下面是基本結構的對照圖,這就是基本的 Html 的結構!
▲ Html 結構對照圖
其實每個瀏覽器都有可以檢視原始碼的功能,試著對剛剛開啟的網頁,用 滑鼠按右鍵 > 檢視原始碼 後,就可以看到網頁的原始碼!
▲ index.html 的原始碼