web（三）html標籤

標籤：簡訊   image   視窗   老版本   shape   錨點   正方形   特性   連結   

標籤的層級特性

　　閉合的html標籤內可以包含一個或多個子標籤，因此html的標籤是一個多叉樹的資料結構，多叉樹的根是html標籤。

 

標籤的屬性描述

　　每個標籤都具備一組公用或當前標籤專屬的屬性，屬性的作用是描述標籤的外觀行為或識別當前標籤的標識。

 

 

屬性的聲明文法

　　<標籤名 屬性名稱 = “屬性值“ 屬性名稱 = “屬性值“ >xxx </標籤名>

 

標籤的公用屬性

　　所有標籤都具備的屬性。

　　class：規定當前元素所引用的樣式類名稱。

　　id：規定當前元素在網頁上的唯一標識，一般在css、js中會根據id檢索當前元素。

　　name：當前元素在文檔上的名稱，可以重複。

　　style：規定當前元素的顯示樣式，取值為css樣式表。

　　title：規定當前元素的標題，類型為文本，可在工具提示中顯示。

　　　　以上是html4標準常用的公用屬性

 

標籤功能分類

　　布局標籤：控制子項目所在位置，並不獨立顯示。

　　文字標籤：用來顯示文本的標籤。

　　架構標籤：在網頁內嵌入其他子網頁的標籤。

　　超連結標籤：超連結標籤。

　　圖片以及影像地圖：用來顯示圖片、映像的標籤。

　　表單類標籤：用來控制使用者輸入的一組標籤。

　　表格標籤：用來按照一定長度、寬度顯示的表格標籤。

 

　　預設顯示分類：Html標籤具備的預設顯示方式（table系列具備特殊方式）。

　　　　區塊層級元素（ block ）展示方式 獨立佔有一行，寬度預設值為100% 大小、內邊距、外邊距可以調整。

　　　　內嵌元素（ inline ）展示方式 不獨立佔有一行 大小、內邊距、外邊距不可以調整，取決於內容的大小。

　　　　內聯區塊層級元素（ inline-block ） 一個可以調整大小的內嵌元素

　　1、布局標籤

　　　　目的是控制子項目所在位置，並不獨立顯示的html標籤。

　　　　常用布局標籤

　　　　p標籤：是段落（paragraph）的縮寫，包裹的內容為一個段落的文字或修飾文字的文字標籤，預設內建內邊距，區塊層級元素。

 

　　　　div標籤：一般配合css對網頁內大塊地區進行布局。區塊層級元素。布局作用

　　　　span標籤：一般用來包裹非特殊顯示文本進行，內嵌元素。

　　　　列表標籤：是這一組樣式相同，功能相同的元素的集合，列表不同於表格（多行多列）。

　　　　　　列表標籤的分類

　　　　　　　　　1）自訂欄表：用來表示一組無序的、具備標題的列表資料。(<dl><dt>標題</dt><dd>內容</dd></dl>)

　　　　　　　　　2）有序列表：用來顯示有順序的列表資料資訊，可顯示順序號。

　　　　　　　　　　　　ol標籤：有序列表

　　　　　　　　　　　　li標籤:有序清單項目

　　　　　　　　　　　　type屬性：規定列表的項目符號的類型，取值範圍：A、a、1、i、Ι。

　　　　　　　　　3）無序列表 :用來顯示無順序的列表資料資訊，可以設定列表符號。

　　　　　　　　　　　　ul標籤：無序列表，區塊層級元素

　　　　　　　　　　　　li標籤:有序列表明細項，區塊層級元素。

　　　　　　　　　　　　type屬性：列表的明細符號類型，取值範圍 circle(空心圓)、disc(實心圓)、square(正方形)

 

　　　　　文字標籤：用來修飾小段用於閱讀的文字的標籤。

　　　　　　　　1）u標籤：內容預設以底線方式顯示。

　　　　　　　　2） strong標籤：內容預設以強調文字方式顯示。

　　　　　　　　3）em標籤：內容預設以一般強調文字顯示。

　　　　　　　　4）h1—h6：標題文字標籤，從h1到h6預設字型大小依次減少。

　　　　　　　　　　h標籤在搜尋引擎搜尋時優先順序別較高

　　　　　架構標籤

　　　　　　　　iframe標籤：該標籤可以在當前網頁上引入其他網頁資源（支援引入非同源網頁）。

　　　　　　　　　　

　　　　　　

　　　　　超連結標籤

 　　　　　　　　A標籤：又稱為超連結標籤，通過a標籤可以訪問（連結）到其他網頁。

　　　　　　　　　　<a href="http://www.baidu.com">百度一下</a></br>

　　　　　　　　　　href的取值可以為如下兩種類型。

　　　　　　　　　　　　　　絕對路徑：完整的網頁訪問路徑，與當前網頁位置無關。

　　　　　　　　　　　　　　相對路徑：需要訪問的網頁資源與當前網頁資源路徑的相對位置。

 

　　　　　　　　　　錨點：超連結的一種，又叫命名錨記。在網頁中的作用是快速定位器。

　　　　　　　　　　　　　　錨點的聲明

　　　　　　　　　　　　　　　　　　<a href="#jump">點我看看</a>

　　　　　　　　　　　　　　　　　　<p id="jump">我是該地區的相應內容</p>

　　　　　　　　　　　　　　　　　　<p name="jump">我是該地區的相應內容</p>

　　　　　　　　　　　　　　　　　　在老版本瀏覽器中最初都是使用name作為錨點位置的聲明方式。

　　　　　　　　　　　　　　　　　　網頁中name屬性的取值不唯一，因此造成錨點定位不準，所以後期瀏覽器都支援使用id作為錨點聲明位置。

　　　　　　　　　　　　　　　　　　Html5規範中已經聲明取消name的錨點聲明方式，建議使用id。

　　　　　　　　　　　　　　跨網頁的錨點訪問：<a href="test.html#jump">跨網頁錨點</a>

 

　　　　　　　　　　連結到第三方資源

 　　　　　　　　　　　　　　

<a href="mailto:[email protected]">郵件</a><a href="tel:18310132010">電話</a><a href="sms:18310132010">簡訊</a><a href="a.mp4">視頻</a>

 

　　　　　　　　　　

　　　　　　　　　　連結的開啟檔案：被訪問的網頁以哪種方式開啟，使用target屬性設定。

　　　　　　　　　　　　　　target屬性的取值範圍

　　　　　　　　　　　　　　　　_blank:在新視窗中開啟連結文檔

　　　　　　　　　　　　　　　　_self:預設，在當前瀏覽器視窗中開啟被連結文檔。

　　　　　　　　　　　　　　　　_parent:在父架構中開啟被連結文檔。

　　　　　　　　　　　　　　　　_top:在當前網頁的最頂層架構中開啟被連結文檔。

　　　　　　　　　　　　　　　　framename：在指定的架構中開啟被連結文檔。

　　　　　　

　　　　　　圖片以及影像地圖

　　　　　　　　　圖片標籤（img）：在網頁上顯示圖片。

 　　　　　　　　　　

　　　　　　　　　　

<img src="coder.jpg" width="100px" height="100px" alt="圖片"/>

 

　　　　　　　　　　src與href的區別：Link、a標籤使用href，其餘使用src

 

 　　　　　　　　圖片映射：將一個圖片地區劃分為若干個子領域，每個地區都可以設定為超連結。

　　　　　　　　　　

1 <img src="1.png" usemap="#Map"/>2 3 <map name="Map">4 5 　<area >6 7 　<area>//劃分多個地區8 9 </map>

area常用屬性說明

1 <img src="1.png" usemap="#Map"/>2 <map name="Map">3   <area shape="circle" coords="64,36,19" href="eye.html"alt="眼睛">4   <area shape="rect" coords="35,87,59,126" href="mouse.html" alt="鼻子">5 </map>

 

web（三）html標籤