美文网首页
6.HTML的标签(4)

6.HTML的标签(4)

作者: 海鹏_b4c0 | 来源:发表于2018-06-29 14:37 被阅读0次

    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中有特殊含义,不能直接在浏览器显示,如果要显示,必须通过字符实体
    • 字符实体:
      • &nbsp; 空格
      • &lt; 小于号< less than
      • &gt; 大于号> greater than
      • &copy; 版权符号 ©

    相关文章

      网友评论

          本文标题:6.HTML的标签(4)

          本文链接:https://www.haomeiwen.com/subject/lipoyftx.html