• html5新特性总结


    1.canvas绘图

    • 矩形和线条的绘制fillStyle,strokeStyle,路径beginPath,moveTo,lineTo,fill,stroke,closePath
    • 插入图片drawImage
    • 像素操作ImageData
    • 文字写入font,fillText,strokeText
    • 颜色渐变CanvasGradient对象createLinearGradient,createRadialGradient

    2.Form type= 

    • number:限制输入的数字 max min step
    • url:验证url格式
    • email:验证email格式
    • telephone:电话
    • color:获取颜色
    • range:创建滑块min max step
    • Date Pickers date(日月年) month(月年) week(周年) time(hour&minute)datetime(时间日月年) datetimelocal
    • list  datalist(下拉列表)

    3. 视频与音频

    • video
      •   支持Ogg,Mpeg4,webM
      •   autoplay controls preload
    • audio
      •   Ogg Vorbis,MP3,Wav
      •   autoplay,controls

    4. web 存储

    • localstorage
    • sessionstorage

    5.其他:

    1. 新的文档类型

    <!DOCTYPE html>

    2. link 与script不需要类型了

    <link rel="stylesheet" href="a/b/c.css" />
    <script src="a.js" />

    3. 语义化标签header、footer、Hgroup、nav、article、section、aside……

    4.有用的标签:

    • 高亮文本的标签<mark>
    • 小字体排版的标签<small>用于footer中的版权信息
    • figure与figcaption,将图像与文字描述联系起来

    5.有用的属性

    • placeholder:占位符
    • required:必要属性
    • autofocus:自动聚焦
    • contenteditable:内容可编辑
    • 正则表达式:pattern
    • input:type为email,在客户端验证邮箱;range:创建滑块,有min,max,step属性,可以通过after/before显示属性

    6. local storage:客户端存储,永久存储大的数据段,知道主动删掉

    7. audio:有controls进度条属性

    8. video:有preload预加载、controls进度条属性

     placeholder

    <input type="text" name="desplaceholder" placeholder="bxwlysy" />

     required必要属性

    <input type="text" name="desrequire" required />

     audio 

    <audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3"/>
    </audio>

    firefox支持.ogg webkit支持.mp3 ie不支持,opera10及以下支持.wav

    video preload controls

  • 相关阅读:
    02-30 线性可分支持向量机
    02-28 scikit-learn库之线朴素贝叶斯
    02-27 朴素贝叶斯
    02-26 决策树(鸢尾花分类)
    047 选项模式
    第二节:师傅延伸的一些方法(复习_总结)
    第一节:登录流程
    第一节:对应拼音编码查询(后续更新)
    前端对象
    Form表单
  • 原文地址:https://www.cnblogs.com/danranysy/p/4734534.html
Copyright © 2020-2023  润新知