HTML5总结(一)
来源：互联网 发布：夜间灯光数据 编辑：程序博客网 时间：2024/06/06 21:44
HTML5
-简介
HTML5是HTML最新的修订版本，是 W3C 与 WHATWG 合作的结果。
-特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
-HTML5 <!DOCTYPE>
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
-HTML5 Canvas
<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成.
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
<canvas id="myCanvas" width="200" height="100"></canvas>
首先，找到 <canvas> 元素:
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) 方法定义了矩形当前的填充方式。
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
-HTML5 内联 SVG
--什么是SVG？
SVG 指可伸缩矢量图形
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
--SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML。
--HTML5 拖放（Drag 和 Drop） *
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
然后，规定当元素被拖动时，会发生什么。
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
当放置被拖数据时，会发生 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")
把被拖元素追加到放置元素（目标元素）中。
-HTML5 新的 Input 类型
--color
color 类型用在input字段主要用于选取颜色
-- date
定义一个时间控制器:
--datetime
datetime 类型允许你选择一个日期（UTC 时间）
-- datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
--email
在提交表单时，会自动验证 email 域的值是否合法有效:
--month
定义月与年 (无时区):
--number
number 类型用于应该包含数值的输入域。
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
--range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
--search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
-- tel
定义输入电话号码字段:
--time
定义可输入时间控制器（无时区）。
--url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
--week
week 类型允许你选择周和年。
-HTML5 表单元素
-- <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
--<keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
-- <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出。
-简介
HTML5是HTML最新的修订版本，是 W3C 与 WHATWG 合作的结果。
-特性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
-HTML5 <!DOCTYPE>
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:
-HTML5 Canvas
<canvas> 标签定义图形，通过脚本 (通常是JavaScript)来完成.
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
<canvas id="myCanvas" width="200" height="100"></canvas>
首先，找到 <canvas> 元素:
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) 方法定义了矩形当前的填充方式。
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
在canvas中绘制圆形, 我们将使用以下方法:
arc(x,y,r,start,stop)
使用 canvas 绘制文本，重要的属性和方法如下：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText():
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():
-HTML5 内联 SVG
--什么是SVG？
SVG 指可伸缩矢量图形
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
--SVG优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML。
--HTML5 拖放（Drag 和 Drop） *
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
然后，规定当元素被拖动时，会发生什么。
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
当放置被拖数据时，会发生 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")
把被拖元素追加到放置元素（目标元素）中。
-HTML5 新的 Input 类型
--color
color 类型用在input字段主要用于选取颜色
-- date
定义一个时间控制器:
--datetime
datetime 类型允许你选择一个日期（UTC 时间）
-- datetime-local
datetime-local 类型允许你选择一个日期和时间 (无时区).
在提交表单时，会自动验证 email 域的值是否合法有效:
--month
定义月与年 (无时区):
--number
number 类型用于应该包含数值的输入域。
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
--range
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
--search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
-- tel
定义输入电话号码字段:
--time
定义可输入时间控制器（无时区）。
--url
url 类型用于应该包含 URL 地址的输入域。
在提交表单时，会自动验证 url 域的值。
--week
week 类型允许你选择周和年。
-HTML5 表单元素
-- <datalist> 元素
<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
--<keygen> 元素
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
-- <output> 元素
<output> 元素用于不同类型的输出，比如计算或脚本输出。
阅读全文
0 0
- HTML5总结(一)
- 前端学习总结（一）HTML5基础
- html5移动端知识点总结（一）
- html5移动端知识点总结（一）
- html5移动端知识点总结（一）
- html5移动端知识点总结（一）
- html5的表单总结一（form）
- 前端学习总结（一）HTML5基础
- HTML5(一)
- HTML5(一)
- HTML5(一)
- html5学习新的知识总结（一）
- backbone.js+jqm+html5的移动App开发总结一
- HTML5标签用法总结——基础篇（一）
- HTML5总结
- HTML5总结
- HTML5总结
- HTML5 总结
- javascript深入理解js闭包
- Tp框架-2
- C#中英文切换
- 神经大条的Peter---数据库层相关
- CSS，针对属性background的值url路径问题。
- HTML5总结(一)
- Shrio登陆验证实例详细解读
- kafka的性能测试
- Mybatis 加载 Mapper配置的四种方式
- javaSwing_4Swing的类库
- C++高精度算法之高精度减法
- 正向代理与反向代理的区别
- 初学者的Selenium自动化测试指南，基于Python（一）——元素定位
- sshd控制访问者ip
