video标签(Html5标志性新标签)

• 作用: 播放视频(只能播专用格式?.webm)
• 格式:

<video src="****.webm" autoplay="autoplay">

</video>

• 属性
  • src:视频地址
  • autoplay: 自动播放
  • controls: 显示控制条 controls="controls"
  • poster: 视频播放前点位图片
  • loop: 循环
  • preload: 预加载,和autoplay相冲突,autoplay优点
  • muted: 静音
  • width height

video标签的第二种格式

<video>
    <source src="***.webm" type="video/webm"></source>
    <source src="***.mp4" type="video/mp4"></source>
    <source src="***.ogg" type="video/ogg"></source>
</video>

• 说明:各大浏览器厂商都不愿意支持别人的视频格式,没有一种视频格式可以被所有浏览器支持,所以推出了第二种video标签格式.
• 把以把三种视频格式都写入source,浏览器会自己选择
• 三种视频格式是: mp4/webm/ogg
• 注意点:
  • video标签第二种格式应用前提是浏览器必须支持Html5
  • JS框架HTML5media可以让旧浏览器也支持video

audio标签

• 作用:播放音频
• 格式:与video一样 <audio src=""> </audio> 或 <audio><source src="" type=""></audio>
• 注意点:
  • video的属性audio都能用
  • 除了这3个属性: height/width/poster

详情和概要标签

• 为了解决空间问题
• 格式:

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

marquee标签

• 注意点: marquee标签不是w3c推荐标签,也无法查询,但各大浏览器支持好
• 作用: 跑马灯
• 格式: <marquee>内容</marquee>
• 属性:
  • direction 滚动方向 left/right/up/down
  • scrollamount 滚动速度
  • loop 滚动次数 默认-1无限
  • behavior 滚动类型
    • slide 边界停止
    • alternate 边界弹回
  • 可以让图片滚动

HTML被废弃的标签(被废弃)

• 为什么会被废弃

  • 早期标签有一部分没有语义,只是修改样式,现在淘汰

• 废弃的标签:

  • <br> <hr> <font>
  • <b> <u> <i> <s>

• 注意点:

  • 不到万不得已,不要使用这些废弃标签
  • 如果一定要用,一般都是用来作css钩子

• 替代标签:

  • strong=b ins=u em=i del=s 新标签是有语义的
  • strong语义:字义重要性强调的文字
  • ins语义: 字义插入文字
  • em语义: 字义强调文本(弱于strong)
  • del语义: 字义被删除文字

特别注意: 学习HTML只关注语义,不要关注样式

字符实体

• 原因: 在HTML中对空格/回车/tab不敏感,会把多个当一个
• 字符实体: 有些字符是被Html保留的,在Html中有特殊含义,不能直接在浏览器显示,如果要显示,必须通过字符实体
• 字符实体:
  •   空格
  • < 小于号< less than
  • > 大于号> greater than
  • © 版权符号 ©