跳至主要内容

🐄 HTML 概觀

何謂 HTML

HTML (Hypertext Markup Language),中文翻譯成超 文本語言

他是一種標記語言(Mark Language),他會透過各種標籤,讓瀏覽器看懂,並呈現出最終的樣子

HTML 的結構

HTML 的組成

  • 以下這是一個 HTML
<div> Hi Hi </div>
  • 開頭與結尾: HTML 的開頭 (Opening tag) 會使用 <> 結尾(Closing tag) 則是 </>
  • 內容 (Content) : 上面的例子 Hi Hi 就是內文

HTML 的架構

  • 首先會再開頭宣告,這段的內容是 HTML
<!doctype html>
  • 再來分別可以將 HTML 拆成兩塊
  • headbody 可以將它看成頭跟身體
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>

HTML head

  • head 通常會放一些重要資訊:
    • 瀏覽器搜尋的關鍵字 (SEO)
    • CSS 會放在 head
    • 還有網頁的相關資訊
<head>
<meta charset="utf-8" />
<title>我的網站標題</title>
</head>

<meta charset="" /> 通常會在 head 放上這行,表示要用 utf-8 這個字元呈現

<title>我的網站標題</title> title 這個標籤通常會放在 head 而且只會有一個,他會顯示在瀏覽器的頁籤上,表示網頁的標題

HTML body

<body>
<h1>我是標題</h1>
<div>我是內文</div>
</body>

HTML file

HTML 檔案的副檔名為 .html

可以嘗試在電腦建立一個空白的記事本,並將檔名與附檔名改成 website.html

並貼上以下內容

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>我的網站標題</title>
</head>
<body>
<h1>我是標題</h1>
<div>我是內文</div>
</body>
</html>

存檔後將他用瀏覽器打開,就可以看到第一個網站呈現了


學習資源

網站說明
mdn web docs比較有權威性的網頁文件,適合初學,比較類似字典類型的網站
W3C school上面有許多範例,也可以直接在上面做練習,適合初學入門的網站

REF

mdn web docs