HTML基本元素（三）

標籤：

1.HTML特殊字元

　　一些字元在HTML中擁有特殊的含義，比如小於符號(<)和大於符號(>)用於定義HTML標籤。如果我們希望瀏覽器正確地顯示這些字元，我們必須在HTML源碼中插入字元實體。

　　還有一種情況，就是HTML會自動截去多餘的空格，假如你在文檔中連續輸入10個空格，那麼HTML會去掉其中的9個。那麼，就需要用到字元實體來實現任意空格。

　　字元實體用於在HTML文檔中插入特殊字元，有兩種方式：實體字元和實體編號，一般使用實體字元。

　　注意：實體字元對大小寫敏感！

常用的特殊字元：

特殊字元	實體字元	實體編號
空格	 	 
小於符號(<)	&lt;	&#60;
大於符號(>)	&gt;	&#62;
和號(&)	&amp;	&#38;
引號(")	&quot;	&#34;
著作權(©)	&copy;	&#169;
註冊商標(®)	&reg;	&#174;
乘號(×)	&times;	&#215;
除號(÷)	&divide;	&#247;

 

 

 

 

 

 

 

 

 

 

 

2.列表

　　列表用來在網頁上組織資訊，HTML能夠建立三種類型的列表：無序列表、有序列表和自訂欄表。

　　1）無序列表

　　　　代碼結構：

<ul>    <li>……</li>    <li>……</li>    <li>……</li></ul>

　　　　*無序列表的type屬性的值有：disc(“預設”實心圓)、circle(空心圓)、square(正方形)，用來設定項目前面的標記。

　　2）有序列表

　　　　有序列表使用數字或字母系統來組織列表裡包含的資訊。

　　　　代碼結構：

<ol>    <li>……</li>    <li>……</li>    <li>……</li></ol>

　　　　*有序列表的type屬性的值有：1(“預設”數字)、a(小寫字母)、A(大寫字母)、i(小寫羅馬數字)、I(大寫羅馬數字)，用來設定項目前面的標記。

　　　　*start屬性的值是：排序的起點數值。

　　3）自訂欄表

　　　　定義列表用來組織術語和它們的定義。

　　　　任何資訊如果包含多個術語和相對應的解釋,都可以使用自訂欄表進行組織。

　　　　代碼結構：

<dl>    <dt>……</dt>    <dd>……</dd>    <dd>……</dd></dl>

　　　　*<dt>是列表的頭部,常用作於標題。

 

3.表格

　　表格由<table>標籤以及一個或多個tr、th或td元素組成。儲存格可以包含文本、圖片、 列表、表單、表格等等。

　　*<table>定義表格。

　　*<tr>定義表格的行。

　　*<th>定義表頭，表示標題，一般用在表格的第一行，裡面的內容會自動加粗加黑。

　　*<td>定義儲存格。

　　代碼如下：（製作2行2列的表格的快捷產生方式：table>tr*2>td*2+Tab鍵）

<table border="1">    <tr>        <td>row 1, cell 1</td>        <td>row 1, cell 2</td>    </tr>     <tr>        <td>row 2, cell 1</td>        <td>row 2, cell 2</td>    </tr> </table>

說明

屬性	值	說明
width	px,%	指定表格的寬度
height	px,%	指定表格的高度
border	px,%	指定表格邊框的寬度
cellpadding	數字	指定邊框與內容之間的空白
cellspacing	數字	指定儲存格之間的空白
align	left,center,right	指定對齊
valign	top,middle,bottom	垂直相片順序
colspan	數字	合并列儲存格
rowspan	數字	合并行儲存格

 

 

 

 

 

 

 

 

 

　　*為表格設定合并邊框模型：

　　效果對比圖：

　　

　　參考代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        table{            border-collapse:collapse;        }        table,td{            border:1px solid #000;        }    </style></head><body>    <p>為表格設定合并邊框模型：</p>    <table>        <tr>            <td>row 1, cell 1</td>            <td>row 1, cell 2</td>        </tr>        <tr>            <td>row 2, cell 1</td>            <td>row 2, cell 2</td>        </tr>    </table></body></html>

HTML基本元素（三）