html--day02

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

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

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

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è)置一個(gè)的話，那么圖像會(huì)等比縮放
3、title
4、超鏈接
語法:<a></a>
屬性：
1、href：鏈接的URL
可以相對URL 也可以是 絕對URL
取值為 #,鏈接到本頁的頂部
2、target
目標(biāo)，打開新網(wǎng)頁的方式
取值:
_blank : 新頁面中打開
_self:在當(dāng)前頁(本頁面)中打開，默認(rèn)值
3、name
定義錨點(diǎn)名稱
4、title

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

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

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

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

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

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