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 ...
随机推荐
- Python自动化测试框架——数据驱动（从代码中读取）
今天小编要介绍的是数据驱动最简单和最常用的一种方法,由于只是介绍方法,代码操作后的美观程度略有缺陷,介意者可以自行改动 还是以163邮箱登录为例: 设计一个存放数据的类,这个类的参数是我们需要修改的数 ...
- Linux菜鸟起飞之路【二】Linux基本常识
一.Unix操作系统基本常识 1.什么是Unix? Unix是一个计算机操作系统,是一个用来协调.管理和控制计算机硬件与软件资源的控制程序. 2.Unix操作系统的特点? 多用户与多任务.多用户表示在 ...
- Python-小游戏题目
猜年龄游戏 n = 0 rayn_age = 19 a = {0:'666',1:'777',2:'888'} while n <3: age = input('请输入你的年龄:') age = ...
- 剑指Offer（书）：二叉树的镜像
题目:操作给定的二叉树,将其变换为源二叉树的镜像. public void Mirror(TreeNode root) { if (root == null) { return ; } if (roo ...
- Android开发——Activity启动模式详解
1. Activity的启动模式 本文原创,转载请注明出处:http://blog.csdn.net/seu_calvin/article/details/52054893 1.1 Standard标 ...
- ubuntu下svn在挂在的NTFS分区上无法报错,提示没有权限
终极解决方案: 赋予svn文件root权限 1. 查找svn文件: $ whereis svn svn: /usr/bin/svn /usr/bin/X11/svn /usr/share/.gz $ ...
- django 常见过滤器
一.形式:小写 {{ name | lower }} 二.过滤器是可以嵌套的,字符串经过三个过滤器,第一个过滤器转换为小写,第二个过滤器输出首字母,第三个过滤器将首字母转换成大写 标签 {{ st ...
- json分享
JSON是什么? JavaScript Object Notation (JSON) is a text format for the serialization of structured data ...
- 【LeetCode】Palindrome Number(回文数)
这道题是LeetCode里的第9道题. 题目说的: 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: ...
- CF Educational Codeforces Round 21
A. Lucky Year time limit per test 1 second memory limit per test 256 megabytes input standard input ...