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 |
忽略所有的框架结构，在浏览器的整个窗口中打开 |
