HTML的經常使用標籤整理

·html標籤的基本形式

<開始標籤[...屬性]>標籤內容<結束標籤>

<標籤名>[標籤內容]</標籤名>

·head部分的標籤

meta

做用：元素可提供有關頁面的元信息

title

做用：規定關於元素的額外信息，會顯示再頁面標題上

style

做用：對其餘標籤進行樣式規定

link

做用：連接一些外部資源

·body部分的標籤

標題標籤
複製代碼

標籤形式：<h級數>標題內容</h級數>（一共有6級）

做用：設置標題

級數越大，標題越大，而且瀏覽器會自動給符加標題樣式，但通常本身會經過其餘屬性修改來設置

div標籤
複製代碼

標籤形式：< div > 文段內容< div>

做用：用於佈局

萬能標籤，通常的內容均可以放入div標籤內，屬於無語義標籤

段落標籤
複製代碼

標籤形式：< p>段落內容</ p>

做用：通常用來存儲文本

Tips: &nbsp是用來輸出空格的

font標籤
複製代碼

標籤形式:< font>字體集</ font>

Tips:經過修改font的屬性只能控制字體集的大小和顏色

img標籤
複製代碼

標籤形式：< img width="圖片寬度" height="圖片高度" src="圖片連接"/>

做用：用來輸出圖片

Tips:

1. 圖片的支持格式：PNG/JPEG/GIF/PDF（pdf必須是單頁的）
2. 非標籤方式：也經過在backgroud的屬性設置來顯示圖片
3. 路徑：絕對路徑和相對路徑

1> 絕對路徑

指明瞭位置的路徑

Windows系統絕對路徑從盤符開始，例：C：\html\logo.jpg

2> 相對路徑

在相對的文件夾下自動尋找

./圖片所在文件夾./所用的圖片

連接標籤
複製代碼

< a>< /a>

做用：文檔內部錨點、跳轉到外部文檔、下載資源

屬性：href、target

href後加要跳轉的網址，target後加要跳轉的方式

例：

打開新的網頁：

<a href="https:/ /www. bilibili.com/"target="_blank">文本內容< /a>在新網頁打開

<a href="https:/ /www .bilibili.com/"target="_self">文本內容< /a>在當前網頁打開連接

文檔內部錨點：

< a href="#要跳轉到的標籤的id">文本內容< /a>

禁止跳轉的：

< a href="javascript:;">禁止跳轉< /a>

< a href="javascript:void(0);">禁止跳轉< /a>

列表標籤
複製代碼

分類：

無序標籤：< ul>< li></ li>< ul>

有序標籤：< ol>< li></ li>< ol>

定義列表：< dl>< dt>< /dt>< dd>< /dd>< /dl>

做用：插入無序、有序、自定義標籤

例：

< ul>
    < li>a< /li>
    < li>b< /li>
    < li>c< /li>
< /ul>
 < ol>
    < li>a< /li>
    < li>b< /li>
    < li>c< /li>
< /ol>
< dl>
    表示定義的概念的名字
    < dt>
    正數
    < /dt>
    概念的主體
    < dd>
    大於0的數
    < /dd>
< /dl

複製代碼

表格標籤
複製代碼

標籤形式：< table>< /table>

表格標籤內又能夠分爲

1.< thead>< /thead>存放表頭的內容

2.< tbody>< /body>存放表格內的內容

3.< tfoot>< /tfoot>存放表格底部的內容（不管位置如何放置，它的顯示位置必定是表格底部）

在該三個標籤內又能夠實行分列和分行操做，經過< tr>實現換行，經過< td>

一些屬性：

邊框問題：border=「非0/0」 ；1爲顯示，0爲隱藏，非0的數決定邊框寬度

單元格間距：cellspacing=「數字」 ；決定間隔寬度

單元格邊距：cellpadding=「數字」 ；決定單元格的內邊距

單元格跨列：colspan=「數字」 ；對應的單元格佔幾格

單元格跨行：rowspan=「數字」

內容對齊：align=「center/right/left」 ；設置在行上的，規劃當前行上全部單元格的文字的位置 設置在table上，規定該表格在當前頁面的位置

表單標籤
複製代碼

標籤形式：< from>< /from>

做用：用於收集用戶輸入的內容（文本、文件）

表單元素：

1、Input

給一個能輸入的文本框：

< input type="text" maxlength="10" value="要顯示的初始值"/>

給一個能點的點 若是name相同那麼就只能選一個：

< input name="gender" type="radio">1

< input name="gender" type="radio">2

可多選：

< input type="checkbox">

在多選時提早被選中，賦值：

< input value="0" checked type="checkbox">1

顯示一個按鈕： < input type="button" value="顯示在按鈕上的文本">

數字，能夠用鍵盤的上下鍵來控制其中的數字變化：

< input type="number">

輸入一個日期表：

< input type="date">

產生一個顏色選擇器：

< input type="color">

範圍讀條:

< input type="range" min="1" max="4">

引入一個郵箱的格式校驗（和按鈕一同使用）:

< input type="email">

< input type="submit" value="提交">

引入對網址的判斷:

< input type="url">

< input type="submit" value="提交">

選擇一個文件:

< input type="file">

可選擇多個文件:

< input type="file" multiple="4">

輸入的時候是密碼狀態:

< input type="password">

二：Select下拉列表

< select>

< option>1< /option>

< option selected value="">2< /option>//它是初始看見的那個

< option>3< /option>
< /select>
複製代碼

三：Textarea

文本域，有一個能夠換行的文本框，能夠設置行高和列寬

< textarea rows="1" cols="3" >< /textarea>

四：Button

1.Type爲submit時，咱們提交後面form的id的表單

< button type="submit" form="test">顯示在按鈕上的文本< /button>

2.Type爲reset時，重置所指form的文本

< button type="reset" form="test">顯示在按鈕上的文本< /button>

·標籤的通用屬性

id
複製代碼

id屬性用於指定元素的識別名稱，是惟一的，同一個文檔中不能有重複id，通常配合css和js來選擇元素。

class
複製代碼

class屬性用於指定元素的類別名稱，能夠給同一個文檔中的多個元素歸於同一個類，同時css也能夠經過class屬性給同一個類的元素統一設置樣式。

style
複製代碼

stlye屬性用於給元素設定樣式，包括內聯樣式和內部樣式

title
複製代碼

title屬性用於顯示省略的內容，當光標移動到元素內容上時顯示title裏面的內容

dir
複製代碼

dir屬性用於設定元素標籤內容的文字方向

·特殊標籤

引用標籤
複製代碼

做用：代表這一段是自帶引用的

< blockquote>引用的內容< blockquote>

·註釋

分類：

1.單行註釋
複製代碼

< !--< div>註釋< /div>-->

2.段落註釋
複製代碼

< !--段落begin-->

< div>

段落

< /div>

< !--段落begin-->

3.條件註釋
複製代碼

通常用於檢查兼容性

例：

< !--[if IE 6]> < div>您的瀏覽器版本過舊< /div>