美文网首页让前端飞
html5新增的元素以及DOM拓展

html5新增的元素以及DOM拓展

作者: 羽翼的翼 | 来源:发表于2019-02-25 18:57 被阅读0次

    HTML5 简介

    html的第五个版本

    • 新增特性 api 多媒体 语义化 过渡 动画
    • 废弃 一些标签
    • 支持程度 ie8以下不支持 ie9 以上选择性支持

    常用的语义化标签 ★

    • 头部 header
    • 导航nav
    • 主体 main ie浏览器不识别
    • 文章 article
    • 侧边 (主体之外) aside
    • 底部footer

    语义化标签兼容ie浏览器 ★

    • 方式一:
      • 手动创建语义化标签,将其转换成块级元素
    • 方式二:
      • 引入第三方文件 html5shiv.min.js
        ie注释 优化 快捷方式cc:ie + tab

    h5针对type属性新增表单元素 ★

    • 邮箱 type="email" 提供邮箱验证
    • 电话 type="tel" 会在移动端调取数字键盘
    • 搜索 type="search"
    • 数字 type="number"
      • 最大值 max
      • 最小值min
      • 默认值value
    • 范围 type="range"
      • 最大值 max
      • 最小值 min
      • 默认值 value
    • 拾色器 type="color"
    • 网络地址 type="url" 必须加协议 http:// https://
    • 日期
      • 时间 type="time"
      • 日期 type="date"
      • 时间+日期 type="datetime-local" datetime
      • 周 type="week"
      • 月份 type="month"

    表单新增的其他属性 ★

    • 自动获取焦点autofocus
    • 提示占位 placeholder ="提示信息"
    • 自动完成 autocomplete ="on / off"
      • 必须设置name属性
      • 必须成功提交过一次
    • 必须填写required
    • 验证正则表达式 pattern="正则表达式 "
    • 多选multiple填写多个邮箱用逗号隔开
    • 关联当前表单之外的表单
      • 被关联的表单元素 设置form = "关联的表单id值"
      • 关联的表单设置id属性

    可输入的下拉列表

    • 先写一个< input type="text" list="a">
    •       <datalist  id="a" >
            <option  value ="实际值"  label="提示值"> </option>
           </datalist> 
      
      

    注意:

    • option可以写成单标签
    • 如果 type="url " value值加上http:// 协议
          网址:<input type="url" list="urls">
              <datalist id="urls">
                  <!--如果input输入框的type类型是url,那么value值必须添加http://-->
                  <option value="http://www.baidu.com" label="百度"></option>
                  <option value="http://www.sohu.com"></option>
                  <option value="http://www.163.com"></option>
              </datalist>
    

    H5新增的表单事件 ★

    • oninput 只要值修改 就实时触发
    • oninvalid 验证不通过触发 修改提示信息 当前表单元素.setCustomValidtity('修改的提示信息');

    进度条

    progress

    • 当前 值 value ="10"
    • 最大值 max ="100"

    度量器

    meter

    • 当前 值 value ="10"
    • 最大值 max ="100"
    • 最小值 min = "0"
    • 较高的 high="90"
    • 较低的 low = "60"
    • fieldset
    • legend
    • box-sizing: border-box; 盒子内减模型 宽度 = 内容 + padding + border

    多媒体标签 ★

    音频 audio

    • src 文件路径
    • controls 面板控制器
    • autoplay 自动播放
    • loop 循环播放

    视频 video

    • src 文件路径

    • controls 面板控制器

    • autoplay 自动播放

    • loop 循环播放

    • width 宽度

    • height 高度

    • poster 修改视频的默认第一帧画面

    • muted 静音

    • 由于各个浏览器支持的视频格式不同, 单独将视频的src抽离 用source 单标签引入不同格式的视频文件

           <video >
               <source src=".mp4" type="video/mp4">
               <source src=".flv" type="video/flv">
               <source src=".rmvb" type="video/rmvb">
          </video>
      
      

    谷歌浏览器在18年提出不再支持视频的自动 --- 避免广告 解决了用户流量

    解决方式一 视频加muted

    方式二 chrome://flags/#autoplay-policy

    DOM拓展

    获取元素★

    • 获取单个元素document.querySelector('选择器');
    • 获取多个元素 document.querySelectorAll('选择器');

    类样式操作 classList ★

    • 添加 元素.classList.add('red','pink') 添加多个用逗号隔开
    • 移除 元素.classList.remove('red','pink')移除多个用逗号隔开
    • 切换 元素.classList.toggle('red')
    • 检测是否包含 元素.classList.contains('red') 返回值是一个布尔值truefalse
    • 获取指定项 元素.classList.item(数值)

    自定义属性 ★

    • 设置
      • data-开头
      • 建议 不要使用纯数字 不要使用特殊字符 不要使用大写字符 不要使用汉字 使用多个单词用横线链接
      • <p data-w-c-g="王光" ></p>
    • 获取
      • 元素.dataset[wCG] 获取的时候使用驼峰命名法

    网络监听

    • 在线ononline

         window.addEventListener('online',function(){
                 处理的程序
           })
      
      
    • 断线 onoffline

        window.addEventListener('offline',function(){
          处理的程序
        })
    
    
    

    相关文章

      网友评论

        本文标题:html5新增的元素以及DOM拓展

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