zoukankan      html  css  js  c++  java
  • HTML5新增标签

    H5新增标签

    结构标签 (双)

    • header 头面 页面头部 section的头部
    • footer 页脚
    • nav 导航
    • aside 侧边栏
    • main 主体内容
    • section 小节
    • article 文章
    • details 结合summary使用 属性open
    • summary 为details元素定义可见的标题
    • dialog 对话框 属性 open

    文本标签

    • mark 标记带有记号的文本

    • time 时间

    • meter 度量 温度/电量/容量

      • 属性 max/min/value/low/high/optimum值为数字
    • progress 进度 完成了多少

      • 属性 max/value
    • wbr 单词内换行 单

    • ruby 汉语拼音

      <ruby>同志<rt>tongzhi</rt></ruby>

    • rt 汉语拼音

    图像

    • figure 独立文档流 如文章插图
    • figcaption figure的标题
    • canvas 画布

    列表标签 兼容性差

    • menu
    • menuitem
    • command

    多媒体标签

    • video

      • src
      • width
      • height
      • controls
      • autoplay
      • muted
      • loop
      • poster
      • preload
    • audio

      • src
      • controls 控制
      • autoplay 自动播放
      • loop 循环
      • muted 让音频静音
      • preload 页面打开时就加载
      • poster 规定音频下载是显示的图像,或者用户点击播放按钮前显示的图像
    • source 单

      • src

      • type 指定音视频的 MIME类型

         音频 mp3    MIME:audio/mpeg
         Ogg      MIME:    audio/ogg
         wav     MIME:audio/wav
         视频  MP4  video/mp4
          webm  video/webm
         ogg     video/ogg	
        

    MIME类

    图片

    • .jpg image/jpeg
    • jpeg image/jpeg
    • .gif image/gif
    • .png image/png

    文本类

    • .html text/html
    • .css text/css

    可执行文件

    .exe application/

    表单

    • keygen 加密 是提供一种验证用户的可靠方法

    • datalist

        请使用 input 元素的 list 属性来绑定 datalist。
        <input type="text" id="text" name="mr" autocomplete="off" list="test"/>
        <datalist id="test" style="display:none">
         	 <option value="aa">aaaaaa</option>
          	<option value="aa">aaaaaa</option>
          	<option value="aa">aaaaaa</option>
         	 <option value="aa">aaaaaa</option>
         	 <option value="aa">aaaaaa</option>
        </datalist>
      
    • output 定义不同类型的输出 for/form/name

    H5智能表单

    input 新增 type值

    • email
    • url 必须输入URL地址(加http://)
    • number 输入数字
      • min
      • max
      • step 指定跳跃范围
      • value 默认值
    • range 取值范围 min/max/step/value
    • tel 电话号
    • search 效果和text一样 专用于搜索框 属性results
    • color 调出取色面板
    • date 选取日月年
    • month
    • week
    • time
    • datetime-lcoal

    Form元素 新增的 属性

    • autocomplete 值 off/on 规定form应该拥有自动完成功能
    • novalidate 不进行验证

    表单控件新增的属性

    • pattern input/textarea
    • multiple 规定input属性克选择多个值 email/file
    • placeholder 提示文字有别于value input/textarea
    • autofocus 自动获取聚焦
    • autocomplete 自动完成 off/of
    • required 必填项目,不填不能提交

    提交按钮 新增属性

    • formaction
    • formmethod
    • formtarget
    • formectype
    • formautocomplte
    • formnovalidate

    H5新增全局属性

    • contenteditalbe 是否可编辑 true/false
    • contextmenu 规定元素的上下文菜单
    • spellcheck 是否语法检查 true/false
    • draggable 是否拖动 true/false
      • <element draggable="true|false|auto">
    • dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接
      • <element dropzone="copy|move|link">
    • translate 是否翻译 yes/no
    • hidden 隐藏 不需要值
    • data-* 用于存储页面或应用次序的私有定制数据

    条件注释

    基础运算符

    • lt 小于
    • gt 大于
    • lte 小于等于
    • gte 大于等于
    • ! 不等于

    HTML5兼容性解决方案

    用法

    <!--[if 运算符 IE 版本]>
    	
    <![endif]-->
    <!--[if IE 8]> 仅IE8可见 <![endif]--> 
    <!--[if gt IE 8]>仅IE 8以上可见<![endif]—>
    
    • 使用html5shiv.js 让IE9以下浏览器识别html5标签

      • `<!--[if lt IE 9]>

      <![endif]-->`

    • 开启IE的兼容模式

      • <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    • 壳浏览器优先使用webkit内核

      • <meta name="renderer" content="webkit">

    兼容原则

    • 优雅降级
    • 渐进增强
  • 相关阅读:
    MySql 5.6以下版本自定义函数返回VARCHAR的中文问题
    解决Tomcat的java.lang.IllegalStateException: Cannot create a session after the response has been committed问题
    Lucene自定义规则范围查询
    JS吊炸天的代码
    又是正则
    JS显示指定字符数,避免一个中文两个字符的情况
    PostgreSql查看当前表的主外键关系
    java基础(个人学习笔记) A
    Elasticsearch5.5.1插件开发指南
    ElasticSearch5.5.1插件分类
  • 原文地址:https://www.cnblogs.com/pangwl/p/7273464.html
Copyright © 2011-2022 走看看