HTML塊元素
首先 我們要知道,HTML元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素。那么什么是塊級(jí)元素,什么是內(nèi)聯(lián)元素呢:
塊級(jí)元素(block)特性: 總是獨(dú)占一行,表現(xiàn)為另起一行開(kāi)始,而且其后的元素也必須另起一行顯示; 寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;就像以前用到的 < h1>, < p>, < ul>, < table>標(biāo)簽。
內(nèi)聯(lián)元素(inline)特性: 和相鄰的內(nèi)聯(lián)元素在同一行;寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變,就是里面文字或圖片的大小;以前用到的< b>, < td>, < a>, < img>標(biāo)簽。
在這里我們先介紹兩個(gè)標(biāo)簽< div>標(biāo)簽和< span>標(biāo)簽。
< div>用來(lái)定義文檔中的分區(qū)或節(jié)(division/section),沒(méi)有特定的含義。它是可用于組合其他 HTML 元素的容器。
<div> 元素沒(méi)有特定的含義。除此之外,由于它屬于塊級(jí)元素,瀏覽器會(huì)在其前后顯示折行。
如果與 CSS 一同使用,<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
< span>用來(lái)組合文檔中的行內(nèi)元素,也沒(méi)有特定的含義,當(dāng)與 CSS 一同使用時(shí),<span> 元素可用于為部分文本設(shè)置樣式屬性。
下面我們來(lái)看看< div>標(biāo)簽的用法。