html常用標籤回顧(二)

創建表格

表格由 <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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章