HTML杂记

       记得第一次学HTML还是在大一的时候，因为有同学在学这个要交作业让我帮忙，那时候还刚接触计算机，对网页更只是懵懂的，但是还是答应了。然后去图书馆找了一本书，记得大概花了一个星期吧，然后到图书馆去整了一个非常粗糙的、简单的不能再简单的东西给了同学。那个时候感觉自己很尽力了，而且自我感觉还不错的，现在想起来那个时候真的是太傻了，都有点对不起同学的感觉。再后来就没有再玩过网页了，即使有一次短学期也只是随便整整交的，那个时候我还竟然弄了一个A，现在想想学校的环境真的很宽松，就那烂作品也能混个A的！！再后来就是现在毕业了，帮一个同事弄个网站开始了新的学习旅程！我有一个计划——把大部分HTML具有的元素列出来。

 

一、头定义

1.         <html></html>

HTML中最基本的标签，这是可以省略的，因为浏览器默认将文件处理成HTML文件。Html的属性标签包括xmlns（xml的命名空间，为XHTML的内容，由于XHTML1.0标准不允许自定义命名空间，所以现在的值都是http://www.w3.org/1999/xhtml）、xmlns:lang表明xml的语言（见附件1）、lang属性为页面的语言类型（见附件2）、dir属性定义文字方向（ltr：左到右，rtl：右到左）。

2.         <!DOCTYPE>

改标签定义HTML或XHTML的版本。其中DTD为文档类型定义，包含了文档的规则，浏览器根据定义的DTD解释页面的表示，并展现出来，HTML定义了三种DTD声明供选择。       

1） Transitional（过渡的）

定义宽松的DTD，允许继续使用HTML的标识。（目前最常用的用法）定义如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">

2） Frameset（框架的）

专门针对框架页面设计使用的DTD。（如果你的页面中包含有框架需采用这种DTD），定义如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

3） Strict（严格的）

要求严格的DTD，不能使用任何表现层的标识和属性。（合理的HTML文档结构的推荐选择），定义如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

       同样的，XHTML1.0也定义了类似三种的DTD格式，分别如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.         <head></head> 没有属性

4.         <title></title> 没有属性

5.         <meta></meta>

用以定义页面名称、搜索关键字、作者等，这些信息不在页面中显示，但却利于页面服务器和页面设计者管理页面。

<meta name=”keywords” content=”页面关键字，以逗号分开”>

<meta name=”description” content=”页面描述”>

<meta name=”generator” content=”页面编辑工具”>

<meta name=”author” content=”页面设计者信息”>

<meat name=”robots” content=”all/index/nofollow/onindex/none”> 定义页面的搜索方式all：可以搜索当前页面以及与其尽兴链接的页面

index：可以搜索当前页面

nofollow：不允许搜索与当前页面进行链接的页面

noindex：不允许搜索当前页面

none：即不能搜索与当前页面进行链接的页面，也不能搜索当前页面

<meta name=”copyright” content=”版权信息”>

<meat name=”build” content=”创建时间”>

<meta name=”reply-to” content=”页面设计者邮箱地址”>

<meta HTTP-EQUIV=”Content-Language” content=”语言(zh_CN)”>

设置页面语言

<meta HTTP-EQUIV=”Content-Type” content=”text/html; charset=gb2312”>

设置页面类型

<meta HTTP-EQUIV=”refresh” content=”时间(;URL)”>

自动刷新的时间，URL为刷新后跳到的地址，否则跳到URL指定的地址。

<meta HTTP-EQUIV=”expires” content=”时间”>

设置网页的到期时间，一旦设置了过期时间，页面将由于过期而停止，若要继续运行，需要到服务器中重新调用。

<meta HTTP-EQUIV=”cache-control” content=”no-cache”>

禁用缓存。（使用缓存可以加速浏览页面速度，因为缓存可以将曾经浏览过的页面暂时保存在本地，当用户再次打开页面时可以直接调用缓存。）

<meta HTTP-EQUIV=”set-cookie” content=”到期时间”>

删除过期的cookie

<meta HTTP-EQUIV=”window-target” content=”_top”>

防止别人作为一个框架窗口调用页面

<meta HTTP-EQUIV=”过度事件(page-enter/page-exit)” content=”revealtrans(duration=秒数,transition=”方式”)>

定义进入和离开网页的过渡方式，方式的定义见附件3

6.         <link></link>

该标记用于引用外部文件，一般用以引用样式文件。以使改样式自动关联到该页面。Link标记不实际链接到文件中，只是提供链接该文件的一个途径。

rel属性：链接文件与页面的关系（stylesheet/book/content/sention等）

type属性：定义文件的类型（text/css和text/javascript）

href属性：文件的URL地址

7.         <frameset><frame /> …. </frameset>

改标签用于插入框架。（可以嵌套）

rows（cols）属性，定义各个框架窗口的垂直（水平）高度，可以为数值，百分比，*，用逗号隔开。

frameborder属性：0表示隐藏边框，1表示显示边框

framespacing（border（优先级更高））属性：设置边框宽度

bordercolor属性：设置边框颜色

<frame />标签定义一个框架窗口。

src属性：定义页面源文件

name属性：区分框架页面

scrolling属性：框架滚动条显示属性，Yes：一直显示滚动条；No：不显示滚动条；Auto：根据页面调整。

marginwidth属性：设置框架边缘宽度，左右两侧

marginheight属性：设置框架的边缘高度，上下两侧

nonsize属性：禁用框架的大小调整

<noframe></noframe>标签：定义浏览器不支持框架时显示的内容。

 

相对框架，HTML还定义了浮动框架（<iframe></iframe>），它同frame具有类似的属性，包括src、name、marginheight、marginwidth、scrolling、frameborder等属性，它也包含一些自己的属性，如Width、Height、Align、hspace、vspace等。

框架链接：同一般的链接，用A标记，但是target属性为要显示的框架的name属性的值，href属性为要显示的内容网页的URL。

8.         <base></base>

定义网页的基地址，一般用于设置浏览器中文件的绝对路径，这样就能通过相对路径找到文件。设定该标签以后，页面中所有的URL都为相对于改基地址的页面。

<base href=”基网址地址” target=”目标窗口的打开方式”>

../表示的地址是网站的根目录，即设置的基地址。 目标窗口的打开方式见附件4。

9.         <basefont>

定义页面的基准字体。

size属性：字体大小

face属性：字体类型

color属性：字体颜色

10.     <body></body>

该标签定义页面的正文部分。

属性包括link、alink、vlink、bgcolor、background等，以及

bgproperties属性 设置为fixed页面的背景不会随着浏览器的滑动而滑动

text属性 设置页面文字的颜色

leftmargin/rightmargin/topmargin/bottommargin属性 设置页面的边距

marginwidth属性 页面的左右边距

marginheight属性 页面的上下边距

 

浏览器相关的结构性标记

1.       <hi></hi>(i=1, 2, 3, 4, 5, 6)

定义文字的标题，数字表明标题等级，等级值越小字体越大

       align属性 定义文字对齐方式 left/right/bottom/justify

2.       <div></div>

层，包align、style属性。

3.       <em></em>

强调文字表达的效果，一般浏览器将其设置为斜体显示。

4.       <strong></strong>

加粗以强调文字。

5.       <cite></cite>

引文标记，用于引用和举例，通常设置为斜体。

6.       <code></code>

标记为程序代码，效果为每个字母有相等的宽度，且字母的间距相对其他稍宽。

7.       <kbd></kbd>

标记键盘输入的文字，通常显示为较粗的宽体字。

8.       <var></var>

变量声明，一般显示为斜体。

9.       <big></big>

将文字以大号字体显示。

10.   <small></small>

将文字以小号字体显示。

11.   <blockquote></blockquote>

实现整段文字缩进的效果。

12.   <samp></samp>

样本标记，用于显示一段计算机常用字体，且文字显示时宽度相等。

13.   <def></def>

用于表示定义或说明，通常用斜体字显示。(Netscape不支持)

14.   <address></address>

用来标记地址或电子邮件，一般以斜体字显示。

 

设置文字效果

1.       <b></b>

粗体显示文字。

2.       <i></i>

斜体显示文字。

3.       <u></u>

在文字下方加下划线。

4.       <s></s>

在文字中加入删除线。

5.       <sub></sub>

下标显示文字。

6.       <sup></sup>

上标显示文字。

7.       <tt></tt>

显示打自己效果字体。

8.       <font></font>

设置文字显示属性，包括文字的颜色（color）、大小（size）、字体（face）。

9.       <pre></pre>

预定义格式，浏览器将保持源代码中的格式，包括文字之间的空格换行等。

10.   <center></center>

居中对齐内容。

11.   <blink></blink>

设置文字的闪烁效果。只在Netscape中支持。

12.   <p></p>

段落标记，具有属性align。

13.   <br>

文字换行标记。

14.   <nobr></nobr>

不换行标记。貌似已经废弃。

15.   <wbr></wbr>

强制换行，一般用在<nobr></nobar>中。貌似已经废弃。

16.   <hr>

水平线。具有size、width、align、color等属性，以及：

属性noshade 以实线显示。

 

超级链接及多媒体

1.       <a></a>

定义链接内容，内容可以为文字，图片等。

属性target 为链接效果，取值见附件4。

属性tabindex tab键的顺序。

属性name 定义锚的名称。

属性href 链接的目的地址，可以为URL、锚、电子邮件、文件等。

URL可以是绝对地址也可以是相对地址，”../”表示上级目录。

锚为：页面地址#锚点名称

电子邮件格式：href=”mailto:电子邮件地址?cc=电子邮件地址(,subject=主题文字, bcc=密送邮件地址, body=邮件内容)”

2.       <img></img>

插入图片。属性有width、height、border、align、hspace、vspace等，以及：

属性src 定义图片地址

属性alt 定义替换文字

属性lowsrc 定义低解析度图像，在源文件还未完全加载时显示的图片。

属性usemap 定义热点的名称 值为：#mapname

3.       <map></map>

定义图片的热点。具有name属性。

其子标签<area>定义热点的位置以及目标链接位置。

其属性有href、target等，以及：

属性shape 定义热点形状 有circle/rect/poly可选值

属性coords 定义热点位置以及范围

属性alt 定义鼠标在热点上时显示的文字

4.       <bgsound>

设置背景音乐。

属性src 定义音乐文件地址

属性loop 定义循环次数，或设置为true表示无限循环

属性delay 定义延缓时间

属性volume 定义音量

5.       <embed></embed>

添加多媒体元素。有属性src、width、height、loop、hspace、vspace等。以及：

属性autostart true表示自动播放 false表示手动播放

属性hidden true表示隐藏面板 false表示显示面板

6.       <marquee></marquee>

定义滚动文字。有属性align、width、height、hspace、vspace、loopbgcolor等，以及：

属性direction 控制文字的滚动方向 up/down/left/right

属性behavior 控制文件的滚动方式 scroll 循环滚动 slide 只滚动一次 alternate 交替滚动，即按设置方向和相反方向循环滚动。

属性scrollamout 设置滚动速度

属性scrolldelay 设置滚动延时

 

列表

1.       <ul><li></ul>

无序列表。

属性type disc 实心原点，系统默认 circle 空心原点 square 空心方块

2.       <ol><li></ol>

有序列表。

属性type 1 数字排序，系统默认 a小写字母排序 A 大写字母排序 i小写罗马字母排序 I 大写罗马字母排序

属性start 有序列表的起始数值

3.       <dl><dt>名词<dd>名词解释</d.>

定义列表（字典列表）主要用于名词解释。没有项目符号，但每一段解释都带有一段缩进文字。

4.       <menu><li></menu>

用以显示菜单内容，设计单列菜单。在IE中效果同无序列表。貌似已经废弃。

5.       <dir><li></dir>

目录列表用于显示文件内容的目录。通常设计成为一个压缩的但列列表（同无序列表）。貌似已经废弃。

 

表单

1.       <form></form>

表单。具有属性name、target、runat（=server）等属性。以及：

属性action 处理程序的地址。

属性method 表单数据传送方式，

get 表单数据被视为CGI或ASP的参数发送，用户输入数据附加在URL之后，由用户端直接发送到服务器。 速度较快，但字符不能超过8912，且不保密。

post 表单数据于URL分开，将数据写在表单主题内发送，加密、没有长度限制、速度相对慢。

属性enctype text/plain 以纯文本方式发送

        Application/x-www-Form-urlencoded 采用默认的编码方式

        Multipart/Form-data 使用mine编码方式发送

2.       <input></input>

输入控件类。包含属性align、border、disabled、src、width、hspace、vspace、readonly、maxlength、checked等。

属性type 可取值 text、password、file、checkbox、radio、button、submit、reset、image、hidden等。

属性value 设置默认值。

3.       <select><option></select>

下拉式选单，设置size属性可以将选单从下拉式变为列表式。具有name等属性。

Option中具有value（控件显示值）、selected（设置默认选择）、multiple（表明可以多选）属性

4.       <taxtarea>默认值</taxtarea>

文本输入区。具有name、disabled、readonly、tabindex属性等。以及：

rows、cols属性 行数、列数设置

wrap属性：off自动换行 virtual设置自动换行

 

表格

1.       <table></table>

创建表格。具有属性align、background、bgcolor、border、bordercolor、height、width、hspace、vspace等属性。以及：

属性bordercolordark（表格暗边框，表格外部的下边框和右边框以及内部的上侧和右侧）属性bordercolorlight（表格亮边框，表格外部的上边框和左边框以及内部的下侧和左侧） 设置颜色

属性cellspacing 表格内框宽度，即表格内部各个单元之间的距离。

属性cellpadding 文字于边框距离，即单元格中文字与表格边框的距离。

2.       <tr></tr>

表格行。具有属性align、valign、bgcolor、bordercolor、bordercolordark、bordercolorlight、height、nowrap等

3.       <td></td>

表格单元。具有属性align、vliagn、background、bgcolor、bordercolordark、bordercolorlight、height、nowrap、width等。以及：

rowspan、colspan单元格的跨度（水平或垂直）

4.       <thead><tr><td></td></tr></head>

一般位于表头，具有align、valign、bgcolor等属性。

5.       <tbody><tr><td></td></tr></tbody> 表格主体

6.       <tfoot><tr><td></td></tr></tfoot> 表格尾部

7.       <tr><th></th></tr> 表格表头

8.       <caption>标题文字</caption> 表格标题
公共属性

1.       width 元素的宽度，如40（px）

2.       height 元素的高度, 如100（px）

3.       align 水平对齐方式，可取left/center/right。对层（div）的对齐方式还可以取justify的值。

4.       valign 垂直对齐方式，可取top/center/bottom。

5.       border 边框的宽度，如2（px）

6.       bordercolor 边框的颜色值，可以为英文字母（red等），也可以是#加6位16进制的值。

7.       bgcolor 背景颜色，取值同bordercolor。

8.       background 背景图片，取值为背景图片的地址。若同时设置bgcolor和background的值，background的优先级更高。

9.       link 链接文字的初始颜色值

10.    alink 使用中的链接文字颜色

11.    vlink 访问过的链接文字的颜色

12.    hspace 定义水平间距

13.    vspace 定义垂直间距

14.    name 定义标签名

附件1：xml支持的语言集合

Language

Locale

Language

Locale

Basque/Euskara

eu

Catalan

ca

Chinese

zh_CN/zh_TW

Croatian

hr

Czech

cs

Danish

da

Dutch

nl

Esperanto

eo

Estonian

et

Finnish

fi

French

fr

German

de

Greek

el

Hungarian

hu

Icelandic

is

Interlingua

ia

Italian

it

Japanese

ja

Korean

ko

Lithuanian

lt

Norwegian

no

Polish

pl

Portuguese

pt/pt_BR

Romanian

ro

Russian

ru

Serbian

sr

Slovenian

sl

Spanish

es

Swedish

sv

Turkish

tr

Ukrainian

uk

 

 

 

 

 

 

 

 

 

 

 

附件2：html标签中lang属性：

1. European Languages

  • en: English
  • es: Spanish
  • fr: French
  • it: Italian
  • pt: Portuguese
  • de: German
  • ru: Russian

2. Non-European Languages

  • ar: Arabic
  • zh: Chinese (Mandarin)
  • he: Hebrew
  • ja: Japanese
  • ko: Korean
  • sw: Swahili

3. Ancient Languages

  • grc: Ancient Greek (vs. el: Modern Greek)
  • la: Latin
  • he: Hebrew
  • ang: Old English (Anglo-Saxon)
  • enm: Middle English

4. Other

  • sq: Albanian
  • hy: Armenian
  • eu: Basque
  • nl: Dutch
  • ka: Georgian
  • gd: Scottish Gaelic
  • ga: Modern Irish
  • fa: Persian (Farsi)
  • bo: Tibetan
  • cy: Welsh


附件3：进入和离开页面的方式

属性取值

过度方式

属性取值

过度方式

0

盒状收缩，以方形向中间聚集

1

盒状展开，以方形向外散开

2

圆形收缩，以圆形向中部聚集

3

圆形展开，以圆形向外散开

4

向上擦出，由下向上擦除

5

向下擦出，由上向下擦除

6

向做擦出，由右向左擦除

7

向右擦出，由左向右擦除

8

垂直百叶窗

9

水平百叶窗

10

横向棋盘式，即水平格状效果

11

纵向棋盘式，即垂直格状效果

12

溶解效果

13

从左右向中间收缩

14

从中部向左右两侧展开

15

从上下两侧向中间收缩

16

从中部向上下两侧展开

17

呈阶梯状向左下方展开

18

呈阶梯状向左上方展开

19

呈阶梯状向右下方展开

20

呈阶梯状向右上方展开

21

随机水平线条效果

22

随机垂直线条效果

23

随机选择一种过度效果

 

附件4

属性值

含义

_parent

在上级窗口打开（常在框架页面中使用）

_blank

新建一个窗口打开

_self

在同一个窗口代开，是默认值

_top

忽略所有的框架结构，在浏览器的整个窗口中打开

 

 

 

posted @ 2008-10-28 02:40  江湖飘  阅读(1331)  评论(0)  编辑  收藏  举报