HTML5笔记(一)

231 阅读3分钟

一 HTML5概述

HTML5是定义HTML标准的最新的版本

约等于 HTML+CSS+JS

1.1 HTML5的优势

1、跨平台【借助于浏览器,Java跨平台指的是虚拟机(jvm)跨平台】

2、快速迭代

3、降低成本

4、导流入口多

5、开发效率高

1.2 H5开发指移动端开发

1.3 简单认识IOS、安卓、web前端

相同点:三者都是画页面的

区别

IOS:oc画页面,c/s架构,跑在设备里

安卓:java画页面,c/s架构,跑在设备里

web前端:b/s架构,跑在浏览器上

  • 指定网页解码方式
<meta charset="UTF-8"> 
  • 指定浏览器渲染模式
<!DOCTYPE>  
  1. <!DOCTYPE> 标签前面不能有其他标签,包括注释,有些浏览器会因为这些东西而变成怪异模式,通常情况下,位于一个HTML文档的最前面的位置。

  2. 申明了就是标准模式,不写就是怪异模式。

  3. DOCTYPE,或者称为Document Type Declaration(文档类型声明)。

  4. 因为浏览器必须在解析HTML文档正文之前就确定当前文档的类型,以决定需要采用的渲染模式,不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析。

  • 根元素
<html></html>

二 HTML5语义化

2.1 语义化的好处

  1. HTML5用更语义化结构化的代码标签代替大量的无异议的div标签
  2. 这种语义化的特性提升了网页的质量和语义
  3. 对搜索引擎更加的友好
  4. 这些标签没有任何默认样式,除了会让文本另起一行。

2.2 常用的语义化标签

<header><footer><nav><section>

2.3 不支持HTML5的浏览器中使用HTML5

需要一个特殊的CSS样式,因为未知元素默认会样式化为display:inline

section, article, aside, footer, header, nav, hgroup {
  display:block;
}  

三 使用canvas完成基本的在线签名功能

canvas简介 canvas 是 HTML5 新增的标签,用于在网页上绘制图形。

使用场景

随着计算机和网络技术的飞速发展,在线签名技术越来越多的被应用在无纸化办公中,这种直观便利的操作不仅可以大幅提升办公效率,而且使用数字化存储方式,避开了传统的纸质签字存储查阅困难等问题。在我们在日常生活中,已经有很多场景使用在线签名技术,例如:pos机刷卡签字、快递签收签字、银行或机关单位业务办理签字等。

demo地址

demo地址

demo解析

1、取画笔

if(canvas.getContext){
    var ctx = canvas.getContext('2d')
}

2、添加鼠标操作事件

JavaScript鼠标事件有:

事件事件含义
onClick鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
onDblClick鼠标双击事件
onMouseDown鼠标上的按钮被按下了
onMouseUp鼠标按下后,松开时激发的事件
onMouseOver当鼠标移动到某对象范围的上方时触发的事件
onMouseMove鼠标移动时触发的事件
onMouseOut当鼠标离开某对象范围时触发的事件

使用鼠标拖拽事件api来进行画布绘制:mousedown

canvas.onmousedown = function(ev){
    ev = ev || window.event 
    ctx.beginPath()
    document.onmousemove = function(ev){
        ev = ev || window.event
        ctx.moveTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop)
        document.onmousemove = function(ev){
            ctx.save()
            ctx.strokeStyle = 'skyblue'
            ev = ev || event
            ctx.lineTo(ev.clientX - canvas.offsetLeft,ev.clientY - canvas.offsetTop)
            ctx.stroke()
            ctx.restore()
        }
    }
    document.onmouseup = function(){
	    document.onmousemove = document.onmouseup = null
    }
    return false
}

每次放下鼠标都重新绘制线条 使用save()和restore()方法包裹一组样式

四 使用canvas 完成基本的时钟

demo地址

demo地址

demo解析

结合了所有基础api

五 使用canvas 完成基本的橡皮擦效果

demo地址

demo地址

demo解析

用到了canvas合成和像素操作api

六 元素拖拽

demo地址

demo地址