HTML之圖像、超連結、表格、表單

圖像

圖像元素

• <img>

  元素将圖像添加到頁面，屬于單标簽
• 必須屬性:src
• 常用屬性:width、height

絕對路徑和相對路徑

絕對路徑

從盤符開始寫出圖檔的完整的路徑

如 D:/images/1.jpg

缺點：

- 路徑寫的很長，麻煩

- 若項目上線時，使用者将網頁和圖檔存到别的盤符下，那麼所有路徑都錯了。

相對路徑

隻需要寫出圖檔和網頁的相對位置。

優點：

- 簡單

- 上線時無論将項目存到哪個盤符下，網頁和圖檔的相對位置沒有變化

<!-- 圖檔和網頁平級 -->
    <img src="01.jpg"/>
    <!-- 圖檔在網頁下級 去檔案夾下面找02.jpg-->
    <img src="folder name/02.jpg"/>
    <!-- 圖檔在網頁上級 ..為去上一級目錄下找03.jpg-->
    <img src="../03.jpg"/>
           

超連結

建立一個超級連結

使用

<a>

元素建立一個超級連結。文法如下：

<a href="" target="">文本</a> 
- href屬性：連結的URL
- target屬性：目标打開方式，可取值為_blank、self等
           

<p>
        <a href="http://blog.csdn.net/qq_27853161">部落格位址</a>
        <a href="http://blog.csdn.net/qq_27853161" target="_blank">我的部落格</a>
    </p>
           

錨點

• 錨點是文檔中某行的一個記号

  – 用于連結到文檔中的某個位置

• 定義錨點

  –

  <a name="a1">錨點一</a>

• 連結到錨點：在錨點名字前面加上#号

  –

  <a href="#a1#" target="_blank" rel="external nofollow" >回到錨點一</a>

<!-- 頂部預設就是錨點,沒有名字. -->
    <p><a href="#">回到頂部</a></p>
           

表格

表格的建立

• 定義表格：使用成對的

  <table></table>

  标記
• 建立行：

  <tr></tr>

• 建立列(單元格)：

  <td></td>

  <table border="1" cellspacing="0" width="30%">
          <tr>
              <td>Swm</td>
              <td>is</td>
          </tr>
          <tr>
              <td>a</td>
              <td>boy</td>
          </tr>
      </table>
             

跨行 rowspan

<table border="1" cellspacing="0" width="30%">
        <tr>
            <td rowspan=2>Swm</td>
            <td>is</td>
        </tr>
        <tr>
            <!--<td>a</td>-->
            <td>boy</td>
        </tr>
    </table>
           

跨列 colspan

<table border="1" cellspacing="0" width="30%">
        <tr>
            <td colspan=2>Swm</td>
            <!--<td>is</td>-->
        </tr>
        <tr>
            <td>a</td>
            <td>boy</td>
        </tr>
    </table>
           

行分組

• 表格可以劃分3個部分：表頭、表主體、表尾
• 表頭行分組：

  <thead></thead>

• 表主體分組：

  <tbody></tbody>

• 表尾行分組：

  <tfoot></tfoot>

<table border="1" cellspacing="0" width="40%">
        <thead>
            <tr>
                <td>編号</td>
                <td>名稱</td>
                <td>金額</td>
            </tr>
        </thead>
        <tbody style="color: blue;">
            <tr>
                <td>1</td>
                <td>滑鼠</td>
                <td>50</td>
            </tr>
            <tr>
                <td>2</td>
                <td>鍵盤</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">合計</td>
                <td>150</td>
            </tr>
        </tfoot>
    </table>
           

表單

WHAT IS 表單？

• 表單用于顯示，收集資訊，并送出資訊到伺服器

• 表單二要素

  – Form元素

  – 表單控件

  -表單就是從浏覽器向伺服器傳輸資料的手段

表單元素

• 定義表單：

  <form></form>

  ,表示要将此元素所涵蓋的控件中的資料傳輸給伺服器

• 主要屬性

  – action:表單送出的URL

  – method：指出表單資料送出的方式

  – enctype：表單資料進行編碼的方式

表單控件

• 表單控件是一種HTML元素，是資訊輸入項
• 表單控件包括

input 元素(具有不同的外觀)：

<input type="某某框"/>

- 文本框:text AND 密碼框:password

• 主要屬性:

  – value：由通路者自由輸入的任何文本

  – maxlength：限制輸入的 字元數

  – 其他元素：設定文本控件為隻讀

  

- 單選框:radio AND 複選框:checkbox

• 主要屬性:

  – value：文本，當送出form時，如果選中了單選按鈕，value就被發送到伺服器

  – name：用于實作分組，一組單選框或者複選框的名稱必須相同

  – checked：設定選中

  

按鈕

• 送出按鈕：submit

  – 傳送表單資料給伺服器端或其它程式處理

• 重置按鈕：reset

  – 清空表單的内容并把所有表單控件設定為最初的預設值

• 普通按鈕：button

  – 用于執行用戶端腳本

• 主要屬性

  – value：按鈕的名字

隐藏域

文本選擇框

• 隐藏域：hidden

  – 在表單中包含不希望使用者看見的資訊

• 文本選擇看：file

  – 選中要上傳的檔案

其他元素

标簽

• 表單中的文本，用于給控件設定顯示名稱
• 文法：

  <label for="控件ID">文本</label>

• 主要屬性

  – for：設定該文本所關聯的控件ID，關聯後點選标簽等同于點選控件

  

文本域

• 相當于多行文本框
• 文法：

  <textarea>文本</textarea>

• 主要屬性

  – cols：指定文本區域的列數

  – rows：指定文本區域的行數

  – readonly：隻讀

下拉選

• 下拉選擇内容
• 文法：

<select>
     <option value="1">Java</option>
     <option value="2">php</option>
     <option value="3">.net</option>
 </select>