小白網頁設計練成記-DAY2-HTML介绍

2022 iThome 鐵人賽

DAY 2

自我挑戰組

小白網頁設計練成記系列第 2 篇

14th鐵人賽前端新手村 html

Eric

2022-09-02 09:56:04

925 瀏覽

分享至

HTML 又名超文本標記語言(Hyper Text Markup Languge)不是一種編程語言，而是一種創建網路的標記語言，因電腦沒有眼睛沒有鼻子，所以在創建網路的時候必須使用HTML來翻譯內容，而HTML里是一套標記標籤，我們使用一連串的標記標籤(markup tag)來描述網頁。下面是我們常看到的HTML模板:

<!DOCTYPE html>  #聲明為HTML5文檔
<html>           #是HTML頁面的根元素
<head>           #包含文檔中的meta，如<meat charset="utf-8">意思是定義網頁編碼格式為utf-8
<meta charset="utf-8">
    <title>hello world</title>  #描述文檔標題
</head>
<body>  #可見的頁面內容

<h1>标题</h1>  #大標題
<p>段落</p>    #段落

</body>
</html>

標記語言都會用<>及< />來表示開始和結束，如< p >段落開始 </ p >段落結束，
而標籤和元素通常是在描述同個東西，但嚴格來說元素包含了開始標籤和結束標籤。

舉例:

<p>我是段落</p>

HTML中不支持任何空格、回車、制表符，它们都会被解析成一个空白字符。

舉例:

he********llo

world

上面包含8個空格，2個回車
最後判讀為 = he llo world

網頁結構

我們編輯的HTML元素並不會直接顯示在瀏覽器的頁面上，而是用來決定如何展現HTML頁面的內容給Client端，所以啦，這時候我們需要知道HTML網頁的結構中，那些東西會直接呈現在網頁上，看一下下面的示範:

<!DOCTYPE html>                 #不可見
<html>                          #不可見
<head>                          #不可見
<meta charset="utf-8">          #不可見
    <title>hello world</title>  #不可見
</head>
<body>                          #可見的頁面內容

<h1>标题</h1>                   #可見的頁面內容
<p>段落</p>                     #可見的頁面內容

</body>                         #可見的頁面內容
</html>                         #不可見

由上述可知道只有< body >區域內的內容才會在頁面上顯示。