HTML 学习手册(常用的标签)

 

目录(?)[+]

  1. HTML标签
    1. DOCTYPE
    2. a 标签可定义锚
    3. abbr
    4. acronym
    5. address
    6. area 映射区域
    7. 字体样式元素
    8. base 元素基准的url
    9. bdo 元素文本方向
    10. blockquote 标签
    11. body标签
    12. caption 标签
    13. col 标签表格列的属性
    14. dl 列表
    15. dt
    16. dd
    17. del 删除线
    18. ins下划线
    19. fieldset 元素表单打包
    20. form标签
    21. frameset
    22. frameset 框架
    23. head 元素
    24. hr 标签可插入一个水平线
    25. iframe 元素内联框架
    26. img元素
    27. input 标签
    28. label 标签
    29. ol 标签定义了有序列表
    30. ul 标签定义了无序列表
    31. li 标签定义了列表项目
    32. meta 元素元信息
    33. noframes 不支持框架的浏览器
    34. script标签
    35. noscript 标签
    36. object潜入对象
    37. select 元素可创建单选或多选菜单
    38. optgroup 标签定义选项组
    39. option 元素下拉列表中的一个选项一个条目
    40. pre 元素定义预格式化的文本
    41. span行内元素
    42. table 标签定义表格
    43. tbody 标签表格主体正文
  2. HTML 事件
    1. 表单事件仅在表单元素中有效
    2. 键盘事件
  3. HTTP消息状态
    1. xx 信息
    2. xx 成功
    3. xx 重定向
    4. xx 客户端错误
    5. xx 服务器错误

HTML标签

1、

声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2、 标签可定义锚

属性

取值

描述

href

url

连接目标的url

name

section_name

命令一个锚。使用此属性在文档中创建某个书签。在XHTML的未来版本中,name属性会被id属性取代

target

_blank

_parent

_self

_top

在何处打开目标 URL。

_blank:在一个新的未命名的窗口载入文档

_self:在相同的框架或窗口中载入目标文档

_parent:把文档载入父窗口或包含了超链接引用的框架的框架集

_top:把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

一个锚有两种用法:

通过使用 href 属性,创建一个到另外一个文档的链接

通过使用 name 或 id 属性,创建一个文档内部的书签

(1)创建锚

点击上面的连接,会定位到

Chapter 4或者Chapter4的文件

(2)创建电子邮件

发送邮件

3、

表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

注释:在某些浏览器中,当您把鼠标移至缩略词语上时,title 属性可被用来展示表达的完整版本。

4、

定义只取首字母缩写,比如 "NATO"。通过对只取首字母缩写进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

5、

定义一个地址(比如电子邮件地址)。您应当使用它来定义地址、签名或者文档的作者身份

6、 映射区域

定义图像映射中的某个区域

属性

取值

描述

coords

坐标值

定义可点击区域的坐标

href

URL

定义此区域的目标URL

nohref

true

false

从图像映射排除某个区域。

shape

rect

rectangle

circ

circle

poly

polygon

定义区域的形状

注:coords 属性

标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。

下面列出了每种形状的适当值:

圆形:shape="circle",coords="x,y,z"

这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z 是以像素为单位的圆形半径。

多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."

每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。

多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

矩形:shape="rectangle",coords="x1,y1,x2,y2"

第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0"是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

例如

注释:如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

案例:

"#planetmap"

alt="Planets" />

name="planetmap" id="planetmap">

shape="circle"

coords="180,139,14"

href =" "

target ="_blank"

alt="Venus" />

注释:img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

7、字体样式元素

它们不被赞成使用,通过使用样式表会取得更加多样的效果。

呈现类似打字机或者等宽的文本效果。

显示斜体文本效果。

呈现粗体文本效果。

呈现大号字体效果。

呈现小号字体效果。

标签可定义下标文本

可定义上标文本

8、base 元素:基准的url

可规定页面中所有链接的基准 URL。

通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括

标签中的 URL。

属性

取值

描述

href

URL

规定页面中所有链接的基准URL

traget

……

……

注释 标签必须位于 head 元素内部。

案例:

head中

href可以是绝对的url或者相对的url

body中

实际是这样的代码

9、bdo 元素:文本方向

可覆盖默认的文本方向。

属性

取值

描述

dir

ltr

rtl

定义文件的方向

案例:逆序输出

Here issome Hebrew text

10、
标签

可定义一个块引用。

之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。

11、body标签

body中的alink(规定文档中活动链接(activelink)的的颜色)、background(用作背景的图像)、bgcolor(文档的背景颜色)、link(文档中所有链接的颜色)、text(文档中所有文本的颜色)、vlink(文档中所有被访链接的颜色)这些属性不推荐使用,推荐使用样式表中的属性。

12、 标签

caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

案例:

我的标题
100

13、 标签:表格列的属性

为表格中一个或多个列定义属性值。您只能在表格或 colgroup 中使用此元素。

如果您希望在 colgroup 内部为每个列规定不同的属性值时,请使用此元素。如果没有 col 元素,列会从 colgroup 那里继承所有的属性值。

案例

  

  

  

  

  

  

  

1 2 3 4

应当横跨的列数

属性

取值

描述

align

right

left

center

justify

char

在列中定义单元格中内容的水平排列方式

char

character

规定根据那种字符来进行文本对奇。仅当align=char使用

span

number

定义

valign

top

middle

bottom

在列中定义单元格中内容的垂直排列方式

width

定义列的宽度

创建一个有 5 列的。我们分别将第一列和最后一列靠左和靠右对齐,中间的三列居中。

14、
:列表

标签定义了定义列表。

15、

定义列表中的项目(即术语部分)。

16、

可在定义列表中定义条目的定义部分。

案例

 

Coffee

 

Black hot drink1

 

Black hot drink2

 

Milk

 

White cold drink

输出:

Coffee

Blackhot drink1

Blackhot drink2

Milk

Whitecold drink

17、 :删除线

定义文档中已被删除的文本

18、:下划线

来描述文档中的更新和修正。

19、fieldset 元素。表单打包

标签将表单内容的一部分打包,生成一组相关表单的字段。
标签没有必需的或唯一的属性。

当一组表单元素放到

标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素

legend 元素可为 fieldset 定义一个标题

案例

健康信息:

20、form标签

form 元素可为用户输入创建表单。

表单可包含文本域,复选框,单选按钮等等。表单用于向指定的 URL 传递用户数据。

属性

取值

描述

action

URL

当确认按钮按下时,接受和处理表单数据的url

method

get

post

用于向action URL传递数据的HTTP方法,默认是get

accept-charset

字符集名称列表

一个服务器可接受的字符集的列表(用逗号分隔)

enctype

MIME类型

用来编码表单内容的MIME类型

name

表单名称

定义表单的唯一名称

target

在何处打开目标URL

发送邮件表单案例

21、

在 中定义一个框架

注释:如果您希望验证某个包含框架的页面,请确保DTD 被设置为 "Frameset DTD"。阅读更多有关 XHTML 验证的内容。

重要事项:您不能与 标签一起使用 标签。不过,如果您需要为不支持框架的浏览器添加一个 标签,请务必将此标签放置在 <body></body> 标签中!</p> <table border="1"> <tbody> <tr> <td valign="top"> <p>属性</p> </td> <td valign="top"> <p>取值</p> </td> <td valign="top"> <p>描述</p> </td> </tr> <tr> <td valign="top"> <p>frameborder</p> </td> <td valign="top"> <p>0</p> <p>1</p> </td> <td valign="top"> <p>是否显示框架周围的边框</p> </td> </tr> <tr> <td valign="top"> <p>longdesc</p> </td> <td valign="top"> <p>url</p> </td> <td valign="top"> <p>此框架内容的长的url,可为那些不支持框架的浏览器使用此属性</p> </td> </tr> <tr> <td valign="top"> <p>marginheight</p> </td> <td valign="top"> <p>pixels</p> </td> <td valign="top"> <p>定义框架中的顶部和底部的边距</p> </td> </tr> <tr> <td valign="top"> <p>marginwidth</p> </td> <td valign="top"> <p>pixels</p> </td> <td valign="top"> <p>定义框架中左侧和右侧边距</p> </td> </tr> <tr> <td valign="top"> <p>name</p> </td> <td valign="top"> <p>frame_name</p> </td> <td valign="top"> <p>为框架定义唯一的名称(以便在脚本中使用)</p> </td> </tr> <tr> <td valign="top"> <p>noresize</p> </td> <td valign="top"> <p>noresize</p> </td> <td valign="top"> <p>用户无法对框架调整尺寸</p> </td> </tr> <tr> <td valign="top"> <p>scrolling</p> </td> <td valign="top"> <p>yes</p> <p>no</p> <p>atuo</p> </td> <td valign="top"> <p>确定滚动条的行为</p> </td> </tr> <tr> <td valign="top"> <p>src</p> </td> <td valign="top"> <p>url</p> </td> <td valign="top"> <p>定义显示框架中的文件的url</p> </td> </tr> </tbody> </table> <p>案例:</p> <p><span style="background:#FFFF00;">水平框架</span></p> <p><frameset cols="35%,30%,35%"noresize="noresize" frameborder="0"></p> <p><frame src="a.html"></p> <p><frame src="b.html"></p> <p><frame src="c.html"></p> <p><noframes></p> <p><body>您的浏览器无法处理框架!</body></p> <p>

垂直框架

</p> <p><body>您的浏览器无法处理框架!</body></p> <p>

混合框架

导航框架

"content.html">

name="showframe">

content.html

<a href ="a.html" target ="showframe">Framea

target ="showframe">Frameb

target ="showframe">Framec

带锚的框架

#C10">

22 、frameset 框架

可定义一个框架集。它被用来组织多个窗口(框架)。每个框架存有独立的文档。在其最简单的应用中,frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性

属性

取值

描述

cols

pixels

%

*

定义框架集中列的数目和尺寸

rows

pixels

%

*

定义框架集中行的数目和尺寸

cols和rows作用和用法

标签有一个必需的属性:要么是 rows,要么是 cols,这取决于您的选择,它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。

这两个属性都接受用引号括起来并用逗号分开的值列表,这些数值指定了框架的绝对(像素点)或相对(百分比或其余空间)宽度(对列而言),或者绝对或相对高度(对行而言)。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。

与表格一样,浏览器在显示时会尽可能接近给定的框架集尺寸。但是,浏览器不会为了能够容纳下超出边沿的框架集而扩展文档窗口的边界,也不会在指定的框架没有填满整个窗口时用空白区域来填满窗口。相反,浏览器会根据一个框架在行和列中相对于其他框架的大小来分配空间,这样就能够填满整个文档窗口了。(注意到一个主框架文档中没有滚动条了吗?)

23、head 元素

可包含关于文档的信息。浏览器不会向用户显示这些头部信息("headinformation")。下面这些标签可用在 head 部分:, , ,

36、object:潜入对象

定义个潜入对象。可以向页面添加多媒体。

注释:object 元素可位于在 head 元素或 body 元素内部。 之间的文本是替换文本,针对不支持此标签的浏览器。标签可定义用于对象的 run-time 设置。

注释:至于图像,请使用 标签代替 标签

属性

取值

描述

align

left

right

top

bottom

定义围绕该对象的文本对齐方式

archive

URL

一个空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源。有关 archive 属性的详细信息

border

pixels

定义对象周围的边框

classid

class ID

定义嵌入 Windows Registry 中或某个 URL 中的类的 ID 值,此属性可用来指定浏览器中包含的对象的位置,通常是一个 Java 类。

有关 classid 属性的详细信息

codebase

URL

定义在何处可找到对象所需的代码,提供一个基准 URL。

有关 codebase 属性的详细信息。

codetype

MIME type

通过 classid 属性所引用的代码的 MIME 类型。

有关 codetype 属性的详细信息。

data

URL

定义引用对象数据的 URL。如果有需要对象处理的数据文件,要用 data 属性来指定这些数据文件。

declare

declare

可定义此对象仅可被声明,但不能被创建或例示,直到此对象得到应用为止。

height

pixels

定义对象的高度

hspace

pixels

定义对象周围水平方向的空白

name

unique_name

为对象定义唯一的名称(以便在脚本中使用)

standby

text

定义当对象正在加载时所显示的文本

type

MIME_type

定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。

usemap

URL

规定与对象一同使用的客户端图像映射的 URL

vspace

pixels

定义对象的垂直方向的空白

width

pixels

定义对象的宽度

37、select 元素可创建单选或多选菜单。

当提交表单时,浏览器会提交选定的项目,或者收集用逗号分隔的多个选项,将其合成一个单独的参数列表,并且在将 标签的菜单或是滚动列表中的一个元素显示。

注释:

注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。

属性

取值

描述

disabled

disabled

首次加载时被禁用

lable

text

定义当使用optgroup时所使用的标注

selected

selected

在首次显示在列表中时表现为选中状态

value

text

送往服务器的选项值

案例:

40、pre 元素:定义预格式化的文本。

被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

标签的一个常见应用就是用来表示计算机的源代码。

制表符(tab)在

 标签定义的块当中可以起到应有的作用,每个制表符占据 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 
 标签格式化的文档段中使用空格,可以确保文本正确的水平位置。

41、span:行内元素

标签被用来组合文档中的行内元素。

提示和注释:

提示:请使用 来组合行内元素,以便通过样式来格式化它们。

注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

42、 标签:定义表格。

标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

属性

取值

描述

align

left

right

center

排列表格,不赞成使用,使用样式表取代

bgcolor

rgb

规定表格的背景颜色,不赞成使用,使用样式表

border

pixels

规定表格边框的宽度

可以通过border=‘0’来显示无边框的表格

cellpadding

pixels

%

规定单元边沿与其内容之间的空白

cellspacing

pixels

%

规定单元格之间的空白

frame

void,above,bellow,

hsides,lhs,rhs,

vsides,box,border

规定表格周围的那一侧的边框是可见,要与border配合使用

rules

none,groups,rows

cols,all

规定水平或垂直的分界线

必须要与border属性配合使用

summary

text

为语音合成/非视觉浏览器规定表格的摘要

width

pixels

%

规定表格的宽度

案例:

带标题的表格:

我的标题

  100

  400

跨列:colspan="2"

跨行:rowspan="2"

43、 标签:表格主体(正文)。

使用 标签,可以将表格分为一个单独的部分。 标签可将表格中的一行或几行合成一组。

虽然您可能想包括一个,甚至会在表格中包括两个或更多个 标签,但是我们建议最好在表格中没有 标签。

在 标签中,只有 标签可以定义表格行。并且一旦定义,一个 标签就是表格中的一个独立的部分。例如不能从一个 跨越到另一个 中。

thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上

HTML 事件

1、表单事件(仅在表单元素中有效)

属性

描述

onchange

脚本

当元素改变时执行

onsubmit

脚本

当表单被提交时执行

onreset

脚本

当表单被重置时执行

onselect

脚本

当元素被选取时执行

onblur

脚本

当元素失去焦点执行

onfocus

脚本

当元素获得焦点执行

2、键盘事件

属性

描述

onkeydown

脚本

当键盘被按下时执行

onkeypress

脚本

当键盘被按下后又松开时执行

onkeyup

脚本

当键盘被松开时执行脚本

3、鼠标事件

属性

描述

onclick

脚本

当鼠标被单击时执行

ondblclick

脚本

当鼠标被双击时执行

onmousedown

脚本

当鼠标按钮被按下时执行

onmousemove

脚本

当鼠标指针移动时执行脚本

onmouseout

脚本

当鼠标指针移出某元素时执行脚本

onmouseover

脚本

当鼠标指针悬停于某元素之上时执行脚本

onmouseup

脚本

当鼠标按钮被松开时执行脚本

HTTP消息状态

1xx: 信息

消息

描述

100 continue

服务器仅接受到部分请求,但是一旦服务器并没有拒绝该请求,客户端应继续发送其余的请求

101 switching protocols

服务器转换协议:服务器将遵从客户的请求转换到另外一种协议

2xx: 成功

消息

描述

200 ok

请求成功(其后对GET和POST请求的应答文档 )

201 create

请求被创建成功,同时新的资源被创建

202 accepted

供处理的请求已被接受,但是处理未完成

203

non-authoritative information

文档已经正常地返回,但一些应答可能不正确,因为使用的是文档的拷贝

204 no content

新页面,而servlet可以确定用户文档足够新,这个状态代码是很有用的

205reset content

没有想新文档,但浏览器应该重置它所显示的内容,用来强制浏览器清除表单输入内容

206 partial content

客户发送一个带有Range头的get请求,服务器完成了它

3xx: 重定向

消息

描述

300 multiple choices

多重选择,链接列表,用户可以选择某链接到达目的地。最多允许五个地址

301 moved permanently

所请求的页面已经转移 至新的url

302 found

所请求的页面已经临时转移至新的url

303 see other

所请求的页面可在别的url下找到

304 not modified

未按预期修改文档,客户端有缓冲的文档并发出一个条件性的请求(一般是提供if-modified-since头表示客户只想指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用

4xx: 客户端错误

消息:

描述:

400 Bad Request

服务器未能理解请求。

401 Unauthorized

被请求的页面需要用户名和密码。

402 Payment Required

此代码尚无法使用。

403 Forbidden

对被请求页面的访问被禁止。

404 Not Found

服务器无法找到被请求的页面。

405 Method Not Allowed

请求中指定的方法不被允许。

406 Not Acceptable

服务器生成的响应无法被客户端所接受。

408 Request Timeout

请求超出了服务器的等待时间。

5xx: 服务器错误

消息:

描述:

500

Internal Server Error

请求未完成。服务器遇到不可预知的情况。

501 Not Implemented

请求未完成。服务器不支持所请求的功能。

502 Bad Gateway

请求未完成。服务器从上游服务器收到一个无效的响应。

503 Service Unavailable

请求未完成。服务器临时过载或当机。

504 Gateway Timeout

网关超时。

505 HTTP Version Not Supported

服务器不支持请求中指明的HTTP协议版本。

你可能感兴趣的:(程序设计,html,htm)