溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下HTML5中div，article，section怎么使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
DIV
HTML規格：“div元素沒有特殊意義可言”
這個。標簽是我們見得最多，用得最多的一個標簽本身沒有任何語義，用作布局以及樣式化或腳本的鉤子（鉤）
部
HTML規格：“的一節元素表示一個文檔或應用程序的通用部分。在此上下文中，一節是內容的主題分組，通常帶有標題。”
與div的無語義相對，簡單指向section就是帶有語義的div了，但是千萬不要覺得真得這么簡單。一段專題性的內容，一般會帶有標題看到這里，我們也許會想到，那么一篇博客文章，或者一條單獨的評論豈不是正好可以用部分嗎接著看：？
“鼓勵作者使用聯合元素的內容是合理的，而不是section元素。
當元素內容聚合起來更加言之有物時，應該使用文章來替換部分。
那么，部分應該什么時候用呢再接著看：
“節的例子是章節，在一個標簽式對話框中的各個標簽頁面，或論文的編號部分。網站的主頁可以分為幾個部分，以進行介紹，新聞和聯系信息。”
部分應用的典型場景有文章的章節，章節和標簽中間的標簽頁，或者論文中有編號的部分。興趣，因為感覺部分和下面要介紹的artilce更加適用于替代應用，這個話題以后會出篇專門的文章來討論，這里暫時略過。
要注意，W3C還警告說：
“ section元素不是通用容器元素。當出于樣式目的或為了方便編寫腳本而需要某個元素時，鼓勵作者改用div元素。一般規則是，只有在文檔的大綱中明確列出該元素的內容時，section元素才是合適的。”
節不僅僅是一個普通的容器標簽。當一個標簽只是為了樣式化或者方便腳本使用時，應該使用DIV。一般來說，當元素內容明確地出現在文檔大綱中時，部分就是適用的。
文章
HTML規范：“ article元素代表文檔，頁面，應用程序或站點中的獨立組成，并且原則上可以獨立分發或重用，例如在聯合組織中。”
一般來說，文章會有一個標題部分（通常包含在header內），有時也會包含footer。雖然section也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，文章本身就是獨立的，完整的
。HTML Spec論壇的帖子，一本雜志或報紙上的文章，博客條目，用戶提交的評論，一個互動的小部件或小工具，或任何其他內容無關的項目。”
當文章內嵌的文章時，原則上來說，內部的文章的內容是和外層的文章內容是相關的。例如，文章博客文章中，包含用戶提交的評論的文章就應該潛逃在包含博客文章文章之中。
問題是怎么算“完整的獨立內容”？一個最簡單的判斷方法是看該內容在RSS feed中是不是完整的。看這段內容脫離了所在的語境，是否還是完整的，獨立的。
示例：
html頁面：
復制代碼
代碼如下：
<！DOCTYPE html>
<html lang =“ zh - CN ”>
<head>
<meta charset =“ utf-8”>
<title>初學html5 </ title>
<！-meta標簽->
<meta name =“ keywords “ content =”“>
<元名稱=”描述“ content =”“>
<！-stylesheets->
<link rel =” stylesheet“ href =” css / common.css“ type =” text / css“>
<link rel =“ stylesheet” href =“ css / layout.css” type =“ text / css”>
<link rel =“ stylesheet” href =“ css / reset.css” type =“ text / css”>
<！ --javascript->
<script src =“ js / jquery-1.3.2.min.js”> </ script>
<！-條件注釋->
<！-[如果是IE]>
<script src =“ js / html5.js”> </ script>
<！[endif]->
</ head>
<body class = “ home”>
<div id =“ container”>
<header id =“ page-header”>
<div id =“ logo”> <a href="/"> <img src =“ images / graphic-logo.gif” alt =“ mylogo”> </a> < / div>
<nav id =“ main-navigation”>
<ul>
<li class =“ current”> <a href="#">首頁</a> </ li>
<li style =“ color：red; “> <a href="#">關于</a> </ li>
<li> <a href="#">服務</a> </ li>
<li> <a href="#">信息</a> </ li>
<li> <a href="#">聯系</a> </ li>
</ ul>
</ nav>
</ header>
<article id =“ page-content” >
<部分>
<hgroup>
<h2>這是一個用HTML5做的網頁</ h2>
<h3> HTML5 + CSS3網頁</ h3>
</ hgroup>
<p> Lorem ipsum dolor坐著，安全地撫平elitVivamus ac iaculis。Maecenas id fermentum dioo。每名土著人和每位遠見人均獲得的類許可。Fusce sagittis porta mauris，埃庫里斯·埃格斯塔斯·梅斯·普埃斯特埃梅特。Sed ullamcorper orci eu dolor egestas sodales。Donec tempor aliquet pulvinar。sed sed turpis sapien，ac dictum sem。Phasellus metus leo，在不合時宜的地心引力，bibendum id magna。Vivamus ac nunc Tortor。Lorem ipsum dolor坐下，一直保持良好狀態。在quis justo ligula。Suspendisse sodales的潰瘍會導致后果。埃涅阿調味品eros mi。Duis consectetur胎盤車輛。</ p>
<h3>列表項的演示</ h3>
<ul>
<li> Lorem ipsum dolor sit amet </ li>
<li> Lorem ipsum dolor sit amet </ li>
<li> Lorem ipsum dolor sit amet </ li>
<li> Lorem ipsum dolor sit amet </ li>
</ li>
</ li> </ li> </ li> UL>
<OL>
<LI> Lorem存有悲坐阿梅特</ LI>
<LI> Lorem存有悲坐阿梅特</ LI>
<LI> Lorem存有悲坐阿梅特</ LI>
<LI> Lorem存有悲坐阿梅特< / li>
<li> Lorem ipsum dolor sit amet </ li>
</ ol>
</ section>
<aside>
<h3>這就是aside部分的內容</ h3>
<p>在Turpis的Aliquam id lorem actellus fringilla bibendum等。在utautor justo中。整數和semper hendrerit。埃尼安（Aenean）狐臭間斷性自體性硬化，sap dapibus miultricies患病。Curabitur一個nunc nisi，ac ornare nisi。坦帕（Semper）Placerat Accumsan。Cras eu nibh lorem。塞德（Sed）坐著ligula vitae orci molestie sollicitudin坐著odio。毛利人非精英accilsums eleifend。Maecenas eu velit坐在amet neque iaculis dapibus。整數mol est id dignissim blandit。Quisque malesuada mattis sollicitudin。Pellentesque volutpat pellentesque luctus。Lorem ipsum dolor坐下，一直保持良好狀態。Sed cursus au s sem convallis ullamcorper。Donec vitan magna nec lacus varius pellentesque vel nec diam。Morbi sagittis，magna sit amet sollicitudin ultricies，neque orci fermentum ipsum，非詛咒在賽前。Donec neque在sem suscipit faucibus中。Aliquam nisi turpis，volutpat quis suscipit in，varius vitae nunc。</ p>
</ aside>
</ article>
</ div>
<footer>
＆copy; 版權所有Dave Woods 2009
</ footer>
</ body>
</ html>
css頁面：
復制代碼
代碼如下：
@charset“ utf-8”;
/ * CSS文檔* /
#container {
寬度：840px；
邊距：20px自動;
背景：#fff;
內邊距：30px;
溢出：隱藏
}
/ * ---------------標頭---------------- * /
＃main-navigation {
border-bottom：5px solid＃666 ;
}
＃main-navigation ul {
overflow：hidden;
寬度：100％;
list-style：無；
字體大小：1.6em;
}
＃main-navigation li {
float：left;
}
＃main-navigation li a {
背景：＃999;
邊距：0 5px 0 0;
內邊距：5px 30px;
顯示：塊;
顏色：#fff;
文字修飾：無；
}
＃main-navigation li.current a {
背景：＃666;
}
＃main-navigation li a：hover {
背景：＃777;
}
/ * --------------------------文章-------------------- ---- * /
文章{
寬度：100％；
溢出：隱藏
}
部分{
float：left;
寬度：500像素；
}
/ * --------------------------文章-------------------- ---- * /
除了{
float：right;
寬度：310像素；
}
/ * --------------------------文章-------------------- ---- * /
footer {
width：840px;
邊距：20px自動;
字體大小：1.4em;
text-align：center;
}
以上就是“HTML5中div，article，section怎么使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
