HTML5 基础学习

HTML 简介

声明文档类型

使用<!DOCTYPE html>声明为HTML5文档。

声明编码方式

声明网页编码格式：为了网页正确显示多种语言，如中文。

<head>
    <meta charset="utf-8" />
</head>

定义网页关键字

方便爬虫爬取。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

定义作者

<meta name="author" content="Designer Feng">

注释

使用对代码块进行注释。

HTML 部分标签

<sup>: 上标

<sub>: 下标

<code>: 代码块

<blockquote>: 引用块，独占一块区域，缩进

<q>: 短引用，效果类似与使用双引号包围起来，一行可以有多个短引用。

<link>: 引用外部资源，通常是引用外部css样式表，如：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<img>、<map>、<area>：img引用原始图片，同时可以指定一个map用来定义图片中的可点击区域，map定义一组area(定义可点击区域)。

例子：

<img src="a.gif" width="200" height="150" alt="alt" usemap="#mymap">

<map name="mymap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html">
  <area shape="circle" coords="90,58,3" alt="Mercury" >
</map>

<dl>、<dt>、<dd>：自定义列表，<dt>：项目名称，<dd>：项目描述，相对于<dt>缩进显示。

<input type='radio' >：单选按钮，如果有多个单选按钮，想实现单选效果，要把name属性定义成一样。

<iframe>: 在当前页面中引入新的页面。

HTML5 新特性

画布

<canvas>：可用于绘制自定义图形。

canvas本身没有绘图功能，必须借助javascript绘图，HTML5内置2d和3d绘图对象，使用javascript获取后操作该对象即可。

获取2d绘图对象：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

绘制矩形：

ctx.rect(x,y,width,height);
ctx.stroke();

填充矩形:

ctx.fillStyle="#FF0000";
ctx.fillRect(x,y,width,height);

绘制圆形（圆弧）：

ctx.arc(x,y,r,start,stop);
ctx.stroke();

如果同时绘制多种图形，stroke()只在最后使用一次即可。

绘制文本：

ctx.font="1em consolas";    //字体大小和类型
ctx.strokeText("Hello World",x,y,maxWidth); //绘制空心文本
ctx.fillText("Hello World",x,y,maxWidth); //绘制实心文本

maxWidth一般不使用，因为指定太小，会造成绘制的字体压缩变形。

音/视频

<audio>: 音频

同<video>，只不过type取值为：audio/mpeg;audio/ogg;audio/wav

<video>: 视频

可以指定多个<source>子标签，浏览器选择第一个可以识别的source进行解析：

src指定视频源
type指定视频类型:video/mp4;video/webm;video/ogg
controls,显示控制面板，播放/暂停/停止等；

<embed>: 引入插件

<track>: 引用外部文本轨道

表单

<datalist>: 与<input>配合使用，表示input可能的输入值。

<input list="data" name="mname">
<datalist id="data">
    <option value="Google">Google</option>
    <option value="IE">IE</option>
</datalist>

<output>: 预留一块输出区域。

新input类型

color，显示颜色面板，可以选择喜欢的颜色。
date，显示一个日期面板。
email，邮件输入框，表单提交时会自动检验输入的邮件格式是否合法，如果不合法会提示用户。
number，数值，同时可以指定min和max表示数值范围。required表示此项必填。如果表单提交时输入的数值为空或者不在该范围内，浏览器会提示用户。
range，滑块控件，同样有min,max,step属性。
search，搜索框，可以同时指定placeholder属性值，给用户一个提示。
tel，电话号码。
url，URL地址。
time，时间。

布局

<article>: 显示博客/新闻/评论等。

<aside>: 侧边栏

<header>: 文档头部区域

<footer>: 定义<section>或者document的页脚。

<section>: 定义文档的段落，页眉，页脚。

<nav>:导航

他们之间的布局关系如下：

-------------------------------
|           <header>          |
-------------------------------
|            <nav>            |
-------------------------------
|   <section>      |  <aside> |
|                  |          |
-------------------|          |
|   <article>      |          |
|                  |          |
-------------------------------
|           <footer>          |
-------------------------------

其它

<command>: 命令按钮，如按钮、单选按钮、复选框等。

<details>与<summary>: 用于描述文档细节描述和细节标题，默认只会显示标题，当点击标题时才会显示细节内容。

<fiture>与<figcation>: <figure>定义一块流内容区域(图像/图表/代码等)，<figcation>定义标题。

内联SVG图形

SVG 指可伸缩矢量图形 (Scalable Vector Graphics), 使用XML格式定义。

使用<svg>标签

支持MathML

MathML是一种数学标记语言。

使用<math>定义。

实际测试发现，浏览器对<math>的支持并不好。

元素拖放

可以将一个元素拖到指定区域，不过要借助javascript。

<head>
    <script>
        function drag(ev) {
            ev.dataTransfer.setData("objId", ev.target.id);
        }

        function dragover(ev) {
            ev.preventDefault();
        }

        function drop(ev) {
            ev.preventDefault();
            var objId = ev.dataTransfer.getData("objId");
            ev.target.appendChild(document.getElementById(objId));
        }
    </script>
</head>    
<body>
    <div id="target" ondragover="dragover(event)" ondrop="drop(event)"></div>
    <br>
    <img id="myimg" src="../css/resources/background.jpg" alt="background33" width="80px" height="60px" draggable="true"
        ondragstart="drag(event)">
</body>

大致思路为：

为拖动对象设置<draggable>属性为true，并为ondragstart属性指定处理函数，一般就是将当前对象的id值保存起来，方便后面操作。
设置目标区域对象的ondragover处理函数，一般就是preventDefault(), 如此设置后，当拖到该区域上方时，鼠标指针会变化，指示可释放。
设置目前区域对象的ondrop处理函数，表示释放时的事件处理。可以取出刚才保存的对象id，然后随意操作。

注意: 自定义的处理函数名尽量不要与内置函数名相同，否则容易误导解析器，导致无法正确处理，如ondragover=“ondragover(event)” 是绝对不行的。

Web存储

使用localStorage和sessionStorage对象存储数据，区别在于localStorage可以永久存储，sessionStorage在标签页或浏览器关闭后会清除。

方法：

setItem(key,vale),保存数据。
getItem(key), 读取数据。
removeItem(key), 删除数据。
clear(), 删除所有数据。
key(index),获取指定索引的key。

Web SQL

操作客户端数据库。

核心方法：

openDatabase，打开数据库并获取一个数据库对象。
transaction, 控制事务，用于数据库操作。
executeSql, 执行数据库语句，如增/删/改/查/。

WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。需要借助javascript来进行浏览器/服务器之间的通信。