一、Html5的基本結(jié)構(gòu)

網(wǎng)頁的內(nèi)容

二、head標(biāo)簽內(nèi)常用標(biāo)簽

1、meta標(biāo)簽：設(shè)置元數(shù)據(jù)信息(metadata)，用來描述HTML文檔的信息，為網(wǎng)頁提供用戶不可見的信息。常用屬性：

⑴charset屬性：設(shè)置文檔的字符集編碼格式，一般設(shè)置為UTF-8。

例：HTML5中設(shè)置編碼

⑵http-equiv屬性：需要配合content屬性使用，提供了content屬性的信息/值的HTTP頭。

例1：HTML4.01中設(shè)置編碼

例2：每隔 30 秒刷新一次，content屬性的值為時(shí)間，單位秒

⑶name屬性：使用方法同“http-equiv”，將我們的信息寫給搜索引擎看。

⑷content屬性：配合http-equiv屬性或name屬性使用。

2、title標(biāo)簽：瀏覽器標(biāo)簽頁顯示的標(biāo)題

例：

xxx網(wǎng)頁標(biāo)題

3、link標(biāo)簽：鏈接一個(gè)外部樣式表，其常用屬性有：

⑴rel屬性：聲明鏈接文件的類型，此處可選stylesheet或icon

⑵type屬性：可以省略

⑶href屬性：表示鏈接文件的路徑地址(可以是網(wǎng)絡(luò)地址)

例：

//設(shè)置引用的css文件

//設(shè)置網(wǎng)頁標(biāo)簽

三、body標(biāo)簽內(nèi)常用標(biāo)簽

標(biāo)簽的分類：

塊級(jí)標(biāo)簽：顯示為塊，會(huì)自動(dòng)換行，一個(gè)標(biāo)簽占用一行。

行級(jí)標(biāo)簽：按行從左往右逐一顯示。

1、常用塊級(jí)標(biāo)簽：

⑴h1-h6標(biāo)簽：標(biāo)題標(biāo)簽，自動(dòng)加粗，h1最大，h6最小。

例：

標(biāo)題1

⑵hr標(biāo)簽：水平線標(biāo)簽，添加一條水平線

例：

⑶p標(biāo)簽：段落標(biāo)簽

例：

第一段內(nèi)容

⑷br標(biāo)簽：換行標(biāo)簽

例：

⑸blockquote標(biāo)簽：引用標(biāo)簽，內(nèi)容在瀏覽器會(huì)左右縮進(jìn)40像素。cite屬性，表明引用的來源，不會(huì)顯示。

例：

引用的一段內(nèi)容

⑹pre標(biāo)簽：預(yù)格式標(biāo)簽，用于重載代碼。瀏覽器默認(rèn)顯示樣式：1、顯示為等寬字體，不使用之前設(shè)置好的字體。 2、代碼中的換行、空格等元素能在瀏覽器中顯示。

例：

//正常情況，內(nèi)容1內(nèi)容2會(huì)在一行，這里會(huì)顯示兩行

內(nèi)空1

內(nèi)容2

2、基于布局的塊級(jí)標(biāo)簽

列表：無序列表、有序列表、定義列表

⑴ol標(biāo)簽：有序列表

例：

列表項(xiàng)1

列表項(xiàng)2

⑵ul標(biāo)簽：無序列表

例：

列表項(xiàng)1

列表項(xiàng)2

⑶dl標(biāo)簽：自定義列表

例：

列表標(biāo)題

列表描述項(xiàng)，可以有很多項(xiàng)，內(nèi)容會(huì)縮進(jìn)

可以用于實(shí)現(xiàn)圖文混排：

父元素dl使用position:relative;

子元素dt,dd使用position:absolute;設(shè)置合適的left,top;

3、常見的行級(jí)標(biāo)簽

⑴span標(biāo)簽：文本標(biāo)簽，無實(shí)際意義，用于包裹某部分文字，修改特定樣式

例：

文字

⑵img標(biāo)簽：圖片標(biāo)簽，屬于行內(nèi)塊級(jí)標(biāo)簽，其常用屬性：

src:表示引用圖片的地址，路徑地址的寫法：相對(duì)路徑。

height和width：圖片的高度和寬度。可以用CSS樣式代替

title：圖片標(biāo)。當(dāng)鼠標(biāo)指上之后顯示的文字

alt:當(dāng)圖片無法顯示的時(shí)候，顯示的文字

例：

⑶em標(biāo)簽：表示傾斜強(qiáng)調(diào)，顯示為傾斜。

⑷strong：表示加粗強(qiáng)調(diào)，顯示為加粗。

⑸b：顯示為加粗。

⑹i：顯示為傾斜。

strong、em、b、i的區(qū)別

a、Strong、em都能表示強(qiáng)調(diào)，Strong為粗體，em為斜體，而Strong的強(qiáng)調(diào)程度比em高。

b、Strong和b都能加粗，em和i都能傾斜，但是Strong和em多了一層強(qiáng)調(diào)的語義 。H5要求標(biāo)簽盡可能實(shí)現(xiàn)語義化。

例：

傾斜強(qiáng)調(diào)

加粗強(qiáng)調(diào)

加粗

傾斜

⑺q標(biāo)簽：短引用，會(huì)自動(dòng)加上雙引號(hào)。

例：

被雙引號(hào)括起來的內(nèi)容

⑻small/big標(biāo)簽：縮小/放大字體，可以多層嵌套直至上限或下限。

例：

小

小小

⑼a標(biāo)簽：超鏈接標(biāo)簽，常用屬性：

href：超鏈接的路徑，可以是網(wǎng)絡(luò)鏈接，也可以是本地文件。

target：跳轉(zhuǎn)頁面打開的位置。_self自身頁面，_blank新頁面。

title：鼠標(biāo)指在超鏈接上顯示的名稱。

rel：指定從源文檔到目標(biāo)文檔的關(guān)系(上/下一篇)，搜索引擎會(huì)利用該屬性獲取更多的有關(guān)鏈接的信息。

rev：指定從目標(biāo)文檔到源文檔的關(guān)系。

例：

rel、rev的屬性值常用的還有以下幾種：

start-集合中的第一個(gè)文檔。

next-集合中的下一個(gè)文檔。

prev-集合中的前一個(gè)文檔。

contents-文檔目錄。

index-文檔索引。

a標(biāo)簽還有一個(gè)屬性name，用于錨鏈接，可跳轉(zhuǎn)到指定頁面的指定位置。

例：

這里是position1//這里是很長(zhǎng)的內(nèi)容

//#前面可加上url，如list.html#position2

跳轉(zhuǎn)到position1

⑽s標(biāo)簽：有誤文本，文字上顯示刪除線。

例：

帶刪除線的文字

⑾cite標(biāo)簽：顯示為傾斜，常用于書、畫作、作品的引用。

例：

引用自xxx作品

⑿code標(biāo)簽：對(duì)文檔中的文本進(jìn)行格式化，一般放計(jì)算機(jī)代碼，不保留代碼格式。

例：

一段電腦代碼

⒀bdo標(biāo)簽：設(shè)置文本顯示方向，屬性：

dir="ltr"表示從左往右，dir="rtl"表示從右往左

例：

12345//顯示為54321

⒁kbd標(biāo)簽：表示需要用戶用鍵盤輸入的內(nèi)容，瀏覽器顯示為等寬字體。

例：

請(qǐng)按Esc，退出全屏。

⒂sup標(biāo)簽：上標(biāo)文本，sub標(biāo)簽：下標(biāo)文本。可用于數(shù)學(xué)/化學(xué)公式書寫。

例：

X2//X的平方

⒃u(píng)標(biāo)簽：為文字加上下劃線。

例：

帶下劃線的文字

⒄mark標(biāo)簽：高亮或標(biāo)記文本，顯示為黃色背景。

例：

高亮的文字(黃色前景)

⒅input標(biāo)簽：輸入標(biāo)簽，屬于行內(nèi)塊級(jí)標(biāo)簽，常用屬性：

type：輸入框類型，可選值：text、password、hidden、checkbox、radio、submit、reset、file、image、button、email、url、date、time、month、week、number、range、color。

name：輸入框別名，在form表單提交數(shù)據(jù)時(shí)，用于定位數(shù)據(jù)。

value：輸入框的默認(rèn)內(nèi)容。

checked：checked="checked"表示默認(rèn)選中。

disabled：disabled="disabled"設(shè)置控制不能使用(不可點(diǎn)擊或不可編輯)。

H5新增屬性：

form屬性：可以使input不用寫在form標(biāo)簽下，也能通過表單提交數(shù)據(jù)，通過設(shè)置form的id確認(rèn)屬于哪個(gè)表單。

例：

autocomplete屬性：自動(dòng)完成功能(form標(biāo)簽中使用)，記錄用戶之前輸入的內(nèi)容，并在用戶下次輸入時(shí)提示用戶輸入。屬性值：on/off。

提示：某些瀏覽器中，可能需要手動(dòng)啟用自動(dòng)完成功能。

autofocus屬性：自動(dòng)獲得焦點(diǎn)，autofocus="autofocus"只能獲得一個(gè)焦點(diǎn)。

placeholder屬性：提示內(nèi)容，當(dāng)輸入框有value時(shí)，提示內(nèi)容消失。

required：required=“required”，表示必填，否則停止提交。

pattern：使用正則表達(dá)式驗(yàn)證input的模式。

例：

//只能輸入三個(gè)字母的輸入框，提交時(shí)檢查

⒆select標(biāo)簽：下拉選擇框

select標(biāo)簽屬性：

name屬性：寫在select標(biāo)簽里，所有選項(xiàng)只有一個(gè)name。

子標(biāo)簽option標(biāo)簽，常用屬性：

value屬性：當(dāng)option沒有value屬性時(shí)，往后臺(tái)傳遞的是中間的文字，當(dāng)有value屬性時(shí)，傳遞的是value的屬性值。

title屬性：鼠標(biāo)之上后現(xiàn)實(shí)的文字。

selected屬性：selected=“selected”，設(shè)置為默認(rèn)選項(xiàng)。可簡(jiǎn)寫為selected。

H5新增屬性：

form：規(guī)定文本區(qū)域所屬的一個(gè)或多個(gè)表單。值：form設(shè)置的id。

size：規(guī)定下拉列表中可見選項(xiàng)的數(shù)目，會(huì)影響select控件高度。

name：規(guī)定下拉列表的名稱。

data-*：用于存儲(chǔ)頁面或應(yīng)用程序的私有定制數(shù)據(jù)。

例：

選項(xiàng)1

選項(xiàng)2

⒇textarea標(biāo)簽：文本域，其常用屬性 ：

cols：文本區(qū)內(nèi)的可見寬度。

rows：文本區(qū)內(nèi)的可見行數(shù)。

disabled：禁用文本域，不可編輯。

name：文本域的名稱。

readonly：文本域?yàn)橹蛔x模式。

H5新增屬性：

form：規(guī)定文本區(qū)域所屬的一個(gè)或多個(gè)表單。

maxlength：文本區(qū)域的最大字符數(shù)。

placeholder：預(yù)期值的簡(jiǎn)短提示。

wrap：表單中提交時(shí)，文本區(qū)域中的文本如何換行。值：hard或soft。

例：

文本域中的內(nèi)容！

//顯示提示的文本域，標(biāo)簽內(nèi)容不能有空行，最多只能有一個(gè)換行

4、表格標(biāo)簽及屬性

⑴table標(biāo)簽：表格的頂級(jí)標(biāo)簽，代表一個(gè)表格。

⑵th標(biāo)簽：表格的表頭，顯示為加粗字體，一個(gè)th代表有一列。

⑶tr標(biāo)簽：表格的行，一個(gè)tr代表一行。

⑷td標(biāo)簽：表格的列，用在tr的下級(jí)，一個(gè)td代表一列。

屬性：

width/heigh：單元格的寬高。

bgcolor：單元格的背景顏色。

align：單元格中的文字水平對(duì)齊方式。值：left、center、right。

valign：單元格中的文字垂直對(duì)其方式。值：top、center、bottom。

border：表格的邊框的寬度，值為數(shù)字。這個(gè)值>0時(shí)，單元格也會(huì)出現(xiàn)1 像素寬的邊框。

cellspacing：單元格邊框的間距，值為數(shù)字。

cellpadding：單元格的內(nèi)邊距。

bordercolor：邊框顏色。

background：背景圖片。可用于th，td。

例：

第一列表頭

第二列表頭

第一行第一列內(nèi)容

第一行第二列內(nèi)容

第二行第一列內(nèi)容

第二行第二列內(nèi)容

5、表單

⑴form標(biāo)簽：用于表單提交

form的兩個(gè)屬性：

action-表單提交的服務(wù)器地址

method-表單提交數(shù)據(jù)的方法，值：get或post

get方法：提交的數(shù)據(jù)跟在url后面，在地址欄可見，長(zhǎng)度有限制，無法提交過多數(shù)據(jù)。

post方法：提交的數(shù)據(jù)看不到，長(zhǎng)度無限制，可提交更多數(shù)據(jù)。

其它標(biāo)簽

⑴figure標(biāo)簽：組合標(biāo)簽，用于顯示圖片及圖片標(biāo)題

他有兩個(gè)子標(biāo)簽：img標(biāo)簽(圖片)和figcaption標(biāo)簽(圖片標(biāo)題)

例如：

圖1

⑵div標(biāo)簽：分區(qū)標(biāo)簽(最常用的標(biāo)簽之一)

例：

⑶aside標(biāo)簽：定義其所處內(nèi)容之外的內(nèi)容，aside 的內(nèi)容應(yīng)該與附近的內(nèi)容相關(guān)。(H5新標(biāo)簽)

提示：aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄。

⑷article標(biāo)簽：規(guī)定獨(dú)立的自包含內(nèi)容。(H5新標(biāo)簽)

一篇文章應(yīng)有其自身的意義，應(yīng)該有可能獨(dú)立于站點(diǎn)的其余部分對(duì)其進(jìn)行分發(fā)。

總結(jié)

以上是生活随笔為你收集整理的html5常用的属性标签,HTML5常用标签及其属性设置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。