美文网首页
h5新属性

h5新属性

作者: 刘松阳 | 来源:发表于2020-04-09 14:43 被阅读0次

    header标签 :页面的头部,或者一个部分或一个版块的头部

    footer 标签 :页面的底部,或者一个部分或一个版块的底部

    nav 标签:表示导航

    article 标签 表示一篇独立完整的文章

    section标签 表示的一个部分,可以是article里面的一个部分

    figure 标签 完整中独立存在的一部分, figurecaption附加说明

    aside标签 表示侧边栏,或者可以独立于页面单独存在的一个部分

    mark 做记号,特殊表明的部分,默认背景颜色是黄色

    time 标签 时间

    hgroup标签 标题的组合

    新增了表单相关元素和属性
    <input type="url"> 输入的内容必须是网址,必须以http或者https开头,移动端会弹出带.com按键的键盘

    <input type="email"> 输入的内容必须是邮箱,必须带@符号,移动端会弹出带@符号的键盘
    <input type="number"> 输入数字,移动端出现数字键盘

    value="1" max="10" min="0" step="2"

    有效值:0 2 4 6 8 10

    有效值跟谁有关

    范围是max和 min之间的值

    具体取值是多少和min有关

    Value 默认值

    Max 最大值

    Min 最小值

    Step 步长

    <input type="tel"> 电话号码,移动端出现电话号码的键盘

    <input type="range"> 滑块

    <input type="color"> 用于选取颜色

    <input type="search"> 搜索框

    <input type="month"> 用户选择一整个月

    <input type="week"> 用户选择一整个周

    <input type="time"> 用户选取小时和分钟

    <input type="datetime"> 用户手动输入日期

    <input type="datetime-local"> 用户选取年月日小时分钟

    Datalist 标签 用于写选项列表,和option标签配合使用

    <input type="url" list="smart">

    <datalist id="smart">

       <option value="https://www.baidu.com/">百度</option>
    
       <option value="http://www.4399.com/">4399小游戏</option>
    

    </datalist>

    <input type="url" list="smart">

    <datalist id="smart">

      <option value="https://www.baidu.com/">
    
      <option value="http://www.4399.com/">
    

    </datalist>

    required 必填项

    autofocus 自动获取焦点

    autocomplete 自动填充

    multiple 上传多个文件

    pattern="" 填写符合正则表达式的内容

    form 属性可以把form标签以外的内容提交

    <form id="form1">

    </form>

    <input type="text" form="form1">

    1. 新增了音频和视频
      <audio src="videoAudio/YouAreMySunshine.mp3" controls autoplay muted loop></audio>

    Src 路径

    Controls 播放的控制台,播放控件

    Autoplay 自动播放

    Muted 静音播放

    Loop 循环播放

    preload="auto" 在没有autoplay的时候,页面加载,音频文件就开始加载,不加这个属性的话,是点击音乐播放,这个音频文件才开始加载

    <audio controls autoplay muted loop>

     <source src="videoAudio/YouAreMySunshine.mp3">
    
     <source src="videoAudio/YouAreMySunshine.ogg">
    
     <source src="videoAudio/YouAreMySunshine.wav">
    
        您的浏览器不支持音频文件,请下载谷歌浏览器
    

    </audio>

    Video 视频

    height="500"

    width="1000"

    poster="pic.png" 视频播放之前显示的画面

    <video src="videoAudio/despacito.mp4" controls muted loop height="500" width="1000" poster="pic.png" preload="auto">

        <source src="videoAudio/despacito.mp4">
    
        <source src="videoAudio/despacito.ogg">
    
        <source src="videoAudio/despacito.webm">
    
        您的浏览器不支持视频文件,请下载谷歌浏览器
    
    </video>
    

    相关文章

      网友评论

          本文标题:h5新属性

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