HTML 簡(jiǎn)介

2023-04-17 17:56 更新

HTML 簡(jiǎn)介


現(xiàn)在您可以通過如下的一個(gè) HTML 實(shí)例來建立一個(gè)簡(jiǎn)單的 HTML 頁面,以此來簡(jiǎn)單了解一下 HTML 的結(jié)構(gòu)。

HTML 實(shí)例

<!DOCTYPE html>
<html>

<head>

    <title>頁面標(biāo)題(w3cschool.cn)</title>

</head>

<body>
    <h1>我是第一個(gè)標(biāo)題</h1>    
    <p>我是第一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?

點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例

實(shí)例解析


  • DOCTYPE聲明了文檔的類型
  • <html>標(biāo)簽是 HTML 頁面的根元素,該標(biāo)簽的結(jié)束標(biāo)志為</html>
  • <head>標(biāo)簽包含了文檔的元數(shù)據(jù)(meta),如<meta charset="utf-8">定義網(wǎng)頁編碼格式為utf-8。
  • <title>標(biāo)簽定義文檔的標(biāo)題
  • <body>標(biāo)簽定義文檔的主體,即網(wǎng)頁可見的頁面內(nèi)容,該標(biāo)簽的結(jié)束標(biāo)志為</body>
  • <h1>標(biāo)簽作為一個(gè)標(biāo)題使用,該標(biāo)簽的結(jié)束標(biāo)志為</h1>,-- HTML標(biāo)題
  • <p>標(biāo)簽作為一個(gè)段落顯示,該標(biāo)簽的結(jié)束標(biāo)志為</p>-- p標(biāo)簽用法
lamp <!DOCTYPE html> 在 HTML5 中也是描述了文檔類型。

什么是 HTML?


HTML 語言用于描述網(wǎng)頁。

  • HTML 是指超文本標(biāo)記語言: Hyper Text Markup Language
  • HTML 不是一種編程語言,而是一種標(biāo)記語言
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 ( markup tag )
  • HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
  • HTML 文檔包含了 HTML 標(biāo)簽文本內(nèi)容
  • HTML 文檔也叫做 web 頁面

HTML 標(biāo)簽


HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 ( HTML tag )。您可以在 W3Cschool 的編程實(shí)戰(zhàn)部分開始學(xué)習(xí) HTML 標(biāo)簽。

  • HTML 標(biāo)簽是由 尖括號(hào) 包圍的關(guān)鍵詞,比如<html>
  • HTML 標(biāo)簽通常是 成對(duì)出現(xiàn) 的,比如<b></b>
  • 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽,第二個(gè)標(biāo)簽是 結(jié)束標(biāo)簽
  • 開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽 和 閉合標(biāo)簽

    <標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素


"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述相同的意思。

但是嚴(yán)格來講,一個(gè) HTML元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽,如下實(shí)例:

HTML 元素:

<p>這是一個(gè)段落。</p>

Web 瀏覽器


Web 瀏覽器(如谷歌瀏覽器、Internet Explorer、Firefox 和 Safari )是用于讀取 HTML 文件,并將其作為網(wǎng)頁顯示。

Web 瀏覽器不會(huì)直接顯示 HTML 標(biāo)簽,而是通過使用標(biāo)簽來決定如何向用戶展現(xiàn) HTML 頁面的內(nèi)容:

w3cschool web 瀏覽器

HTML 網(wǎng)頁結(jié)構(gòu)


下面是一個(gè)可視化的 HTML 頁面結(jié)構(gòu)(只有<body>標(biāo)簽中的內(nèi)容會(huì)顯示在瀏覽器中):

<html>
<head>
<title>頁面標(biāo)題</title>
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
</body>
</html>

HTML 版本


從最初的非標(biāo)準(zhǔn)化的超文本標(biāo)記語言誕生后,HTML 已經(jīng)更新了多個(gè)版本:

發(fā)布時(shí)間 版本
1989 Tim Berners-Lee 發(fā)明萬維網(wǎng)
1991 Tim Berners-Lee 制定 HTML 規(guī)范
1993 Dave Raggett 擬定了 HTML+
1995 HTML 工作組定義 HTML 2.0
1997 W3C 推薦標(biāo)準(zhǔn): HTML 3.2
1999 W3C 推薦標(biāo)準(zhǔn): html 4.01
2000 W3C 推薦標(biāo)準(zhǔn): XHTML 1.0
2008 WhatWG 首次公開 HTML5
2012 WHATWG 制定 HTML5 標(biāo)準(zhǔn)
2014 W3C 推薦標(biāo)準(zhǔn): HTML5
2016 W3C 候選推薦: HTML 5.1
2017 W3C 推薦: HTML5.1 第二版
2017 W3C 推薦: HTML5.2

<!DOCTYPE> 聲明


<!DOCTYPE>是標(biāo)準(zhǔn)通用標(biāo)記語言的文檔類型聲明,有助于在瀏覽器中正確地顯示網(wǎng)頁。

 由于網(wǎng)絡(luò)上文件的類型不一,因此需要正確聲明 HTML 版本,以使得瀏覽器能夠正確識(shí)別并顯示您的網(wǎng)頁內(nèi)容。

doctype聲明是不區(qū)分大小寫的,以下方式均可使用:

<!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">

查看完整網(wǎng)頁聲明類型 DOCTYPE 參考手冊(cè).

MDN CSS參考

中文編碼


在 HTML 頁面的頭部聲明字符為 UTF-8 可以解決在瀏覽器中出現(xiàn)中文亂碼的現(xiàn)象。

HTML 實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標(biāo)題(w3cschool.cn)</title>
</head>
<body>
<h1>這是我的第一個(gè)標(biāo)題</h1>
<p>這是我的第一個(gè)段落。</p>
</body>
</html>

嘗試一下 ?

點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)