HTML文檔的基本骨架

這篇博客是對html基本骨架標(biāo)簽的初步了解,如需深入了解各標(biāo)簽的詳細(xì)使用支竹,請在MDN(國外網(wǎng)站)查找具體的細(xì)節(jié)十电,下面開始進入正題

html頁面最基本的組成

由于html5的文檔類型聲明是向下兼容的,所以現(xiàn)在基本都是使用html5的文檔類型聲明派任。

下面是一個html頁面最基本的三個標(biāo)簽

<!DOCTYPE html>? ? ? ?這個聲明是告訴瀏覽器摸恍,我的html文檔類型是什么

<html>

????<head></head>

? ? <body></body>

</html>

1.<html></html>

一個html頁面的根元素悉罕,所有其他元素都必須是他的子元素

2.<head></head>

包含html頁面的通用信息,包括如文檔標(biāo)題立镶、文檔字符編碼類型壁袄、文檔的引入的腳本和樣式等

3.<body></body>

頁面所有的展示的內(nèi)容都將放入到這個標(biāo)簽中


head中常用的標(biāo)簽

4.<title></title>

此標(biāo)簽用于定義文檔的標(biāo)題,只可以包含文本(如果寫了標(biāo)簽,則標(biāo)簽會被當(dāng)作字符顯示)

5.<meta>

此標(biāo)簽通過標(biāo)簽中的屬性來聲明文檔的相關(guān)信息

例如:

<meta charset="utf-8">? ? ? 這個聲明了我的html文檔是使用utf-8編碼

6.<link>

此標(biāo)簽用來引入一個外部的CSS樣式文件媚媒,通過href屬性來指定樣式文件的地址

7.<script></script>

此標(biāo)簽用于引入一個外部的JS腳本文件嗜逻,通過src屬性來指定腳本文件的地址,標(biāo)簽中間寫的JS代碼將不會被執(zhí)行

如果要想在頁面中直接寫CSS樣式和腳本代碼呢欣范,那么在?<style></style> 之間寫入CSS即可变泄,在 <script></script> 寫入你的JS代碼即可


body中常用的區(qū)塊劃分標(biāo)簽

html5出來之前,區(qū)塊劃分都是使用 <div></div> 標(biāo)簽設(shè)置一個class來劃分一個html頁面的各個區(qū)塊恼琼,有了html5之后妨蛹,就有了更加語義化的標(biāo)簽

8.<header></header>

此標(biāo)簽表示一個頁面的頭部區(qū)塊

9.<footer></footer>

此標(biāo)簽表示一個頁面的底部區(qū)塊

10.<nav></nav>

此標(biāo)簽表示一個頁面導(dǎo)航區(qū)塊

11.<article></article>

此標(biāo)簽一般表示文章、博客內(nèi)容等的獨立內(nèi)容區(qū)塊

12.<aside></aside>

此標(biāo)簽一般用于和其余部分有聯(lián)系晴竞,但被單獨的拆分出來而不會使整體受影響的區(qū)塊蛙卤,通常用于表示側(cè)邊欄

13.<section></section>

頁面除了頭部區(qū)塊和尾部區(qū)塊,其他區(qū)塊一般使用這個來表示,并會搭配h1-h6中的標(biāo)簽來辨識每個區(qū)塊

14.<address></address>

此標(biāo)簽一般表示一個聯(lián)系信息的區(qū)塊


總結(jié):

一個html文檔由文檔聲明和一個根元素html組成颤难,根元素html又由head元素body元素組成神年,?head元素中的元素都是用來表示文檔相關(guān)通用信息body元素中的元素則是html頁面的各個區(qū)塊行嗤。至此已日,就是本篇博客的全部內(nèi)容。如此博客中有說的不對的地方歡迎批評指正栅屏。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末飘千,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子栈雳,更是在濱河造成了極大的恐慌护奈,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哥纫,死亡現(xiàn)場離奇詭異霉旗,居然都是意外死亡,警方通過查閱死者的電腦和手機蛀骇,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進店門厌秒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人擅憔,你說我怎么就攤上這事简僧。” “怎么了雕欺?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長棉姐。 經(jīng)常有香客問我屠列,道長,這世上最難降的妖魔是什么伞矩? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任笛洛,我火速辦了婚禮,結(jié)果婚禮上乃坤,老公的妹妹穿的比我還像新娘苛让。我一直安慰自己,他們只是感情好湿诊,可當(dāng)我...
    茶點故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布狱杰。 她就那樣靜靜地躺著,像睡著了一般厅须。 火紅的嫁衣襯著肌膚如雪仿畸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天,我揣著相機與錄音错沽,去河邊找鬼簿晓。 笑死,一個胖子當(dāng)著我的面吹牛千埃,可吹牛的內(nèi)容都是我干的憔儿。 我是一名探鬼主播,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼放可,長吁一口氣:“原來是場噩夢啊……” “哼谒臼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起吴侦,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤屋休,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后备韧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體劫樟,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年织堂,在試婚紗的時候發(fā)現(xiàn)自己被綠了叠艳。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡易阳,死狀恐怖附较,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情潦俺,我是刑警寧澤拒课,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站事示,受9級特大地震影響早像,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜肖爵,卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一卢鹦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧劝堪,春花似錦冀自、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至帝蒿,卻和暖如春荐糜,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工暴氏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留延塑,地道東北人。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓答渔,卻偏偏與公主長得像关带,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子沼撕,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,666評論 2 350

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案宋雏? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,737評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)务豺,斷路器磨总,智...
    卡卡羅2017閱讀 134,637評論 18 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評論 1 41
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,525評論 32 459
  • 今天正是那樣的日子。 2000年1月1日奔浅,城市中心車水馬龍馆纳,熙熙攘攘的人潮涌動,變換的腳步與閃爍的霓虹汹桦,諾大...
    時蘿啊閱讀 451評論 2 4