HTML5总结

1.声明必须位于 HTML5 文档中的第一行

浏览器支持

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera

<!DOCTYPE html>

2.HTML5 的改进 ,新元素, 新属性 ,完全支持 CSS3, Video 和 Audio ,2D/3D 制图 ,本地存储 ,本地 SQL 数据 ,Web 应用。

详细标签内容可以去: 菜鸟教程HTML5部分学习.

3.IE9 以下版本浏览器兼容HTML5的方法

使用html5shiv包

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

载入后,初始化新标签的CSS

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

详细兼容问题参考链接: 阿西河.

4.语意元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: <div><span> 无需考虑内容。语义元素实例: <form>, <table>, <img> -清楚的定义了它的内容.

5.<Canvas>元素用于图形的绘制canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

实例

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8"></meta>
</head>
<body>
<canvas id= "mycanvas" height= "100" width= "100" 
style="border:1px solid #c3c3c3;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>

实例解析:

首先,找到 元素:
var c=document.getElementById(“myCanvas”);

然后,创建 context 对象:
var ctx=c.getContext(“2d”);
getContext(“2d”) 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形:
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
设置fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。

6.canvas坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

7.canvas路径(画线)

在Canvas上画线,我们将使用以下两种方法:
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用 stroke() 方法来绘制线条:

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

更多canvas使用方法参考菜鸟教程

8.HTML5 支持内联 SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

9.HTML5 MathML

HTML5 可以在文档中使用 MathML 元素,对应的标签是 <math></math>
MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。
详情请点击此处

10.HTML5 拖放(Drag 和 Drop)

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。(学习完后我自己猜测,像华容道这类游戏就可以采用此种设计…,简直不要太爽)

实例加解释如下

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}

function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
  1. 首先,为了使元素img可拖动,把 draggable 属性设置为 true
    <img draggable="true">
  2. 开始拖动 ondragstart,和拖动的内容 setData()
    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
    dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。

  1. 放到何处 ondragover
    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法
function allowDrop(ev)
{
	ev.preventDefault();
}

4.进行放置 ondrop 当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,`drop(event)

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}`

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

11.HTML5 Geolocation(地理定位)自行研究

12.视频Video control 属性提供了很多控件

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

13.音频Aideo

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

14.HTML5 新的 Input 类型

详细请点击这里学习

15.HTML5 表单元素及属性

详细请点击这里学习元素
详细请点击这里学习

16.HTML5中新的语义元素在这里插入图片描述

16.HTML5 web 存储,一个比cookie更好的本地存储方式。

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.

数据以 键/值 对存在, web网页的数据只允许该网页访问使用

localStorage 和 sessionStorage

localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

17.HTML5 Web SQL 数据库

自行学习包含了后端

18.HTML5 应用程序缓存,使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势:

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
</html>

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议的文件扩展名是:".appcache"。

Remark 请注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。

完整的 Manifest 文件

//第一行,CACHE MANIFEST,是必需的:上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

//下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存,且离线时是不可用的
//可以使用星号来指示所有其他资源/文件都需要因特网连接:
NETWORK:
*
NETWORK:
login.php

//下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件
//注意: 第一个 URI 是资源,第二个是替补。
FALLBACK:
/html/ /offline.html

请留心缓存的内容。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。

注意: 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)

19.HTML5 Web Workers,web worker 是运行在后台的 JavaScript,不会影响页面的性能。

由于 web worker 位于外部文件中,它们无法访问下列 JavaScript 对象:
window 对象
document 对象
parent 对象
详细请参考此链接

20.HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更(不用询问)。

21.HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。点此看详细内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值