html5学习

发表于 | 分类于
| 字数统计: 4.1k 字

Html5特点:代码更加简洁,标签具有语义化,新增了一些属性,代码更加宽松,是互联网的下一代标准,新增了更加丰富且实用的规范, 如: 语义化标签、废除标签、丰富表单控件、拖拽事件、Canvas、SVG矢量图、Video、Audio、触屏touch事件、本地存储、应用缓存等.

HTML5新增标签

  • 结构标签:块级元素(有语义的div)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <header>    标记定义一个页面或一个区域的头部
    <nav>       标记定义导航链接
    <section>   标记定义一个区域(类似div)
    <aside>     标记定义页面部分的侧边栏
    <footer>    标记定义一个页面或一个区域的底部
    <article>   标记定义一篇文章
    <dialog>    标记定义一个会话框
    <hgroup>    标记定义文件中一个区块的相关信息
    <figure>    标记定义一组媒体内容以及他们的解释说明
    <figcaption> 标记定义figure元素的解释说明

  • 多媒体标签

    1
    2
    3
    <video>     页面中插入视频内容
    <audio>	    页面中插入音频内容
    <source>    可定义多个媒体资源

  • 绘图标签

    1
    2
    <canvas>    绘制图片
    <svg>	    矢量图

  • 注释标签

    1
    2
    3
    <ruby>      标记定义注释或音标
    <rp>	    告诉那些不支持Ruby元素的浏览器如何去显示
    <rt>	    标记定义对ruby的注释内容文本

  • 其他标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <menu>     标记重新定义用户界面的菜单配合commond或者menuitem使用
    <keygen>   标记定义表单里公钥
    <mark>	   标记定义有mark标记的文本(默认为黄色背景)
    <output>   标记定义一些输出类型,计算表单结果,配合表单事件
    <time>     标记定义一个日期/时间  没什么用便于seo
    <address>  标记定义文章或作者的详细信息 默认斜体显示
    <meter>    状态标签,温度等 <meter min='0' max='45' low='36' high='38' value='35' ></meter>
    <progress> 进度条 <progress  max="100"  value="30">
    <datalist> 为input定义下拉列表仅在chrome中有效

  • 废除元素

    1
    2
    3
    纯表现 basefont,big,center,font,s,strike,tt,u
    会产生负面影响 frame,frameset,noframes
    产生混淆 acronym,applet,isindex,dir

Html5新增表单

  • input表单type属性值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    type="email"     限制用户输入的必须为Email类型
    type="url"       限制用户输入的必须为url类型
    type="date"      限制用户输入的必须为日期类型
    type="datetime"  显示完整日期 含时区
    type="datetime-local"  显示完整日期  不含时区
    type="time"      限制用户输入必须为时间类型
    type="month"     限制用户输入的必须为月类型
    type="week"      限制用户输入的必须为周类型
    type="number"    限制用户输入的必须为数字类型
    type="range"     生成一个滑动条 其他属性
    type="search"    具有搜索意义的表单result=n的属性
    type="color"     生成一个颜色选择表单
    type="tel"       显示电话号码

  • 新增表单属性

    1
    2
    3
    4
    5
    required:        内容不能为空
    placeholder:     表单提示文字（占位符），输入文字后消失
    autofocus:       自动聚焦 页面加载之后
    pattern          正则表达式
    autocomplete     是否保存或提示用户输入值 默认为on 关闭off

  • 表单验证反馈

    1
    2
    3
    4
    5
    6
    7
    8
    9
    invalid 事件  validity对象(valid查看验证是否通过)
    input.addEventListener(“invalid”,fn,false)  验证失败时执行函数
    阻止默认验证:    ev.preventDefault()
    关闭验证:        formnovalidate
    输入值为空时:    valueMissing
    值与设定类型不匹配:typeMismatch
    输入值不满足正则: patternMismatch
    不符合自定义验证: customError
    自定义验证:      setCustomValidity()

Html5拖拽事件

  • 图片自带拖拽功能, 其他元素可设置draggable属性draggable:true
  • 拖拽元素(被拖拽的元素对象)事件:
    ondragstart 拖拽前触发
    ondrag 拖拽过程中,连续触发
    ondragend 拖拽结束触发
  • 目标元素(拖拽元素被拖到的对象)事件:
    ondragenter 进入目标元素触发
    ondragover 进入目标,离开目标之间,连续触发
    ondragleave 离开目标元素触发
    ondrop 在目标元素上释放鼠标触发,需要在ondragover里添加阻止默认行为,才可以实现

  • 拖放事件的执行顺序

    1
    2
    3
    4
    // Drop不触发  dragstart>drag>dragenter>dragover>dragleave>dragend
    // Drop触发时  dragstart>drag>dragenter>dragover>drop>dragend
    // (需要在dragover的时候阻止默认行为)
    // 拖拽的兼容问题 在火狐浏览器中需设置dataTransfer对象才可以拖拽除图片外的标签

  • dataTransfer对象下的属性有:
    setData() 设置数据key和value(必须是字符串)
    getData() 获取数据 根据key获取对应的value
    effectAllowed(none,copy,copyLink,copyMove,link,linkMove,move,all,uninitialized) 设置光标样式
    files 获取外部拖拽的文件,返回filesList列表,在filesList下有个type属性,返回文件的类型

    1
    2
    3
    4
    5
    6
    7
    8
    odiv1.ondragstart = function(ev) {
      var ev = ev || window.event
      ev.dataTransfer.setData('data', 'odiv1')
    }
    odiv2.ondrop = function(ev){
      var ev = ev || window.event
      ev.dataTransfer.getData('data')
    }

  • 图片上传与拖拽

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    /*
    1.获取外部的拖拽的文件  file=ev.dataTransfer.files
    2.新建一个文件读取对象  re=new FileReader()
    3.读取拖拽进来的文件    re.readAsDataURL(file[0])
    4.读取文件完成触发函数  re.onload=function(){}
    5.取得读取到的数据      this.result
    6.创建img标签 将取得数据赋值给img的src属性
    7.将img对象添加到目标对象中
    */
    odiv3.ondrop = function(ev){
      var ev = ev||window.event
      ev.preventDefault()
      this.indexHTML = ''
      var file = ev.dataTransfer.files // 获取外部拖拽的文件
      for (var i=0;i<file.length;i++) { // 遍历上传的文件
        if(file[i].type.indexOf('image') > -1){// 判断是否是图片类型
          var re = new FileReader() // 新建文件读取对象
          re.readAsDataUrl(file[i]) // 读取文件
          re.onload = function(){
            console.log(this.result)
            var img = doucment.createElement('img') // 创建图片对象
            img.src = this.result // 将读取到的文件数据赋值给img对象
            odiv3.appendchild('img') // 将img对象添加到拖拽的目标对象odiv3上
          }
        } else {
          alert('请上传图片类型')
        }
      }
    }

Html5 canvas绘图

  • canvas标签 <canvas id="can" width="300px" height="300px"></canvas>
    canvas元素本身是没有绘图能力的,所有的绘制工作必须在javascript中进行完成,拥有多种绘制图形,字符,图像的方法
  • canvas绘图环境设置
    cxt=getContext("2d") 目前只支持2d绘图环境(获取图形上下文)

  • 绘制路径

    1
    2
    3
    4
    5
    6
    cxt.beginPath()   开始路径
    cxt.closePath()   结束路径
    // 注:画每个图形最好都加上beginPath()和closePath()否则,会出现所有图形都连在一起,就是因为没有结束路径
    cxt.rect(x,y,w,h) 矩形路径
    cxt.save()        保存路径 新开辟一个空间来绘制图形 保存之前的画布内容
    cxt.restore()     恢复路径 释放之前的画布内容

  • 设置绘图样式和方法

    1
    2
    3
    4
    5
    6
    7
    cxt.moveTo(x,y)        将触笔移动(x,y)点
    cxt.lineTo(x,y)        绘制到(x,y)点
    cxt.stroke()           用触笔方法画线
    cxt.fill()             用填充方法画线
    cxt.fillStyle=”green”  设置图形(填充)方法样式的颜色
    cxt.strokeStyle=”blue” 设置边框(触笔)方法的颜色
    cxt.lineWidth=10       触笔的宽度(线宽)

  • 绘制线段

    1
    2
    3
    cxt.moveTo(x,y)        绘制线段的起点
    cxt.lineTo(x,y)        绘制线段的终点
    cxt.stroke()           使用触笔方法划线段

  • 绘制矩形

    1
    2
    3
    4
    cxt.fillRect(x,y,w,h)    填充方法绘制实心矩形 x,y起点坐标 w宽 h高
    cxt.strokeRect(x,y,w,h) 触笔方法绘制空心矩形
    cxt.clearRect(x,y,w,h)  清除画布内容
    // 当同时使用这两方法时,前面绘制的内容会被后面的覆盖

  • 图形边界样式

    1
    2
    // lineJoin 边界连接点的样式 miter(默认值) round(圆角) bevel(斜角)
    // lineCap  端点样式 butt(默认值) round(圆角) square(长度多出线宽一半)

  • 绘制圆形

    1
    2
    3
    4
    ctx.arc(x,y,r,0,360,false)
    // x,y  圆心坐标位置 r 圆半径  0,360 从0度到360度绘制一个圆形
    // true/false  顺时针/逆时针绘图
    // 注: 0,360  这是弧度制 角度*PI/180

  • 绘制曲线

    1
    2
    3
    4
    5
    6
    ctx.arcTo(x1,y1,x2,y2,r)
    // x1,y1 坐标一 x2,y2 坐标二 r圆弧半径
    ctx.quadraticCurveTo(dx,dy,x1,y1)
    // 贝塞尔曲线dx,dy控制点x1,y1 结束点
    ctx.BezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
    // 贝塞尔曲线: dx1,dy1 控制点一 dx2,dy2 控制点二 x1,y1 结束点

  • Canvas变换

    1
    2
    3
    ctx.translate(x,y)  // 从起始点为基准,移动到当前位置
    ctx.rotate(弧度)    //旋转,弧度公式 角度*PI/180
    ctx.scale(wb,hb)    //缩放比例(缩放canvas绘制的图片)

  • 绘制图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    drawImage(img,x,y,w,h)
    // 绘制图片(图片,x坐标,y坐标,宽度,高度)
    // 绘制图片时,要图片预加载之后再绘制,否则会因缓存而加载不出
    var can = document.getElementById('can')
    var ctx = can.getContext("2d")
    var img = new Iamge()
    img.src = 'images/1.jpg'
    img.onload = function(){
      ctx.drawImage(img, 0, 0, can.width, can.height)
    }
    // 绘制背景图片
    var can = document.getElementById('can')
    var ctx = can.getContext("2d")
    var img = new Iamge()
    img.src = 'images/1.jpg'
    img.onload = function(){
      ctx.fillStyle(ctx.createPattern(img, 'no-repeat'))
      ctx.fillReact(0, 0, can.width, can.height)
    }

  • 渐变

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // 线性渐变
    // createLinearGradient(x1,y1,x2,y2) // x1,y1 起始坐标点 x2,y2 结束坐标点
    // addColorStop(位置,颜色) //渐变点: 位置:渐变点 0~1之间 可多个
    var can = document.getElementById('can')
    var ctx = can.getContext("2d")
    var color = ctx.createLinearGradient(50, 50, 200, 200)
    color.addColorStop(0, '#f3c')
    color.addColorStop(1, '#03f')
    ctx.fileStyle = color
    ctx.fileReact(50, 50, 200, 200)
    // 径向渐变
    // createRadialGradient(x1,y1,r1,x2,y2,r2)
    // x1,y1,r1  内圆圆心坐标和半径  x2,y2,r2  外圆圆心坐标和半径
    var can = document.getElementById('can')
    var ctx = can.getContext("2d")
    var color = ctx.createLinearGradient(150, 150, 50, 150, 150, 100)
    color.addColorStop(0, 'blue')
    color.addColorStop(0.5, 'red')
    color.addColorStop(1, 'yellow')
    ctx.fileStyle = color
    ctx.beginPath()
    ctx.arc(150, 150, 100, 0, 360, false)
    ctx.closePath()
    ctx.fill()

  • 导出canvas图片

    1. 火狐,谷歌浏览器右键菜单可直接导出为图片
    2. img.src=can.toDataURL() //导出图片

  • 绘制文本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // strokeText(文本,x,y)    绘制空心文本
    // fillText(文本,x,y)       绘制实心文本
    // font="font-size font-family"  注 尺寸字体缺一不可
    // textAlign=""  文本左右对齐方式 // start center end left right
    // textBaseline="" 文本上下对齐方式
        // alphabetic 默认 文本基线时普通字母的字母基线
        // top 文本基线是em方框的顶端
        // hanging 文本基线是悬挂基线
        // middle  文本基线是em方框的正中
        // ideographic 文本基线是表意基线
        // bottom  文本基线是em方框的底端
    // measureText(文本).width  文本的实际宽度(只有宽度值)

  • 绘制阴影

    1
    2
    3
    // shadowOffsetX,shadowOffsetY  x轴,y轴偏移
    // shadowBlur   阴影模糊度
    // shadowColor  阴影颜色  默认颜色 rgba(0,0,0,0)

HTML5 SVG矢量图

  • SVG指可伸缩矢量图形,图像在放大和缩小时,图形质量不会损失,是使用XML来描述二维图形和绘图程序的语言
  • <svg xmlns=”http://www.w3.org/2000/svg” version=”1.1”></svg>

  • svg圆形

    1
    2
    3
    <circle cx="50" cy="50" r="30" stroke="red" stroke-wodth=""
      fill="none/transparent"  style=""></circle>
    // 圆心坐标 cx,cy  半径 r  fill stroke stroke-width style 样式

  • svg矩形

    1
    2
    3
    4
    <rect width="90" height="90" x="200" y="10" stroke="red"
    stroke-width="5" fill="transparent" rx="20"
    ry="20" stroke-opacity="0.7"></rect>
    // 宽/高 width/height  起始点 x,y  圆角 rx,ry  透明stroke-opacity

  • svg线段

    1
    2
    3
    <line x1="50" y1="50" x2="150" y2="150"
    stroke="red" stroke-opacity="0.7"></line>
    // 起始坐标 x1,y1  终止坐标 x2,y2

  • svg折线

    1
    2
    3
    <polyline points="50 50 50 150 150 50 150 150"
    stroke="red" fill="none"></polyline>
    // 空格或逗号隔开多个点

  • svg多边形

    1
    2
    <polygon points="50 50 50 150 150 50 150 150"
    stroke="red" fill="none"></polygon>

  • Text标签

    1
    2
    <text x="150" y="150" font-size="40px" text-anchor="middle">文字</text>
    // 起始位置 x,y  对齐方式 text-anchor:start/end/middle

  • Path路径

    1
    2
    3
    4
    5
    6
    <path d="M50 50L150 30L200 100" stroke="red"
    stroke-width="5" fill="none"> </path>
    // M(起始坐标)   L(结束坐标)  H(水平线)  V(垂直线)  Z(闭合路劲)
    // C,S,Q,T(贝塞尔曲线)   A(圆弧)
    // 大写为绝对坐标(具体的位置坐标)
    // 小写为相对坐标(相对于起始点的具体长度)

HTML5视频video

  • <video src="xxx.mp4" controls autoplay width="500" height="500" preload=”metadata” poster=”1.jpg” loop=”loop”></video>

  • Video的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    autoplay  视频加载完成后自动播放
    controls  向用户显示播放控件
    width     设置播放器宽度
    height    设置播放器高度
    loop      播放完是否继续播放该视频,循环播放
    muted     布尔属性，将视频静音
    preload   页面加载时就加载视频,并预备播放
    src       视频url地址
    poster    视频的封面，加载等待的画面图片poster=”url”
    Autobuffer 设置为浏览器缓冲方式,不设置autoplay才有效

  • video对象方法
    vid.paly() 播放 vid.pause() 暂停 vid.load() 重新加载

  • video对象属性
    1
    2
    3
    4
    5
    6
    7
    8
    currentTime:  开始到播放现在所用的时间
    duration:     媒体总时间(只读)
    volume:       0.0-1.0de 音量相对值
    muted:        是否静音false/true
    paused:       媒体是否暂停(只读)
    ended:        媒体是否播放完毕(只读)
    error:        媒体发生错误的时候,返回错误代码(只读)
    currentSrc:   以字符串的形式返回媒体地址(只读)

HTML5音频audio

  • <audio src="xxx.mp4" controls autoplay>
  • audio 属性
    1
    2
    3
    4
    autoplay="autoplay"  加载完自动播放
    controls="controls"  显示用户控件
    preload="preload"    页面加载时加载音频,并预备播放
    src="url"            要播放的音频的URL

HTML新增touch事件

  • 触屏事件touch

    1
    2
    3
    4
    5
    6
    touchstart   当手指触摸到屏幕时触发
    touchmove  手指在屏幕上移动时触发
    touchend   手指离开屏幕时触发
    touchenter  当触点进入某个元素时触发
    touchleaver  当触点离开某个元素时触发
    touchcancel  当触点由于某些原因被中断时触发

  • 触屏事件对象touchEvent

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    touches  当前位于手机屏幕上的所有手指列表  最多5个手指
    targetTouches  位于当前的元素上的手指的列表
    changeTouches 涉及当前事件的手指列表
    clientX  触摸目标在视窗中的X坐标
    clientY  触摸目标在视窗中的Y坐标
    identifier  标识触摸的唯一ID
    pageX  触摸目标在页面中的X坐标
    pageY  触摸目标在页面中的Y坐标
    screenX 触目目标在屏幕中的X坐标
    screenY 触摸目标在屏幕中的Y 坐标
    target  触摸的DOM节点目标

Html5 新增JS特性

  • 获取class列表属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // <div class=”div1 div2 div3”></div>
    var odiv = document.getElementsByTagName('div')
    odiv.classlist   //div1 div2 div3
    odiv.classlist.length    //3
    odiv.classlist.add("div4")  // 添加class类
    odiv.classlist.item(2)  // 返回类名在元素中的索引值从0开始
    odiv.classlist.remove("div2","div4")  //移除多个class类
    odiv.classlist.toggle("div5")   // 有class类则移除没有则添加
    odiv.classList.contains("div2") // 是否包含某个类名

  • 新增选择器

    1
    2
    3
    document.querySelector("#div|.cnt|div|css选择器") //只能返回一组中的第一个元素
    document.querySelectorAll(“css选择器”) // 可以获取一组元素
    document.getElementsByClassName("box")  // IE9以下不兼容

  • 获取自定义属性

    1
    2
    3
    4
    //<div id="div1" data-tew='自定义属性' data-tew-all='多节自定义属性'>自定义属性获取</div>
    var oDiv = document.querySelector('#div1')
    console.log(oDiv.dataset.tew)
    console.log(oDiv.dataset.tewAll)

Html5本地存储

  • sessionStorage 会话存储

    1
    2
    3
    4
    5
    // 生命周期为关闭浏览器窗口  关闭窗口数据销毁 在同一个窗口下数据可以共享
    sessionStorage.getItem(key)  // 获取存储数据
    sessionStorage.setItem(key,value) // 设置存储数据
    sessionStorage.removeItem(key)  // 删除存储数据
    sessionStorage.clear()  // 清除存储数据

  • localStorage 本地存储

    1
    2
    3
    4
    5
    6
    // 永久生效，除非手动删除，清理垃圾，存储在磁盘上,可以在多窗口共享
    // 只能存储字符串，可以将对象JSON.stringify()之后在存储,可能存储在浏览器内存和硬盘上
    localStorage.setItem(key, walue) // 设置储存内容
    localStorage.getItem(key) // 获取存储数据
    localStorage.removeItem(key) // 删除key
    localStorage.clear() // 清除所有数据

HTML5 历史管理history

  • history.pushState()

    1
    2
    3
    location.href // http://192.168.5.16:8000
    history.pushState({}, '', '/foo') // http://192.168.5.16:8000/foo
    history.pushState({}, '', '/') // http://192.168.5.16:8000

  • history.replaceState()

    1
    2
    3
    location.href // http://192.168.5.16:8000
    history.replaceState({}, '', '/foo') // http://192.168.5.16:8000/foo
    history.pushState({}, '', '/') // http://192.168.5.16:8000

  • history.go(number) 回退到指定历史记录

  • history.back() 等价于 history.go(-1)
  • history.forward() 则等价于 history.go(1)
-------------本文结束感谢您的阅读-------------
0%