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 ...
随机推荐
- 两种常见JS面向象写法
基于构造函数 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...
- 【简●解】 LG P2730 【魔板 Magic Squares】
LG P2730 [魔板 Magic Squares] [题目背景] 在成功地发明了魔方之后,鲁比克先生发明了它的二维版本,称作魔板.这是一张有8个大小相同的格子的魔板: 1 2 3 4 8 7 6 ...
- 【数位dp】bzoj3209: 花神的数论题
Description 背景众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦.描述话说花神这天又来讲课了.课后照例有超级难的神题啦…… 我等蒟蒻又遭殃了. ...
- Django_外键查询和反查询
一.ForeignKey @property装饰器的作用是返回一个属性特性,在数据库中也有一些小技巧可以拿来用,比如今天要写的外键查询和反向查询的内容. from django.db import m ...
- sudo指令和/etc/sudoers文件说明
sudo 命令 -l 显示当前用户的sudo权限-l username 显示username的sudo权限-u username 以username的权限执行-k 强迫用户下一次执行sudo时问密码( ...
- RN安卓原生模块
https://facebook.github.io/react-native/docs/native-modules-android.html RN实际就是依附在原生平台上,把各种各样的RN组件展示 ...
- NGINX宏观手记
一.这里的优化主要是指对nginx的配置优化,一般来说nginx配置文件中对优化比较有作用的主要有以下几项: nginx进程数,建议按照cpu数目来指定,一般跟cpu核数相同或为它的倍数. ``` w ...
- sql 表连接的3种类型
内连接 inner join (join) 交叉连接 cross join 笛卡尔积 效率低 外连接 outer join (left join ,right join ,full join ...
- 剑指Offer（书）：树的子结构
题目:输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 分析:关于二叉树大部分适应于递归结构. public boolean HasSubtree(TreeN ...
- centos中python2替换为python3，并解决yum出错
这里采用安装python3.6版本. 安装python3.6可能使用的依赖 yum install openssl-devel bzip2-devel expat-devel gdbm-devel r ...