HTML5 这些你全知道吗？
今天心情烦躁，搭建个论坛各种失败，Laravel、React也学不进去，于是就复习复习学过的。记录一下很少用的东西。
代码摘抄于W3C菜鸟教程HTML5手册
# 定义文本方向
<element dir="ltr|rtl|auto">
// ltr 默认 自左向右
// rtr 自右向左
// auto 让浏览器自动判断# 规定当使用 "tab" 键进行导航时元素的顺序
<element tabindex="number"># <base>
<head>
<base href="http://www.w3cschool.cc/images/" target="_blank">
</head>
<body>
//等于 http://www.w3cschool.cc/images/stickman.gif
</body># 行内与块级元素
行内：b, td, a, img
块级：h1, p, ul, table, header, section, footer, aside, nav, main, article, figure# <noscript>，不支持script时候显示
<noscript>
Sorry, your browser does not support JavaScript!
</noscript>#URL - 统一资源定位器
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3cschool.cc
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称# 为 IE 浏览器添加 HTML5 元素
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--># 画布（Canvas）
//moveTo(x,y) 定义线条开始坐标
//lineTo(x,y) 定义线条结束坐标
//使用 stroke() 方法来绘制线条
//arc(x,y,r,start,stop) -> arc(95,50,40,0,2*Math.PI)
//font - 定义字体
//fillText(text,x,y) - 在 canvas 上绘制实心的文本
//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
//createLinearGradient(x,y,x1,y1) - 创建线条渐变
//createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
//drawImage(image,x,y)
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
//画矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
//画渐（red -> white）变矩形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
// 画图像
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script># 拖放（Drag 和 Drop）
<!DOCTYPE HTML>
<html>
<head>
<script>
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
//被拖数据是被拖元素的 id ("drag1")
//把被拖元素追加到放置元素（目标元素）中
function allowDrop(ev){
//ondragover 事件规定在何处放置被拖动的数据
ev.preventDefault();
}
function drag(ev){
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
//数据类型是 "Text"，值是可拖动元素的 id ("drag1")
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
//当放置被拖数据时，会发生 drop 事件
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html># 地理定位
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} else{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
// timestamp 响应的日期/时间
// coords.speed 速度，以米/每秒计
// coords.heading 方向，从正北开始以度计
// coords.altitudeAccuracy 位置的海拔精度
// coords.altitude 海拔，海平面以上以米计
// coords.accuracy 位置精度
// coords.longitude 十进制数的经度
// coords.latitude 十进制数的纬度
}
function showError(error) {
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}# <video> 标签（MP4、WebM、Ogg）
//支持的属性
//autoplay 自动播放
//controls 显示空间
//loop 循环播放
//muted 静音
//poster="url" 视频封面
//preload = [auto|metadata|none]
// ↑ ↑ ↑
//【
//指示一旦页面加载，则开始加载音频/视频|
//当页面加载后仅加载音频/视频的元数据|
//页面加载后不应加载音频/视频
// 】
//使用 autoplay 属性 preload 将被忽略
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video># 新的 Input 类型（鸡肋，支持不够好）
color 颜色
date 日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）。
datetime-local 选择一个日期和时间 (无时区)
email 应该包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 包含一定范围内数字值的输入域
search 搜索域
tel 电话号码字段
time 允许你选择一个时间
url 允许你选择一个时间
week 选择周和年# <datalist> 输入框提示
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist># 语义元素
<section>
标签定义文档中的节（section、区段）。
比如章节、页眉、页脚或文档中的其他部分，
section 包含了一组内容及其标题。
<article>
标签定义独立的内容，Forum post，Blog post，News story，Comment
<nav>
标签定义导航链接的部分。
<aside>
标签定义页面主区域内容之外的内容（比如侧边栏）
aside 标签的内容应与主区域的内容相关.
<header>
描述了文档的头部区域
元素注意用于定义内容的介绍展示区域
在页面中你可以使用多个<header> 元素.
<footer>
描述了文档的底部区域.
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等
文档中你可以使用多个 <footer>元素.
<figure>
规定独立的流内容（图像、图表、照片、代码等等）。
元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响
<figcaption>
应该被置于 "figure" 元素的第一个或最后一个子元素的位置
标签定义 <figure> 元素的标题.# Web 存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储，用户关闭浏览器窗口后，数据会被删除。
typeof(Storage) == "undefined" 代表不支持，使用前判断一下是否支持。
localStorage.lastname="Smith";
document.getElementById("result").innerHTML=localStorage.lastname;
sessionStorage.lastname="Smith";
document.getElementById("result").innerHTML=sessionStorage.lastname;# 应用程序缓存
<!DOCTYPE HTML>
<html manifest="demo.appcache">Manifest 文件
以 "#" 开头的是注释行
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）# Web Workers（运行在后台的 JavaScript）
typeof(Worker)=="undefined" 表示不支持，使用前判断一下是否支持。
无法访问下例 JavaScript 对象：
window 对象
document 对象
parent 对象// demo_workers.js
// postMessage() 方法 - 它用于向 HTML 页面传回一段消息
var i=0;
function timedCount(){
i=i+1;postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}# 服务器发送事件(Server-Sent Events)
网页自动获取来自服务器的更新
例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
typeof(EventSource)=="undefined" 表示不支持，使用前判断一下是否支持。
EventSource 对象事件:
onopen -> 当通往服务器的连接被打开
onmessage -> 当接收到消息
onerror -> 当发生错误
//EventSource 对象用于接收服务器发送事件通知
//每接收到一次更新，就会发生 onmessage 事件
var source=new EventSource("demo_sse.php");
source.onmessage=function(event) {
document.getElementById("result").innerHTML+=event.data + "<br>";
};//服务器端代码 -> demo_sse.php
<?php
header('Content-Type: text/event-stream');
// Tip: text/event-stream
// 规定不对页面进行缓存
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();?>HTML5 这些你全知道吗？的更多相关文章
- 国内开源html5游戏引擎全收录
本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游 ...
- 原 HTML5 requestFullScreen&exitFullscreen全屏兼容方案
摘要: html5 video全屏实现方式 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为video使用的比较多 在html5中,全屏方法可以适用 ...
- HTML5轻松实现全屏视频背景
想在你的网页首页中全屏播放一段视频吗?而这段视频是作为网页的背景,不影响网页内容的正常浏览.那么我告诉你有一款Javascript库正合你意,它就是Bideo.js. 参考网址: https://ww ...
- HTML5 meta最全使用手册
1.声明文档使用的字符编码 <meta charset='utf-8'> 2.声明文档的兼容模式 <meta http-equiv="X-UA-Compatible&quo ...
- html5下F11全屏化的几点注意
1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- html5 自带全屏API调用方法
function FullScreen(){ var el = $('html')[0];//要全屏的元素,如果要全页面全屏,建议使用html节点而不是body节点 var isFullscreen= ...
- HTML5微信播放全屏问题的解决方法
在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会出现腾讯视频的广告推送等问题 解决办法:给vi ...
- 【03】《论道html5》（全）
[03] <论道html5> 共320页. 魔芋:已看完. 读后感:html5各个新特性的介绍.介绍了canvas,web socket,audio,video,web wor ...
随机推荐
- OJ 大整数减法
描述 求两个大的正整数相减的差. 输入 共2行,第1行是被减数a,第2行是减数b(a > b).每个大整数不超过200位,不会有多余的前导零. 输出 一行,即所求的差. 样例输入 9999999 ...
- UVa-101-木块问题
这题用vector比较好写,我们设置对应的几个函数,然后进行相应的操作来简化代码,这样才不易出错. 对于输入和操作来说我们经分析之后,可以看到最后一个操作时最原始的操作也就是不需要还原任意一个堆任意高 ...
- 【倍增】7.11fusion
非常奇妙的倍增题 题目描述 知名科学家小A在2118年在计算机上实现了模拟聚变的过程.我们将她研究的过程简化.核子共有26种,可以用a到z共26个字母表示.核子聚变的过程可以用一个字符串描述.按照顺序 ...
- cache支持single/increment/increment4三种方式传输
1.cache bypass signle---data length 已知 increment ---data length 不知 用 last data address 结束数据传输 2.cac ...
- pymongo的简单使用
pymongo的使用 首先安装: pip install pymongo 安装好了使用 import pymongo # 链接mongodb,得到一个mongoclient的客户端对象 client ...
- Mac下Python和Pycharm之virtualenv
一.python如何配置virtualenv 1.安装virtualenv pip3 install virtualenvpip install -i https://pypi.tuna.tsin ...
- 大数据学习——azkaban工作流调度系统
azkaban的安装部署 在/root/apps 1目录下新建azkaban文件夹 上传安装包到azkaban 2解压 .tar.gz 3删掉安装包 [root@mini1 azkaban]# .ta ...
- Python第三方库之openpyxl(5)
Python第三方库之openpyxl(5) 气泡图 气泡图类似于散点图,但使用第三个维度来确定气泡的大小,图表可以包括多个项目 from openpyxl import Workbook from ...
- 多线程下，多次操作数据库报错，There is already an open DataReader associated with this Command which must be closed first.
原文:https://www.cnblogs.com/sdusrz/p/4433108.html 执行SqlDataReader.Read之后,如果还想用另一个SqlCommand执行Insert或者 ...
- 关于流媒体(m3u8)的播放与下载
前一段时间做了一个视频播放下载应用,抓取的是优酷的视频,虽然优酷有自己的开发平台http://open.youku.com/,但未真正的实现.所以只能靠抓取视频源,Youku的视频采取了加密+动态的获 ...