第二篇 HTML 常用元素及屬性值

時間：2023-07-22 20:57:02 | 來源：網(wǎng)站運營

時間：2023-07-22 20:57:02 來源：網(wǎng)站運營

第二篇 HTML 常用元素及屬性值：常用元素及屬性值

先和同學(xué)了解下，一部分常用的元素，區(qū)別以及屬性，常用在哪里。

標(biāo)簽是由左右尖括號抱起來的，由開始標(biāo)簽開始，再由結(jié)束標(biāo)簽結(jié)束，里面內(nèi)容則是元素，比如：<div></div>
<p></p>
還有一些特殊的，稱為“空元素”，它沒有結(jié)束標(biāo)簽，它的結(jié)束標(biāo)簽就是在開始標(biāo)簽后面結(jié)束，比如：<img src="圖片地址"
alt="提示" />







那么我們就先來了解，元素，它分為兩種：

塊級元素、行級元素







塊級元素，它是一個塊，不設(shè)置它的任何屬性，默認(rèn)情況下，它的寬是占據(jù)所局位置的整行。就來舉
div 這個例子，它是塊級元素，我們寫 一個代碼：<div
style="background-color:red;">我是div，我是塊級元素，我會跨行</div>
這句代碼里，夾在標(biāo)簽內(nèi)的是內(nèi)容，而在元素 div 后面跟著的 style 是樣式，后面css的學(xué)習(xí)中，我們會深入學(xué)習(xí)css樣式，而這里的
style后面跟著的 background-color
意思為 背景顏色， red 紅色，就是說，這個div的背景顏色是紅色，內(nèi)容則是 “我是div，我是塊級元素，我會跨行”，大家可以測試一下它會是什么樣子呈現(xiàn)在網(wǎng)頁上。







那么行級元素呢， <span style="background-color:#a1a1a1;color:#fff;">我是span，我是行級元素，不會跨行，寬度只有內(nèi)容那么大。</span>在style里，它的背景顏色，我們設(shè)置的是16進制的模式，也是顏色哦，color是顏色，值：#ffffff==#fff
意思為白色，注意寫法，6個相同的f，是可以簡略成3個f，大小寫都一樣。那么同學(xué)們也可以將這段代碼放在網(wǎng)頁上檢測一下，會是什么效果。







我們來列舉一下，在制作網(wǎng)站，網(wǎng)頁時，常用到的元素：

塊級元素：

divdiv模塊

p段落，和div有一些區(qū)別，而且在它里面不能再嵌套塊級元素，會顯示語法錯誤

h1(2、3、4、5、6) 1代表最大，6最小，一般用于標(biāo)題

table表格

form 表單

ul非排序列表，里面還需使用到 li

ol排序列表，里面還需使用到 li

hr水平線







行級元素：

a超鏈接，一般做跳轉(zhuǎn)頁面

span

i 斜體

b 粗體

label 表格標(biāo)簽，字體加粗

img 圖片







當(dāng)然還有更多元素咯，這里就距離一下在網(wǎng)站中，可以經(jīng)常使用的，可以不需要清楚所有，但要了解。







在上面演示一小段代碼里：

<div style="background-color:red;">我是div，我是塊級元素，我會跨行</div>

我們就簡單的說一下， div 是元素 style是樣式，background-color 則是屬性， red 是值， 所謂 “鍵值對” 指的就是這里的 background-color 和 red

在舉個例子： <img src="1.jpg" alt="找不到圖片，我來提示" />

這里的src則是它的屬性，1.jpg圖片名 則是它的值（若不在同一目錄，則要去尋找它的位置，比如：../1.jpg 就是到上一級目錄查找）

入門的同學(xué)，請仔細(xì)看一下，最好是寫一遍，加深印象。