H5的学习记录

新增标签

语义化标签

1.header

<header></header>

表示头部

2.nav

<nav></nav>

导航栏

3.main

<main></main>

表示页面主体

4.section

<section></section>

用来区分大模块

5.aside

<aside></aside>

表示侧边栏

6.article

<article><article>

表示文章

7.footer

<footer></footer>

表示底部

功能性标签

1.progress

表示进度条

<progress></progress>

属性：

value:进度的多少

max：进度条的长度

效果:

 

2.input

表示输入框

<input>

属性：

type：text/number/email/tel/url/search/time/date/submit/range（拖动滑块）/file（上传文件）

placeholder：输入提示信息

autofocus:载入页面时光标自动聚焦在输入框

multiple:可以选择多个值

 效果：

3.video

播放视频

<video></video>

属性：

src:视频的地址

controls：显示视频的控件

muted：视频为静音

autoplay：加载完网页后视频自动播放，必须与muted静音一起使用，否则不能自动播放

loop：自动循环播放

volume:音量，0~1

duration：视频的总时长

currentTime：当前播放进度

paused：判断当前视频状态是否是暂停，如果是暂停返回true

width：设置宽度

height：设置高度

 方法：

play（）播放

 pause（）暂停

 load（）重新加载

 快进，后退，快倍速，慢倍速

 实现同一个按钮进行播放/暂停

 获取视频进度的百分比

 4.audio

音频

<audio></audio>

用法同上video

5.canvas

本质是一个容器，可以看作是画布，专门用来绘制图形

绘制矩形

 效果：

 绘制圆形

效果：

 context.arc(x, y, radius, startAngle, endAanle, direction),参数分别是：圆心x坐标，圆心y坐标，半径，开始角度，结束角度，绘制为逆时针，false为顺时针（默认）

PI =180度， PI = 3.1415弧度

角度到弧度的运算方式：Math.PI / 180 * startAngle

渐变色

效果：

 var gradient = context.createLinearGradient(xstart,ystart,xend,yend)

参数为：起始点x坐标，y坐标，结束点x坐标，y坐标。

 gradient.addColorStop(number,'color')

number为偏移量，0～1之间

绘制矩形 context.fillRect(x,y,宽，高)

图片

效果：

 

context.drawImage(image，x，y) 参数：图像，绘制位置的x坐标，y坐标

context.drawImage(image，x，y，w，h) 参数：图像，绘制位置的x坐标，y坐标 ，宽，高

图片平铺模式：

绘制文字

context.fillText(text,x,y,maxWidth)

text:绘制的文本

x:文本开始的x轴位置

y：文本开始的y轴位置

maxWidth：允许的文本最大宽度（可省略）

Web存储

cookie

每次浏览器向服务器发送请求都需要携带cookie，一般情况下cookie产生于服务器端，保存于客户端。但是我们也可以通过js来产生cookie，通过js-cookie库来操作cookie。

cookie特点：

1.数据持久型，数据在浏览器关闭时才删除

2.不需要服务器资源，cookie存储在客户端并发送给服务器读取

3.可控制cookie的生命周期

cookie基本用法如下：

sessionStorage

会话存储

特点：

1.页面在会话存储就在，并且重新加载或者恢复页面会话存储还保持在页面中

2.会话存储在单个页面中，即使是多个相同地址的网页，会话存储也不相通

3.页面关闭会话存储则被清除

基本用法：

 点击按钮，创建一个sessionStorage存储

 localStorage

本地存储

特点：

1.数据始终有效，窗口或浏览器关闭后数据还在

2.同一个url窗口的数据是共享的

基本用法：

 点击按钮，创建一个localStorage

拖拽

属性：draggable：true/false

事件：

被拖拽元素：

dragstart  开始拖拽

drag  正在拖拽

dragend  结束拖拽

目标元素（被放置拖拽元素的元素）：

dragenter    被拖拽元素进入到目标元素中

dragover   被拖拽元素在目标元素中移动

drop   拖拽元素放置到目标元素中

拖拽事件流：

当拖动一个元素放置到目标元素上时会按照如下顺序依次触发：

dragstart--drag--dragenter--dragover--drop--dragend

数据交互 dataTransfer

在拖拽事件中，我们可以通过datatransfer来实现数据交互。他是事件对象的一个属性event.datatransfer。用于从被拖拽元素向目标元素传递字符串格式的数据。

设置值：event.datatransfer.setData() 在元素拖拽开始时设置 ondragstart

获取值：event.datatransfer.getData() 在元素放置时获取 ondrop

如何将拖动元素放置到目标元素

1.前提

拖拽元素可拖拽 draggable设为true

目标元素可放置 ondragover = function(){ event.preventDefault() } // 阻止默认行为

 效果：

跨文本消息传输

实现

1.在A页面点击，打开B页面

2.在A页面传输数据到B页面

A页面代码

 B页面代码

websocket

使用websocket可以在服务器与客户端之间建立一个非http的双向连接，这个连接是实时的也是永久的，除非被显示关闭。服务器可以随时将消息传送到客户端

 地理位置

geolocation

出于隐私保护考虑，标准规范获取地理位置必须得用户授权后才能得到地理位置信息

 navigator.geolocation.getCurrentPosition(on_success, on_error, options);
getCurrentPosition包含三个参数，前两个为函数名，第三个为一个对象。后两个可省略。

载入页面时通常会弹出一个提示，询问是否同意获取定位，同时getCurrentPosition函数会立即返回。如果选择了同意，则会执行on_success函数，这时才真正得到位置信息