html5新增的元素以及DOM拓展

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">
• 写

注意:

• option可以写成单标签
• 如果 type="url " value值加上http:// 协议

      网址：
          

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 单标签引入不同格式的视频文件

谷歌浏览器在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') 返回值是一个布尔值有 true 无false
• 获取指定项 元素.classList.item(数值)

自定义属性 ★

• 设置
  • 以data-开头
  • 建议 不要使用纯数字 不要使用特殊字符 不要使用大写字符 不要使用汉字 使用多个单词用横线链接

• 获取
  • 元素.dataset[wCG] 获取的时候使用驼峰命名法

网络监听

• 在线ononline

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

• 断线 onoffline

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