HTML 5 教程

HTML5 是下一代的 HTML。有必要再过一遍。看下要点。

具体看 http://www.w3school.com.cn/html5/index.asp 教程

和 HTML5 标签参考手册

学习记录：

--------------------------

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

视频 video

音频 audio

---------------------------

页面内容可拖放，具体解释 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

大致是，设置内容可拖动：draggable 属性为true ;

拖动什么：

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

放到何处：

如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() ；

---------

进行放置：

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")
把被拖元素追加到放置元素（目标元素）中

--------------------

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

a. 向 HTML5 页面添加 canvas 元素。

b. canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
----------------
cxt.moveTo(10,10);

cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
---------

cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
--------
画图的，挺有劲，效果有点了。

HTML5 支持内联 SVG。

什么是SVG？

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

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

示例没看明白， canvas 和 svg 如要用还需要找对应的教程再详细看和入门。

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

地理位置，看调用实际能用的地图，国内如 baidu地图高德地图 qq地图

----------

HTML 5 Web 存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

HTML 5 应用程序缓存

Cache Manifest 基础

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

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

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

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

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

【这块具体再看，目前还没接触，实际开发中有不少和数据有关的业务，有时还强行去掉缓存功能】

HTML 5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。

目前还没接触过

HTML 5 服务器发送事件

PHP 代码 (demo_sse.php)：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

代码解释：

把报头 "Content-Type" 设置为 "text/event-stream"
规定不对页面进行缓存
输出发送日期（始终以 "data: " 开头）
向网页刷新输出数据

未试过，不知和 websocket 实现有多大的差异，逻辑上看着类似，后台推数据，前端收到作处理。

-------------

HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

本章全面介绍这些新的输入类型：

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

具体一些实际的校验，还是用正则判断下， number 的属性有点坑（尽量不用）

HTML5 的新的表单元素：

HTML5 拥有若干涉及表单的元素和属性。

本章介绍以下新的表单元素：

datalist
keygen
output

里面的 datalist 功能挺好，与select下拉有一拼

新的 form 属性：

autocomplete
novalidate

新的 input 属性：

autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

这个 multiple 多选挺好

multiple 属性

multiple 属性规定输入域中可选择多个值。

注释：multiple 属性适用于以下类型的 <input> 标签：email 和 file。

实例

Select images: <input type="file" name="img" multiple="multiple" />

pattern 属性

pattern 属性规定用于验证 input 域的模式（pattern）。

模式（pattern）是正则表达式。您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容。

注释：pattern 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

实例

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注释：required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

最后可以来下测试现在就开始测验！祝您好运。

posted @ 2017-05-16 19:01 前端js 阅读(434) 评论(3) 编辑收藏举报

刷新页面返回顶部

前端js

HTML 5 教程

浏览器支持

代码解释：

什么是 Canvas？

什么是SVG？

SVG 的优势

Canvas 与 SVG 的比较

Canvas

SVG

HTML 5 Web 存储

在客户端存储数据

HTML 5 应用程序缓存

Cache Manifest 基础

HTML 5 Web Workers

HTML 5 服务器发送事件

PHP 代码 (demo_sse.php)：

HTML5 新的 Input 类型

HTML5 的新的表单元素：

新的 form 属性：

新的 input 属性：

multiple 属性

实例

pattern 属性

实例

placeholder 属性

required 属性

公告