一.HTML實體(HTML Entites) 1.HTML實體：W3C規定在瀏覽器看到的特殊符號必須用HTML實體 單引號(') ' 雙引號(") " 大於(>) > 小於(<) < 連接符(&) & 不間斷空格 版權 © 商標 ® ...
一.HTML實體(HTML Entites)
1.HTML實體：W3C規定在瀏覽器看到的特殊符號必須用HTML實體
單引號(') ===== '
雙引號(") ===== "
大於(>) ===== >
小於(<) ===== <
連接符(&) ===== &
不間斷空格 =====
版權 ===== ©
商標 ===== ®
二.圖像
1.瀏覽器支持的圖像格式
gif:支持動畫，支持透明，支持256種顏色
png:不支持動畫，支持透明，支持256種，1670萬種，或更多。
jpg/jpeg:不支持動畫，不支持透明，1670萬種顏色
2.格式
<img src="圖像URL" alt="描述" width="寬度" height="高度"border="邊框"/>
說明:
a. img 標記 src alt屬性必須寫
b. 設置 寬度和高度不會影響圖像的實際大小
3. 路徑
(1)絕對路徑:協議名稱,主機名稱,目錄名稱及文件名稱組成
http://www.sohu.com/images/1.jpg
(2)相對路徑:由當前操作的文檔開始的路徑
同級: 當前文檔和目標文檔在同一個目錄下
<img src="1.jpg" alt=""/>
<img src="./1.jpg" alt=""/>
下一級:當前文檔進入文件夾找到目標文檔
<img src="images/2.jpg" alt=""/>
上一級:當前文檔跳出文件夾找目標文檔
<img src="../1.jpg" alt=""/>
(3)根相對路徑:從伺服器主目錄開始的路徑 '/'
<img src="/psd1608/1.jpg"/>
三.列表(Lists)
(1)無序列表
<ul type="disc預設值|square|circle">
<li>...</li>
<li>...</li>
...
</ul>
(2)有序列表
<ol type="1預設值|a|A|i|I" start="開始數字編號">
<li>...</li>
<li>...</li>
...
</ol>
(3)自定義列表
<dl>
<dt>列表項名稱</dt>
<dd>列表項描述</dd>
<dd>列表項描述</dd>
...
</dl>
四.超鏈接(Anchor)
1.超鏈接能做什麼:實現頁面跳轉
2.鏈接元素:文字,圖像,熱點
3.格式
<a href="目標文檔URL" target="視窗形式">
...
</a>
4.target視窗形式
(1) _self ：預設值,目標文檔以自身視窗形式打開
(2) _blank:目標文檔以新視窗 形式打開
(3) _parent：目標文檔以父級視窗形式打開
(4) _top：目標文檔以頂級視窗形式打開
(5)框架名稱:目標文檔以框架名稱所在視窗形式打開
5.href的形式
(1)鏈接到網頁或瀏覽器支持的圖片格式
a.網頁
靜態網頁 .html .htm
動態網頁(WEB程式開發語言):
.php .jsp .aspx .shtml .shtm
b. 瀏覽器支持的圖片格式
.gif .png .jpg
(2)鏈接到壓縮文件:用壓縮命令或壓縮軟體將文件壓縮，直接鏈接壓縮文件名稱即可。
(3)鏈接到郵箱：
<a href="mailto:[email protected]">...</a>
(4)鏈接到 Javascript腳本代碼
<a href="javascript:js代碼"></a>
(5)鏈接到空鏈接(空文檔)
a.返回到頂端(刷新頁面)
<a href="#">...</a>
b.保持原始位置不變的空鏈接(不刷新頁面)
<a href="javascript:void(0)">...</a>
五.表格(Table)
1.什麼是表格 ：將數據放到格式化的結構中
2.組成
(1)表格:<table></table>
(2)行: <tr></tr>
(3)單元格(列)： <td></td>|<th></th>
說明: 內容都寫在單元格中
3.格式
<table>
<tr>
<td>...</td>
<td>...</td>
......
</tr>
<tr>
<td>...</td>
<td>...</td>
......
</tr>
......
</table>
4. table的屬性
(1) border 邊框
(2) width 寬度: 值|百分比
(3) height 高度:值|百分比(w3c不支持)
(4) cellspacing:單元格和單元格之間的距離 預設2像素
(5) cellpadding:單元格中內容到邊框的距離 預設2像素
(6) align :水平對齊方式 left預設值|center|right
(7) bgcolor:背景顏色
(8) background:背景圖片
(9) bordercolor:邊框顏色(w3c不支持)
5. td|th 的屬性
(1) width 寬度: 值|百分比
(2) height 高度:值|百分比(w3c不支持)
(3) bgcolor:背景顏色
(4) background:背景圖片
(5) align: 水平對齊方式 left|center|right
(6) valign:垂直對齊方式 top居頂|middle居中|bottom居底
(7) colspan:跨列合併
(8) rowspan:跨行合併
6.嵌套表格(網頁佈局排版(淘汰))
7.行(tr)分組
(1) <thead></thead> 行頭部
(2) <tbody></tbody> 行主體部分
(3) <tfoot></tfoot> 行底部
說明:
預設所有行都在 tbody標記中
