HTML5实用知识点
本文讲解HTML5实用知识点
新增的表单type
Canvas使用
SVG使用
Audio使用
Video使用
网页缓存
文件缓存
后台worker
Server-Sent Events
定位
拖放功能
-
<input type="color" name="myColor"> 颜色表单
<input type="date" name="myDate"> 日期表单
<input type="email" name="myEmail" required> 邮箱，自带验证
<input type="month" name="myMonth"> 月份表单
<input type="number" min="1" max="10" step="0.5" > 数字框
<input type="range" min="1" max="10" step="0.5" > range输入控件
<input type="search" name="mySearch"> 搜索框
<input type="tel" name="mytelephone" required> 电话框
<input type="time" name="mytime"> 时间输入框
<input type="url" name="mywebsite" required> 网址输入框
<input type="week" name="myweek"> 周选择框
-
- 创建canvas标签
canvas标签默认宽 300px 高 150px，canvas标签左上角是原点坐标
<canvas id="myCanvas" widht="500" height="300"></canvas>
- 画线
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); // 创建2d上下文
context.moveTo(50, 100); // 设置线的起点
context.lineTo(100, 200); // 设置线的终点
context.stroke(); // 连接两点
}
- 画圆弧
语法格式 context.arc(原点x, 原点y, 半径, 开始角度, 结束角度, 是否逆时针);
context.arc(200, 100, 50, 0.6 * Math.PI, 1.2 * Math.PI, false); // 描画弧的点
context.stroke(); // 连接点
- 画圆
context.arc(200,100, 50, 0, 2 * Math.PI, false);
context.stroke();
- 画矩形
语法格式 context.rect(起始点坐标x, 起始点坐标y, 矩形宽, 矩形高);
context.rect(100,100,50,100);
context.stroke();
- 改变样式
stroke方法默认是用宽1pixel的黑色实线画图
context.strokeStyle = "red"; 设置线的颜色
context.lineWidth = 5; 设置线的宽度
context.lineCap = "round"; 设置线端点的形状
context.fillStyle = "yellow"; 设置填充颜色
context.fill(); 填充图形，这个方法最好在stroke方法之前使用
- 使用渐变色
线性渐变
context.strokeStyle = "red";
context.lineWidth = 5;
context.rect(50,100,100,100);
var grd = context.createLinearGradient(50,100,150,200); // 创建线性渐变的区域
grd.addColorStop(0, '#8ED6FF'); // 添加渐变色
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd; // 填充
context.fill();
context.stroke();
辐射渐变
context.strokeStyle = "red";
context.lineWidth = 5;
context.arc(150, 100, 70, 0, 2 * Math.PI, false);
var grd = context.createRadialGradient(150, 100, 10, 150, 100, 100);
grd.addColorStop(0, '#8ED6FF');
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
context.stroke();
- 添加文本
context.font='bold 32px Arial';
context.textAlign='center';
context.textBaseline='middle';
实心文字
context.fillStyle='red';
context.fillText("你好吗", 50, 50, 100);
空心文字
context.strokeStyle='red';
context.strokeText("你好吗", 50, 50, 100);
-
- 创建svg标签
svg用来画矢量图形，任意放大缩小都不会丢失图像质量
<svg width="500" height="500">
<text x="10" y="20" style="font-size: 14px;">
你的浏览器支持svg
</text>
你的浏览器不支持svg
</svg>
- 画线
<svg width="500" height="500">
<line x1="50" y1="50" x2="100" y2="150" style="stroke:red;stroke-width:3;"></line>
</svg>
- 画矩形
<svg width="500" height="500">
<rect x="50" y="50" width="200" height="100" style="fill: red;stroke: black;stroke-width: 3;"></rect>
</svg>
- 画圆
<svg width="500" height="500">
<circle cx="150" cy="100" r="50" style="fill:limegreen; stroke:black; stroke-width: 3;"></circle>
</svg>
- 画文字
文字块
<svg width="500" height="500">
<text x="10" y="20" style="fill:rebeccapurple; font-size: 22px;">你们好吗？</text>
<text x="10" y="20" dx="0" dy="50" style="fill:chocolate; font-size:20px;">非常好，谢谢！</text>
</svg>
x,y表示文本右上角坐标
dx,dy表示相对于上一个文本的坐标
文字段
<svg width="500" height="500">
<text x="30" y="20" style="fill:palegoldenrod; font-size: 20px;transform:rotate(30deg);">
<tspan x="30" y="10" style="fill:violet; font-size: 15px;">欢迎来到这里！</tspan>
<tspan dx="-100" dy="20" style="fill:brown; font-size: 20px;">在这里你可以学到很多东西！</tspan>
</text>
</svg>
-
基本使用
<audio controls="controls" src="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3">
你的浏览器不支持audio
</audio>
兼容处理
<audio controls="controls">
<source src="birds.mp3" type="audio/mpeg">
<source src="birds.ogg" type="audio/ogg">
你的浏览器不支持audio
</audio>
使用a标签也可以播放音乐
<a href="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3">播放</a>
使用object标签播放音乐
object标签用来将各种媒体类型的文件嵌套展示在html文档中
<object data="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3" width="200px" height="50px"></object>
使用embed也可以实现
<embed src="http://fs.w.kugou.com/201801141449/11d9f59f7bbe44baa117d3ee68d537e8/G004/M01/09/07/pIYBAFT6cwOAKJZAACusE60HmfI058.mp3" width="200px" height="50px">
-
基本使用
<video controls="controls" src="http://114.80.149.155/vlive.qqvideo.tc.qq.com/AWxNgT15MDV-qHJX5cxO9KrgFw-QnllWwnyAPHB6Nunc/w0200ph7kmn.p201.1.mp4?vkey=540F0275B3B1E386A056820358C08C5462CAD4EFEA3AAAE522FB267A7752F019FE18D07FCAA4C0F87AB009EC47D87639C8ED5E39EB201E6D8356180B27B087E5DADE51850EE7EF89C62456A8BC8AC0C3BBE07D5AFFA5CFE70502CB7D9B6B2688FFC14D814469155BB96C6949A2FFA0DF69564134A09DA087&platform=10201&sdtfrom=&fmt=shd&level=0">你的浏览器不支持video</video>
兼容写法
<video controls="controls">
<source src="shuttle.mp4" type="video/mp4">
<source src="shuttle.ogv" type="video/ogg">
你的浏览器不支持video
</video>
同样也可以使用object和embed播放电影
-
网页缓存可以缓存5M的数据在本地
localStorage 永久缓存在本地
if(localStorage) {
localStorage.setItem("name", "yejiawei"); // 存数据
console.log(localStorage.getItem("name")); // 取数据
localStorage.removeItem("name"); // 移除数据
localStorage.clear(); // 移除所有数据
}else{
alert("你的浏览器不支持localStorage");
}
sessionStorage 当用户关闭当前页或者关闭浏览器，数据自动清除
用法和localStorage一样
if(sessionStorage) {
sessionStorage.setItem("name", "yejiawei");
console.log(sessionStorage.getItem("name"));
sessionStorage.removeItem("name");
sessionStorage.clear();
}else{
alert("你的浏览器不支持sessionStorage");
}
-
文件缓存可以用来，指导浏览器如何缓存文件和断网的情况下展示什么页面
先创建一个配置文件，比如test.appcache，写如下内容
CACHE MANIFEST
# v1.0: 2018/1/14
CACHE:
# 需要缓存的文件
index.html
index.css
NETWORK:
# 不需要缓存的文件
124463.js
FALLBACK:
# 掉线之后展示的页面
offline.html
修改index.html
<html lang="en" manifest="example.appcache">
此时浏览器文件缓存已经配置好了，当用户断开与服务器的连接的时候，展示offfline.html文件
-
大家应该都知道，js是单线程语言，当计算量很大的时候，会阻塞页面，html5提供了一个web worker的功能可以让你创建类似多线程的功能
worker需要在一个服务器环境中运行
将复杂的代码可以单独抽取到一个js文件中，比如index.js
var i = 0;
function countNumber() {
if(i < 10000){
i = i + 1;
postMessage(i); // 将信息发送到主线程上
}
console.log(i);
setTimeout(countNumber, 500)
}
countNumber();
在主线程上调用worker接受信息
if(window.Worker) {
var worker = new Worker("./index.js");
worker.onmessage = function(event) {
document.getElementById("showBox").innerText = event.data;
if(event.data == 10) {
worker.terminate(); // 终止worker
}
}
}else{
alert("你的浏览器不支持worker");
}
-
ajax请求使用XMLHttpRequest对象，此对象只会连接一次，如果要和后端建立长时间的连接，就要使用sse了
前端的写法
window.onload = function () {
var source = new EventSource("api/Test");
source.onmessage = function (event) {
document.getElementById("box").innerHTML = event.data;
}
source.onopen = function (event) {
}
source.onerror = function (event) {
}
}
C#后端的写法
public HttpResponseMessage Get ()
{
HttpResponseMessage response = Request.CreateResponse();
response.Content = new PushStreamContent((Stream stream, HttpContent content, TransportContext context) => {
if(stream != null)
{
using (var writer = new StreamWriter(stream))
{
writer.WriteLine("data:" + JsonConvert.SerializeObject(DateTime.Now.ToString()) + "\n\n"); ;
writer.Flush();
}
}
}, "text/event-stream");
return response;
}
上面的例子，前端可以在页面上展示后端服务器实时的时间，3s刷新一次
-
经纬度的获取
function getPosition() {
if(navigator.geolocation) {
var box = document.getElementById("showBox");
box.innerHTML = "正在定位...";
navigator.geolocation.getCurrentPosition(function(position) {
// 需要用户同意定位
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
box.innerHTML = "您当前的坐标是 " + "经度：" + longitude + ",纬度：" + latitude
},function (err){
// 错误处理
if(err.code == 1) {
box.innerHTML = "你拒绝了定位";
}else if(err.code == 2) {
box.innerHTML = "网络问题无法定位";
}else if(err.code == 3) {
box.innerHTML = "定位超时";
}else {
box.innerHTML = "定位过程中发生了，未知错误";
}
})
}else{
alert("你的浏览器不支持html5地理定位");
}
}
追踪定位
作者提醒：这个实时定位，当页面在后台和前台之间切换时才会刷新，具体原因未知
<div id="showBox"></div>
<button type="button" id="btn">开始追踪</button>
<script>
window.onload = function() {
var btn = document.getElementById("btn");
var box = document.getElementById("showBox");
var watchID;
btn.onclick = function() {
if(watchID){
btn.innerHTML = "开始追踪";
navigator.geolocation.clearWatch(watchID);
watchID = false;
}else{
btn.innerHTML = "正在获取坐标...";
getPosition();
}
}
function getPosition() {
if(navigator.geolocation) {
watchID = navigator.geolocation.watchPosition(function(position) {
btn.innerHTML = "停止追踪";
if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
var prevLat = position.coords.latitude;
var prevLong = position.coords.longitude;
var positionInfo = "你的当前坐标是 (" + "纬度: " + position.coords.latitude + ", " + "经度: " + position.coords.longitude + ")";
box.innerHTML = positionInfo;
}
})
}else{
alert("你的浏览器不支持html5地理定位");
}
}
}
</script>
-
css
body{
background: grey;
}
#dropBox{
width: 300px;
height: 300px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dropBox img{
margin: 25px;
}
html
<h2>拖放功能例子</h2>
<p>将图片拖拽到div中</p>
<div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);"></div>
<img src="./1.jpg" id="img" draggable="true" ondragstart="dragStart(event);" width="250" height="250">
设置 draggable="true" 表示元素可拖动，默认情况下，选中的文本，图片，带有href属性的a标签都是可以拖动的
js
function dragStart(e) {
e.dataTransfer.effectAllowed = "move"; // 设置拖动的元素可以执行的动作
e.dataTransfer.setData("Text", e.target.getAttribute("id")); // 设置拖动的数据
}
function dragOver(e) {
// 清除浏览器的默认行为
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer.getData("Text"); // 获取拖动的数据
e.target.appendChild(document.getElementById(data));
}
拖放的相关事件
ondragstart 用户开始拖元素触发一次
ondragenter 比ondragstart后调用
ondragover 用户将拖拽的元素放到容器的上方一直触发
ondreagleave 当拖拽元素的鼠标位置离开了元素的边界触发一次
ondrag 拖拽元素一直触发
ondrop 用户将拖拽的元素，在容器上方松开，触发
ondragend 只要用户松开了，就触发
HTML5实用知识点的更多相关文章
- HTML5易漏知识点锦集
本文通过对w3schoolHTML5基础教程,整理出比较常见的却又容易遗忘或者忽略的HTML5相关知识点.本文的标题顺序与w3school中的HTML5基础教程标题顺序保持一致.适合翻阅和复习. 1. ...
- HTML5基本知识点
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML的基本格式 <!DOCTYPE html>: ①文档类型声明:让浏览器按照 ...
- 【温故知新】——HTML5重要知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...
- html5相关知识点的总结（有一些错误或者不足的地方）
1.页面结构上的一些宽松改变 <!DOCTYPE html>默认为标准模式 <meta charset="UTF-8"> 2.html5中新增的一些语义化标 ...
- html5基础知识点
1.WEB基础知识 1.WEB 与 Internet 1.Internet 互联网 若干台计算机 通过 网线 所连接而成的物理设备 主要服务: 1.Telnet 2.Email 3.WWW(Word ...
- HTML5学习知识点
一.文档问题 1.html5新标签:section.header.footer.nav.aside.blockquote.q.fieldest.figure.address.article.detai ...
- canvas学习笔记，实用知识点总结（上）
本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...
- 本周HTML5的知识点
html5一般用<meta>标签描述网页的摘要信息.标题标签一共有6个,标题字体加粗<h1>最大,<h6>最小. <p>标签标示内容都在一行显示,结束后 ...
- sass实用知识点
本文总结sass相关核心知识点 说明:本文的内容是,我在开发实践中总结的实用性比较强的sass知识点,其他未涉及的知识,如果对你有作用请自行查阅 sass知识目录 嵌套 注释 SassScript @ ...
随机推荐
- mapreduce 实现数子排序
设计思路: 使用mapreduce的默认排序,按照key值进行排序的,如果key为封装int的IntWritable类型,那么MapReduce按照数字大小对key排序,如果key为封装为String ...
- 【转载】Java类加载原理解析
Java类加载原理解析 原文出处:http://www.blogjava.net/zhuxing/archive/2008/08/08/220841.html 1 基本信息 摘要: 每个j ...
- Difference between stem and lemma
lemma与stem的区别 Difference between stem and lemma 先从wikipedia上看看什么是stem,什么是lemma? Lemma(morphology):In ...
- TCP的三个接收队列
之前对于TCP接收过程中的三个队列的关系之前没搞清楚. 这几天,在同事邱的帮助下,终于把关系理清了,故特此做个笔记. 一.在软中断中加入数据包 tcp_v4_rcv()函数是tcp层收包的入口. in ...
- 80X86寄存器详解<转载>
引子 打算写几篇稍近底层或者说是基础的博文,浅要介绍或者说是回顾一些基础知识, 自然,还是得从最基础的开始,那就从汇编语言开刀吧, 从汇编语言开刀的话,我们必须还先要了解一些其他东西, 像 CPU ...
- Visual Studio中用于ASP.NET Web项目的Web服务器
当您在 Visual Studio 中开发 Web 项目时,需要 Web 服务器才能测试或运行它们. 利用 Visual Studio,您可以使用不同的 Web 服务器进行测试,包括 IIS Expr ...
- 利用Xshell从windows上传文件到linux
1.首先,打开你的xshell客户端. 2.我用的是ubuntu 所以用 apt-get install lrzsz 命令来安装这个上传软件. 安装成功以后,可以使用rz上传,sz下载. 然后等待上传 ...
- Python快速学习-函数
函数定义总结: 1.定义函数时,需要确定函数名和参数个数:2.如果有必要,先对参数的数据类型进行检查:3.函数体内部可以用return随时返回函数结果:4.函数执行完毕没有return语句时,自动re ...
- c++中的函数对象
头文件wuyong.h: #pragma once #include<iostream> using namespace std; template<typename T> s ...
- css3表格样式
<caption> 关于表格存储内容的描述或总结. 1.border-spacing:0;border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式). 2. ...