HTML新增标签
h5新增:
*1) 新增标签
h5中新增的语义化标签有哪些？
div.header
块级元素
header、aside、footer、article、nav...
功能标签
进度条
<progress value="20" max="100"></progress>
input输入框
placeholder
更改字体颜色
type
number
date
month
2) 音视频
audio
video
属性
src 需要引入的视频资源地址
controls 加上该属性会显示视频的控件
控件一般包括：
暂停
播放
进度条
音量
全屏显示
autoplay 加上该属性会让视频在页面刷新的时候自动播放
loop 控制视频是否循环播放
height、width 控制视频的宽高
volume 视频的音量
0~1
duration 视频的总时长
currentTime 当前播放的进度
paused 当前视频的状态(是否暂停)
方法
play() 播放
pause() 暂停
load() 重新加载当前视频
3) 画布
canvas
专门用于绘制图形，只是一个容器，不具备绘制能力，需要我们编写js代码实现
1. 矩形
1、获取canvas对象
2、获取2d上下文context
3、设置样式
fillStyle 填充样式
strokeStyle 描边样式
4、设置线宽
lineWidth
5、绘制矩形
fillRect(x,y,width,height)
strokeRect(x,y,width,height)
2. 圆形
1、获取canvas对象
2、获取2d上下文context
3、设置样式
fillStyle 填充样式
strokeStyle 描边样式
4、设置线宽
lineWidth
5、开始创建路径
context.beginPath()
6、设置路径
context.arc(x,y,radius,startAngle,endAngle,true)
true为逆时针
false顺时针【默认】
7、关闭路径
context.closePath()
8、绘制圆形
context.fill() 填充圆
context.stroke() 描边圆
3. 渐变色
1、获取canvas对象
2、获取2d上下文context
3、创建渐变对象
var gradient = context.createLinearGradient(0,100,100,100);
4、添加渐变色
gradient.addColorStop(number,color)
number为偏移量0~1
5、将渐变对象赋值给填充样式
fillStyle = gradient
6、绘制矩形
4. 图片
1、获取canvas及2d图形上下文对象
2、创建图像对象
var image = new Image();
image.src = './xxx.jpg'
3、在图片加载完毕之后绘制图片
context.drawImage(image,x,y,w,h);
参数：图像，绘制位置的x坐标，起始y坐标，图片宽度，图片高度
4、设置平铺模式
var pattern = context.createPattern(image,'no-repeat');
将平铺对象赋值给填充模式
context.fillStyle = pattern;
5. 文字
1. 获取canvas对象
var canvas = document.getElementById('canvas')
2. 获取2d上下文
var context = canvas.getContext('2d')
3. 设置样式
填充样式 fillStyle
'red'
gradient
pattern
描边样式 strokeStyle
4. 设置线宽
context.lineWidth
5. 设置字体
context.font = '20px sans-serif'
context.textAlign = 'center'
6. 绘制字体
context.fillText('hello',x,y)
context.strokeText('hello',x,y)
4、拖拽
网页中的元素可放置在任意的位置，使用拖拽实现
1) 属性
draggalbe 设置元素可拖拽
2) 事件
1. 拖拽元素【需要改变位置的元素】
dragstart 开始拖拽
drag 正在拖拽
dragend 拖拽结束
2. 目标元素【被放置元素的元素】
dragenter 拖拽元素进入到目标元素
dragover 拖拽元素在目标元素中移动
drop 拖拽元素放置到目标元素中
3) 事件流
dragstart -> drag -> dragenter -> dragover -> drop -> dragend
4) 数据交互
拖拽元素与目标元素之间可以通过datatransfer实现数据交互
这个事件对象的一个属性
event.datatransfer
设置值
event.datatransfer.setData() ondragstart
获取值
event.datatransfer.getData() ondrop
设置视觉效果
event.dataTransfer.dropEffect = 'link' ondragover
event.dataTransfer.effectAllowed = 'move' ondragstart
link
copy
move
4) 如何将拖拽元素放置到目标元素
1. 前提
拖拽元素可拖拽
draggalbe
目标元素可放置
ondragover = function(){
event.preventDefault();
}
2. 思路
拖拽元素是谁？
id class tagname
数据交互
*5、存储
1) cookie
1. 创建cookie
document.cookie = 'username = tom'
2. 访问cookie
var cookie = document.cookie
3. 删除cookie
2) session
3) localStorage
localStorage.setItem('key','value')
localStorage.getItem('key')
localStorage.removeItem('key')
localStorage.clear()
如果存储的是一个对象，需要先将对象序列化JSON.stringify
获取时再反序列化JSON.parse()
css新增属性: border-color border-image border-radius
box-shadow(边框阴影) background-size
background-origin(定位) background-clip(控制元素背景显示区域)
表单元素的布尔属性
reversed 反转
checked 选中
disabled 禁用
required 必填
readonly 只读
multiple 是否可以多选
selected 多选,默认选中
formnovalidate 不验证表单
HTML块级元素
它可以独占一行，可以设置宽高度，默认是100%；
块元素分为文字类和容器类
文字类块元素:p、h1——h6
容器类块元素：div、table、tr、td、frame、ul>li、ol、dl、dt、dd（序列）
HTML行内元素
行元素：aimg input strong em del span
特殊字符：文字br   hr
HTML核心属性
id class title style