創建表格
表格由 <table> 標籤來定義。
每個表格均有若干行(由 <tr> 標籤定義),每行被分割爲若干單元格(由 <td> 標籤定義)。
下面是一個包含兩行兩列的表格:
<table border="1">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
表格 border 屬性
border 屬性規定表格單元周圍是否顯示邊框。
如果不定義邊框屬性,表格將不顯示邊框。
下面是一個帶有邊框的表格:
<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>
在瀏覽器顯示結果如下:
表格表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示爲粗體居中的文本。
下面是一個例子:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>
在瀏覽器顯示結果如下:
表格 colspan 和 rowspan 屬性
使用 colspan 和 rowspan 屬性分別定義跨列和跨行的表格單元格。
下面是一個單元格跨兩行的表格:
<table border="1">
<tr>
<td>First Name:</td>
<td>Bill Gates</td>
</tr>
<tr>
<td rowspan="2">Telephone:</td>
<td>555 77 666</td>
</tr>
<tr>
<td>555 77 667</td>
</tr>
</table>
元素類型
區塊元素
大多數 HTML 元素被定義爲塊級元素或內聯元素。
塊級元素在瀏覽器顯示時,通常會以新行來開始(和結束)。
例如: <h1>, <p>, <ul>, <table> 等。
內聯元素
內聯元素在顯示時通常不會以新行開始。
例如: <b>, <td>, <a>, <img> 等。
元素類型
<div> 元素
HTML <div> 元素是塊級元素,它可用於組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設置樣式屬性。
<span> 元素
HTML <span> 元素是內聯元素,可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時,<span> 元素可用於爲部分文本設置樣式屬性。
<form> 標籤
HTML 表單用於蒐集不同類型的用戶輸入。
<form> 標籤用於創建供用戶輸入的 HTML 表單。
<form>
…
</form>
使用 action 屬性規定當提交表單時,向何處發送表單數據。
<form action="https://www.w3cschool.cn">
</form>
method 和 name 屬性
method 屬性
method 屬性指定在提交表單時使用的 http 方法:get 或 post。
下面是兩個示例:
<form action="url" method="get">
<form action="url" method="post">
提示:
當您使用 get 時,表單數據將在頁面地址中顯示。
如果表單正在更新數據或使用敏感信息(密碼),請使用 post。post 提供更好的安全性,因爲提交的數據在頁面地址中不可見。
name 屬性
name 屬性指定表單的名稱。
要接收用戶輸入,你需要相應的表單元素,如文本字段。而輸入類型是由類型屬性(type)定義的,大多數經常被用到的輸入類型有:text,password,radio,checkbox,submit 等。
下面是一個請求用戶名和密碼的表單例子:
<form>
<input type="text" name="username" /><br />
<input type="password" name="password" />
</form>
表單元素
單選框
<input type="radio"> 標籤定義了表單單選框選項。
下面是一個單選框的例子:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
運行顯示效果如下:
複選框
<input type="checkbox"> 定義了複選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
下面是一個複選框的例子:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
運行顯示效果如下:
三種顏色 紅,綠,藍的組合從0到255,一共有1600萬種不同顏色(256 x 256 x 256)。
通過使用框架,你可以在同一個瀏覽器窗口中顯示不止一個頁面。
<iframe> 標籤規定一個內聯框架。
一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。
標記一個內聯框架:
<iframe src="https://www.w3cschool.cn"></iframe>
提示:您可以把需要的文本放置在 <iframe> 和 </iframe> 之間,這樣就可以應對不支持 <iframe> 的瀏覽器。HTML5 中不支持<frame> 標籤。
HTML 框架
定義iframe標籤的高度與寬度
height 和 width 屬性用來定義 iframe 標籤的高度與寬度。
屬性默認以像素爲單位, 但是你可以指定其按比例顯示 (如:"90%")。
下面是一個例子:
<iframe src="/statics/demosourse/demo_iframe.htm" width="200" height="200"></iframe>
定義iframe表示是否顯示邊框
frameborder 屬性用於定義iframe表示是否顯示邊框。
設置屬性值爲 "0" 移除iframe的邊框:
<iframe src="/statics/demosource/demo_iframe.htm" frameborder="0"></iframe>