圖片標(biāo)簽(單標(biāo)簽 ,行內(nèi)標(biāo)簽)
圖片的語法:<img 屬性名=”屬性值” />
圖片的屬性
- 圖片的路徑 src=”圖片的地址”(圖片要放到同一個(gè)站點(diǎn)下,放同一個(gè)文件夾下)
- 圖片的寬度 width=”數(shù)值” 以像素為單位的px,不寫單位 例如width=”300”
- 圖片的高度height=”數(shù)值” 以像素為單位px 例如 height=”200”
- 圖片的邊框border=”數(shù)值”
- 圖片的解釋說明alt=”對圖片的描述內(nèi)容”
- 圖片和內(nèi)容左右之間的距離 hspace=”數(shù)值”
- 圖片和內(nèi)容上下之間的距離 vspace=”數(shù)值” (了解,css樣式實(shí)現(xiàn))
注意:圖片等比例縮放,只設(shè)置寬度或高度
要求:插入一張圖片圖片的寬度為200像素,高度為160像素,邊框?yàn)?
表格介紹
語法:
<table>
<tr>
<td>內(nèi)容</td>
<td>內(nèi)容</td>
<td> </td>
</tr>
<tr>
<td>內(nèi)容</td>
<td>圖片內(nèi)容</td>
<td>內(nèi)容</td>
</tr>
</table>
通常表格<table></table>包括行 <tr></tr>行里面包括單元格 <td></td>
注意:內(nèi)容一定要放入最底層的標(biāo)簽里面
需求:表格,三行 四列
表格的<table>的屬性
- 表格的邊框border=”數(shù)值” 默認(rèn)是0
- 表格的寬度 width=”數(shù)值”
- 表格的高度height=”數(shù)值”(w3c推薦不建議使用高度)
- 表格的居中方式 align=”水平對齊方式” 取值 left center right
- 表格中的內(nèi)容和單元格之間的距離 cellpadding=”數(shù)值” 默認(rèn)數(shù)值是2像素
- 表格中單元格和單元格之間的距離 cellspacing=”數(shù)值” 默認(rèn)數(shù)值是2像素
- 表格的背景顏色 bgcolor=”顏色值” 例如 bgcolor=”red”
- 表格的背景圖片 background=”圖片的地址”(背景圖片不能含有中文)---修飾的作用
- 表格的合并邊框線 rules=”all” (w3c不推薦使用,css樣式來實(shí)現(xiàn))
- 表格的邊框顏色 bordercolor=”顏色值”例如 bordercolor=”#ff0000”(不建議使用)
注意:背景圖片的優(yōu)先級高于背景顏色
需求:插入三行五列的表格,表格的寬度為990像素,表格的邊框粗細(xì)為2
需求:插入兩行五列的表格,表格的寬度為1000像素,表格居中顯示,表格的邊框?yàn)槟J(rèn),在第一行的每一個(gè)單元格中放入圖片,圖片的寬度為190像素,高度為160像素,第二行放入內(nèi)容
<tr>的屬性
- Height 行的高度 例如 height=”300”
- Bgcolor背景顏色 例如 bgcolor=”blue”
- Background背景圖片 例如 background=”images/33.jpg”
- Align 水平對齊方式 例如 align=”left //center//right” //或者
- Valign 垂直對齊方式 例如 valign=”top //middle //bottom”
單元格的屬性
- Bgcolor 背景顏色
- Background 背景圖片 例如 background=”images/XX.jpg”
- Width 單元格的寬度 例如 width=”300”
- Height 單元格的高度 例如height=”40”
- Align 內(nèi)容在單元格中的水平對齊方式 align=”left/center/right”
- Valign 內(nèi)容在單元格中垂直對齊方式 valign =”top/middle/bottom”;
表格的擴(kuò)充
合并單元格的問題
橫向合并 左右合并(若干個(gè)單元格合并成一個(gè)單元格)
Colspan=“數(shù)值” 例如colspan=”3” 橫向合并三個(gè)
上面的表格 縱向合并rowspan=”數(shù)值” 例如rowspan=”3” 縱向合并3個(gè)
鏈接
語法<a 屬性=”屬性值”>內(nèi)容</a>
屬性
- 鏈接的地址 href=”鏈接的地址url”,url 絕對地址 相對地址
- Target 打開目標(biāo)文件的窗口
- 在新的窗口中打開目標(biāo)文件
- 默認(rèn)的打開方式,在原來的窗口中打開目標(biāo)文件(原來的窗口被覆蓋)
- Name 定義錨點(diǎn)的名稱
絕對地址(網(wǎng)絡(luò)地址)---http:
語法<a href=
http://www.taobao.com>淘寶</a>
本地的地址 ----在你的本機(jī)上測試
相對地址
在同一個(gè)站點(diǎn)下,在同一個(gè)文件夾
- 目標(biāo)文件和當(dāng)前文件在同一個(gè)目錄 ,直接寫文件名稱
- 目標(biāo)文件在當(dāng)前文件的下一級目錄,XX表示文件夾名 XX/文件名稱
- 目標(biāo)文件在當(dāng)前文件的下兩級目錄 xx/xx/文件名
- 目標(biāo)文件在當(dāng)前文件的上一級目錄 ../文件名稱
- 目標(biāo)文件在當(dāng)前文件的上兩級 目錄 ../../文件名稱 上三級../../../文件名稱
特殊鏈接
下載鏈接
那些文件不用下載可以直接做鏈接 .html .jpg .gif
那些文件必須下載鏈接 .zip .exe
郵件鏈接
<a href=
mailto:郵件的地址>內(nèi)容</a>
空鏈接
在當(dāng)前頁面做鏈接 <a href=”#”>鏈接的內(nèi)容</a>
Javascript鏈接
<a href=”javascript:window.close()”>關(guān)閉</a>
Firefox設(shè)置問題
Name定義錨點(diǎn)的名稱
同一個(gè)頁面的不同區(qū)域直接跳轉(zhuǎn)
定義錨點(diǎn)
<a name=”自定義名稱”></a> 在<a></a>不加內(nèi)容,給鏈接中的target用
跳轉(zhuǎn)錨點(diǎn)
<a href=”#錨點(diǎn)名稱”>內(nèi)容</a>
顏色代碼(理解)
英文 red green blue
十六進(jìn)制 #ff0000 #00ff00 #0000ff
十進(jìn)制 rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)
十進(jìn)制:十個(gè)基本數(shù)0,1,2,3,4,5,6,7,8,9
十六進(jìn)制 十六個(gè)基本數(shù)構(gòu)成 0-9 a b c d e f #ff6688
八進(jìn)制 八個(gè)基本數(shù)夠成 0 1 2 3 4 5 6 7
二進(jìn)制 兩個(gè)基本數(shù)構(gòu)成 0 1
字符集
為什么要有字符集,是因?yàn)橛?jì)算機(jī)只能處理二進(jìn)制數(shù)據(jù)。為了讓計(jì)算機(jī)能識別人類語言(0-9、a-z、A-Z、特殊符號),我們就需要對這每一個(gè)字符進(jìn)行“編碼”。所謂“編碼”就是:每一個(gè)字符,可以用不同的二進(jìn)制來表示。
假設(shè):A 用二進(jìn)制表示 1000, B 用二進(jìn)制表示 1001
ASCII編碼:用1個(gè)字節(jié)(8位二進(jìn)制)來表示所有字符,共可以表示 2^8 = 256 。
ANSI編碼:其它國家,都對ASCII編碼進(jìn)行擴(kuò)展,用于顯示本國的語言。
在中文操作系統(tǒng) gb2312
繁體操作系統(tǒng) big5
用2個(gè)字節(jié)(16位二進(jìn)制)(來表示,共可以表示 2^16 = 65536個(gè)字符。
Gb2312 收入了6763個(gè)漢字
GBK編碼:對GB2312進(jìn)行擴(kuò)充,收錄了一些冷門字、罕見字、古漢語等。。。大約2.1萬個(gè)漢字
Unicode編碼:計(jì)劃將世界上所有字符統(tǒng)一編碼,用4個(gè)字節(jié)(32位二進(jìn)制)來表示一個(gè)字符。
它的缺點(diǎn):編碼表文件太大了,不方便使用。用32位二進(jìn)制表示一個(gè)字符,造成空間極大浪費(fèi)。
UTF-8: (多國語言編碼)
不同的字符,它會選擇合適編碼來進(jìn)行翻譯。
Meta標(biāo)簽
描述網(wǎng)頁文檔屬性
http-equiv 和name
http-equiv :模擬的是http文件頭信息,當(dāng)內(nèi)容從服務(wù)器端發(fā)送客戶端,告訴瀏覽器如何正確顯示信息
字符集
<meta http-equiv=”content-type”content=”text/html;charset=UTF-8” />多國語言
<meta http-equiv=”content-type” content=”text/html;charset=gbk” />國標(biāo)碼
<meta http-equiv=”content-type” content=”text/html;charset=gb2312” />簡體中文
網(wǎng)頁自動(dòng)刷新
<meta http-equiv=”refresh” content=”4” /> 間隔4秒網(wǎng)頁自動(dòng)刷新
<meta http-equiv=”refresh” content=”8;http://www.baidu.com” /> 等待8秒自動(dòng)跳轉(zhuǎn)到百度頁面
Name可以設(shè)置網(wǎng)頁關(guān)鍵字,描述信息等
<meta name=”keywords” content=”關(guān)鍵字” />
便于搜索引擎的需要
<meta name=”description” content=”網(wǎng)站的描述信息” />
便于搜索引擎需要
<meta name=”author” content=”作者” />
網(wǎng)站的作者