HTML、XML、HTML5初识

一、HTML---额外的标签、不常用，但可以知道的

HTML 文本格式化标签
<b> 定义粗体文本 
<em> 定义着重文字 
<i> 定义斜体字 
<small> 定义小号字 
<strong> 定义加重语气 
<sub> 定义下标字 
<sup> 定义上标字 
<ins> 定义插入字 
<del> 定义删除字 
HTML "计算机输出" 标签
<code> 定义计算机代码 
<kbd> 定义键盘码 
<samp> 定义计算机代码样本 
<var> 定义变量 
<pre> 定义预格式文本 
HTML 引文, 引用, 及标签定义
<abbr> 定义缩写 
<address> 定义地址 
<bdo> 定义文字方向 
<blockquote> 定义长的引用 
<q> 定义短的引用语 
<cite> 定义引用、引证 
<dfn> 定义一个定义项目。

二、HTML5---新特性---

HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
———————————————————————————————————————————————————————————————————————
<canvas> 新元素
<canvas> 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API 
新多媒体元素
<audio> 定义音频内容 
<video> 定义视频（video 或者 movie） 
<source> 定义多媒体资源 <video> 和 <audio> 
<embed> 定义嵌入的内容，比如插件。 
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 
新表单元素
<datalist> 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。 
<keygen> 规定用于表单的密钥对生成器字段。 
<output> 定义不同类型的输出，比如脚本的输出。 
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构：
<article> 定义页面独立的内容区域。 
<aside> 定义页面的侧边栏内容。 
<bdi> 允许您设置一段文本，使其脱离其父元素的文本方向设置。 
<command> 定义命令按钮，比如单选按钮、复选框或按钮 
<details> 用于描述文档或文档某个部分的细节 
<dialog> 定义对话框，比如提示框 
<summary> 标签包含 details 元素的标题 
<figure> 规定独立的流内容（图像、图表、照片、代码等等）。 
<figcaption> 定义 <figure> 元素的标题 
<footer> 定义 section 或 document 的页脚。 
<header> 定义了文档的头部区域 
<mark> 定义带有记号的文本。 
<meter> 定义度量衡。仅用于已知最大和最小值的度量。 
<nav> 定义运行中的进度（进程）。 
<progress> 定义任何类型的任务的进度。 
<ruby> 定义 ruby 注释（中文注音或字符）。 
<rt> 定义字符（中文注音或字符）的解释或发音。 
<rp> 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 
<section> 定义文档中的节（section、区段）。 
<time> 定义日期或时间。 
<wbr> 规定在文本中的何处适合添加换行符。 
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
———————————————————————————————————————————————————————————————————————
Canvas
1、创建Canvas
<canvas id="myCanvas" width="200" height="100"
 style="border:1px solid #000000;">
 </canvas> 
2、使用JS绘制图像
首先，找到 <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) 方法定义了矩形当前的填充方式
坐标:
fillRect 方法拥有参数 (0,0,150,75)。
路径：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
圆形
arc(x,y,r,start,stop)
文本：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
渐变
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
3、属性和方法
颜色、样式和阴影
属性
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 
strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 
shadowColor 设置或返回用于阴影的颜色。 
shadowBlur 设置或返回用于阴影的模糊级别。 
shadowOffsetX 设置或返回阴影与形状的水平距离。 
shadowOffsetY 设置或返回阴影与形状的垂直距离。 
方法
createLinearGradient() 创建线性渐变（用在画布内容上）。 
createPattern() 在指定的方向上重复指定的元素。 
createRadialGradient() 创建放射状/环形的渐变（用在画布内容上）。 
addColorStop() 规定渐变对象中的颜色和停止位置。 
线条样式
属性
lineCap 设置或返回线条的结束端点样式。 
lineJoin 设置或返回两条线相交时，所创建的拐角类型。 
lineWidth 设置或返回当前的线条宽度。 
miterLimit 设置或返回最大斜接长度。 
矩形
方法
rect() 创建矩形。 
fillRect() 绘制"被填充"的矩形。 
strokeRect() 绘制矩形（无填充）。 
clearRect() 在给定的矩形内清除指定的像素。
路径
方法
fill() 填充当前绘图（路径）。 
stroke() 绘制已定义的路径。 
beginPath() 起始一条路径，或重置当前路径。 
moveTo() 把路径移动到画布中的指定点，不创建线条。 
closePath() 创建从当前点回到起始点的路径。 
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。 
clip() 从原始画布剪切任意形状和尺寸的区域。 
quadraticCurveTo() 创建二次贝塞尔曲线。 
bezierCurveTo() 创建三次贝塞尔曲线。 
arc() 创建弧/曲线（用于创建圆形或部分圆）。 
arcTo() 创建两切线之间的弧/曲线。 
isPointInPath() 如果指定的点位于当前路径中，则返回 true，否则返回 false。 
转换
方法
scale() 缩放当前绘图至更大或更小。 
rotate() 旋转当前绘图。 
translate() 重新映射画布上的 (0,0) 位置。 
transform() 替换绘图的当前转换矩阵。 
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 
文本
属性
font 设置或返回文本内容的当前字体属性。 
textAlign 设置或返回文本内容的当前对齐方式。 
textBaseline 设置或返回在绘制文本时使用的当前文本基线。
方法
fillText() 在画布上绘制"被填充的"文本。 
strokeText() 在画布上绘制文本（无填充）。 
measureText() 返回包含指定文本宽度的对象。
图像绘制
方法
drawImage() 向画布上绘制图像、画布或视频。 
像素操作
属性
width 返回 ImageData 对象的宽度。 
height 返回 ImageData 对象的高度。 
data 返回一个对象，其包含指定的 ImageData 对象的图像数据。 
方法
createImageData() 创建新的、空白的 ImageData 对象。 
getImageData() 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。 
putImageData() 把图像数据（从指定的 ImageData 对象）放回画布上。 
合成
属性
globalAlpha 设置或返回绘图的当前 alpha 或透明值。 
globalCompositeOperation 设置或返回新图像如何绘制到已有的图像上。 
其他
方法
save() 保存当前环境的状态。 
restore() 返回之前保存过的路径状态和属性。 
createEvent()   
getContext()   
toDataURL() 
video
1、<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">      //<video> 元素支持多个 <source> 元素. <source>可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
您的浏览器不支持Video标签。          //<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的
</video> 
2、视频格式type
MP4 video/mp4 
WebM video/webm 
Ogg video/ogg 
audio
1、<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio> 
2、 类型type
MP3 audio/mpeg 
Ogg audio/ogg 
Wav audio/wav 
3、音频和视频属性
autoplay （autoplay） 设置或返回是否在加载完成后随即播放音频/视频。 
controls（controls） 设置或返回音频/视频是否显示控件（比如播放/暂停等）。 
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）。 
loop（loop） 设置或返回音频/视频是否应在结束时重新播放。 
srcNew （URL） 规定音频文件的 URL。 
preloadNew （auto metadata none） 规定当网页加载时，音频是否默认被加载以及如何被加载。 
4、音频和视频的方法
addTextTrack() 向音频/视频添加新的文本轨道。 
canPlayType() 检测浏览器是否能播放指定的音频/视频类型。 
load() 重新加载音频/视频元素。 
play() 开始播放音频/视频。 
pause() 暂停当前播放的音频/视频。 
input
1、email
E-mail: <input type="email" name="email">
2、number
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
3、range——滑块
<input type="range" name="points" min="1" max="10">
插件
<object> 元素定义了在 HTML 文档中嵌入的对象。
该标签用于插入对象 (例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。
<embed> 
<object width="400" height="50" data="bookmark.swf"></object>
<embed width="100%" height="500px" src="snippet.html">
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> 

三、XML

1、XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计用来传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

2、xml验证

拥有正确语法的 XML 被称为"形式良好"的 XML。

通过 DTD 验证的XML是"合法"的 XML。

如：

<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

或

<?xml version="1.0" ?> 
<!DOCTYPE note [
  <!ELEMENT note (to,from,heading,body)>
  <!ELEMENT to      (#PCDATA)>
  <!ELEMENT from    (#PCDATA)>
  <!ELEMENT heading (#PCDATA)>
  <!ELEMENT body    (#PCDATA)>
]>
<note>
<to>Tove</to> 
<from>Jani</from> 
<heading>Reminder</heading> 
<message>Don't forget me this weekend!</message> 
</note>