HTML5基础知识汇总

HTML5基础知识

1什么是H5

官方解释：
     基于html5 和 css3 和一部分 js API结合开发的平台
 html5：
     html的第五代版本标准
     相对增加了一些新的标签，属性，表单类型，本地缓存
     机构相对松散

2html5新增的标签的和属性

1.语义化标签
 1-1.header:表示头部，块级元素
 1-2.footer:表示底部，块级元素
 1-3.section:表示区块
 1-4.nav:表示导航链接
 1-5.aside:表示侧边栏
 1-6.output:表示输出(多用在购物车总价计算)
 1-7.canvas:表示画布
 
 2.表单标签和属性
   +fieldest标签  表单集合的标签
      - 将表单内的几个表单元素包裹在一个fieldset内
      - disabled属性，将包裹内的所有文本框一起禁用
      - legend属性，出现在fieldset的属性里的第一个，表示标题，出现在边框上
   +html5中表单type属性新增的属性值
      - email
      - url
      - number ,可单独设置max、min和step属性
      - tel
      - search
      - date  年月日时间
      - datetime 
      - month 月份
      - week 周
      - range 范围进度条，可单独设置max、min和value属性来控制进读条位置
      - color 颜色选择器
    +表单属性
      - form 属性
         =>写在一个表单标签上
         =>form 属性的值, 就是你要关联的 form 标签的 id
         =>这个表单标签离开form标签后，它的提交不会提交
      - fromaction 属性
         =>from标签里的submit按钮点击会自动提交
         =>多个submit提交到一个位置
      - formmethod 属性
         =>form标签里面每一个submit提交方式都是一样
      - placeholder 属性
         =>表单元素的默认提示文字
         =>在输入任何内容时消失
         =>当表单里没有内容时再次显示
      - required 属性
         =>表示必填
         =>表单在form标签时,有该属性,那么会在表单提交时验证
      - autocomplete
         =>表示自动填充
         =>前提: 必须要有 name 属性, 并且该 name 属性曾经在你的浏览器上提交过
         =>下一次你聚焦的时候, 才会有提示内容出现
         =>值 分别 是 on 和 off
       - pattern
         =>可以填写一个正则表达式
         =>会按照正则的规则来验证表单
         =>注意: 填写正则的时候不需要 斜线, 只写 里面部分
       - multiple
         =>专门用在 type=file 标签上的
         =>只多选文件, 因为 type = file 默认是单选
     + datalist 标签
        => 使用规则
        1. datalist 是一个双标签
        2. 里面填写若干的 option
        3. 和一个 input 文本框关联
        => 关联表单元素的要求
        1. 表单元素身上填写一个 list 属性
        2. datalist 标签身上填写一个 id 属性
        3. 两个属性的值一致, 就关联了
        => 标签形式
        1. 可以根据你输入的内容自动筛选搜索
        2. value 可以不和 option 标签对内内容一样

3多媒体标签

 video 用法
      + 只接收几种固定格式的视频
      + ogg MP4 avi
    1. 基础使用
      <video src="视频地址"></video>
    2. 多视频格式兼容
      <video>
        <source src="视频源" type="video/mp4">
        <source src="视频源" type="video/ogg">
        <source src="视频源" type="video/avi">
      </video>
      + 按照从上到下的顺序引入
      + 如果第一个就可以播放, 那么后面的就不要了
      + 如果第一个不可以播放, 那么引入第二个
      + 第二个还不能播放, 引入第三个
    3. 标签上的属性
      + controls: 表示出现播放器控件
      + autoplay: 现在不能用了(靠js来实现打开页面播放)
      + loop: 循环属性
      + width: 设置视频可视区域的宽度(始终和高度等比缩放)
      + height: 设置视频可视区域的高度(始终和宽度等比缩放)
      + 当宽度和高度都设置了的时候, 会出现黑边, 保持视频等比
    audio 标签
      + 和视频标签是一样的 两种用法
      + 只支持一部分格式 mp3 和 ogg

      1. 基础使用 <audio src="音频源地址"></audio>
      2. 多格式音频使用
        <audio>
          <source src="音频源地址" type="audio/mp3">
          <source src="音频源地址" type="audio/ogg">
        </audio>
      3. 标签身上的属性
        3-1. controls 控制器
        3-2. autoplay 自动播放(现在不好使了)
        3-3. loop 循环播放