0. 復(fù)習(xí)
- HTML
- 標(biāo)簽
- 屬性
單擊查看詳細(xì)
1. body標(biāo)簽屬性
| No. | 屬性 | 屬性值 | 說明 |
|---|---|---|---|
| 1 | bgcolor |
顏色名/顏色值 | 文檔的背景顏色 |
| 2 | background |
URL | 文檔的背景圖像 |
| 3 | topmargin |
像素值/百分比 | 頁面與瀏覽器頂端的距離 |
| 4 | bottommargin |
像素值/百分比 | 頁面與瀏覽器底部的距離 |
| 5 | leftmargin |
像素值/百分比 | 頁面與瀏覽器左邊的距離 |
| 6 | rightmargin |
像素值/百分比 | 頁面與瀏覽器右邊的距離 |
注意：topmargin、bottommargin、leftmargin、rightmargin不是標(biāo)準(zhǔn)屬性。
2. 文本格式標(biāo)簽
| No. | 標(biāo)簽 | 說明 | 效果 |
|---|---|---|---|
| 1 | strong |
更強(qiáng)烈的強(qiáng)調(diào) | 文本加粗 |
| 2 | em |
強(qiáng)調(diào)(emphasize) | 文本斜體 |
| 3 | del |
刪除(delete) | 中劃線 |
| 4 | ins |
插入(insert) | 下劃線 |
注意：
ins通常與del配合使用谋币。例如商品價格：<del>$30.00</del><ins>$15.00</ins>
練習(xí)：文字強(qiáng)調(diào)、插入症概、刪除等效果
回顧 & 提問
2.1 strong與em區(qū)別
-
em默認(rèn)樣式是斜體蕾额，strong默認(rèn)樣式是粗體。 -
em用來局部強(qiáng)調(diào)(閱讀到時才會注意)彼城，strong則是全局強(qiáng)調(diào)(看見某文時立刻注意)诅蝶。
2.2 strong與b em與i的區(qū)別
-
bi是視覺要素(presentationl elements)。分別表示無意義的加粗募壕，無意義的斜體调炬。 -
emstrong是表達(dá)要素(phrase elements)。em(emphasized text)表示一般的強(qiáng)調(diào)文本舱馅，而strong(strong emphasized text)表示比em語義更強(qiáng)的的強(qiáng)調(diào)文本缰泡。
s與delu與ins的區(qū)別也是如此。
3. 實(shí)例說明
文字加粗 傾斜 刪除等效果
回顧 & 提問
4. 水平線標(biāo)簽hr
- 查看文檔
| No. | 屬性 | 屬性值 | 說明 |
|---|---|---|---|
| 1 | width |
像素值/百分比 | 元素的寬度 |
| 2 | size |
像素值 | 元素的高度 |
回顧 & 提問
5. 圖像標(biāo)簽img
| No. | 屬性 | 屬性值 | 說明 |
|---|---|---|---|
| 1 | src |
URL | 圖片路徑 |
| 2 | alt |
文本 | 缺失提示 |
| 3 | title |
文本 | 鼠標(biāo)懸停提示 |
| 4 | width |
像素值/百分比 | 元素的寬度 |
| 5 | height |
像素值/百分比 | 元素的高度 |
常見的圖片格式
| No. | 格式 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|---|
| 1 | .bmp | 無損壓縮代嗤，圖質(zhì)最好(百萬色) | 文件太大棘钞，不利于網(wǎng)絡(luò)傳輸 |
| 2 | .gif | 可動圖 | 最多256色，畫質(zhì)差 |
| 3 | .png | 可透明 | 畫質(zhì)中等 |
| 4 | .jpg | 文件小干毅，利于網(wǎng)絡(luò)傳輸 | 畫質(zhì)損失 |
| 5 | .icon | 圖標(biāo) | 尺寸長寬是4的倍數(shù) |
Web頁面圖片常用格式為：.jpg,.png,.gif宜猜。
6. 實(shí)例說明
標(biāo)題加入橫線，加入圖片硝逢，讓頁面更加完善
- 絕對路徑與相對路徑
7. 作業(yè)
【必做】頁面制作
【選做】技術(shù)調(diào)查
- HTML官方文檔中查出下列標(biāo)簽的作用和效果姨拥，并在頁面中列舉實(shí)例。
| No. | 標(biāo)簽 | 說明 | 效果 |
|---|---|---|---|
| 1 | sub |
- | - |
| 2 | sup |
- | - |
| 3 | blockquote |
- | - |
| 4 | q |
- | - |
| 5 | cite |
- | - |
- HTML官方文檔中圖像標(biāo)簽
img其他屬性
| No. | 屬性 | 屬性值 | 說明 |
|---|---|---|---|
| 1 | align |
- | - |
| 2 | border |
- | - |
| 3 | hspace |
- | - |
| 4 | vspace |
- | - |
8. 其他
- 推薦：[代碼戰(zhàn)爭]http://cn.codecombat.com/students?_cc=GoldPaperBed
