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。

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

HTML 5 教程的更多相关文章

  1. Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  3. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  4. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  5. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  6. wepack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  7. wepack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  8. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  9. Virtual Box配置CentOS7网络（图文教程）

    之前很多次安装CentOS7虚拟机,每次配置网络在网上找教程,今天总结一下,全图文配置,方便以后查看. Virtual Box可选的网络接入方式包括: NAT 网络地址转换模式(NAT,Network ...

  10. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

随机推荐

  1. centos 7 查看所有登录用户的操作历史

    2019-01-07 转自  https://www.cnblogs.com/kevingrace/p/7373146.html centos 7 查看所有登录用户的操作历史 在Linux系统的环境下 ...

  2. mysql：服务器错误代码

    服务器错误代码和消息 原文:https://dev.mysql.com/doc/refman/5.7/en/error-messages-server.html MySQL的程序有几种类型的错误信息时 ...

  3. spring boot快速入门 6: 表单验证

    廖师兄源码: https://gitee.com/liaoshixiong/girl 样例:拦截所有未满18岁的女生 第一步:在girl实体类中:添加注解 @Min(value=18 ,message ...

  4. 利用js对象的特性，去掉数组中的重复项

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. 使用Jasperreporter生成入库出库单打印等报表操作

    项目需要打印报表:就是那种生成入库单,出库单等的操作.使用到的技术:使用iReport Designer5.1.0设计报表,使用struts2+jasperreporter生成最终填充数据的报表 首先 ...

  6. ibatis学习笔记(完整)

    1.       Ibatis是开源软件组织Apache推出的一种轻量级的对象关系映射(ORM)框架,和Hibernate.Toplink等在java编程的对象持久化方面深受开发人员欢迎. 对象关系映 ...

  7. UVM_INFO

    文件:src/ch3/section3.5/3.5.6/get/my_model.sv 21 function void my_model::build_phase(uvm_phase phase); ...

  8. <数据挖掘导论>读书笔记9聚类分析

    1. 聚类分析仅根据在数据中发现的描述对象及其关系的信息,将数据对象分组. 其目标是组内的对象相互之间是相似的或者相关的,而不同组中的对象是不同的或者不相关的. 2.聚类分析的重要技术 K均值:K均值 ...

  9. ora-01747:因为表中存在关键字造成的

    ORCLE报错解决(ora-01747:无效的用户.表.列,表.列)  一.ora-01747:无效的用户.表.列,表.列 这个问题出现是因为表中存在关键字造成的,如果想新增数据直接用sql语句,查询 ...

  10. SQLite数据类型（学习必备）

    最近在学习android端的数据库,以下知识点作为备用- 一.存储种类和数据类型: SQLite将数据值的存储划分为以下几种存储类型:     NULL: 表示该值为NULL值.     INTEGE ...