HTML5学习第四节 HTML5的所有标签介绍

这个标签html4和5都支持，主要用于页面中的注释。测试代码如下

该标签主要作用是告知浏览器所使用的HTML规范，这个标签很重要，能让浏览器了解预期的文档类型。HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行。）。

在HTML4中有三种文档类型，而在HTML5中只有这一种类型。具体写法如上的：

该属性主要是指定目标URL针对哪些媒介类型，如针对（iphone等）

运算符	描述
and	规定 AND 运算符。
not	规定 NOT 运算符。
,	规定 OR 运算符。

值	描述
all	默认。适合所有设备。
aural	语音合成器。
braille	盲文反馈装置。
handheld	手持设备（小屏幕、有限的带宽）。
projection	投影机。
print	打印预览模式/打印页面。
screen	计算机屏幕。
tty	电传打字机以及使用等宽字符网格的类似媒介。
tv	电视类型设备（低分辨率、有限的分页能力）。

值	描述
width	规定目标显示区域的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-width:500px)"
height	规定目标显示区域的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (max-height:700px)"
device-width	规定目标显示器/纸张的宽度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-width:500px)"
device-height	规定目标显示器/纸张的高度。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (device-height:500px)"
orientation	规定目标显示器/纸张的取向。可能的值："portrait" 或 "landscape" 例子：media="all and (orientation: landscape)"
aspect-ratio	规定目标显示区域的宽度/高度比。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	规定目标显示器/纸张的 device-width/device-height 比率。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (aspect-ratio:16/9)"
color	规定目标显示器的 bits per color。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (color:3)"
color-index	规定目标显示器能够处理的颜色数。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (min-color-index:256)"
monochrome	规定在单色帧缓冲中的每像素比特。可使用 "min-" 和 "max-" 前缀。例子：media="screen and (monochrome:2)"
resolution	规定目标显示器/纸张的像素密度 (dpi or dpcm)。可使用 "min-" 和 "max-" 前缀。例子：media="print and (resolution:300dpi)"
scan	规定 tv 显示器的扫描方法。可能的值是："progressive" 和 "interlace"。例子：media="tv and (scan:interlace)"
grid	规定输出设备是网格还是位图。可能的值："1" 代表网格，"0" 是其他。例子：media="handheld and (grid:1)"

注意 media 这个属性是html5中的新属性。
4)name 属性，大家注意了，这个在HTML5中不再被支持。

由空格分隔的 URL 列表。当用户点击该链接时，这些 URL 会获得通知。仅在 href 属性存在时使用。这个属性目前也没有完整的解释，不过在网上找到一段英文解释：The ping attribute has been removed from the W3C version of HTML5. 看来是已经被去掉了，真悲剧，研究了这么久是哈意思，结果又被去掉了，不懂英文真悲剧啊！！！！

html5 和 4之间的差异：

已删除的值：appendix, chapter, contents, copyright, glossary, index, section, start, subsection。

新的值：archives, author, bookmark, external, first, index, last, license, nofollow, noreferrer, search, sidebar, tag, up。

值	描述
alternate	链接到文档的替代版本（例如打印页、翻译或镜像）。
archives	链接到文档集或历史数据。
author	链接到文档的作者。
bookmark	用作书签的永久 URL。
external	链接到外部文档。
first	链接到集合中的首个文档。
help	链接到帮助文档。
index	链接到文档的索引。
last	链接到集合中最后的文档。
licence	链接到文档的版权信息。
next	集合中下一个文档。
nofollow	链接到未认可的文档，比如付费链接。 Google 使用 "nofollow" 来规定其搜索蜘蛛不跟踪该链接。
noreferrer	规定当用户跟随该超链接时，浏览器不应发送 HTTP referer 头。
prev	集合中的前一个文档。
search	链接到文档的搜索工具。
sidebar	链接到应该在浏览器边栏中显示的文档。
tag	当前文档标签（关键词）。
up	提供指向一个文档的链接。该文档提供当前文档的上下文关系。

值	描述
_blank	在新窗口中打开被链接文档。
_self	在被点击时的同一框架中打开被链接文档（默认）。
_parent	在父框架中打开被链接文档。
_top	在窗口主体中打开被链接文档。

此标签里的内容表示该内容是缩写，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息，标签最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

该标签定义文档作者或拥有者的联系信息，如果这个标签位于article标签内，则表示这篇文章的作者联系信息。

此标签定义图像映射中的区域。这个标签的一些属性HTML5不再支持。

属性	描述	4	5
alt	定义此区域的替换文本。仅在 href 属性存在时使用。	4	5
coords	定义可点击区域的坐标。	4	5
href	定义此区域的目标 URL。	4	5
hreflang	规定目标 URL 的基准语言。仅在 href 属性存在时使用。	4	5
nohref	不赞成。从图像映射排除一个区域。	4
media	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。		5
ping	由空格分隔的 URL 列表，当用户点击该链接时，这些 URL 会获得通知。仅在 href 属性存在时使用。		5
rel	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。		5
shape	规定区域的形状。	4	5
target	在何处打开目标 URL。	4	5
type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。		5

9.article 定义外部内容，就是引用的外部文章，可以是论坛文章、或者是博客文章，或者是。。 5

这个标签定义了外部内容，如外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本，或者是其他外部内容。

标签的内容独立于文档的其余部分。
这个标签可以嵌套，当嵌套的时候内部的标签和外面的标签是有关系的，如一篇文章中包含它的评论。

看下面的例子：


 
  The Very First Rule of Life
  
 
 If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.
 ...
 
  Comments
  
   
    Posted by: George Washington
    
   
   Yeah! Especially when talking about your lobbyist friends!
  
  
   
    Posted by: George Hammond
    
   
   Hey, you have the same first name as me.

这个文档引用了一篇文章“生命的第一准则”，同时又引用了它的两篇评论。

但是注意，当这个标签用来表示作者信息的时候，不适合做嵌套。time标签表示引用外部文章或者内容的发布日期。

10.aside 定义页面内容之外的内容 5

aside的内容可用作侧栏。例子如下：

Me and my family visited The Epcot center this summer.

11. audio 引用音频的标签 5

这个标签的作用就是可以引用声音文件，至目前为止网上大多数的音频播放器仍然是FLASH，在HTML5中可以用audio元素来代替它，audio 元素能够播放声音文件或者音频流。audio支持的音频格式如下：

	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	√	√	√
MP3			√	√
Wav	√	√		√

在页面中引用方式如下：


  
  
Your browser does not support the audio tag.

大家可以看到和视频的引用方式没有太大的区别，这个就不用解释了吧，audio元素的其他属性如下：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL

12.b 定义粗体文字 4&5

标签定义了文本中的部分比其余的部分更重要，并呈现为粗体。这个标签大家都经常用来处理加粗的文本，但是如果你只是为了这个效果，建议用CSS去控制，因为这个标签的原用意是表示重要的文本，这对搜索引擎比较重要！

The house with the red door

13. base 定义一个页面中的基准信息 4&5

这个标签有两个属性，target 和 href，前者表示本页面中的链接都在哪个目标中打开，href表示本页面中所有链接的基准URL，例如：











诺基亚5230

注意这个标签一定要位于head内，浏览器会把例子中

诺基亚5230

的地址整合成“http://www.2345hk.com/index.html”,这个链接会在新窗口中打开。

讲到这里大家可以想到可以用这个标签代替整个页面到处出现的target="_blank",这样可以减少页面大小哦。

14.basefont 定义基准字体 4

不符合标准网页设计的理念,不赞成使用.
basefont标签是单独出现的,
当不使用font定义标签文字样式时，文字将显示basefont定义的样式
属性
- color -- 文字颜色
- face -- 字体
- size -- 字号
basefont是base font size的意思

<basefont face="arial" size="5" color="red">

15.bdo 定义默认的文本方向 4&5

这个标签只有一个属性，dir,这个属性有两个值：ltr、rtl

www.2345hk.com

这个例子说明了从右向左显示文本，不难猜到ltr 就是正常的顺序显示了。

16.big 定义大文本 4

制作更大的文本，HTML5已经不支持了，具体什么作用大家测试下就可以了。

17.blockquote 定义大块的引用 4&5

与

之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。例子如下：

***说过：
帝国主义都是纸老虎 ...

它有个属性：cite 值是URL，这个URL表示从哪里引用过来的。

18.body 文档的所有内容 4&5



文档的标题
文档的内容 ... ...

19.br 换行标签 4&5

插入简单的换行符，这是个但标签，所有没有
结束标签。

This text containsa line break

20.button 标签定义按钮 4&5

先来个例子：

Click Me!

显示内容和input 的 button 一样，不过这个标签可控性较强。如果想要在表单中使用按钮，最好用input，因为不同的浏览器对于button标签提交的值并不一样。

在HTML5中给button新加了autofocus, form, formaction, formenctype, formmethod, formnovalidate 以及 formtarget这些属性

属性	值	描述
autofocusNew	autofocus	如果设置，则当页面加载后使按钮获得焦点。
disabled	disabled	禁用按钮。
formNew	form_name	规定按钮属于哪个表单。
formactionNew	url	规定当提交表单时向何处提交表单数据。覆盖表单的 action 属性。
formenctypeNew	见注释	规定如何在表单数据发送到服务器之前如何进行编码。覆盖表单的 enctype 属性。
formmethodNew	delete get post put	规定如何发送表单数据。覆盖表单的 method 属性。
formnovalidateNew	formnovalidate	如果设置，指示是否在提交时验证表单。覆盖表单的 novalidate 属性。
formtargetNew	_blank _self _parent _top framename	规定在何处打开 action 中的 URL。覆盖表单的 target 属性。
name	button_name	规定按钮的名称。
type	button reset submit	定义按钮的类型。
value	some_value	规定按钮的初始值。可由脚本进行修改。

formenctypeNew 属性可能的值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

21.canvas 标签定义图形，例如图表或者其他图形。5

这个标签可以用来画图，但是这个标签本身并没有绘图能力，主要是通过JAVASCRIPT来绘制。它只是个容器而已。

看看下面的例子：



var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

大多数 Canvas 绘图 API 都没有定义在

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径操作。绘图环境的各种属性，比如 fillStyle，说明了这些操作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个

这个标签主要属性就两个 height 和 width

所以主要是通过getContext()获得画布的绘图环境，那么这个函数返回的对象又有哪些属性和方法呢？

HTML5学习第四节 HTML5的所有标签介绍

html5 和 4之间的差异：

Comments

你可能感兴趣的:(.NET,HTML,WEB)