訓練營第二天

1、img標籤----單標籤

作用：在頁面顯示一張圖片
代碼：<img src=”圖片的路徑” />
img的屬性：src、alt、title

src	alt	title
圖片的路徑（相對路徑/絕對路徑	若圖片加載不出來的話，要顯示對應文字	介紹圖片內容（鼠標移動到對應圖片）

圖片路徑問題：

1. 絕對路徑----從電腦盤符位置開始的位置。

2.相對路徑----圖片文件相對於頁面文件的位置
      1）圖片與頁面在同一個目錄中，直接寫圖片名即可；

     2）圖片在頁面的上一級目錄中，路徑要以../圖片名開頭；

    3）圖片在頁面的下一級目錄中，路徑以具體的下一級目錄名開頭；

#### **問題：將來在實際開發中到底用絕對路徑還是用相對路徑？？
#### 只要不出意外的話一律使用相對路徑，因爲相對路徑的可移植性要強。

2、a標籤（超鏈接）

       作用：可以在一個頁面跳轉到另一個頁面中
       代碼：<a  href=”跳轉頁面路徑”></a>
       注意：在a標籤內必須寫明文字，如果不寫a標籤在頁面是找不到的。

2.1、a標籤的屬性

href	a標籤要跳轉的目標頁面路徑（相對路徑/絕對路徑）
target	指定a標籤的跳轉方式：

      _blank：保留原始頁面，跳轉到新的頁面
      _self：在當前頁面跳轉   | 

注意：如果不設置target跳轉，默認是在當前頁面跳轉。

2.2、base標籤

base標籤是用來給頁面上所有的a標籤設置統一的跳轉方式，base標籤一般放在title標籤下面。

2.3、a標籤的其他用法

• 可以不跳轉（跳轉到當前頁面）：href=”#”
  
  * 可以跳轉到頁面的指定位置
  
  1、首先，在跳轉頁面中指定標籤位置設置一個id屬性值；
  
  2、然後，將當前頁面中a標籤的href值爲“跳轉頁面#id名”；
  
• 可以用來下載文件，href中的值是下載文件名
  
  

注意：強烈建議不要使用a標籤下載文件，如果使用的話將來網站的源代碼可能會被直接下載下來。

綜合練習：實現春夏秋冬四季跳轉切換

chun.html文件代碼：

xia.html文件代碼：

qiu.html文件代碼：

dong.html文件代碼：

3、標籤之間的關係以及標籤的分類

標籤之間的關係有兩種：並列、嵌套。

1. 並列：兩個標籤處於同一級別。如：head和body、title和meta；
2.嵌套：一個標籤內部又有一個標籤，如：head和title；

嵌套又細分爲子元素標籤和後代元素標籤。

標籤可以分爲兩類：

單標籤：hr、br、meta、img、base；
 雙標籤：p、h系列、a；

注意：雙標籤內部都要寫內容，單標籤不需要放。
4、列表標籤

    作用：頁面中的一些數據需要有一定結構顯示

4.1、無序列表

作用：顯示一列沒有排列順序的數據

代碼：

    <ul>
             <li></li>
             <li></li>
            <li></li>
……
</ul>
 #### 注意：
####    1、無序列表中的數據是沒有先後順序之分；
####    2、ul標籤最好不要單獨出現；
####    3、ul標籤是用來管理li標籤的；
####    4、ul標籤中最好只放li標籤（ul中可以放其他標籤，不建議）；
####    5、li標籤中可以放其他標籤，甚至li標籤內部又可以是一個無序列表；

4.2、有序列表
作用：顯示一段有順序的數據

代碼：

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

注意：有序列表中的數據都是有順序的，在實際開發中，ul無序列表用的比較多，ol有序列表用的比較少。

4.3、自定義列表

作用：顯示一段數據，格式自定義

代碼：

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

綜合練習：編寫四大名著說明頁面

5、表格
作用：用來將數據以表格形式顯示出來。
代碼：

    <table>
<tr>
    <td></td>
    <td></td>
    ……
    </tr>
         <tr>
    <td></td>
    <td></td>
    ……
    </tr>
    </table>

6、表單
6.1、表單元素