整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
：語法
2：作用
div 標(biāo)簽可以用來劃分 HTML 結(jié)構(gòu)，從而配合 CSS 來整體控制某一塊的樣式。
div 標(biāo)簽是塊級元素，它可用做組合其它 HTML 元素的容器。
div 標(biāo)簽可以用作嚴(yán)格的組織工具，如果用 id 或 class 來標(biāo)記 div 標(biāo)簽，則 div 標(biāo)簽的作用會更加完美。
3：例子
我們以 “堅(jiān)持就是勝利” 這句話的中英文書寫方式為例，看一下 div 是如何劃分結(jié)構(gòu)的
首先先看一下編輯器效果，如下
再來看一下瀏覽器的運(yùn)行效果，如下
如果我們把 div 標(biāo)簽去掉，只用段落標(biāo)簽 p 來實(shí)現(xiàn)，其實(shí)瀏覽器的運(yùn)行效果是一樣的，那我們?yōu)槭裁催€要用 div 標(biāo)簽?zāi)?，這不是多此一舉嗎？
其實(shí)不然，這是在代碼量比較少的情況下，兩者的差距不明顯，但如果代碼有成百上千行的時候，就體現(xiàn)到了 div 標(biāo)簽劃分結(jié)構(gòu)的作用，同時也使代碼更具有邏輯性。
總結(jié)來說，div 標(biāo)簽最重要的用途是劃分區(qū)域，然后再結(jié)合 CSS ，針對指定區(qū)域進(jìn)行樣式控制。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取
原文鏈接：https://blog.csdn.net/qq_42351033/article/details/102680545
lt;article>：定義外部的內(nèi)容
外部內(nèi)容可以是來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文本。亦或是來自其他外部源內(nèi)容（如一些網(wǎng)友的投稿或是新聞記者的文章）標(biāo)簽的內(nèi)容獨(dú)立于文檔的其余部分。
<article>是可以嵌套使用的，內(nèi)外層內(nèi)容相關(guān)聯(lián)，用戶看到的內(nèi)容并不是對應(yīng)本網(wǎng)站的一個具體的頁面。
<p>：段落標(biāo)簽
<p>標(biāo)簽主要用作定義一段文本。p 元素會自動在其前后創(chuàng)建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規(guī)定。p元素支持html5全局屬性。每個段落的結(jié)尾記得寫</p>，這是一個好習(xí)慣，會讓你贏得別人的尊重。
<article>和<p>的區(qū)別
<article>是HTML5的新標(biāo)簽，<p>是以往已經(jīng)存在的舊標(biāo)簽。兩個標(biāo)簽在頁面上直觀看來沒有多少區(qū)別，但是對于搜索引擎讀取網(wǎng)頁信息有重要的作用。引用外部內(nèi)容的時候就建議嵌套上<article>標(biāo)簽。
<article>是有具體意義的，它定義一些來自外部的內(nèi)容，是頁面主要元素的補(bǔ)充。html5中<article>相當(dāng)于html4中的<div class="article樣式">，而<p>只是普通的段落標(biāo)簽，不具備所謂的意義。
Html5建站是目前企業(yè)建站的主流。HTML5框架下的網(wǎng)站更容易被百度收錄，打開速度也更快，能根據(jù)屏幕大小自動適應(yīng)終端，十分有利于企業(yè)進(jìn)行跨屏營銷。
HTML5企業(yè)建站：http://www.iisp.com/design?s=yuqiuping
注釋：<div> 元素常用作布局工具，因?yàn)槟軌蜉p松地通過 CSS 對其進(jìn)行定位。
這個例子使用了四個 <div> 元素來創(chuàng)建多列布局：
<html>
<head>
<style>
#header {
background-color:#1aaa11;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
color:#faaaff;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:#166611;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>天華信息教育</h1>
</div>
<div id="nav" >
第一組<br>
第二組<br>
第三組<br>
</div>
<div id="section">
<h2>這是標(biāo)題</h2>
<p>
這是內(nèi)容
</p>
<p>
這是內(nèi)容
</p>
</div>
<div id="footer">
天華信息教育
</div>
</body>
</html>
HTML基礎(chǔ)教程：div元素實(shí)現(xiàn)布局
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
