HTML学习（2)

本文包括一些html细节以及html5新增内容

1.段落

段落常用<p></p>表示，但浏览器不会显示其中输入的空格，换行等字符，换行、空格需特殊字符表示。并且段落的行数取决于页面的大小。

2.样式

通过style修改样式，例如背景，字体等。可以直接写在标签中，也可以写在外部样式表中，一般是利用css对样式进行修改。

3.链接

<a href="url">链接按钮</a>为最基础的链接，链接按钮也可以是图片，只需将链接按钮替换成所需的图片标签即可。

连接到同一个网页的不同位置，需要在目标位置写上id，url=“#+id”即可。

也可以建立邮箱链接，书写格式：<a href= "mailto:xxxxxx">xxxxx为邮箱地址。

`4.表格`

默认表格是无边框的，通常会在<table>中添加border="1"以便于观察和浏览。

合并行或列，在<th>中添加colspan="n"或rowspan="n"实现n列和n行的合并。

5.列表

无序列表<ul> 默认样式会在每一个<li>前有个黑点,可添加 list-style=""去除黑点或者修改类型.

有序列表<ol>默认样式是数字,也可以在<ol>中添加type=""和start=""来修改序号类型和开始的号码.

`6.表单`

<input type="text" name="user">创建文本域,默认可见 <input type="password" name="password">创建密码域,默认不可见

type的值决定着表单的功能,例如tpye="radio",这是单选框.type="checkbox",这是复选框.type="button",这是一个按钮.等等.

<input>添加value="",这是给带有文本域的表单一个初始值.

H5新增

1.canvas

<canvas> 元素用于图形的绘制，一般需要通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，须使用脚本来绘制图形。

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>

首先添加画布.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

利用js绘制.第一步找到canvas元素,第二步创建context对象,将其定义成二维网络,最后进行绘制. 上面的 fillRect 方法拥有参数 (0,0,150,75),意思是在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

Canvas路径

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标

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

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条 .

Canvas文本

font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
ctx.strokeText("Hello World",10,50);

Canvas渐变

createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas 图像

drawImage(image,x,y)将一幅图像放置到画布上

2.SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，用于定义用于网络的基于矢量的图形。H5 支持内联 SVG。<svg> 元素是 SVG 图形的容器。在 H5 中，您能够将 SVG 元素直接嵌入 HTML 页面中。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

cx="圆的x轴坐标"，cy="圆的y轴坐标"，r="圆的半径". 必需.+ 显现属性：颜色，FillStroke，图形。xmlns指的是命名空间。

SVG 与 Canvas两者间的区别

SVG 是一种使用 XML 描述 2D 图形的语言。

Canvas 通过 JavaScript 来绘制 2D 图形。

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。

在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

3.MathML

MathML 是数学标记语言，用来在互联网上书写数学符号和公式的置标语言，对应的标签是 <math></math> 。简单的 MathML 实例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>菜鸟教程(runoob.com)</title></head><body><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow></math></body>
</html>

结果为a²+b²=c²

4.拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，拖放是标准的一部分，任何元素都能够拖放。

首先，为了使元素可拖动，把 draggable 属性设置为 true 。
ondragstart 和 setData（）规定当元素被拖动时，会发生什么。ondragstart 属性调用了一个函数，drag（event），它规定了被拖动的数据。dataTransfer.setData（）方法设置被拖数据的数据类型和值。
ondragover 事件规定在何处放置被拖动的数据。通过调用 ondragover 事件的 event.preventDefault（）方法。
进行放置，当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，drop（event）

5.地理位置

Geolocation API 用于获得用户的地理位置。使用 getCurrentPosition() 方法来获得用户的位置，返回用户位置的经度和纬度。

6.视频

<video> 元素提供了播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

<video> 和 <audio> 元素同样拥有方法、属性和事件。<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制。

7.音频

使用 <audio> 元素在网页上嵌入音频元素。

<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">
</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

8.新input

H5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。如：color，date，datetime，datetime-local，emailmonth，number，range，search，tel，time，url，week等

color 类型用在input字段主要用于选取颜色。

date 类型允许你从一个日期选择器选择一个日期。

datetime 类型允许你选择一个日期（UTC 时间）。

datetime-local 类型允许你选择一个日期和时间 (无时区)。

email 类型用于应该包含 e-mail 地址的输入域。

month 类型允许你选择一个月份。

number 类型用于应该包含数值的输入域，并且能够设定对所接受的数字的限定。

range 类型用于应该包含一定范围内数字值的输入域，显示为滑动条。

search 类型用于搜索域，比如站点搜索或 Google 搜索。

tel类型用于输入电话号码字段。

time 类型允许你选择一个时间。

url 类型用于应该包含 URL 地址的输入域，在提交表单时，会自动验证 url 域的值。

week 类型允许你选择周和年。

9.新表单

HTML5 有以下新的表单元素:<datalist>，<keygen>，<output>

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

使用 <input> 元素的列表属性与 <datalist> 元素绑定。

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<output> 元素用于不同类型的输出，比如计算或脚本输出。

HTML5 的 <form> 和 <input>标签添加了几个新属性：

<form>新属性：autocomplete，novalidate。

<input>新属性：autocomplete，autofocus，form，formaction，formenctype，formmethod，formnovalidate，formtarget，height 与 width，list，min 与 max，multiple，pattern (regexp)，placeholder，equired，step。

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

novalidate 属性是一个 boolean(布尔) 属性。novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

autofocus 属性是一个布尔属性，规定在页面加载时，域自动地获得焦点。

form 属性规定输入域所属的一个或多个表单。如需引用一个以上的表单，请使用空格分隔的列表。

formaction 属性用于描述表单提交的URL地址，并且会覆盖<form> 元素中的action属性。

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)。formenctype 属性会覆盖 form 元素的 enctype 属性。该属性与 type="submit" 和 type="image" 配合使用。

formmethod 属性定义了表单提交的方式。formmethod 属性会覆盖了 <form> 元素的 method 属性。该属性可以与 type="submit" 和 type="image" 配合使用。

novalidate 属性是一个 boolean 属性。novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 <form> 元素的novalidate属性。formnovalidate 属性与type="submit一起使用

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

multiple 属性是一个 boolean 属性。multiple 属性规定<input> 元素中可选择多个值。multiple 属性适用于以下类型的 <input> 标签：email 和 file。

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password。

placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。

required 属性是一个 boolean 属性。required 属性规定必须在提交之前填写输入域（不能为空）。required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

step 属性为输入域规定合法的数字间隔。如果 step="3"，则合法的数是 -3,0,3,6 等。step 属性可以与 max 和 min 属性创建一个区域值。step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。

10.H5 语义元素

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article> 标签定义独立的内容。.

<nav> 标签定义导航链接的部分。用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。aside 标签的内容应与主区域的内容相关。

<header>元素描述了文档的头部区域。主要用于定义内容的介绍展示区域。在页面中你可以使用多个<header> 元素。

<footer> 元素描述了文档的底部区域。<footer> 元素应该包含它的包含元素。一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。文档中你可以使用多个 <footer>元素。

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题。应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

11.web储存

客户端存储数据的两个对象为：

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

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

11.SQL数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。

以下是规范中定义的三个核心方法：

openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。

打开数据库

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。openDatabase() 方法对应的五个参数说明：数据库名称，版本号，描述文本，数据库大小，创建回调。

执行查询操作

执行操作使用 database.transaction() 函数：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

插入数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});

读取数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);db.transaction(function (tx) {tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});db.transaction(function (tx) {tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {var len = results.rows.length, i;msg = "<p>查询记录条数: " + len + "</p>";document.querySelector('#status').innerHTML +=  msg;for (i = 0; i < len; i++){alert(results.rows.item(i).log );}}, null);
});

删除记录

db.transaction(function (tx) {tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

更新记录

db.transaction(function (tx) {tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});

12.应用程序缓存

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

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

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

如需启用应用程序缓存，请在文档的<html> 标签中包含 manifest 属性。每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。manifest 文件的建议的文件扩展名是：".appcache"。

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

13.Web Workers

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。下面的例子创建了一个简单的 web worker，在后台计数：

var i=0;function timedCount()
{i=i+1;postMessage(i);setTimeout("timedCount()",500);
}timedCount();

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

Server-Sent 事件指的是网页自动获取来自服务器的更新。

var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{document.getElementById("result").innerHTML+=event.data + "<br>";
};

创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 "demo_sse.php"）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中

本文章参考

菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)