初探HTML5——Hello World

記得剛接觸HTML的時(shí)候昌犹,有一些元素只會(huì)寫(xiě)但是不明白其含義,這情況真是很尷尬览芳。本節(jié)將來(lái)解析一下HTML文檔的主要的骨架標(biāo)簽的含義斜姥。

一、Hello World

編寫(xiě)第一段HTML代碼沧竟,在頁(yè)面上輸出Hello World文本铸敏。代碼如下:

<!--聲明文檔內(nèi)容為html-->
<!DOCTYPE html>
<!--設(shè)置語(yǔ)言為英文-->
<html lang="en">
<head>
    <!--設(shè)置文檔默認(rèn)編碼-->
    <meta charset="UTF-8">
    <!--網(wǎng)頁(yè)的title-->
    <title>系統(tǒng)首頁(yè)</title>
</head>
<body>
     <p>Hello World</p>
</body>
</html>

這是一段最簡(jiǎn)單HTML代碼,但是其骨架完整悟泵。在瀏覽器中瀏覽效果如圖:


Hello World

二杈笔、讀懂每一個(gè)標(biāo)簽

一個(gè)符合規(guī)范的HTML文檔會(huì)包含DOCTYPE、html糕非、head蒙具、body這些基本的文檔元素。當(dāng)然即使沒(méi)有顯式的元素標(biāo)簽朽肥,網(wǎng)頁(yè)也是可以顯示禁筏,但是不建議這么去做。

1衡招、HTML5基本文檔結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head></head>
    <body>
    </body>
</html>

上述示例演示了HTML文檔骨架的4種文檔元素的使用方法篱昔。接下來(lái),將逐一解讀蚁吝。

<!DOCTYPE HTML>

!DOCTYPE元素主要有兩個(gè)作用第一是告訴瀏覽器旱爆,它即將處理的是一份HTML文檔;第二是用來(lái)標(biāo)記HTML的版本窘茁。通常這樣的聲明都在文檔的第一行怀伦。

<html></html>

html元素是文檔的根元素。

<head></head>

head元素是文檔的頭部(通俗的理解)山林,在head元素中可以使用title元素和其他的元數(shù)據(jù)元素房待,也可以在head中引用js、css和定義js驼抹、css桑孩。

<body></body>

body元素(容器)中是文檔的展示內(nèi)容。

PS:小伙伴們真棒框冀,已經(jīng)寫(xiě)出了第一個(gè)網(wǎng)頁(yè)流椒。加油!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末明也,一起剝皮案震驚了整個(gè)濱河市宣虾,隨后出現(xiàn)的幾起案子惯裕,更是在濱河造成了極大的恐慌,老刑警劉巖绣硝,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜻势,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡鹉胖,警方通過(guò)查閱死者的電腦和手機(jī)握玛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)甫菠,“玉大人挠铲,你說(shuō)我怎么就攤上這事∈缥担” “怎么了市殷?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵愕撰,是天一觀的道長(zhǎng)刹衫。 經(jīng)常有香客問(wèn)我,道長(zhǎng)搞挣,這世上最難降的妖魔是什么带迟? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮囱桨,結(jié)果婚禮上仓犬,老公的妹妹穿的比我還像新娘。我一直安慰自己舍肠,他們只是感情好搀继,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著翠语,像睡著了一般叽躯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上肌括,一...
    開(kāi)封第一講書(shū)人閱讀 51,562評(píng)論 1 305
  • 那天点骑,我揣著相機(jī)與錄音,去河邊找鬼谍夭。 笑死黑滴,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的紧索。 我是一名探鬼主播袁辈,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼珠漂!你這毒婦竟也來(lái)了晚缩?” 一聲冷哼從身側(cè)響起葛菇,我...
    開(kāi)封第一講書(shū)人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎橡羞,沒(méi)想到半個(gè)月后眯停,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡卿泽,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年莺债,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片签夭。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡齐邦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出第租,到底是詐尸還是另有隱情措拇,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布慎宾,位于F島的核電站丐吓,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏趟据。R本人自食惡果不足惜券犁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望汹碱。 院中可真熱鬧粘衬,春花似錦、人聲如沸咳促。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)跪腹。三九已至褂删,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間尺迂,已是汗流浹背笤妙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留噪裕,地道東北人蹲盘。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像膳音,于是被迫代替她去往敵國(guó)和親召衔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案祭陷? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 格式后期處理苍凛。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,127評(píng)論 0 17
  • HTML5 標(biāo)簽comment 注釋標(biāo)簽用于在源文檔中插入注釋趣席。注釋內(nèi)容不會(huì)被瀏覽器顯示。為代碼編寫(xiě)注釋的好處是...
    才気莮孒閱讀 4,059評(píng)論 1 25
  • 一醇蝴、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))宣肚,知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,772評(píng)論 0 8
  • 沉默就像一聲清磐悠栓,搖曳著尾聲霉涨,周?chē)幕钗锒荚谄渲心Y(jié)了。
    牧澄閱讀 137評(píng)論 0 0