07-HTML其他常用标签(补充)

详情和概要标签(details)

• 作用: 利用summary标签来描述概要信息, 利用details标签来描述详情信息
• 注意点:
  • 默认情况下是折叠展示,只能看到<summary>标签中的概要信息, 想看见详情必须点击

<details>
    <summary>郑伊健</summary>
    简介：郑伊健，1967年10月4日出生于中国香港，籍贯广东恩平，香港影视演员、流行男歌手。1988年参加新秀歌唱大赛加入无线电视，因拍摄“阳光柠檬茶”广告而入行，拜罗文为师。1991年...
</details>

marquee标签

• 作用:定义跑马灯效果
• 标签属性
  • direction: 设置滚动方向 left/right/up/down
  • scrollamount: 设置滚动速度, 值越大就越快
  • loop: 设置滚动次数, 默认是-1, 也就是无限滚动
  • behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回
• 注意点:
  • marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好
  • marquee标签标签除了可以包裹文字也可以包裹图片标签

<marquee behavior="slide" direction="right" scrollamount="50" loop="3">我是文字</marquee>

无语义标签

• 因为当前的HTML中的标签只有一个作用, 就是用来添加语义而早期的HTML标签中有一部分标签是没有语义的,有一部分标签是用来修改样式的所以这部分标签就被淘汰了

例如: br hr <font> <b> <u> <i> <s>以上标签都是没有语义的,都是用来修改样式的
b(bold) 加粗文本, 没有任何语义的
u(underline) 给文本添加下划线, 没有任何语义的
i(italic) 将文本倾斜, 没有任何语义的
s(strikethourgh) 给文本添加删除线, 没有任何语义的

• 注意点:
  • 以后在企业开发中, 不到万不得已一定不要使用这些被废弃掉的标签如果一定要使用, 一般情况下都是用来作为CSS的钩子来使用
  • 什么是CSS钩子?
    • 利用一个没有语义的标签配合CSS完成一个图形的绘制,称之为CSS钩子
    • 在前端开发中显示某个图形的方案
      • 1.通过一个没有语义的标签配合CSS完成一个图形的绘制(适合简单的图形)
      • 2.通过字体图标来实现(适合复杂的图形,并且传输的速度快)
      • 3.通过图片来实现(适合复杂的图形,但是传输速度相对慢)

以下标签是有语义的标签
strong == b
ins == u
em == i
del == s
strong语义: 定义重要性强调的文字
ins语义(inserted): 定义插入的文字
em语义(emphasized): 定义强调的文字
del语义(deleted): 定义被删除的文字