HTML基礎(chǔ)教學(xué)之HTML中的DIV
DIV是什麼
首先來看一個(gè)網(wǎng)站
這個(gè)網(wǎng)站的每一個(gè)紅色的框子都大致代表一個(gè)DIV,也就是一個(gè)邏輯部分。
在網(wǎng)頁製作過程過中,把一些獨(dú)立的邏輯部分劃分出來,放在一個(gè)<div>標(biāo)籤中,這個(gè)<div>標(biāo)籤的作用就相當(dāng)於容器。
語法:
<div>…</div>
確定邏輯部分:
什麼是邏輯部分?它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄位版塊,就是一個(gè)典型的邏輯部分。如上圖所示
#給DIV命名
上面,我們把一些標(biāo)籤放進(jìn)<div>裡,劃分出一個(gè)獨(dú)立的邏輯部分。在通常的應(yīng)用中,為了讓邏輯更加清晰,我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)定一個(gè)名稱,用id屬性來為<div>提供唯一的名稱,這個(gè)就像我們每個(gè)人都有一個(gè)身分證號(hào),這個(gè)身分證字號(hào)是唯一標(biāo)識(shí)我們的身分的,也是必須唯一的。
這個(gè)id跟之後要學(xué)習(xí)的CSS和JavaScript結(jié)合在一起,就能夠製作完出非常酷炫的網(wǎng)站了,這個(gè)我們之後再介紹,本節(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>