html標籤（四）

時間 2019-11-13

標籤 html 標籤欄目 HTML 简体版

原文原文鏈接

先看例子 javascript

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

   <head> 

04	<title>趴在樹上的豬</title>

05	<base href="http://news.baidu.com/resource/img/">

06	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

07	<link rel="stylesheet" type="text/css" href="/index.css" />

08	<script type="text/javascript">

09	document.write("Hello World!")

10

     </script> 

11	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

12	<style type="text/css">

13	body{color:#333;}

14

     </style> 

15

   </head> 

16	<body class="html">

17

     <div> 

18

       列表 

19

       <ul> 

20	<li>我是無序列表</li>

21	<li>我是無序列表</li>

22	<li>我是無序列表</li>

23	<li>我是無序列表</li>

24

       </ul> 

25

       <ol> 

26	<li>我是有序列表</li>

27	<li>我是有序列表</li>

28	<li>我是有序列表</li>

29	<li>我是有序列表</li>

30

       </ol> 

31

       <dl> 

32	<dt>豬哥</dt>

33	<dd>豬哥每日一貼</dd>

34	<dt>網站</dt>

35	<dd>www.qaforcode.net</dd>

36

       </dl> 

37

     </div> 

38

     <div> 

39	<img src="http://www.baidu.com/img/baidu_sylogo1.gif" alt="百度logo"usemap="#testmap">

40	<map name="testmap" id="testmap">

41	<area shape="rect" coords="100,40,160,90" href ="http://www.qaforcode.net"alt="首頁" />

42

       </map> 

43

     </div> 

44

45	<table cellpadding="10" cellspacing="0" border="1">

46	<caption>qaforcode.net</caption>

47	<tr><th align="left">th</th> <th align="right">th</th><th>th</th></tr>

48	<tr><td colspan="2">table</td> <td rowspan="2">table</td></tr>

49	<tr><td>table</td> <td>table</td></tr>

50

     </table> 

51

52

     <div> 

53	<iframe src="http://www.baidu.com" width="960px;" />

54

     </div> 

55

56

   </body> 

57

 </html> 

1、<iframe>標籤

簡單來講<iframe>標籤用於載入其餘文檔，和咱們原來的文檔又不相關。看例子就能理解了。 css

屬性	值	描述	DTD
align	left right top middle bottom	不同意使用。請使用樣式代替。規定如何根據周圍的元素來對齊此框架。	TF
frameborder	1 0	規定是否顯示框架周圍的邊框。	TF
height	pixels %	規定 iframe 的高度。	TF
longdesc	URL	規定一個頁面，該頁面包含了有關 iframe 的較長描述。	TF
marginheight	pixels	定義 iframe 的頂部和底部的邊距。	TF
marginwidth	pixels	定義 iframe 的左側和右側的邊距。	TF
name	frame_name	規定 iframe 的名稱。	TF
scrolling	yes no auto	規定是否在 iframe 中顯示滾動條。	TF
src	URL	規定在 iframe 中顯示的文檔的 URL。	TF
width	pixels %	定義 iframe 的寬度。	TF

標準屬性：id, class, title, style html

2、列表相關標籤

首先來看看ul和ol，兩個基本上是同樣的，只不過前者是無序的後者是有序的。區別能夠看例子。可是這二者都必須包含li標籤。 java

標準屬性：id, class, title, style, dir, lang, xml:lang jquery

事件屬性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup ajax

另一種是dl dd dt，這種列表會有縮進，具體看例子就明白了。屬性和上面相似，實際使用中好像很少。 api

3、圖片標籤

<img>標籤，應該在前面有使用過，很簡單了就是在某個地方放個圖片服務器

必須屬性：框架

屬性	值	描述	DTD
alt	text	規定圖像的替代文本。	STF
src	URL	規定顯示圖像的 URL。	STF

可選屬性： ide

屬性	值	描述	DTD
align	top bottom middle left right	不推薦使用。規定如何根據周圍的文原本排列圖像。	TF
border	pixels	不推薦使用。定義圖像周圍的邊框。	TF
height	pixels %	定義圖像的高度。	STF
hspace	pixels	不推薦使用。定義圖像左側和右側的空白。	TF
ismap	URL	將圖像定義爲服務器端圖像映射。	STF
longdesc	URL	指向包含長的圖像描述文檔的 URL。	STF
usemap	URL	將圖像定義爲客戶器端圖像映射。	STF
vspace	pixels	不推薦使用。定義圖像頂部和底部的空白。	TF
width	pixels %	設置圖像的寬度。	STF

標準屬性：id, class, title, style, lang, xml:lang

事件屬性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

和圖片相關的還有個map標籤，用來對圖上的某些點作連接，好比上例中百度logo的熊掌連接到了豬哥的首頁。map必須有個id屬性，而且是惟一的，共img標籤使用。map標籤須要保安area標籤才能起做用

標準屬性：class, title, style, dir, lang, xml:lang

事件屬性：tabindex, accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

area標籤的必要屬性：

屬性	值	描述	DTD
alt	text	定義此區域的替換文本。	STF

area標籤可選屬性：

屬性	值	描述	DTD
coords	座標值	定義可點擊區域（對鼠標敏感的區域）的座標。	STF
href	URL	定義此區域的目標 URL。	STF
nohref	nohref	從圖像映射排除某個區域。	STF
shape	default 默認 rect 長方形 circ 圓形 poly	定義區域的形狀。	STF
target	_blank _parent _self _top	規定在何處打開 href 屬性指定的目標 URL。	TF

area標準屬性：id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

area事件屬性：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur

4、表格相關

表格是由table，tr，th或td組成，表格在曾經是佈局的主要標籤，

table標籤可選屬性

屬性	值	描述	DTD
align	left center right	不同意使用。請使用樣式代替。規定表格相對周圍元素的對齊方式。	TF
bgcolor	rgb(x,x,x) #xxxxxx colorname	不同意使用。請使用樣式代替。規定表格的背景顏色。	TF
border	pixels	規定表格邊框的寬度。	STF
cellpadding	pixels %	規定單元邊沿與其內容之間的空白。	STF
cellspacing	pixels %	規定單元格之間的空白。	STF
frame	void above below hsides lhs rhs vsides box border	規定外側邊框的哪一個部分是可見的。	STF
rules	none groups rows cols all	規定內側邊框的哪一個部分是可見的。	STF
summary	text	規定表格的摘要。	STF
width	% pixels	規定表格的寬度。	STF

caption標籤用來定義表格標題。

th用來定義表頭信息（通常是第一行），td用在普通行，他們的可選屬性有

屬性	值	描述	DTD
abbr	text	規定單元格中內容的縮寫版本。	STF
align	left right center justify char	規定單元格內容的水平對齊方式。	STF
axis	category_name	對單元格進行分類。	STF
bgcolor	rgb(x,x,x) #xxxxxx colorname	不推薦使用。請使用樣式替代它。規定表格單元格的背景顏色。	TF
char	character	規定根據哪一個字符來進行內容的對齊。	STF
charoff	number	規定對齊字符的偏移量。	STF
colspan	number	設置單元格可橫跨的列數。	STF
headers	idrefs	由空格分隔的表頭單元格 ID 列表，爲數據單元格提供表頭信息。	STF
height	pixels %	不推薦使用。請使用樣式替代它。規定表格單元格的高度。	TF
nowrap	nowrap	不推薦使用。請使用樣式取而代之。規定單元格中的內容是否折行。	TF
rowspan	number	規定單元格可橫跨的行數。	STF
scope	col colgroup row rowgroup	定義將表頭數據與單元數據相關聯的方法。	STF
valign	top middle bottom baseline	規定單元格內容的垂直排列方式。	STF
width	pixels %	不推薦使用。請使用樣式取而代之。規定表格單元格的寬度。	TF