溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關HTML5新增了哪些結構元素，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
HTML5 新增的主體結構元素：
article 元素
section 元素
nav
aside元素
time元素
pudate屬性
元素詳解：
article 元素
可以內嵌 ，可以表示插件
<article>
<h2>這是一個內嵌頁面</h2>
<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>
<h2>html5和css3的歷史</h2>
<nav>
<ul>
<li><a href = "#">HTML5歷史</a></li>
<li><a href = "#">CSS3歷史</a></li>
</ul>
</nav>
</header>
<section>
<h2>HTML5歷史</h2>
<p>....</p>
</section>
<section>
<h2>css3歷史</h2>
<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>
<h2>js入門</h2>
</header>
<article>
<h2>語法</h2>
<p>文章的正文。。。。。。</p>
<aside>
<h2>名詞解釋</h2>
<p>這是一個對語言來說很重要的內容體</p>
</aside>
</article>
<aside>
<nav>
<h3>評論</h3>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的學習一下</a></li>
</ul>
</nav>
</aside>
</body>
</html>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>
<h2>蘋果</h2>
<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新增了哪些結構元素就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
