HTML 簡介


HTML 實例

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php 中文网</title>
</head>
<body>

<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>

</body>
</html>

運行實例»##點擊"運行實例" 按鈕查看線上實例

實例解析

  • DOCTYPE 宣告了文件類型

  • 位於標籤<html> 與</html> 描述了文件類型

  • 位於標籤<body> 與</body> 為視覺化網頁內容

  • 位於標籤<h1> 與</h1> 以標題使用

    • ##位於標籤<p> 與< /p> 作為一個段落顯示

什麼是HTML?

HTML 是用來描述網頁的語言。

  • HTML 指的是超文本標記語言: HyperText Markup Language

  • HTML 不是一種程式語言，而是一種標記語言

  • 標記語言是一套標記標籤 (markup tag)

  • HTML 使用標記標籤來描述網頁

  • ## HTML 文件包含了HTML

    標籤及文字內容

  • #HTML文件也稱為

    web 頁面

HTML 標籤

HTML 標記標籤通常稱為HTML 標籤(HTML tag)。

  • HTML 標籤是由

    尖括號包圍的關鍵字，例如<html>

  • HTML 標籤通常是

    成對出現的，例如<b> 和</b>

  • #標籤對中的第一個標籤是

    開始標籤，第二個標籤是結束標籤

  • 開始和結束標籤也被稱為

    開放標籤和閉合標籤

<標籤>內容</標籤>
HTML 元素

"HTML 標籤" 和"HTML 元素" 通常都是描述同樣的意思.

但是嚴格來講, 一個HTML 元素包含了開始標籤與結束標籤，如下實例:

HTML 元素:

<p>這是一個段落。 </p>
Web 瀏覽器

網頁瀏覽器（如Google瀏覽器，Internet Explorer，Firefox，Safari）是用於讀取HTML文件，並將其顯示為網頁。

瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給使用者：

HTML網頁結構

下面是一個視覺化的HTML頁面結構：

<html>
<head>
<title> 頁面標題</title>
</head>
<body>
<h1> 這是一個標題</h1>
<p>這是一個段落。 </p>
<p> 這是另一個段落。 </p>
</body>
</html>
lamp.jpg#<!DOCTYPE html> 在HTML5中也是描述了文檔類型。
##只有<body>區域( 白色部分) 才會在瀏覽器中顯示。
lamp.jpg
HTML版本

從初期的網路誕生後，已經出現了許多HTML版本:

版本發佈時間HTML#1991HTML+1993HTML 2.0#1995HTML 3.2#1997#HTML 4.011999#XHTML 1.0#2000## HTML52012XHTML52013
##<!DOCTYPE> ; 宣告

<!DOCTYPE>宣告有助於瀏覽器中正確顯示網頁。

網路上有許多不同的文件，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 宣告是不區分大小寫的，以下方式皆可：

<!DOCTYPE html>
<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用宣告

HTML5

<!DOCTYPE html>
HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

#XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">

查看完整網頁宣告類型DOCTYPE 參考手冊。

中文編碼

目前在大部分瀏覽器中，直接 輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字元聲明為UTF- 8。

HTML 實例

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

執行實例»
#」執行實例" 按鈕查看線上實例

#
←
→