html--day02

1、目錄結(jié)構(gòu)
1、頁面
2、圖像
3、css / style
4、Javascript
2、URL
Uniform ResourceLocator
統(tǒng)一資源定位器

描述的是資源文件的所在地址
URL有三種表現(xiàn)形式:
1、絕對路徑
永遠都是從一個固定位置開始查找
固定位置：資源所在的根目錄
從本機查找：
盤符:\目錄\目錄......\文件名稱.jpg
E:\李俊\01_HTML5BASIC\Day02\jd\images\1.jpg
互聯(lián)網(wǎng)資源:
http://www.baidu.com/img/bd_logo1.png
2、相對路徑
查找資源文件的位置是相對于當前網(wǎng)頁文件所在的位置處開始查找
1、網(wǎng)頁文件與資源文件在同一個目錄內(nèi)
直接引用資源文件名稱即可
1.jpg
2、資源文件在子級目錄內(nèi)
先進入到目錄內(nèi)，再通過資源文件的名稱進行引用
images/1.jpg
images/fengjing/2.jpg
3、資源文件在父級目錄內(nèi)，網(wǎng)頁在子級目錄下
../ ： 表示上一級
../../../

../1.jpg
../images/1.jpg
3、根相對路徑
從服務(wù)器上網(wǎng)站所在的根路徑開始查找
/ ：網(wǎng)站根路徑
不同點：查找資源文件的起始位置不同

3、圖像
語法：<img/> -->
屬性：
1、src
描述圖像地址(URL)
<img src="1.jpg" />
<img src="E:/xxx/1.jpg" />
<img src="http://www.baidu.com/1.jpg" />
2、width ：寬度
height: 高度
注意：寬度和高度如果只設(shè)置一個的話，那么圖像會等比縮放
3、title
4、超鏈接
語法:<a></a>
屬性：
1、href：鏈接的URL
可以相對URL 也可以是 絕對URL
取值為 #,鏈接到本頁的頂部
2、target
目標，打開新網(wǎng)頁的方式
取值:
_blank : 新頁面中打開
_self:在當前頁(本頁面)中打開，默認值
3、name
定義錨點名稱
4、title

超鏈接的表現(xiàn)形式:
1、下載資源
<a href="xxxx.rar"></a>
2、電子郵件鏈接
使用前提：用戶機器中必須配好一個郵件客戶端(outlook,foxmail)
<a href="mailto:zhaoxu@tedu.cn"></a>
3、返回頂部鏈接
<a href="#"></a>
4、鏈接到Javascript
<a href="javascript:">JS功能</a>
錨點：
在頁面中標記一個記號，允許超鏈接跳轉(zhuǎn)到這個記號處。
使用方式：
1、定義錨點
<a name="錨點名稱"></a>
2、鏈接到錨點
<a href="#錨點名稱"></a>（本頁）
<a href="頁面URL#錨點名稱"></a>（其他頁）
http://www.

5、表格
1、語法
2、注意
基本的表格里，每行的列數(shù)都是統(tǒng)一化的
3、屬性
1、table
1、width 寬度，以px為單位
也可以以 % 為單位，占到外層容器寬度的百分之多少
2、height 高度，以px為單位
3、border
邊框，默認為 0，以px為單位
4、align
表格的對齊方式
取值:left center right
5、bgcolor
背景顏色
6、cellpadding
設(shè)置表格內(nèi)邊距,即單元格邊框與內(nèi)容之間的距離
7、cellspacing
設(shè)置表格外邊距,即單元格之間的距離
2、tr
1、align
當前行數(shù)據(jù)在單元格中的水平對齊方式
2、valign
當前行數(shù)據(jù)在單元格中的垂直對齊方式
取值：top middle bottom
3、bgcolor
當前行的背景顏色
3、td
1、align
2、valign
3、bgcolor
4、width
一旦設(shè)置好寬度，那么所有行的當前列的寬度，都將保持一致
5、height
一旦設(shè)置好高度，那么當前行所有列的高度，都將保持一致
6、colspan
設(shè)置單元格的跨列
7、rowspan
設(shè)置單元格跨行

4、表格標題
表格的標題會顯示在表格的正上方，中間位置處
語法:<caption>標題內(nèi)容</caption>
位置：在<table>中
5、th
th與td相似，也要放在 tr 當中
以加粗、居中的方式顯示數(shù)據(jù)，可稱為 行標題或列標題
6、表格的復(fù)雜應(yīng)用
1、行分組
表頭:<thead></thead>
表主體:<tbody></tbody>
表尾:<tfoot></tfoot>
2、不規(guī)則表格
通過 td 的跨行 和 跨列屬性來實現(xiàn)
1、跨列
當前單元格橫向向右合并指定個數(shù)的單元格。
特點：同一行中，改變列數(shù)
屬性：colspan
2、跨行
當前單元格縱向向下合并指定個數(shù)的單元格
特點：同一列中，改變行數(shù)
屬性：rowspan

3、表格的嵌套
在【單元格】中再嵌套另外一個表格
<table>
<tr>
<td>
<table>
<tr>

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

6、列表
1、有序列表
將列表項按照一定的次序排列顯示出來并且列表項前面會有有序的標識
語法：
<ol>
<!-- Order List -->
<li>
<!-- List Item -->
</li>
</ol>
屬性:
1、type
取值：
1 : 默認，以數(shù)字方式顯示
a : 小寫字母
A : 大寫字母
i : 小寫羅馬數(shù)字
I : 大寫羅馬數(shù)字
2、start
列表項標識從哪個值開始
取值 ：數(shù)字
2、無序列表
<ul></ul> --> Unorder List
按照一定的格式排列顯示，列表項前面是符號標識
<ul>
<li></li>
<li></li>
<li></li>
</ul>
屬性：
1、type
disc : 實心圓（默認）
circle ：空心圓
square ：方塊
none : 無
使用場合：、
1、從上到下的顯示數(shù)據(jù)
2、導航
3、列表嵌套
在 li 中 嵌套另外一個 列表
4、定義列表
語法:
<dl> -->定義列表
<dt></dt> --> 定義列表標題(術(shù)語)
<dd></dd> --> 對標題或術(shù)語的解釋
<dl>
<dl>
<dt>天安門</dt>
<dd>大，大，大....</dd>
</dl>
使用場合：
圖文并茂的時候使用dl、dt、dd比較多