XHTML學習筆記

時間 2019-11-17

標籤 xhtml 學習筆記欄目 HTML 简体版

原文原文鏈接

1 XHTML經常使用標籤

1.1 基本標籤

l <html>html

l <body>java

l <style>緩存

l <h1>…<h6>：定義標題1-6框架

l <p>：定義段落字體

l <br/>：換行ui

l <hr/>：水平線編碼

l <div>url

l <span>：與<div>相似，區別是所定義的節默認不會換行。spa

1.2 文本格式化標籤

l <b>：粗體orm

l <strong>：粗體，與<b>基本相同

l <i>：斜體

l <em>：強調文本，實際效果與<i>差很少

l <big>：大號字體文本

l <small>：小號字體文本

l <sup>：上標

l <sub>：下標

l <bdo>：定義文本顯示方向

1. <bdo dir="ltr">從左向右排列的文本</bdo>

2. <bdo dir="rtl">從右向左排列的文本</bdo>

1.3 超連接和錨點

Ø href：指定超連接所關聯的另外一個資源

Ø target：指定使用框架集的哪一個框架來裝載另外一個資源

ü _self：自身

ü _blank：新窗口

ü _top：頂層框架

ü _parent：父框架

定位錨點：

1. <a name=」test」></a>

2. <a href=」123.html#test」></a>

1.4 列表相關標籤

l <ul>：無序列表，只能包含<li…/>子元素

l <ol>：有序列表，只能包含<li…/>子元素

l <li>：列表項

l <dl>：列表，只能包含<dt…/>、<dd…/>元素

l <dt>：標題列表項

l <dd>：普通列表項

1.

2. <ul>

3. <li>瘋狂Java講義</li>

4. <li>輕量級JavaEE企業應用實戰</li>

5. <li>瘋狂Ajax講義</li>

6. </ul>

7.

8. <ol start="2" type="I">

9. <li>瘋狂Java講義</li>

10. <li>輕量級JavaEE企業應用實戰</li>

11. <li>瘋狂Ajax講義</li>

12. </ol>

13.

14. <dl>

15.

16. <dt>瘋狂Java體系</dt>

17. <dd>瘋狂Java講義</dd>

18. <dd>輕量級JavaEE企業應用實戰</dd>

19. <dd>瘋狂Ajax講義</dd>

20.

21. <dt>做者其餘圖書</dt>

22. <dd>Struts2權威指南</dd>

23. <dd>基於J2EE的Ajax寶典</dd>

24. </dl>

1.5 圖像相關標籤

<img…/>

Ø src：指定圖片所在位置

Ø alt：指定做爲圖片提示信息的文本

Ø height：圖片高度

Ø width：圖片寬度

l <map>：定義圖像映射，該元素可包含多個<area../>，每一個<area../>元素定義一個區域

l <area>：定義圖形映射的內部區域，只能是一個空元素

Ø shape：指定該內部區域是哪一種區域，默認爲rect

ü rect：矩形

ü circle：圓形

ü poly：多邊形

Ø coords：指定多個座標值，用於肯定區域位置

Ø href：用於肯定該區域所連接資源

Ø alt：指定做爲該圖片區域提示信息的文本

n target：指定使用框架集的哪一個框架來裝載另外一個資源

ü _self：自身

ü _blank：新窗口

ü _top：頂層框架

ü _parent：父框架

1.

2. <img src="img/logo.jpg" width="300"

3. height="120" border="0" usemap="#test"

4. alt="瘋狂Java的Logo" /><br />

5.

6. <map name="test" id="1">

7.

8. <area shape="circle" coords="57,55,25"

9. href="http://www.leegang.org" alt="leegang.org"/>

10. <area shape="poly"coords="188,28,185,50,200,74,224,72,246,51"

11. href="http://www.crazyjava.org"alt="crazyjava.org"/>

12. </map>

1.6 表格相關標籤

l <table>：定義表格

Ø align：指定表格自身對齊方式

ü left

ü center

ü right

Ø bgcolor：背景色

Ø border：表格邊框寬度，該值是個整數，border=」0」表示無邊框

Ø cellpadding：指定單元格內容和單元格邊框之間的間距

Ø cellspacing：指定單元格之間的間距

Ø width：指定表格寬度

l <caption>：表格標題，1個<table…/>元素最多隻能包含1個<caption…/>子元素

l <tr>：行，只能包含<td…/>、<th…/>兩種元素

Ø align：指定該行內全部單元格中文本的水平對齊方式

ü right

ü left

ü center

ü justify，效果和left差很少

Ø valign：指定該行內全部單元格中文本的垂直對齊方式

ü top

ü middle

ü bottom，底端對齊

ü baseline，基線對齊

Ø bgcolor

l <td>：單元格

Ø align

Ø valign

Ø bgcolor

Ø colspan：指定單元格跨多少列

Ø rowspan：指定單元格跨多少行

Ø height：高度

Ø width：寬度

l <th>：表格頁眉單元格

l <tbody>：定義表格的主體，可將表格分紅幾部分，只能包含<tr…/>子元素

l <thead>：定義表格的頁頭

l <tfoot>：定義表格的頁腳

1. <table border="1" width="400">

2. <caption><b>瘋狂Java體系圖書</b></caption>

3. <thead>

4. <tr>

5. <th>書名</th>

6. <th>做者</th>

7. </tr>

8. </thead>

9. <tfoot>

10. <tr>

11. <td colspan="2" align="right">現總計：2本圖書</td>

12. </tr>

13. </tfoot>

14. <tbody>

15. <tr>

16. <td>瘋狂Java講義</td>

17. <td>李剛</td>

18. </tr>

19. <tr>

20. <td>輕量級JavaEE企業應用實戰</td>

21. <td>李剛</td>

22. </tr>

23. </tbody>

24. </table>

1.7 框架相關標籤

1.7.1 框架

使用」 xhtml1-frameset.dtd」

<html…/>元素不容許包含<body…/>子元素

l <frameset>：定義框架集，只能包含<frameset…/>、<frame…/>，<noframe…/>三個子標籤

Ø rows：指定框架集中各框架高度

Ø cols：指定框架集中各框架寬度

l <frame>：定義框架集中的一個框架，只能是空元素

Ø frameborder：是否顯示邊框

ü 0

ü 1

Ø marginheight：框架中頂部和底部頁邊距，只能是像素值

Ø marginwidth：框架中左側和右側頁邊距，只能是像素值

Ø name：指定框架惟一標識

Ø noresize：是否容許用戶調整框架大小，默承認以調整大小

ü noresize：不容許調整大小

l <noframes>：用於定義非框架部分，不顯示

1.7.2 <iframe.../>元素

與<frame.../>標籤差很少，不支持noresize屬性。可放在頁面任何地方。

2 XHTML的表單標籤

2.1 表單標籤

<form.../>

Ø action：表單提交地址

Ø method：以何種方式提交表單

ü GET

ü POST

Ø enctype：指定對錶單內容編碼所使用的字符集

Ø name

Ø target：指定用何種方式打開目標url

ü _self：自身

ü _blank：新窗口

ü _top：頂層框架

ü _parent：父框架

提交表單時，該表單裏的表單控件將會轉化成表單參數：

² 每一個有name屬性的表單控件對應一個請求參數，沒name屬性不會生成請求參數

² 相同name屬性的多個控件只生成一個請求參數，該參數對應多個值

（不知道是什麼鳥意思）

² 設置了disable=」true」的控件不會生成請求參數

2.2 使用input元素

<input.../>

Ø type

ü text：單行文本框

ü password：密碼框

ü hidden：隱藏域

ü radio：單選框

ü checkbox：複選域

ü image：圖像域

ü 文件上傳域：file

ü 提交：submit

ü 重設：reset

ü 無動做按鈕：button

Ø checked：設置radio、checkbox初始狀態

ü checked

Ø disabled：設置首次加載時禁用此元素

ü disabled

Ø maxlength：指定文本框中所容許輸入的最大字符數

Ø readonly：指定用戶不可修改文本框中值（可以使用js修改）

Ø size：指定元素寬度（神馬玩意）

2.3 使用label定義標籤

<label.../>

對其它表單控件進行說明

讓label和表單控件標籤關聯的兩種方式：

1) 隱式使用for屬性：

指定<label.../>元素的for屬性爲所關聯控件的id

2) 顯示關聯：（IE中支持很差）

將文本、控件元素一塊兒放在<label.../>元素中

1. <label for="username">單行文本框：</label>

2. <input id="username" name="username" type="text" /><br />

3. <label>密碼框：<input id="password" name="password" type="password" />

4. </label><br />

5. <input id='ok' type="submit" value="登陸瘋狂Java聯盟" />

2.4 使用button定義按鈕

<button.../>與<input type=」button」>差很少，功能更爲強大。

Ø disable：是否禁用此按鈕

ü disable

Ø name

Ø type

ü button

ü reset

ü submit

Ø value：指定該按鈕初始值？

2.5 列表框和下拉列表

l <select>：建立下拉列表或列表框，只能包含<option.../>、<optgroup.../>子元素

指定了size、multiple其中一個屬性則生成列表框，都不指定生成下拉列表

Ø disable：是否禁用

ü disable

Ø multiple：指定列表框是否容許多選

Ø size：指定列表框可同時顯示多少個列表項

l <option>：列表項或菜單項

Ø disable

ü disable

Ø select：該項一開始是否被選中

ü select

Ø value：該項對應的請求參數值

l <optgroup>：列表項組或菜單項組

2.6 使用textarea定義文本域

<textarea.../>

不可指定value屬性

Ø cols：寬度，必填

Ø rows：高度，必填

Ø disable

ü disable

Ø readonly：是否只讀

ü reahonly

3 XHTML頭部和元信息

l <script>

l <style>

l <link>

l <meta>：定義頁面元信息，即指定一些name-value對

Ø http-eqiv

ü Expires：指定網頁過時時間

ü Pragma：禁用緩存

ü Refresh：多長時間後自動刷新

ü Set-Cookie：設置Cookie，若是網頁過時，客戶端上的Cookie也將被刪除

ü Content-Type：字符集

1. <meta http-equiv="Content-Type"content="text/html;charset=GBK" />

Ø name

Ø content

l <base>：基準連接

Ø href

Ø target：指定超連接默認在哪一個窗口打開

ü _self：自身

ü _blank：新窗口

ü _top：頂層框架

ü _parent：父框架

l <title>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。