HTML标签 - HTML5补充内容

HTML标签 - HTML5补充内容

详情和概要标签

• 作用：

  • 利用summary标签来描述概要信息，利用details标签来描述详情信息。
  • 默认情况下是折叠展示，想看见详情必须点击。

• 格式：

<detals>
    <summary>概要信息</summary>
    详情信息
</detals>

video标签

• 作用：通过使用video标签可以在网页上播放视频。

• 格式：

<!--第一种格式-->
<video src=""></video>

<!--第二种格式-->
<video>
  <source src="" type=""></source>
</video>

.webm是网页专用视频格式。

• video标签属性：

  • src：用于控制video标签需要播放视频地址。
  • autoplay：用于控制video标签是否需要自动播放视频。
  • controls：用于控制video标签是否需要显示控制条。
  • poster：属性值填写图片路径地址。用于控制video标签视频没有播放之前所需要显示的显示的占位图片。
  • loop：一般用于做广告视频。用于控制video标签视频播放完毕后，是否需要循环播放。
  • preload：预加载视频。但是需要注意preload属性和autoplay属性相互冲突。如果设置了autoplay属性那么preload属性就会失效。
  • muted：是否静音播放。
  • width：设置视频在网页展示的的长度。
  • height：设置视频在网页展示的高度。

  由于视频数据非常非常的重要，所以五大浏览器厂商都不愿意支持别人的视频格式，所以导致了没有一种视频格式是所有浏览器都支持的，这个时候w3c为了解决这个问题，所以推出第二种video标签的格式。

  video标签的第二种格式存在的意义就是为了解决浏览器适配问题，video元素支持三种视频格式，我们可以把这三种格式都通过source标签指定给video标签，那么以后当浏览器播放视频时他就会从这三种中选择一种进行自己支持的格式来播放。

• 注意点：

  当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有一个前提条件，就是浏览器必须支持HTML5标签，否则同样无法播放，在过去的一些浏览器是不支持HTML5标签的，所以为了让过去的一些浏览器也能够通过video标签来播放视频，那么我们以后可以通过JS的框架，叫做html5media来实现。

audio标签

• 作用：使用audio标签可以在网页上播放音频。

• 格式：

<!--第一种格式--!>
<audio src=""></audio>

<!--第二种格式--!>
<audio>
  <source src="" type=""></source>
</audio>

• 注意点：

  • audio标签的使用和video标签的使用基本一样，video能够使用的属性在audio中大部分都能够使用，并且功能一样，只不过有3个属性不能用，height/width/poster。

marquee标签

• 作用：可以通过marquee标签实现跑马灯效果，内容从右至左滚动。

• 格式：

<marquee>
  内容
</marquee>

• 属性：

  • direction：

    • 作用：设置滚动方向。
    • 值：right、up、down、left（默认）

  • scrollamount:

    • 作用：设置内容滚动速度，值越大越快。

  • loop:

    • 作用：设置滚动次数，默认-1，也就是无限滚动。

  • behavior:

    • 作用：设置滚动类型。
    • 属性值：slide（设置滚动到边界就不再滚动，不会出边界消失），alternate（滚到边界弹回，来回滚动）

• 注意点：

  • marquee标签不是W3C推荐的标签，在W3C官方文档中也无法查询这个标签，但是各大浏览器对这个标签的支持非常好。

HTML中被废弃的标签

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

br、hr、font、b（bold缩写）、u（underlined缩写）、i（italic缩写）、s（strikethrough缩写）这些标签是没有语义的，都是用来修改样式的。

注意点：

• 以后在开发过程中，不到万不得已，一定不要使用这些被废弃掉的标签。
• 如果一定要使用一般情况下都是用来作为css的钩子来使用。

部分标签在HTML5当中已经被替换成具有实际语义的标签：

• strong == b 语义：定义重要性强调的文字（重要性更强）

• ins（inserted） == u 语义：定义插入的文字

• em（emphasized） == i 语义：定义前调文字（重要性稍弱）

• del（deleted） == s 语义：定义被删除的文字

可以根据文本实际语义替换相应的标签。

补充内容：字符实体

在HTML中，有的字符是被HTML保留的，有的HTML字符在HTML中有特殊含义，不能直接在浏览器中显示，要想显示出来，就必须通过字符实体显示。

 ：空格，一个 就是一个空格，有多少个 就是有多少个空格。

&lt：小于号<，（less than缩写）

&gt：大于号>，（greater than缩写）

&copy：版权符号。

注意点：

• 在HTML中，对空格、回车、tab不敏感，会把多个空格、回车、tab当作一个空格来处理。

参考链接：

W3School官方文档：www.w3school.com.cn