0. 复习
- HTML
- 标签
- 属性
单击查看详细
1. body标签属性
| No. | 属性 | 属性值 | 说明 |
|---|---|---|---|
| 1 | bgcolor |
颜色名/颜色值 | 文档的背景颜色 |
| 2 | background |
URL | 文档的背景图像 |
| 3 | topmargin |
像素值/百分比 | 页面与浏览器顶端的距离 |
| 4 | bottommargin |
像素值/百分比 | 页面与浏览器底部的距离 |
| 5 | leftmargin |
像素值/百分比 | 页面与浏览器左边的距离 |
| 6 | rightmargin |
像素值/百分比 | 页面与浏览器右边的距离 |
注意：topmargin、bottommargin、leftmargin、rightmargin不是标准属性。
2. 文本格式标签
| No. | 标签 | 说明 | 效果 |
|---|---|---|---|
| 1 | strong |
更强烈的强调 | 文本加粗 |
| 2 | em |
强调(emphasize) | 文本斜体 |
| 3 | del |
删除(delete) | 中划线 |
| 4 | ins |
插入(insert) | 下划线 |
注意：
ins通常与del配合使用。例如商品价格：<del>$30.00</del><ins>$15.00</ins>
练习：文字强调、插入、删除等效果
回顾 & 提问
2.1 strong与em区别
-
em默认样式是斜体，strong默认样式是粗体。 -
em用来局部强调(阅读到时才会注意)，strong则是全局强调(看见某文时立刻注意)。
2.2 strong与b em与i的区别
-
bi是视觉要素(presentationl elements)。分别表示无意义的加粗，无意义的斜体。 -
emstrong是表达要素(phrase elements)。em(emphasized text)表示一般的强调文本，而strong(strong emphasized text)表示比em语义更强的的强调文本。
s与delu与ins的区别也是如此。
3. 实例说明
文字加粗 倾斜 删除等效果
回顾 & 提问
4. 水平线标签hr
- 查看文档
| No. | 属性 | 属性值 | 说明 |
|---|---|---|---|
| 1 | width |
像素值/百分比 | 元素的宽度 |
| 2 | size |
像素值 | 元素的高度 |
回顾 & 提问
5. 图像标签img
| No. | 属性 | 属性值 | 说明 |
|---|---|---|---|
| 1 | src |
URL | 图片路径 |
| 2 | alt |
文本 | 缺失提示 |
| 3 | title |
文本 | 鼠标悬停提示 |
| 4 | width |
像素值/百分比 | 元素的宽度 |
| 5 | height |
像素值/百分比 | 元素的高度 |
常见的图片格式
| No. | 格式 | 优点 | 缺点 |
|---|---|---|---|
| 1 | .bmp | 无损压缩，图质最好(百万色) | 文件太大，不利于网络传输 |
| 2 | .gif | 可动图 | 最多256色，画质差 |
| 3 | .png | 可透明 | 画质中等 |
| 4 | .jpg | 文件小，利于网络传输 | 画质损失 |
| 5 | .icon | 图标 | 尺寸长宽是4的倍数 |
Web页面图片常用格式为：.jpg,.png,.gif。
6. 实例说明
标题加入横线，加入图片，让页面更加完善
- 绝对路径与相对路径
7. 作业
【必做】页面制作
【选做】技术调查
- HTML官方文档中查出下列标签的作用和效果，并在页面中列举实例。
| No. | 标签 | 说明 | 效果 |
|---|---|---|---|
| 1 | sub |
- | - |
| 2 | sup |
- | - |
| 3 | blockquote |
- | - |
| 4 | q |
- | - |
| 5 | cite |
- | - |
- HTML官方文档中图像标签
img其他属性
| No. | 属性 | 属性值 | 说明 |
|---|---|---|---|
| 1 | align |
- | - |
| 2 | border |
- | - |
| 3 | hspace |
- | - |
| 4 | vspace |
- | - |
