HTML5 新增的主體結構元素
article 元素
可以內嵌
可以表示插件
<article>
<h1>這是一個內嵌頁面</h1>
<object>
<embed src="#" width = "600" height = "400"</embed>
</object>
</article>section 元素
通常不推薦沒有標題內容使用section元素
不要與article元素混淆
總結
- 不要將section元素作爲設置樣式的頁面容器
- 如果article、aside、nav元素更符合使用條件，那不要說seciton元素
- 沒有標題內容的，不要使用section元素
nav
用作頁面導航的連接組，其中的導航元素連接到其他頁面或當前頁面的其他部分。將主要的、基本的連接組放進nav元素即可
應用場景：
- 傳統導航條
- 側邊欄導航
- 頁內導航
- 翻頁操作
html5中不要使用menu 元素代替 nav元素
練習代碼如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href = "#">主頁</a></li>
<li><a href = "#">開發文檔</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的歷史</h1>
<nav>
<ul>
<li><a href = "#">HTML5歷史</a></li>
<li><a href = "#">CSS3歷史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5歷史</h1>
<p>....</p>
</section>
<section>
<h1>css3歷史</h1>
<p>....</p>
</section>
<footer>
<a href = "#">刪除</a>
<a href = "#">修改</a>
</footer>
</article>
<footer>
<p><small>版權聲明：</small></p>
</footer>
</body>
</html>aside元素
表示當前頁面或者文字的附屬信息部分
包含先關的引用、側邊欄、逛逛、導航條等
練習代碼如下
<html>
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入門</h1>
</header>
<article>
<h1>語法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名詞解釋</h1>
<p>這是一個對語言來說很重要的內容體</p>
</aside>
</article>
<aside>
<nav>
<h2>評論</h2>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的學習一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>time元素和pudate屬性
time元素
24小時
<html>
<head>
<meta charset="UTF-8">
<title>Time元素</title>
</head>
<body>
<time datatime = "2017-10-09">2017-10-09</time>
<time datatime = "2017-10-09T20:00">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
</body>
</html>
pudate屬性
<html>
<head>
<meta charset="UTF-8">
<title>update屬性</title>
</head>
<body>
<article>
<header>
<h1>蘋果</h1>
<p>發佈日期
<time datetime="2017-10-09" pubudate>2015-10-09</time></p>
<p>舞會時間
<time datetime ="2015-10-09">2015-10-09</time></p>
</header>
</article>
</body>
</html>HTML5新增的非主體結構元素
header元素
具有引導和導航作用額結構元素
<html>
<head>
<meta charset="UTF-8">
<title>header元素</title>
</head>
<body>
<header>
<h1>IT最新技術</h1>
<a href="#">極客學院</a>
<nav>
<ul>
<li><a href="#">學習</a></li>
<li><a href="#">技術</a></li>
<li><a href="#">極客</a></li>
</ul>
</nav>
</header>
</body>
</html>
footer元素
可以在article和section中嵌套
hgroup元素
將標題及其子標題進行分組的元素。
hgroup通常會將h1~h6元素進行分組
將同一級下的標題和子標題進行組合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>這是文章的標題</h1>
<h2>這是一個子標題</h2>
</hgroup>
<p><time datetime="2017-10-09">2017-10-09</time></p>
</header>
<div>
這是內容
</div>
<footer>
這是底部
</footer>
</article>
</body>
</html>address元素
呈現聯繫人和聯繫信息
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<address>
<a href="#">iwen</a>
<a href="#">ime</a>
</address>
<footer>
<div>
<!--
作者：offline
時間：2017-10-09
描述：方便添加屬性
-->
<address>
<a href="#">iwen</a>極客學院，嘉華大廈
</address>
<time datetime = "2017-10-09">2017-10-09</time>
</div>
</footer>
</body>
</html>
HTML5的結構
- 顯示編排內容區域塊
section等元素 - 隱示編排內容區域塊
- 標題分級
按級別生成 - 不同區域塊可以使用相同級別的標題
下面是一個典型的結構demo
<html>
<head>
<meta charset="UTF-8">
<title>網頁編排示例</title>
</head>
<body>
<header>
<h1>網頁標題</h1>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">help</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>main title of article</h1>
<h2>sub title of article</h1>
</hgroup>
<p>content
</p>
<section>
<div>
<article>
<h1>pinglun title</h1>
<p>pinglun content</p>
</article>
</div>
</section>
</article>
<footer>
<small>copyright belongs to...</small>
</footer>
</body>
</html>
本博客內容到此結束，歡迎交流探討！