02-HTML-01-下

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的区别

  • b i 是视觉要素(presentationl elements)。分别表示无意义的加粗，无意义的斜体。
  • em strong 是表达要素(phrase elements)。 em(emphasized text)表示一般的强调文本，而 strong(strong emphasized text)表示比em语义更强的的强调文本。

s 与del u与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. 作业

  1. 【必做】页面制作

  2. 【选做】技术调查

  • HTML官方文档中查出下列标签的作用和效果，并在页面中列举实例。
No. 标签 说明 效果
1 sub - -
2 sup - -
3 blockquote - -
4 q - -
5 cite - -
  • HTML官方文档中图像标签img其他属性
No. 属性 属性值 说明
1 align - -
2 border - -
3 hspace - -
4 vspace - -

8. 其他

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容