首页 > 代码库 > HTML 5 教程

HTML 5 教程

2024-09-22 16:30:11   217人阅读

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=http://www.mamicode.com/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 教程


联系
我们