圖片標簽:<img>
    * 屬性:
         * src  :圖片的來源.
         * width    :圖片的寬度.
         * height:圖片的高度.
         * alt  :圖片找不到顯示的內容.
圖片的引入的路徑問題:
    * 路徑：相對路徑.
        * 如果引入的圖片和html文件在同一級路徑。
            * 直接寫文件名或者./文件名
              <img src="cs10006.jpg" />
              <img src="./cs10006.jpg" />
        * 如果引入的圖片在html文件的上一級路徑。
            * <img src="../cs10006.jpg" />
        * 如果引入的圖片在html文件的下一級路徑。
            * <img src="img/cs10006.jpg" />
 

1.1.2.2 步驟分析:
【步驟一】創建一個html的文檔
【步驟二】引入兩張圖片顯示到頁面
1.1.3 代碼實現：

<img src="logo2.png" height="50" width="200"/>
<img src="header.png" height="50" width="250"/>

1.2 案例三：網站列表頁面的顯示1.2.1 需求：
在網站的友情鏈接頁面顯示網站的所有的友情鏈接.

1.2.2 分析：1.2.2.1 技術分析：
【HTML的列表標簽】
l 有序列表

<ol>
    <li></li>
</ol>
l 無序列表
<ul>
    <li></li>
</ul>
【HTML的超鏈接標簽】
HTML的超鏈接標簽：<a>
    * 屬性:
        * href  :鏈接的路徑
        * target    :打開的方式
            * _self :在自身頁面打開
            * _blank    :新打開一個窗口
 

1.2.2.2 步驟分析：
【步驟一】創建一個html的文檔
【步驟二】創建一個無序列表
【步驟三】在無序列表中添加超鏈接標簽.
1.2.3 代碼實現：

<ul>
<li><a href="../案例一：網站信息頁面的顯示/案例一：網站信息頁面的顯示.html">傳智播客</a></li>
<li><a href="http://www.baidu.com" target="_self">百度</a></li>
<li><a href="http://www.163.com" target="_blank">網易</a></li>
<li>百合</li>
</ul>
 

1.2.4 總結：

無序列表的屬性:

• type屬性
  • disc ：實心點.
  • circle ：空心圓
  • square ：方塊.

有序列表的屬性:

• type屬性:
  • 1 ：數字類型
  • a ：英文類型
  • i ：羅馬字符
• start屬性:從哪開始

超鏈接的target屬性:

• _self
• _blank
• _parent

JavaWeb01-HTML篇筆記（二）