H5新增语义化标签以及属性

结构标签

（1）
 独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。

（2）article  （文章） 文章核心部分
 （3）aside 标签内容之外相辅的信息  侧边栏
（4）header 头部/标题
(5)footer 底部
(6)nav 导航
（7）
标签 代替原来的li>img+p就是有文字有图片的区域

    
   

       img
       p
   

IE使用新标签的兼容性处理

利用js去创造这些新的标签 方法: document.createElement(‘ 标签名 ’);

 
    
2:

less than 小于 great than 大于 小于lt 大于gt

新增的input type属性值：

  衡量占有率的条  区间 范围的描述  三色 绿色   黄色  红色 

投票率  磁盘占有率  

min:最小值 0G 0
max:最大值 80G  100
low: 60分  
high: 90分 


pattern:提供了字符串模式匹配的验证方法   pattern=“^1[3,5,7,8][0-9]{9}$"
^字符的开始是数字1   $字符串的结尾是一个数字

[0-9]数字的意思  [3,5,7,8] 区间 从中选一个  电话号的第2位

email: 1:自动切换键盘 显示出@符号 2: 提供了邮箱的完整验证(格式)

tel: 1: 只是打开移动端的数字键盘 ,不提供验证(原因就是实现起来太复杂)

如果你想看到数字键盘弹出来,把你的文档发到qq上 ,拿手机的浏览器打开 一点 看一看 好了 不看就拉倒 知道就算了

number: 数字输入的地方 min : 最小值 max:最大值 —>减少后面js对数字区间的验证

step: 步长 ,增量

search: 功能不是搜索 只是用在搜索框上 提高用户体验 利用鼠标删除 不涉及键盘

range: 范围 , 区间 滑块,标尺

?h5的下拉列表的正确写法

常用新属性

逻辑属性 true 除了0以外 / false 0 selected = “true/false”===> 表单控件里有selected 属性的话 selected = “true" checked

  

    
个人信息表
   

    
    邮箱:

      
    地址:

    
    数字:



    
    电话号:

    
    请输入书籍名字: 


    


    
    



    
    体重:

    颜色:

     
    时间:

    
    日期: 


    
    具体时间: 

    
    具体时间: 


    月份:
    星期: 


    



  

多媒体标签

FLASH 音频和视频 H5 audio video

• audio：播放音频

• HTML5通过标签来解决音频播放的问题。 并且可以通过附加属性可以更友好控制音频的播放，

  autoplay 自动播放 谷歌高版本浏览器设置了不自动播放 可 以访问[chrome://flags/#autoplay-policy]此网址进行设置 如下图(http://chrome//flags/#autoplay-policy)

  [外链图片转存失败(img-ZR8mwaBJ-1564796487781)(E:\0408课堂代码\c3+H5笔记\h5+c3笔记\media\自动播放设置.png)]

  controls 是否显示默认播放控件

  loop 循环播放 loop 是否重复播放

  muted 静音作用

  由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

[外链图片转存失败(img-4xXVW6bD-1564796487783)(E:\0408课堂代码\c3+H5笔记\media\audio.png)]

多媒体 video

HTML5通过标签来解决音频播放的问题。

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放 -1为无限次

poster=“images/1.gif” 视频播放器的初始图片

width 设置播放窗口宽度

height 设置播放窗口的高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考