HTML5常用的語義化和結(jié)構(gòu)元素

結(jié)構(gòu)元素

  • header標簽:通常被放置在頁面或者頁面中某個區(qū)域元素的頂部线梗,用來介紹內(nèi)容或者當(dāng)做導(dǎo)航鏈接欄,在一個文檔中指蚁,您可以定義多個<header>元素厕九。
  • nav標簽:通常表示頁面的導(dǎo)航。
  • mian標簽:文檔的主要內(nèi)容除师。
  • article標簽:使用在相對獨立沛膳、完整的內(nèi)容模塊,一般使用在博客汛聚、論壇锹安、新聞報道、用戶評論
  • section標簽:一般用來做內(nèi)容的分組贞岭,比如文章的章節(jié)
  • aside標簽:包含的內(nèi)容不是頁面的主要內(nèi)容八毯、具有獨立性,是對頁面的補充瞄桨。
  • footer標簽:一般放在頁面或者頁面的某個區(qū)塊的底部话速,包含版權(quán)信息、聯(lián)系方式等芯侥。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <img src="logo.jpg" alt="logo">
        <nav>
            <a href="">html5</a>
            <a href="">css3</a>
            <a href="">js</a>
        </nav>
    </header>
    <main>
        <article>
            <h1>html5+css3</h1>
            <p>html5+css3....</p>
            <section>
                <h4>html5</h4>
                <p>html5是html的最新版本........</p>
            </section>
            <section>
                <h4>css3</h4>
                <p>css3新特性...........</p>
            </section>
        </article>
        <aside>
            <h1>html5結(jié)構(gòu)元素</h1>
            <p>headrer泊交、footer乳讥、section........</p>
            <nav>
                <ul>
                    <li><a href="">html5</a></li>
                    <li><a href="">css3</a></li>
                    <li><a href="">js</a></li>
                </ul>
            </nav>
        </aside>
    </main>
    <footer>
        <p>Copyright ??2019 xxxx公司</p>
    </footer>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市廓俭,隨后出現(xiàn)的幾起案子云石,更是在濱河造成了極大的恐慌,老刑警劉巖研乒,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件汹忠,死亡現(xiàn)場離奇詭異,居然都是意外死亡雹熬,警方通過查閱死者的電腦和手機宽菜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來竿报,“玉大人铅乡,你說我怎么就攤上這事×揖” “怎么了阵幸?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長芽世。 經(jīng)常有香客問我挚赊,道長,這世上最難降的妖魔是什么捂襟? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任咬腕,我火速辦了婚禮,結(jié)果婚禮上葬荷,老公的妹妹穿的比我還像新娘涨共。我一直安慰自己,他們只是感情好宠漩,可當(dāng)我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布举反。 她就那樣靜靜地躺著,像睡著了一般扒吁。 火紅的嫁衣襯著肌膚如雪火鼻。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天雕崩,我揣著相機與錄音魁索,去河邊找鬼。 笑死盼铁,一個胖子當(dāng)著我的面吹牛粗蔚,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播饶火,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼鹏控,長吁一口氣:“原來是場噩夢啊……” “哼致扯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起当辐,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤抖僵,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后缘揪,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耍群,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年找筝,在試婚紗的時候發(fā)現(xiàn)自己被綠了世吨。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡呻征,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出罢浇,到底是詐尸還是另有隱情陆赋,我是刑警寧澤,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布嚷闭,位于F島的核電站攒岛,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏胞锰。R本人自食惡果不足惜灾锯,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望嗅榕。 院中可真熱鬧顺饮,春花似錦、人聲如沸凌那。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽帽蝶。三九已至赦肋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間励稳,已是汗流浹背佃乘。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留驹尼,地道東北人趣避。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像扶欣,于是被迫代替她去往敵國和親鹅巍。 傳聞我的和親對象是個殘疾皇子千扶,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,728評論 2 351

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

  • 1. HTML語義化背景介紹 講到語義化澎羞,我們首先來聊聊html語義化的背景,HTML結(jié)構(gòu)語義化敛苇,是最近幾年才提出...
    阿布_0caf閱讀 25,386評論 1 20
  • HTML 5的革新之一:語義化標簽一節(jié)元素標簽妆绞。 在HTML 5出來之前,我們用div來表示頁面章節(jié)枫攀,但是這些di...
    吳越公子閱讀 760評論 0 0
  • 在HTML 5出來之前来涨,我們用div來表示頁面章節(jié)图焰,但是這些div都沒有實際意義。(即使我們用css樣式的id和c...
    浪漫歌閱讀 377評論 0 0
  • 首先是關(guān)于語義(Semantics)和默認樣式的區(qū)別蹦掐,默認樣式是瀏覽器設(shè)定的一些常用tag的表現(xiàn)形式技羔,語義化的主要...
    DecadeHeart閱讀 3,424評論 0 3
  • 語義化標簽,顧名思義也就是可以直接讀懂的標簽卧抗。最早接觸HTML5的時候藤滥,對HTML5的語義化并沒有太深的理解,只是...
    極客人閱讀 4,176評論 1 18