HTML标签详解

HTML标签

1、<!DOCTYPE>

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

<!DOCTYPEhtml

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

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

2、<a> 标签可定义锚

属性

取值

描述

href

url

连接目标的url

name

section_name

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

target

_blank

_parent

_self

_top

在何处打开目标 URL。

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

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

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

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

一个锚有两种用法:

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

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

(1)创建锚

<ahref="#C4">锚</a>

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

<aid="C4">Chapter 4</a>或者<a name="C4">Chapter4</a>的文件

(2)创建电子邮件

<aref="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>

3、<abbr>

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

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

4、<acronym>

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

5、<address>

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

6、<area> 映射区域

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

属性

取值

描述

coords

坐标值

定义可点击区域的坐标

href

URL

定义此区域的目标URL

nohref

 

true

false

 

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

shape

rect

rectangle

circ

circle

poly

polygon

定义区域的形状

注:coords 属性

<area> 标签的 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"是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。

例如

<map name="map">

 <area shape="rect" coords="75,75,99,99"nohref="nohref">

 <area shape="circ" coords="50,50,25"nohref="nohref">

</map>

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

案例:

<img   src="eg_planets.jpg"  usemap="#planetmap"

alt="Planets" />

<map name="planetmap" id="planetmap">

<area

shape="circle"

coords="180,139,14"

href =" "

target ="_blank"

alt="Venus" />

</map>

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

7、字体样式元素

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

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

<i> 显示斜体文本效果。

<b> 呈现粗体文本效果。

<big> 呈现大号字体效果。

<small> 呈现小号字体效果。

<sub> 标签可定义下标文本

<sup> 可定义上标文本

8、base 元素:基准的url

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

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

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

属性

取值

描述

href

URL

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

traget

……

……

注释:<base> 标签必须位于 head 元素内部。

案例:

head中

<base target="_blank"href="img/">href可以是绝对的url或者相对的url

body中

<img src="520.jpg"/>

实际是这样的代码

<img src="./img/520.jpg"/>

9、bdo 元素:文本方向

可覆盖默认的文本方向。

属性

取值

描述

dir

ltr

rtl

定义文件的方向

案例:逆序输出

<bdo dir="rtl">Here issome Hebrew text</bdo>

10、<blockquote> 标签

可定义一个块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进,而且有时会使用斜体。

11、body标签

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

12、 <caption> 标签

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

案例:

<table>

<caption>我的标题</caption>

<tr>

 <td>100</td>

</tr>

</table>

13、<col> 标签:表格列的属性

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

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

案例

<table border="1">

 <colgroup span="3">

   <col width="20"></col>

   <col width="50"></col>

   <col width="80"></col>

 </colgroup>

 <tr>

   <td>1</td>

   <td>2</td>

   <td>3</td>

   <td>4</td>

 </tr>

</table>

属性

取值

描述

align

right

left

center

justify

char

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

char

character

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

span

number

定义<col>应当横跨的列数

valign

top

middle

bottom

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

width

 

定义列的宽度

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

<colgroup>

 <col align="left" />

 <col align="center" span="3" />

 <col align="right" />

</colgroup>

14、<dl> :列表

标签定义了定义列表。

15、<dt>

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

16、<dd>

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

案例

<dl>

  <dt>Coffee</dt>

  <dd>Black hot drink1</dd>

  <dd>Black hot drink2</dd>

  <dt>Milk</dt>

  <dd>White cold drink</dd>

</dl>

输出:

Coffee

Blackhot drink1

Blackhot drink2

Milk

Whitecold drink

17、<del> :删除线

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

18、<ins>:下划线

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

19、fieldset 元素。表单打包

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

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

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

案例

<fieldset>

<legend>健康信息:</legend>

<form>

<label>身高:<inputtype="text" /></label>

<label>体重:<inputtype="text" /></label>

</form>

</fieldset>

20、form标签

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

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

 

属性

取值

描述

action

URL

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

method

 

get

post

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

accept-charset

字符集名称列表

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

enctype

MIME类型

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

name

表单名称

定义表单的唯一名称

target

 

在何处打开目标URL

发送邮件表单案例

<formaction="http:///someone@w3school.com.cn"  method="post"enctype="text/plain">

<input type="text" name="name"value="yourname" size="20">

<input type="submit"value="发送">

<input type="reset"value="重置">

</form>

21、<frameset>

在 <frameset> 中定义一个框架

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

重要事项:您不能与<frameset></frameset> 标签一起使用 <body></body>标签。不过,如果您需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!

属性

取值

描述

frameborder

0

1

是否显示框架周围的边框

longdesc

url

此框架内容的长的url,可为那些不支持框架的浏览器使用此属性

marginheight

pixels

定义框架中的顶部和底部的边距

marginwidth

pixels

定义框架中左侧和右侧边距

name

frame_name

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

noresize

noresize

用户无法对框架调整尺寸

scrolling

yes

no

atuo

确定滚动条的行为

src

url

定义显示框架中的文件的url

案例:

水平框架

<frameset cols="35%,30%,35%"noresize="noresize" frameborder="0">

 <frame src="a.html">

 <frame src="b.html">

 <frame src="c.html">

<noframes>

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

</noframes>

</frameset>

垂直框架

<framesetrows="35%,30%,35%" noresize="noresize"frameborder="0">

 <frame src="a.html">

 <frame src="b.html">

 <frame src="c.html">

<noframes>

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

</noframes>

</frameset>

混合框架

<html>

<framesetrows="50%,50%">

<frame src="a.html">

<framesetcols="25%,75%">

<frame src="b.html">

<frame src="c.html">

</frameset>

</html>

导航框架

<html>

<frameset cols="120,*">

<frame src="content.html">

<frame src="a.html" name="showframe">

 

</frameset>

</html>

content.html

<html>

<body>

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

<a href ="b.html" target ="showframe">Frameb</a><br />

<a href ="c.html" target ="showframe">Framec</a>

</body>

</html>

带锚的框架

<frame src="link.html#C10">

22 、frameset 框架

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

属性

取值

描述

cols

pixels

%

*

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

rows

pixels

%

*

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

cols和rows作用和用法

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

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

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

23、head 元素

可包含关于文档的信息。浏览器不会向用户显示这些头部信息("headinformation")。下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>,<style>, 以及 <title>。

 

字符编码:

<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />

描述:

<meta name="description"  content="HTML examples">

关键字:

<meta name="keywords"content="HTML,DHTML, CSS">

重定向:5秒后

<meta http-equiv="Refreshcontent="5;url=../index.htm"tppabs="http://www.w3school.com.cn/">

24、<hr> 标签可插入一个水平线

属性

取值

描述

align

center

left

right

规定水平线的排列

noshade

noshade

设为TRUE:水平线呈现纯色(2D效果)

设为FALSE:水平线呈现双色凹槽(3D效果)

size

pixels

%

水平线的厚度(高度)

width

pixels

%

水平线的宽度

25、iframe 元素:内联框架

创建一个包含另外一个文档的内联框架

比frameset多一个align属性。

案例

<iframesrc="img/520.jpg" ></iframe>

26、img元素

如果您在 Firefox 中使用 alt 属性,那么当鼠标悬浮在图片或图像地图时不会像其他的浏览器那样出现提示文本。可以title属性提示文本。

属性

取值

描述

alt

text

定义图像的简短描述

src

URL

显示图像的url

align

top

bottom

middle

left

right

规定如何根据周围的文本排列图像

border

pixels

图像周围的边框

height

pixels

%

图像的高度

hspace

pixels

图片左侧和右侧的空白

ismap

URL

定义作为服务器端图片映射的一幅图像

longdesc

url

包含长的图像描述文档的url

usemap

url

作为客户端图像映射的一幅图像

vspace

pixels

图像顶部和底部的空白

width

pixels

%

图像的宽度

27、<input> 标签

<input>标签可定义输入域的开始,在其中用户可输入数据。

属性

取值

描述

type

button

checkbox

file

hidden

imgage

password

radio

reset

submit

text

 

 

 

 

指定input元素的类型,默认是text

name

fileld_name

用于此input元素的唯一名称

accept

list_of_mime_types

一个逗号分割的MIME类型列表,指示文件传输的MIME类型。注释:仅与type=”file”配合使用

align

left

right

top

texttop

middle

baseline

bottom

absbottom

 

 

 

定义图像之后的文本的排列,仅与type=image配合使用

alt

text

定义图像的替代文本,仅与type=imgae配合使用

checked

checked

此input元素首次加载时应当被选中。请于tpye=checkbox及type=radio配合使用

disabled

disabled

当input元素首次加载时,禁用此元素这样用户就无法在其中写文本,或选定它。

注释:不能与 type="hidden" 一同使用。

maxlength

number

定于在某个文本域中所允许的最大字符数。仅与type=text配合使用

readonly

readonly

指示此域的值不能被修改,仅与type=text配合使用

size

number_of_char

定义input元素的尺寸,不能与input=hidden一同使用

src

url

定义显示图像的url,仅与type=image配合使用

value

value

对于按钮、重置按钮和确认按钮:定义按钮上的文本。

对于图像按钮:定义传递向某个脚本的此域的符号结果

对于复选框和单选按钮:定义 input 元素被点击时的结果。

对于隐藏域、密码域以及文本域:定义元素的默认值。

注释:不能与 type="file" 一同使用。

注释:与 type="checkbox" 和 type="radio" 一同使用时,此元素是必需的。

28、<label> 标签

向控件定义标注(标记)。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

注释:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

显式:

<labelfor="SSN">SocialSecurity Number:</label>

<inputtype="text" name="SocSecNum" id="SSn" />
隐式:

<label>Dateof Birth: <input type="text" name="DofB"/></label>

29、<ol> 标签定义了有序列表。

注释:请使用样式来定义列表的类型。

属性

取值

描述

compact

compact_rendering

不赞成使用,使用样式表

start

start_on_number

规定起始的数字

type

A

a

I

i

1

规定列表的类型

30、<ul> 标签定义了无序列表。

31、<li> 标签定义了列表项目。

<li>标签可用在有序列表(<ol>) 和无序列表 (<ul>) 中

注释:请使用样式来定义列表的类型。

属性

取值

描述

type

A(ol)

a(ol)

I(ol)

i(ol)

disc(ul)

square(ul)

circle(ul)

规定列表的类型

value

number_of_list_item

 

案例

 

<h4>数字有序列表:</h4>

<oltype="A" start="6">

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol> 

 

<h4>一个嵌套无序列表:</h4>

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶

      <ul>

      <li>中国茶</li>  

      </ul>

    </li>

    </ul>

  </li>

  <li>牛奶</li>

</ul>

32、<meta> 元素:元信息

提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

<meta>标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

注释:<meta> 标签永远位于 head 元素内部。

注释:元数据总是以名称/值的形式被成对传递的。

属性

取值

描述

content

some_text

定义与http_equiv或name属性相关的元信息

http_equiv

content_type

expires

refresh

set_cookie

把content属性关联到hhtp头部

name

author

description

keywords

把content属性关联到一个名称

scheme

some_text

定义用于content属性值的格式

name 属性

name属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以*使用对自己和源文档的读者来说富有意义的名称。

"keywords"是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助:

<metaname="keywords" content="HTML,ASP,PHP,SQL"

如果没有提供 name 属性,那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时,服务器将把名称/值对添加到发送给浏览器的内容头部。例如,添加:

<metahttp-equiv="charset" content="iso-8859-1">

<metahttp-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含:

content-type:text/html

charset:iso-8859-1

expires:31Dec 2007

当然,只有浏览器可以接受这些附加的头部字段,并能以适当的方式使用它们时,这些字段才有意义。

content 属性

content属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content属性始终要和name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义

33、noframes :不支持框架的浏览器

可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

注释:如果浏览器有能力处理框架,就不会显示出 frameset 元素中的文本。

重要事项:如果您希望 frameset 添加 <noframes> 标签,就必须报其中的文本包装在 <body></body> 标签中!

34、script标签

定义一段诸如javascript的脚本

35、<noscript> 标签

noscript元素用来定义在脚本未被执行时的替代内容(文本)。

此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

注释:如果浏览器支持脚本,那么它不会显示出 noscript 元素中的文本。

注释:无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做,您应当在注释标签中隐藏脚本。老式的(无法识别 <script> 标签的)浏览器会忽略注释,这样就不会把标签的内容写到页面上,而新式的浏览器则懂得执行这些脚本,即使它们被包围在注释标签中!

案例

<scripttype="text/javascript">

<!--

document.write("如果显示了这段文字,那么您的浏览器支持JavaScript!")

//-->

</script>

 

<noscript>NoJavaScript support!</noscript>

36、object:潜入对象

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

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

注释:至于图像,请使用 <img> 标签代替 <object> 标签

属性

取值

描述

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> 表单数据提交给服务器时包括 name 属性。

属性

描述

disabled

disabled

当设置此属性时,会禁用该菜单

multiple

multiple

可以同时选定多个项目

name

unique_naem

下拉列表的唯一描述符

size

number

定义菜单中可见项目的数目

38、<optgroup> 标签:定义选项组

此元素允许您组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易

属性

取值

描述

label

text-lable

定义选项组的标记

disabled

disabled

禁用此选项组

39、option 元素:下拉列表中的一个选项(一个条目)。

浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。

注释:<option> 标签可以在不带有任何属性的情况下使用,但是您通常需要使用value 属性,此属性会指示出被送往服务器的内容。

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

属性

取值

描述

disabled

disabled

首次加载时被禁用

lable

text

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

selected

selected

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

value

text

送往服务器的选项值

案例:

<select>

      <optgroup label="SwedishCars">

      <option value ="volvo"selected="selected">Volvo</option>

      <option value="saab">Saab</option>

      </optgroup>

      <optgroup label="GermanCars" disabled="disabled">

      <option value="mercedes">Mercedes</option>

      <option value="audi">Audi</option>

      </optgroup>

</select>

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

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

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

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

41、span:行内元素

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

提示和注释:

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

 

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

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

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

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

42、<table> 标签:定义表格。

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

属性

取值

描述

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

%

规定表格的宽度

案例:

带标题的表格:

<tableborder="6">

<caption>我的标题</caption>

<tr>

  <td>100</td>

</tr>

<tr>

  <td>400</td>

</tr>

</table>

跨列:colspan="2"

跨行:rowspan="2"

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

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

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

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

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标签详解,布布扣,bubuko.com

HTML标签详解

上一篇:一文搞定 SonarQube 接入 C#(.NET) 代码质量分析


下一篇:Div+CSS常见错误总结