HTML基礎(chǔ)教程之HTML中的DIV

DIV是什么

首先來看一個網(wǎng)站

這個網(wǎng)站的每一個紅色的框子都大致代表一個DIV，也就是一個邏輯部分。

在網(wǎng)頁制作過程過中，把一些獨(dú)立的邏輯部分劃分出來，放在一個<div>標(biāo)簽中，這個<div>標(biāo)簽的作用就相當(dāng)于一個容器。

語法：

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個典型的邏輯部分。如上圖所示

給DIV命名

上面，我們把一些標(biāo)簽放進(jìn)<div>里，劃分出一個獨(dú)立的邏輯部分。在通常的應(yīng)用中，為了使邏輯更加清晰，我們可以為這一個獨(dú)立的邏輯部分設(shè)置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標(biāo)識我們的身份的，也是必須唯一的。

這個id與之后要學(xué)習(xí)的CSS和JavaScript結(jié)合在一起，就能夠制作完出非常炫酷的網(wǎng)站了，這個我們之后再介紹，本節(jié)大家理解DIV的用途即可

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
</head>
<body>
<div id="html">
   <h2>HTML課程</h2>
    <ol>
       <li>輕松入門HTML+CSS，掌握編程必備技能</li>
      <li>HTML 0基礎(chǔ)入門教程</li>
       <li>HTML+CSS 輕松入門</li>
    </ol>
</div>
<div id="php">
    <h2>PHP課程</h2>
    <ul>
       <li>輕松入門PHP，踏上成為大牛的第一步</li>
       <li>php 新手入門</li>
       <li>PHP 零基礎(chǔ) 輕松學(xué)</li>
    </ul>
</div>
</body>
</html>

繼續(xù)學(xué)習(xí)

新建文件

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <body> <div id="html"> <h2>HTML課程</h2> <ol> <li>輕松入門HTML+CSS，掌握編程必備技能</li> <li>HTML 0基礎(chǔ)入門教程</li> <li>HTML+CSS 輕松入門</li> </ol> </div> <div id="php"> <h2>PHP課程</h2> <ul> <li>輕松入門PHP，踏上成為大牛的第一步</li> <li>php 新手入門</li> <li>PHP 零基礎(chǔ) 輕松學(xué)</li> </ul> </div> </body> </html>

提交重置代碼

自動運(yùn)行