一、Html5的基本結構

網頁的內容

二、head標簽內常用標簽

1、meta標簽：設置元數據信息(metadata)，用來描述HTML文檔的信息，為網頁提供用戶不可見的信息。常用屬性：

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

例：HTML5中設置編碼

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

例1：HTML4.01中設置編碼

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

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

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

2、title標簽：瀏覽器標簽頁顯示的標題

例：

xxx網頁標題

3、link標簽：鏈接一個外部樣式表，其常用屬性有：

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

⑵type屬性：可以省略

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

例：

//設置引用的css文件

//設置網頁標簽

三、body標簽內常用標簽

標簽的分類：

塊級標簽：顯示為塊，會自動換行，一個標簽占用一行。

行級標簽：按行從左往右逐一顯示。

1、常用塊級標簽：

⑴h1-h6標簽：標題標簽，自動加粗，h1最大，h6最小。

例：

標題1

⑵hr標簽：水平線標簽，添加一條水平線

例：

⑶p標簽：段落標簽

例：

第一段內容

⑷br標簽：換行標簽

例：

⑸blockquote標簽：引用標簽，內容在瀏覽器會左右縮進40像素。cite屬性，表明引用的來源，不會顯示。

例：

引用的一段內容

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

例：

//正常情況，內容1內容2會在一行，這里會顯示兩行

內空1

內容2

2、基于布局的塊級標簽

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

⑴ol標簽：有序列表

例：

列表項1

列表項2

⑵ul標簽：無序列表

例：

列表項1

列表項2

⑶dl標簽：自定義列表

例：

列表標題

列表描述項，可以有很多項，內容會縮進

可以用于實現圖文混排：

父元素dl使用position:relative;

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

3、常見的行級標簽

⑴span標簽：文本標簽，無實際意義，用于包裹某部分文字，修改特定樣式

例：

文字

⑵img標簽：圖片標簽，屬于行內塊級標簽，其常用屬性：

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

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

title：圖片標。當鼠標指上之后顯示的文字

alt:當圖片無法顯示的時候，顯示的文字

例：

⑶em標簽：表示傾斜強調，顯示為傾斜。

⑷strong：表示加粗強調，顯示為加粗。

⑸b：顯示為加粗。

⑹i：顯示為傾斜。

strong、em、b、i的區別

a、Strong、em都能表示強調，Strong為粗體，em為斜體，而Strong的強調程度比em高。

b、Strong和b都能加粗，em和i都能傾斜，但是Strong和em多了一層強調的語義 。H5要求標簽盡可能實現語義化。

例：

傾斜強調

加粗強調

加粗

傾斜

⑺q標簽：短引用，會自動加上雙引號。

例：

被雙引號括起來的內容

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

例：

小

小小

⑼a標簽：超鏈接標簽，常用屬性：

href：超鏈接的路徑，可以是網絡鏈接，也可以是本地文件。

target：跳轉頁面打開的位置。_self自身頁面，_blank新頁面。

title：鼠標指在超鏈接上顯示的名稱。

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

rev：指定從目標文檔到源文檔的關系。

例：

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

start-集合中的第一個文檔。

next-集合中的下一個文檔。

prev-集合中的前一個文檔。

contents-文檔目錄。

index-文檔索引。

a標簽還有一個屬性name，用于錨鏈接，可跳轉到指定頁面的指定位置。

例：

這里是position1//這里是很長的內容

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

跳轉到position1

⑽s標簽：有誤文本，文字上顯示刪除線。

例：

帶刪除線的文字

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

例：

引用自xxx作品

⑿code標簽：對文檔中的文本進行格式化，一般放計算機代碼，不保留代碼格式。

例：

一段電腦代碼

⒀bdo標簽：設置文本顯示方向，屬性：

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

例：

12345//顯示為54321

⒁kbd標簽：表示需要用戶用鍵盤輸入的內容，瀏覽器顯示為等寬字體。

例：

請按Esc，退出全屏。

⒂sup標簽：上標文本，sub標簽：下標文本。可用于數學/化學公式書寫。

例：

X2//X的平方

⒃u標簽：為文字加上下劃線。

例：

帶下劃線的文字

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

例：

高亮的文字(黃色前景)

⒅input標簽：輸入標簽，屬于行內塊級標簽，常用屬性：

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

name：輸入框別名，在form表單提交數據時，用于定位數據。

value：輸入框的默認內容。

checked：checked="checked"表示默認選中。

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

H5新增屬性：

form屬性：可以使input不用寫在form標簽下，也能通過表單提交數據，通過設置form的id確認屬于哪個表單。

例：

autocomplete屬性：自動完成功能(form標簽中使用)，記錄用戶之前輸入的內容，并在用戶下次輸入時提示用戶輸入。屬性值：on/off。

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

autofocus屬性：自動獲得焦點，autofocus="autofocus"只能獲得一個焦點。

placeholder屬性：提示內容，當輸入框有value時，提示內容消失。

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

pattern：使用正則表達式驗證input的模式。

例：

//只能輸入三個字母的輸入框，提交時檢查

⒆select標簽：下拉選擇框

select標簽屬性：

name屬性：寫在select標簽里，所有選項只有一個name。

子標簽option標簽，常用屬性：

value屬性：當option沒有value屬性時，往后臺傳遞的是中間的文字，當有value屬性時，傳遞的是value的屬性值。

title屬性：鼠標之上后現實的文字。

selected屬性：selected=“selected”，設置為默認選項?？珊唽憺閟elected。

H5新增屬性：

form：規定文本區域所屬的一個或多個表單。值：form設置的id。

size：規定下拉列表中可見選項的數目，會影響select控件高度。

name：規定下拉列表的名稱。

data-*：用于存儲頁面或應用程序的私有定制數據。

例：

選項1

選項2

⒇textarea標簽：文本域，其常用屬性 ：

cols：文本區內的可見寬度。

rows：文本區內的可見行數。

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

name：文本域的名稱。

readonly：文本域為只讀模式。

H5新增屬性：

form：規定文本區域所屬的一個或多個表單。

maxlength：文本區域的最大字符數。

placeholder：預期值的簡短提示。

wrap：表單中提交時，文本區域中的文本如何換行。值：hard或soft。

例：

文本域中的內容！

//顯示提示的文本域，標簽內容不能有空行，最多只能有一個換行

4、表格標簽及屬性

⑴table標簽：表格的頂級標簽，代表一個表格。

⑵th標簽：表格的表頭，顯示為加粗字體，一個th代表有一列。

⑶tr標簽：表格的行，一個tr代表一行。

⑷td標簽：表格的列，用在tr的下級，一個td代表一列。

屬性：

width/heigh：單元格的寬高。

bgcolor：單元格的背景顏色。

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

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

border：表格的邊框的寬度，值為數字。這個值>0時，單元格也會出現1 像素寬的邊框。

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

cellpadding：單元格的內邊距。

bordercolor：邊框顏色。

background：背景圖片?？捎糜趖h，td。

例：

第一列表頭

第二列表頭

第一行第一列內容

第一行第二列內容

第二行第一列內容

第二行第二列內容

5、表單

⑴form標簽：用于表單提交

form的兩個屬性：

action-表單提交的服務器地址

method-表單提交數據的方法，值：get或post

get方法：提交的數據跟在url后面，在地址欄可見，長度有限制，無法提交過多數據。

post方法：提交的數據看不到，長度無限制，可提交更多數據。

其它標簽

⑴figure標簽：組合標簽，用于顯示圖片及圖片標題

他有兩個子標簽：img標簽(圖片)和figcaption標簽(圖片標題)

例如：

圖1

⑵div標簽：分區標簽(最常用的標簽之一)

例：

⑶aside標簽：定義其所處內容之外的內容，aside 的內容應該與附近的內容相關。(H5新標簽)

提示：aside標簽的內容可用作文章的側欄。

⑷article標簽：規定獨立的自包含內容。(H5新標簽)

一篇文章應有其自身的意義，應該有可能獨立于站點的其余部分對其進行分發。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。