HTML詳細介紹(基礎(chǔ)標簽篇)

今天下午陽光明媚,北京少有的好天氣。正好有機會總結(jié)HTML標簽,下面就詳細介紹一下基礎(chǔ)的標簽的用法及相關(guān)的屬性。關(guān)于基礎(chǔ)篇的總結(jié)部分點擊這里.

基礎(chǔ)標簽的內(nèi)容

<!DOCTYPE>:定義,聲明文檔類型
<html>:html文檔的根節(jié)點,定義html文檔
<title>:定義文檔的標題
<body>:定義文檔的主體
<h1> -- <h6>:定義html的標題
<p>:定義html段落
<br>:定義一個簡單的換行
<hr>:定義一條水平線
<!--...-->:html文檔的注釋

基礎(chǔ)標簽的使用方式

<!DOCTYPE html>
<html>
<head>
  <title>這里是標題</title>
  這里是文檔的頭部 ... ...
  ...
</head>
<body>
  這里是文檔的主體 ... ...
  ...
</body>
</html>

<!DOCTYPE>:文檔聲明

定義和用法
定義:<!DOCTYPE>是指示瀏覽器使用哪個HTML版本渲染編寫的代碼
用法:必須是 HTML 文檔的第一行,位于 <html> 標簽之前。

在在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD(文檔類型定義),因為 HTML 4.01 基于 SGML(標準通用標記語言)。DTD 規(guī)定了標記語言的規(guī)則,這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。
HTML5 不基于 SGML,所以不需要引用 DTD。

以下是HTML的DOCTYPE文檔類型的常見聲明:

HTML 5

 <!DOCTYPE html>

HTML 4.01 Strict(嚴格的)
該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

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

HTML 4.01 Transitional(過渡的)
該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。

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

HTML 4.01 Frameset
該 DTD 等同于 HTML 4.01 Transitional,但允許框架集內(nèi)容。

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

XHTML 1.0 Strict(嚴格的)
該 DTD 包含所有 HTML 元素和屬性,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Transitional(過渡的)
該 DTD 包含所有 HTML 元素和屬性,包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)。必須以格式正確的 XML 來編寫標記。

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

XHTML 1.0 Frameset
該 DTD 等同于 XHTML 1.0 Transitional,但允許框架集內(nèi)容。

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

XHTML 1.1
該 DTD 等同于 XHTML 1.0 Strict,但允許添加模型(例如提供對東亞語系的 ruby 支持)。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>:html文檔的根節(jié)點,定義html文檔

定義和用法
定義:此元素可告知瀏覽器其自身是一個 HTML 文檔。
用法:<html> 與 </html> 標簽限定了文檔的開始點和結(jié)束點,在它們之間是文檔的頭部和主體。正如您所了解的那樣,文檔的頭部由<head>定義,而主體由<body>定義。

HTML 與 XHTML 之間的差異
1.XHTML 要求正確嵌套
2.XHTML 所有元素必須關(guān)閉
3.XHTML 區(qū)分大小寫
4.XHTML 屬性值要用雙引號
5.XHTML 用 id 屬性代替 name 屬性
6.XHTML 特殊字符的處理

<title>:定義文檔的標題

定義和用法
定義:<title> 元素可定義文檔的標題。
用法:放在<head>標簽中
通常把它放置在瀏覽器窗口的標題欄或狀態(tài)欄上,并且,當把文檔加入用戶的鏈接列表或者收藏夾或書簽列表時,標題將成為該文檔鏈接的默認名稱

<body>:定義文檔的主體

定義和用法
定義:body 元素定義文檔的主體。
用法:在<html>標簽中,與<title>標簽是兄弟節(jié)點

可選的屬性(不推薦使用)
align="left/center/right/justify"

h1 -- h6:定義html的標題

有6級標題,每級標題有對應(yīng)的字體格式,具體的大小,參見這里;

p 定義段落

p 元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規(guī)定。

br 換行

p 元素會自動在其前后創(chuàng)建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規(guī)定。


定義水平線


標簽在 HTML 頁面中創(chuàng)建一條水平線。
水平分隔線(horizontal rule)可以在視覺上將文檔分隔成各個部分。

屬性="屬性值"
noshade="noshade":規(guī)定水平線的顏色為純色,不是有陰影的顏色;
size="num":規(guī)定水平線的高度,以px為單位;
width="num":規(guī)定水平線的寬度,以px或百分比為單位;

:html文檔的注釋

注釋標簽用于在源代碼中插入注釋。注釋不會顯示在瀏覽器中。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評論 6 540
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,275評論 3 428
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,368評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,736評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,919評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,481評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,235評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,427評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,656評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,160評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,380評論 2 379

推薦閱讀更多精彩內(nèi)容

  • 1.meta標簽 元素可提供有關(guān)頁面的元信息(meta-information),比如針對搜索引擎和更新頻度的描述...
    姚小帥閱讀 348評論 0 1
  • HTML、XML、XHTML 有什么區(qū)別 1.HTML 是用來描述網(wǎng)頁的一種語言,指的是超文本標記語言 (Hype...
    饑人谷_牛牛閱讀 707評論 0 2
  • HTML、XML、XHTML 有什么區(qū)別 HTML全名為**超文本標記語言**(Hyper Text Markup...
    別讓我一個人醉_1fa7閱讀 504評論 0 1
  • 1.HTML、XML、XHTML的區(qū)別 HTML:超文本標記語言(Hyper Text Markup Langua...
    IT男的成長記錄閱讀 292評論 0 1
  • HTML、XML、XHTML有什么區(qū)別? XMLXML是The Extensible Markup Languag...
    zx9426閱讀 441評論 0 1