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来进行浏览器/服务器之间的通信。