HTML詳細(xì)介紹(基礎(chǔ)標(biāo)簽篇)

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

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

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

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

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

<!DOCTYPE>:文檔聲明

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

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

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

HTML 5

 <!DOCTYPE html>

HTML 4.01 Strict(嚴(yán)格的)
該 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(嚴(yán)格的)
該 DTD 包含所有 HTML 元素和屬性窄驹,但不包括展示性的和棄用的元素(比如 font)。不允許框架集(Framesets)证逻。必須以格式正確的 XML 來編寫標(biāo)記乐埠。

 <!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 來編寫標(biāo)記。

 <!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> 標(biāo)簽限定了文檔的開始點和結(jié)束點黍特,在它們之間是文檔的頭部和主體蛙讥。正如您所了解的那樣,文檔的頭部由<head>定義灭衷,而主體由<body>定義次慢。

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

<title>:定義文檔的標(biāo)題

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

<body>:定義文檔的主體

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

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

h1 -- h6:定義html的標(biāo)題

有6級標(biāo)題,每級標(biāo)題有對應(yīng)的字體格式傅蹂,具體的大小纷闺,參見這里;

p 定義段落

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

br 換行

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


定義水平線


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

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

:html文檔的注釋

注釋標(biāo)簽用于在源代碼中插入注釋稚叹。注釋不會顯示在瀏覽器中焰薄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市扒袖,隨后出現(xiàn)的幾起案子塞茅,更是在濱河造成了極大的恐慌,老刑警劉巖僚稿,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凡桥,死亡現(xiàn)場離奇詭異,居然都是意外死亡蚀同,警方通過查閱死者的電腦和手機(jī)缅刽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蠢络,“玉大人衰猛,你說我怎么就攤上這事∩部祝” “怎么了啡省?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長髓霞。 經(jīng)常有香客問我卦睹,道長,這世上最難降的妖魔是什么方库? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任结序,我火速辦了婚禮,結(jié)果婚禮上纵潦,老公的妹妹穿的比我還像新娘徐鹤。我一直安慰自己,他們只是感情好邀层,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布返敬。 她就那樣靜靜地躺著,像睡著了一般寥院。 火紅的嫁衣襯著肌膚如雪劲赠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天,我揣著相機(jī)與錄音凛澎,去河邊找鬼泌绣。 笑死,一個胖子當(dāng)著我的面吹牛预厌,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播元媚,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼轧叽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刊棕?” 一聲冷哼從身側(cè)響起炭晒,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎甥角,沒想到半個月后网严,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡嗤无,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年震束,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片当犯。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡垢村,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出嚎卫,到底是詐尸還是另有隱情嘉栓,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布拓诸,位于F島的核電站侵佃,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏奠支。R本人自食惡果不足惜馋辈,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望胚宦。 院中可真熱鬧首有,春花似錦、人聲如沸枢劝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽您旁。三九已至烙常,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蚕脏。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工侦副, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人驼鞭。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓秦驯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親挣棕。 傳聞我的和親對象是個殘疾皇子译隘,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

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

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