10、H5标签和表单

一、关于html5的发展和其他概念知识

1、目前我们使用的是html的第五个大版本，目前仍处于持续更新中，标准制定组织为W3C。
2、主要浏览器
    (1)谷歌   chrome    目前国内大多数浏览器都是谷歌内核，换汤不换药（edge貌似也是基于谷歌浏览器的引擎开发的）
    (2)火狐   firefox   之前最受程序员青睐的浏览器
    (3)IE       IE      微软自带的浏览器，但是目前已经停止更新，但是仍然有一些政府部门在用。
    (4)欧朋   opera     在国内没啥用户，主要用户群体在北欧
    (5)苹果   safari    苹果电脑自带浏览器
3、h5语法相较于之前更加的灵活，没有之前版本要求的那么严格。
    标签大小写都能识别;
    可以省略单标签的/;
    双标签的结束标签也能不写（但是不推荐这样，因为可能补全错误）
    html、head、body、colgroup、tbody这些标签也可以省略不写。

二、h5新增的语义化标签

1、特点

   我们之前开发页面比较喜欢使用div标签，因为他不带有任何的默认样式和含义。
咱们h5新增了很多的语义化标签，这些标签特性和div一模一样不带有任何默认样式，
但是相较于div多了一个含义。

2、具体标签

    header        头部
    footer        尾部
    main          主体，重要的
    nav           导航栏
    section       模块
    article       与上下文无关的文章和内容        
    aside         aside搭配article使用，用来解释和修饰article里边的内容。
    figure        表示一段独立的流内容，figcaption元素为其添加标题(第一个或最后一个子元素的位置)

三、视频标签和音频标签

  1.video         视频
    特点:双标签，行内块元素
    属性
      controls        控制台
      autoplay        自动播放(很多浏览器把自动播放禁止了，需要搭配静音一起使用)
      muted           静音
      loop            循环播放
      poster          视频播放前的封面图片
  2.audio         音频
    特点:双标签，行内块元素
    属性
      controls        控制台
      muted           静音
      loop            循环播放
  补充：不同的浏览器对于视频和音频所支持的格式是不同的，如果说你想做兼容。
  可以在对标签中写一个source标签，在这个标签的src属性中写不同的格式，浏览器能识别哪个播放哪个。
      <video controls autoplay muted loop>
        <source src="xxx.mp4">
        <source src="xxx.ogg">
        <source src="xxx.webm">
      </video>

四、智能表单

回顾：
    form         表单
    fieldset        表单字段集
    legend         字段集标题(需要写在fieldset之内)
    input           最重要表单控件
      ——type      类型，决定了我们的表单控件具体是什么控件
      ——name      参数名
      ——value     默认数据，默认值，默认文本
input的type类型
  1.color             颜色选取框（拾色器）
  2.tel               唤起拨号盘(如需测试此效果，需要在手机上进行测试)
  3.search            搜索框(具有一个搜索的意义，而且输入内容后，会出现一个删除按钮)
  4.range             滑块框(默认最小值为0，最大值为100，默认值为50,间隔为1)
  5.number            数值框(有一个加减箭头，而且内容只能输入数字)
  6.date              日期选择框(选择年月日)
  7.time              时间选择框(选择小时、分钟)
  8.month             月份选择框(选择年、月)
  9.week              周选择框(选择某一年的第几周)
  10.datetime-local   本地时间选择框(选择本地年月日时分)
  11.email            邮箱输入框(要么不输入，输入必须是邮箱的格式，带@)
  12.url              网址输入框(要么不输入，输入必须是网址的格式，带http://或者https://)
搭配一些特定的type来使用的属性
  1.搭配number和range使用的属性
    ——min       最小值
    ——max       最大值
    ——step      变化间隔
  2.搭配email和url使用，可以输入多组值
    ——multiple
  3.搭配单选按钮radio和多选按钮checkbox使用的属性
    ——checked     默认选中
  4.搭配datalist标签来使用的list属性
      datalist    数据列表，需要搭配option使用，option的value属性是他的列表项内容
      使用的时候，将datalist的id名绑定给你所需要的标签
      option      列表项
      案例：<datalist id="clothes">
              <option value="羽绒服">
              <option value="棉服">
              <option value="航天服">
            </datalist>
            <input type='text' name='xx' list='clothes' />
其他的智能属性
  1.placeholder          输入前的提示文本信息
  2.required             必填项
  3.autofocus            自动获取焦点 (在一个页面中，此属性只能生效一次，第一个使用此属性的标签生效)
  4.disabled             不可用，禁用
  5.autocomplete         是否显示历史记录(不写的时候默认就有提示，使用该属性必须写name)
      on        开启
      off       关闭(着重记忆)
      ""        开启
  6.pattern             正则验证(需要复合某种规则才能提交成功,需要搭配正则表达式使用)
      纯数字的正则：^[0-9]*$