零基础前端Vue的小白学习路——HTML基础（五）HTML5新增特性

• HTML5：新一代的HTML标准。 广义上指整个前端。
  • H5优势：
    • 针对JavaScript，新增了很多可操作的接口
    • 新增了一些语义化标签、全局属性
    • 新增了多媒体标签，可以很好替代flash
    • 更加侧重语义化，对于SEO更友好
    • 可移植性好，可以大量应用在移动设备上
  • 新增的语义化标签：
    • 新增的布局标签：
      • header：整个页面或部分区域的头部
      • footer：整个页面或部分区域的底部
      • nav：导航
      • article：文章、帖子、杂志、新闻、博客、评论等
      • section：页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）
      • aside：侧边栏
      • main：文档的主要内容，几乎不用，IE不支持
      • hgroup：包裹连续的标题，如文章主标题、副标题的组合，几乎不用
    • 新增的状态标签：
      • meter（双标签）：定义已知范围内的标量测量，例如：电量、磁盘用量等。
        • 属性：high（高值）/low（低值）/max（最大值）/min（最小值）/optimum（最优值）/value（当前值）
      • progress（双标签）：显示某个任务完成进度的指示器，一般用于表示进度条。例如：工作完成进度等。
        • 属性：max（目标值）/value（当前值）
    • 新增的列表标签：
      • datalist：用于搜索框的关键词提示
      • details：用于展示问题和答案，或对专有名词进行解释。
      • summary：写在details里面，用于指定或专有名词。
    • 新增文本标签：
      • ruby：包裹需要注音的文字
      • rt：写注音，rt标签写在ruby里面。
      • mark：文本标记，可以标记搜索结果中的关键字。
    • 新增表单控件属性：
      • placeholder：提示文字，适用于文字输入类的表单控件。
      • required：表示该输入项必填，适用于除按钮外其他表单控件。
      • autofocus：自动获取焦点，适用于所有表单控件。
      • autocomplete：自动完成，可以设置为on或off，适用于文字输入类的表单控件。（注意：密码输入框，多行输入框不可用）
      • pattern：填写正则表达式，用于对输入框内容格式的验证，适用于文本输入类表单控件。（多行输入不可用，空输入框不会验证，通常与required配合使用）
    • input新增type属性：
      • type:
        • email：邮箱地址
        • url：网址
        • number：
          • max,min（数值范围）,step（步长）
        • search：搜索
        • tel：电话
        • range：范围
        • color：颜色选择器
        • date/month/week/time/datetime-local：年月日/ 年月/年周/时间/日期+时间选择器
    • 新增多媒体标签：
      • video：
        • controls：让视频可操作
        • muted：让视频默认静音
        • autoplay：自动播放（前提静音再播放）
        • loop：循环播放
        • poster：封面图片
        • preload：预加载
          • none：不预加载
          • metadata：仅预先获取视频的元数据（例如长度）
          • auto：自动协调
      • audio：
        • controls：让音频可操作
        • muted：让音频默认静音
        • loop：循环播放
        • preload：
          • none
          • metadata
          • auto
    • 新增全局属性：
      • contenteditable：用户对网页元素的可编辑性
        • true：可编辑
        • false：不可编辑
      • draggable：元素可拖动性
        • true：
        • false：
      • hidden：隐藏元素（不占位）
      • spellcheck：拼写检查
      • contextmenu：规定右键点击元素弹出的菜单
      • data-*：用于存储页面的私有定制数据
  • H5兼容性处理：
    • 1、添加元信息，让浏览器处于最优渲染模式：
      • <meta http-equiv="X-UA-Compatible" content="IE=Edge">
      • <meta name="renderer" content="webkit">
    • 2、使用html5shiv让低版本浏览器认识H5的语义化标签：
      • <!--[if lt ie 9]> <script src="./html5shiv.js"></script> <![endif]-->