《HTML5文档头部常用标签》

头部标签

常用的头部标签

标题标签

<title></title>

元信息标签

<meta />
<!-- name: 可以为keywords、description、author -->
<meta name="名称" content="值" />
<!-- 设置服务器发送给浏览器的http头部信息，即文件类型信息 -->
<meta http-equiv="名称" content="值" />
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<!-- html5中的简化写法 -->
<meta charset="utf-8" />
<!-- 页面经过特定的时间后跳转至目标页面  时间：以秒为单位，url地址 -->
<meta http-equiv="refresh" content="10; url = 重新跳转的地址" />

• 单标签，可以重复出现
• 定义网页关键字（keywords）、作者姓名(author)、内容描述(description)、网页刷新时间

canvas 标签

在没有设置样式的前提下，canvas元素默认是完全透明的（肉眼看不见）

var canvasEle = document.querySelector('canvas'),
            context = canvasEle.getContext('2d')

        context.beginPath()
        context.moveTo(100, 100)
        context.lineTo(100, 200)
        context.lineTo(200, 200)
        // context.closePath()
        context.strokeStyle = 'red'
        context.lineWidth = 10
        context.fillStyle = 'blue'
        context.fill()
        context.stroke()

属性

display: inline (行内元素 和img 标签类似，可以设置宽高）

方法

getContext(args)   (获取画布上下文)
 var context = canvasEle.getContext('2d')
 context.beginPath()   // 开始选区
 context.moveTo(100, 100)  // 绘制起点
 context.lineTo(100, 200)   // 与上一个点之间进行连接成线
 context.lineTo(200, 200)
 context.closePath()   // 结束选区
 context.strokeStyle = 'red'   // 设置边框样式
 context.lineWidth = 10  // 设置边框宽度
 context.lineCap = 'round'  // 定义设置线段两端的样式（butt 方形  默认值, round 圆形 and square 方形）
 context.fillStyle = 'blue'   // 设置填充样式
 context.fill()  // 执行填充
 context.stroke() // 执行描边

context.fillStyle = 'skyblue'   // 填充样式
context.fillRect(100, 100, 100, 200)   // 填充矩形（起点（x, y），矩形宽高）

画图

画图片

var oImg = new Image()
        oImg.onload = () => {
            // context.drawImage(oImg, 0, 0, 90, 83, 100, 100, 150, 150)
            context.drawImage(oImg, 180, 0, 90, 83, 100, 300, 50, 50)
        }
        oImg.src = './images/ybi01.jpg'