HTML5-CSDN博客

本文链接：https://blog.csdn.net/qq_34234116/article/details/53980844

HTML5总结

1.常用input type：

text、password、radio、checkbox、button、reset、submit、image、 file、hidden

2.HTML5新添的input type：

(1)number：显示一个数字输入框

(2)email：显示一个邮件地址输入框，提交时会进行格式验证，中间一个@符号，前后至少一个字符

(3)url：显示一个URL地址输入框，提交时会进行格式验证，冒号前存在任意字符

(4)tel：显示一个电话号码输入框，没有格式验证，仅在手机浏览器中弹出数字输入键盘

(5)search：显示搜索输入框，PC中Chrome下有X号；手机中弹出键盘右下角按钮显示文字“搜索”

(6)range：显示一个范围选择滑块，让用户在特定范围内选择一个整数值

练习：实现一个调色板，修改某个滑块的位置，可以改变背景颜色

(7)color：显示一个颜色选择窗口，浏览器会调用操作系统提供颜色选择窗口，提交的是颜色值

(8)date：显示一个日期选择窗口，浏览器弹出一个日期选择窗口，不是DIV，不能定制样式

(9)month：显示一个月份选择器

(10)week：显示一个“星期/周”选择器

3.HTML5新特性之表单新特性——新的表单元素

HTML5之前已有的表单元素——可与用户交互并提交：

input、select/option、textarea、button

HTML5中新增的表单元素——不能与用户交互，不能提交，仅用于信息展示：

(1)datalist：数据列表，为某个输入框提供输入建议

</datalist>

(2)progress：进度条，显示前进的进度提示条

练习：使用定时器，修改progress的进度，实现不断前进的效果

(3)meter：度量衡，刻度尺，使用不同的颜色标示出数据所处的区间

最优值在上下限：黄 - 绿 - 黄

最优值小于下限：绿 - 黄 - 红

最优值大于上限：红 - 黄 - 绿

(4)output：输出值，用于表示数据的计算结果，是一个语义标签

4.HTML5新特性之表单新特性——表单元素新的属性

HTML5之前表单标签的常用属性：

name、value、readonly、disabled、checked、for

HTML5中表单标签的新属性：

(1)placeholder：占位消息，为输入框中添加提示消息，注意：占位消息仅用作提示，与value属性根本不同，不能被提交

(2)autofocus：自动获得焦点，标识了该属性的输入框会自动的获得输入焦点

(3)multiple：多项，用于email和file输入框，允许其中输入多个值，用逗号分隔

(4)autocomplete：自动完成，可取值on/off，指定输入域是否记录上一次提交的输入，下次输入时给予提示

(5)form：表单，指定当前输入域所属的表单的ID，可以将声明了form的输入框放到表单元素的外面，仍然可以一同被提交

=========与输入验证相关新属性========

(6)required：必填项，若没有输入则无法提交

<input required> 提交时才会验证

(7)min：最小值，若输入值小于该值则无法提交

(8)max：最大值，若输入值大于该值则无法提交

(9)minlength：最小长度，若输入的字符串长度小于该值无法提交，此属性不是H5标准属性，FF不支持，Chrome支持

(10)maxlength：最大长度，若输入的字符串长度大于该值无法提交

(11)pattern：正则表达式样式，若输入的字符串不符合指定的正则表达式则无法提交

5.如何自定义表单错误提示消息

HTML5为每个表单输入域添加了一个属性：validity（有效性）

ValidityState {

valid :true

badInput:false 无效的输入，number

customError : false 自定义错误，setCustomValidity('')参数字符串有内容，curstomError就变为true；参数值是空字符串，customError变为false

patternMismatch : false 样式不匹配，pattern

rangeOverflow : false 范围上溢出，max

rangeUnderflow : false 范围下溢出，min

stepMismatch : false 步长不匹配，step

tooLong : false 字符串太长，maxlength

tooShort : false 字符串太短，minlength

typeMismatch : false 类型不匹配，email/url

valueMissing : false 值缺失，required

}

该对象中的属性值随着输入域中值的改变而立即改变，不会等到表单提交。其中只有valid为true时，表示输入域中的值是有效的，才能被提交；只要其它的某个属性值为true，valid属性值就会变为false。

注意：只要自定义了错误消息，浏览器默认的错误消息就不再显示。

6.HTML5新特性——视频播放

H5提供的VIDEO标签默认是一个300*150的inline-block。使用方法：

您的浏览器不支持VIDEO标签

</video>

<video>

您的浏览器不支持VIDEO标签

</video>

7.Video标签/对象常用属性：

autoplay: false，是否自动播放

controls: false，是否显示播放控件

currentTime: 3.293401，当前播放到哪1秒

duration: 60.041667，总时长

loop: false，是否循环播放

paused: 当前是否处于暂停状态

playbackRate: 1 播放速率，可以是0.x，也可以是2、3...

poster: ''，播放第一帧之前显示的电影海报

muted: false，是否静音

volume: 1, 视频音量(0~1)——对象属性

preload：如何预加载视频的内容，三个可选值：

auto：预加载视频元数据并缓存一定的播放内容

metadata：仅预加载视频元数据(宽高、时长、第一帧)

none: 不预加载任何内容

Video标签/对象常用方法：

play() 让视频开始播放

pause() 让视频暂停播放

Video标签/对象常用事件：

onplay: 当视频开始播放时触发

onpause: 当视频刚一暂停时触发

8.HTML5新特性——音频播放

H5提供的VIDEO标签默认是一个300*150的inline-block。使用方法：

您的浏览器不支持AUDIO标签

</ audio >

<audio>

您的浏览器不支持AUDIO标签

</audio>

9.Audio标签/对象常用属性：

autoplay: false，是否自动播放

controls: false，是否显示播放控件

currentTime: 3.293401，当前播放到哪1秒

duration: 60.041667，总时长

loop: false，是否循环播放

paused: 当前是否处于暂停状态

playbackRate: 1 播放速率，可以是0.x，也可以是2、3...

muted: false，是否静音

volume: 1, 音频音量(0~1)——对象属性

preload：如何预加载音频的内容，三个可选值：

auto：预加载音频元数据并缓存一定的播放内容

metadata：仅预加载音频元数据(时长)

none: 不预加载任何内容

Audio标签/对象常用方法：

play() 让音频开始播放

pause() 让音频暂停播放

Audio标签/对象常用事件：

onplay: 当音频开始播放时触发

onpause: 当音频刚一暂停时触发

10.HTML5新特性之三——Canvas绘图技术

Canvas：画布，使用画笔可以在画布绘图。Canvas元素是一个300*150的inline-block。

注意：Canvas的宽和高不能使用CSS样式来设定！

您的浏览器Canvas标签

</canvas>

//Canvas绘图技术属于JS绘图技术

var ctx = c9.getContext('2d'); //获取画布上的画笔——绘图上下文对象

绘图对象常用的属性：

fillStyle: '#000' 填充样式

strokeStyle:'#000' 轮廓/描边样式

lineWidth: 1 描边宽度

font: "10px sans-serif" 字体

textAlign: 'start' 文本对齐

textBaseline: 'alphabetic' 文本基线

shadowColor: 'rgba(0,0,0,0) 阴影颜色

shadowBlur: 0 阴影模糊半径

shawdowOffsetX: 0 阴影的水平偏移量

shawdowOffsetY: 0

绘图对象常用的方法：

(1)绘制矩形

(2)绘制文本

(3)绘图路径

(4)绘图图像

使用Canvas绘图绘制矩形

注意：矩形的定位点在自己的左上角

ctx.fillStyle = '#000';填充颜色

ctx.strokeStyle = '#000'; 描边颜色

ctx.lineWidth = 1;描边线宽

ctx.fillRect(x, y, w, h)填充一个矩形

ctx.strokeRect(x, y, w, h) 描边一个矩形

ctx.clearRect(x, y, w, h) 清除一个矩形范围内所有的内容

11.使用Canvas绘图绘制文本

注意：字符串的定位点在文本基线的最左端

ctx.textBaseline = 'alphabetic' //文本基线，top / bottom / middle

ctx.font = "10px sans-serif"; 字体大小

ctx.fillText( txt, x, y ) 填充文字

ctx.strokeText( txt, x, y ) 描边文字

ctx.measureText(txt).width 基于当前的字体设置，测量指定文本的总宽度

12.为图形添加阴影

ctx.shadowColor = 'rgba(255,255,0,1)';

ctx.shadowBlur = 5;

ctx.shadowOffsetX = 5;

ctx.shadowOffsetY = 5;

13.为图形添加渐变色样式

创建线性渐变对象：

var g = ctx.createLinearGradient(50,150,450,150);

g.addColorStop(0, '#f00'); //添加颜色点

g.addColorStop(0.5, '#ff0'); //添加颜色点

g.addColorStop(1, '#0f0'); //添加颜色点

将渐变对象应用于填充样式或描边样式

ctx.fillStyle = g;

ctx.strokeStyle = g;

14.使用Canvas绘制路径（Path）

路径：类似于PS中的钢笔工具，指定多个锚点，绘制任意形状的线条——路径本身不可见，有三个用途：

(1)对路径进行描边： ctx.stroke()

(2)对路径进行填充： ctx.fill()

(3)使用路径进行裁剪： ctx.clip()

创建锚点的相关方法：

ctx.beginPath( ) 开始新路径

ctx.closePath() 闭合路径

ctx.moveTo(x, y) 移动到某点

ctx.lineTo(x,y) 从上一点到指定点绘直线路径

ctx.arc(x,y, r) 绘制拱形(圆形的一部分)路径

ctx.ellipse(...) 绘制拱形(椭圆的一部分)路径

ctx.bezierCurveTo() 绘制贝塞尔曲线(任意线条)

15.使用Canvas绘制图像

提示：图像的定位点在自身的左上角

ctx.drawImage(img, x, y); 使用默认的宽高绘制图像

ctx.drawImage(img, x, y, w, h); 使用指定的宽高绘制图像

绘制图像需注意——必须等待图像异步加载完成才能绘制：

var img = new Image( );

img.src = 'x.png';//浏览器会开始向服务器发起HTTP请求

//ctx.drawImage(img, x, y);

img.onload = function(){ //图片加载完成

//img.width 和 img.height

ctx.drawImage(img, x, y);

}

16.使用Canvas绘制图像/图形时的旋转问题 —— 抽象

注意：

(1)旋转的是画笔(绘图上下文对象)！而不是画布！

(2)一旦画笔旋转一定角度，它绘制的所有内容都是旋转后的！

(3)旋转的角度有累加效应。

(4)旋转的轴点永远是画布的零点(0,0)！

ctx.rotate( 弧度 )//旋转画布，绘制旋转后的图像图形

ctx.translate( x, y ) //把画布的零点平移到指定点，一旦平移，所有点的坐标值都要改变

ctx.save() //保存当前绘图对象的所有状态

ctx.restore() //恢复绘图对象上一次保存的所有状态

17.第三方提供的绘制Canvas图表的工具库

提示：第三方可以简化原生Canvas绘图的代码编写！本身都不复杂，很容易自学上手！

(1)Chart.js —— 开源免费，提供了8种图表

(2)EChart.js —— 百度提供的开源免费图表工具

(3)FreeChart —— 开源免费

(4)FusionCharts —— 收费的，提供了90+种图表

18.第三方绘制图表工具——Chart.js的使用

(1)查看官网介绍

www.chartjs.org

Simple yet flexible JavaScript charting。

1)开源

2)8种图表

3)基于Canvas

4)支持响应式

(2)查看示例代码——Get Started（快速入门）

var c = new Chart(c15, {

type: 'bar', //统计图的类型

data: {}, //统计数据

options: {} //图表的选项

});

(3)查看API Document手册

19.使用SVG标签绘制图形——矩形

注意：为了给矩形指定样式，既可以使用SVG标签专用的属性，也可以使用CSS样式方式来声明。

可选的属性：

fill

fill-opacity

stroke

stroke-width

stroke-opacity

20.使用SVG标签绘制图形——圆形

可选属性：圆形可用的属性与矩形基本类型

21.使用SVG标签绘制图形——椭圆

22..使用SVG标签绘制图形——直线

23.使用SVG标签绘制图形——折线

24.使用SVG标签绘制图形——多边形

25.使用SVG标签绘制图形——文本

提示：SVG中的文字可以在DOM树上查看到，可以被搜索引擎的爬虫机器人检索到，可以提高网页的相关查询的排名。

26.使用SVG标签绘制图形——图像

提示：SVG中使用了位图，则放大后也会失真。

27.使用SVG标签绘制贝塞尔曲线

28.在SVG中使用渐变色

在特效对象中声明一个渐变对象

<defs>

</linearGradient>

</defs>

在填充色/描边色时使用渐变对象

29.在SVG中使用滤镜——模糊滤镜——高斯模糊

在特效对象中声明一个滤镜对象

<defs>

</filter>

</defs>

在创建图形使用滤镜对象

30.HTML5新特性之六 —— 地理定位

Geolocation：用于获得当前浏览器所在的地理坐标，从而提供LBS（Location Based Service），如送餐、打车、导航。包括如下数据：

经度： longitude

纬度： latitude

海拔高度： altitude

速度： speed

浏览器如何获得上述数据：

(1)手机浏览器：

首先尝试使用内置GPS数据——精度以米为单位

再则使用手机基站编号反向推导出对应的地理位置——定位精度以公里为单位

(2)PC浏览器：

通过电脑的IP地址反向查询——精度以公里为单位

HTML5中如何获取浏览器所在的地理定位信息：

window.navigator.geolocation {

getCurrentPosition: fn //获取当前定位数据

watchPosition: fn //监视定位数据

clearWatch: fn//清除定位监视

}

演示：如何获取当前的定位信息：

navigator.geolocation.getCurrentPosotion(

function(pos){

console.log('定位数据获取成功');

//pos.coords.longtitude ....

function(err){

console.log('定位数据获取失败');

//err.code err.message

}

)

31.HTML5新特性之七 —— 拖放API —— 稍难&掌握

Drag：拖动

Drop：释放

在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

注意：必须组织dragover事件的默认行为，才可能触发drop事件！

32.如何在拖动的源对象事件和目标对象事件间传递数据

HTML5为所有的拖动相关事件提供了一个新的属性：

e.dataTransfer {//数据传递对象——作用相当于拖拉机

}

用于在源对象和目标对象的事件间传递数据，

源对象上的事件处理中保存数据：

e.dataTransfer.setData( k, v ); //k-v必须都是string

目标对象上的事件处理中读取数据：

var v = e.dataTransfer.getData( k );

33.关于拖放API的补充知识点（面试题）：如何在网页中显示客户端的一张图片？如何拖动客户端的网页显示在服务器端下载的页面中？

div.ondrop = function(e){

var f = e.dataTransfer.files[0];//找到拖放的文件

var fr = new FileReader();//创建文件读取器

fr.readAsURLData(f);//读取文件内容

fr.onload = function(){//读取完成

img.src = fr.result;//使用读取到的数据

}

34.HTML5新增的文件操作对象：

File：代表一个文件对象

FileList：代表一个文件列表对象，类数组

FileReader：用于从文件中读取数据

FileWriter：用于向文件中写出数据

35.Chrome中的线程模型是怎样的？请阐述浏览器如何加载并渲染网页内容？浏览器先下载CSS、JS、图片？

程序：Program，可以被计算机执行的代码，保存在磁盘中

进程：Process，代码从磁盘中调入内存，分配的空间，开始执行

线程：Thread，进程内的可执行代码被CPU调度开始执行

进程和线程的关系：

(1)进程是操作系统分配内存的基本单位。

(2)线程是执行代码(生产任务)的基本单位。

(3)线程必须处于进程内部，使用其中的内存。

(4)进程内部必须至少有一个线程，也可以并存有多个。

(5)多个线程是并发执行（宏观上看是同时执行，微观上看是先后间断性执行）。

36.Chrome中的线程执行模型：

(1)创建了Chrome.exe进程，至少启动6个线程，并发执行用于向Web服务器发起HTTP请求——出去买菜。

(2)在渲染网页的内容时，Chrome只允许使用1个线程——UI渲染主线程——若多个线程同时渲染，会导致布局错乱——开始做饭；

(3)Chrome中请求资源可以使用6个并发线程，执行HTML、CSS、JS所有的代码只有1个线程——不可能出现两个函数同时执行的情形。

37.HTML5新特性之八 —— WebWorker —— 代码简单&原理复杂

假设有如下代码：

<script src="js/4.js"></script>

4.js很耗时的情况下，button2无法快速呈现，button1的事件监听也无法立即执行——根源：UI渲染主线程只有1个，被4.js长时间占用！

如何从根本上解决JS任务耗时的问题——创建一个新的执行线程，由它来执行耗时的JS任务，不占用UI主渲染线程！

var w = new Worker('x.js'); //主线程分出一个工作线程

Worker线程的致命缺陷：不能执行任何DOM操作！不能使用任何的DOM元素！连window对象都无法使用！——浏览器只允许一个UI主线程来操作DOM！

由于上述限制，一般的JS文件（如jquery.js）都不能使用Worker来加载。一般只有需要执行耗时算法的JS任务才需要使用Worker。

Worker线程给UI主线程发消息：

Worker线程中：

postMessage( 'StringMessage' );

UI主线程中：

var w6 = new Worker('x.js');

w6.onmessage = function(e){ e.data }

UI主线程给Worker线程发消息：

UI主线程中：

var w7 = new Worker('x.js');

w7.postMessage('StringMessage');

Worker线程中：

onmessage = function(e){ e.data }

38.HTML5新特性之九 —— WebStorage —— 重点&效果很好！

项目中的数据保存在哪儿？

保存在服务器端——如商品、评论、用户、新闻等——业务数据：

数据存储于数据库，使用后台语言加以读取

保存在客户端——如浏览历史、内容定制、自动登录等——用户数据：

(1)Cookie：兼容性好，操作复杂，数据量有限(4k)

(2)Flash：依赖于Falsh播放器

(3)HTML5 WebStorage：H5新特性，操作简单，数据量够大(8M)

(4)IndexedDB：操作简单、数据量无限制、不是H5标准技术

(5)FileAPI：功能强大，以文件方式操作数据

提示：在Chrome F12的Resources中可以查看到上述数据。

39.

Web中的Session(回话)：指浏览器从打开某个网站开始，不论访问多少个页面，一直是同一个回话，直到浏览器窗口关闭，回话结束。

40.HTML5新特性之WebStorage技术

HTML5中提供了两个相关对象：

window.sessionStorage：会话级存储，把数据存在浏览器进程所分配的内存中，只要浏览器不关闭，数据一直存在——可以实现跨页面使用数据

sessionStorage['key'] = value; //存数据

var v = sessionStorage['key']; //取数据

sessionStorage.setItem(k, v); //存数据

var v = sessionStorage.getItem(k); //取数据

sessionStorage.length //数据的个数

sessionStorage.removeItem(k); //删除数据

sessionStroage.clear(); //清除所有数据

提示：sessionStorage用于在同一个会话的不同页面间共享数据

41.window.localStorage：本地存储/跨会话级存储，把数据存在客户端磁盘文件中，数据一直存在，即使关机重启系统——可以实现跨会话共享数据

localStorage['key'] = value; //存数据

var v = localStorage['key']; //取数据

localStorage.setItem(k, v); //存数据

var v = localStorage.getItem(k); //取数据

localStorage.length //数据的个数

localStorage.removeItem(k); //删除数据

localStorage.clear(); //清除所有数据

42.如何监听localStorage中数据的改变？

只要localStorage中的任一数据发生改变，就触发如下事件：

window.onstorage = function(){

}

注意：上述事件不能用于监听sessionStorage数据的改变！

43.WebSocket概述

HTTP协议的限制：基于“请求-响应”模型的协议，一个请求回得到一个响应，没有请求就没有响应。有些特殊的应用中，如在线股票、在线聊天室等，该特性就会产生问题。

心跳请求：使用定时器每隔n秒钟异步请求一次服务器端数据。心跳过慢则数据有延迟，心跳过快服务器压力过大。

WebSocket协议：基于“广播-收听”模型的协议，只要客户端连接到服务器上，就一直保持连接，一方可以不停的发消息，对方不停的接收。WS协议的限制：客户端和服务器是永久连接，而服务器可以同时保持的连接数是有限的。