第六十四節，html文檔佈局元素

時間 2019-11-12

標籤第六十四 html 文檔佈局元素欄目 HTML 简体版

原文原文鏈接

html文檔佈局元素html

學習要點：瀏覽器

1.文檔元素總彙ide

2.文檔元素解析佈局

本章主要探討HTML5中文檔元素，文檔元素的主要做用是劃分各個不一樣的內容，讓整個佈局清晰明快。讓整個佈局元素具備語義，進一步替代div。學習

一．文檔元素總彙字體

文檔元素基本沒有什麼實際做用效果，主要目的是在頁面佈局時區分各個主題和概念。spa

元素名稱說明code

h1~h6 　　　　　　表示標題htm

header 　　　　　　表示首部blog

footer 　　　　　　表示尾部

nav 　　　　　　表示有意集中在一塊兒的導航元素

section 　　　　　　表示重要概念或主題

article 　　　　　　表示一段獨立的內容

address 　　　　　表示文檔或article的聯繫信息

aside 　　　　　　表示與周邊內容少有牽涉的內容

hgroup 　　　　　將一組標題組織在一塊兒

details 　　　　　生成一個區域，用戶將其展開能夠得到更多細節

summary 　　　　用在details元素中，表示該元素內容的標題或說明

二．文檔佈局元素解析

文檔元素的大部分標籤，是沒有任何效果的，徹底是爲了配合語義使用，以強調它的結構性。只有在後面的章節學習CSS，配合使用才能起到佈局和樣式的效果。

1.<header>表示首部

<header>
    這裏部分通常是頁面頭部，包括：LOGO、標題、導航等內容
</header>

解釋：<header>元素主要設置頁面的標頭部分。

2.<footer>表示尾部

<footer>
    這裏是頁面的尾部，通常包括：版權聲明、友情連接等內容
</footer>

解釋：<footer>元素主要設置頁面的尾部。

3.<h1>~<h6>添加標題

<header>
    <h1>標題部分</h1> 
    <h4>小標題部分</h4></header>

解釋：<h1>~<h6>實際做用就是加粗並改變字體大小。用於各類標題文檔。

4.<hgroup>組合標題

<header>
    <hgroup>
        <h1>標題部分</h1>
        <h4>小標題部分</h4>
    </hgroup>
</header>

解釋：<hgroup>元素的做用就是當多個標題出現，干擾到一對或多個自己須要整合的標題，這是使用此元素包含羣組。

5.<section>文檔主題

<section>
這裏通常是存放文檔主題內容。
</section>

解釋：<section>元素的做用是定義一個文檔的主題內容。

6.<nav>添加導航

<header>
    <h1>標題部分</h1>
    <h4>小標題部分</h4>
    <nav>這裏存放文檔的導航</nav>
</header>

解釋：<nav>元素給文檔頁面添加一個導航。

7.<article>添加一個獨立成篇的文檔

<article> <!--添加一個獨立成篇的文檔-->
    <header> <!--添加一個獨立成篇的文檔頭部-->
        <nav></nav> <!--添加一個獨立成篇的文檔導航-->
    </header>
<section>文檔主題</section> <!--添加一個獨立成篇的文檔主題-->
<footer>尾部</footer> <!--添加一個獨立成篇的文檔尾部-->
</article>