HTML5课堂学习笔记(颜色码)

HTML 文档类型

在HMTL5中页面的最顶端代码就是：

为何要如此定义、书写呢？

首先引入一个概念：文档类型，英译为：Document type,缩写成：doctype.

文档类型有何作用呢？

在计算机世界中存在许多不同文件类型或称为文件扩展名，比如.txt,.log,.doc,.wps,.xml….。计算机根据不同的文档类型来选择相对应的软件对文件进行打开，修改等操作！同样Web世界中存在许多不同的文档，但是Web网页是使用浏览器来打开、渲染、显示，如何才能让浏览器正确地显示文档呢，这就需要了解文档的类型！

HTML有多个不同的版本，只有准确的在页面中指定确切的HTML版本，浏览器才能正确无误的显示HTML页面。这就是的用处。

不是HTML标签，它只是为浏览器提供一项声明，因此它没有闭合/结束标签！

HTML文档类型的种类：

由于历史原因，HTML有着多个版本，目前使用比较广泛的仍然是：

1999制定的HTML 4.01, 2000年制定的XHTML 1.0，2012制定的HTML5。不过需要特别说明的是：HTML5目前只是初稿！

HTML 4.01规定了三种文档类型：Strict, Transitional, 以及Frameset. 中译为：严格版本，过渡版本，以及基于框架的版本！

XHTML 1.0同样也规定的三种文档类型：Strict, Transitional, 以及Frameset. 中译为：严格它们名称相同，但是声明的方式，有略微区别！

DOCTYPE的语法： HTML 顶级元素 可用性 “注册组织//类型 标签//定义语言”"URL” .

以下面这个 标签为例：

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

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

根元素是 html,

注册组织：W3C,

类型标签：XHTML 1.0 Strict,

定义语言：EN.

URL：http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd。

它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

始终要明白：URL只是替补！

HTML设定字符集：meta http-equiv=Content-Type

HTML字符集用于说明HTML页面的内容所使用的文字和语言。HTML语言用于告诉浏览器该以什么内码、什么语言来显示网页。错误的设置网页的字符集会导致页面出现乱码的现象。

语法

/http-equiv="Content-Type"/content="text/html"; charset="xxx">

说明：http-equiv传送HTTP通信协议的标头。

content定义网页使用的内码，其中charset定义该网页内码所使用的语言类别。

示例：

该示例表示该网页所使用的字符集是GB2312简体中文。

以下是部分HTML字符集代码列表：

gb2312 简体中文

big5 繁体中文

EUC_KR 韩语

Shift_JIS 或 EUC_JP 日语

KOI8-R / Windows-1251 俄语

iso-8859-1 西欧语系（荷兰语,英语,法语,德语,意大利语,挪威语,葡萄牙语,瑞士语.等十八种语言）

iso-8859-2 中欧语系

iso-8859-5 斯拉夫语系（保加利亚语,Byelorussian语,马其顿语,俄语,塞尔维亚语,乌克兰语等）

uft-8、unicode多语言

国内基本上用的是gb2312 简体中文、big5 繁体中文、uft-8多语言。

ZC: 注意：源码文件(?.html 等)，需要 保存为 UTF-8编码格式的文件

HTML 代码:

jQuery 代码:

$("form input")

结果:

[ , ]

2. $("A>B") 查找A元素下面的直接子节点

例子：匹配表单中所有的子级input元素。

HTML 代码:

jQuery 代码:

$("form > input")

结果:

[ ]

3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

例子：匹配所有跟在 label 后面的 input 元素

HTML 代码:

jQuery 代码:

$("label + input")

结果:

[ , ]

提示：W3C 的 HTML 4.0 标准仅支持 16 种颜色名，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。

如果使用其它颜色的话，就应该使用十六进制的颜色值。

颜色名列表

单击一个颜色名或者 16 进制值，就可以查看与不同文字颜色搭配的背景颜色。

颜色名 十六进制颜色值 颜色

AliceBlue #F0F8FF

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000

BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9

DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

Darkorange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DodgerBlue #1E90FF

Feldspar #D19275

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0

Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateBlue #8470FF

LightSlateGray #778899

LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370D8

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970

MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #D87093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9

Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD

SlateGray #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

VioletRed #D02090

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

HTML 字符集

HTML 颜色名

HTML ASCII

HTML 字符集

如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。

万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。

完整的 ASCII 参考手册

由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。

完整的 ISO-8859-1 参考手册

如果网页使用不同于 ISO-8859-1 的字符集，就应该在 标签进行指定。

ISO 字符集

ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。

下面列出了世界各地使用的不同字符集：

字符集 描述 使用范围

ISO-8859-1 Latin alphabet part 1 北美、西欧、拉丁美洲、加勒比海、加拿大、非洲

ISO-8859-2 Latin alphabet part 2 东欧

ISO-8859-3 Latin alphabet part 3 SE Europe、世界语、其他杂项

ISO-8859-4 Latin alphabet part 4 斯堪的纳维亚/波罗的海（以及其他没有包括在 ISO-8859-1 中的部分）

ISO-8859-5 Latin/Cyrillic part 5 使用古代斯拉夫语字母表的语言，比如保加利亚语、白俄罗斯文、俄罗斯语、马其顿语

ISO-8859-6 Latin/Arabic part 6 使用阿拉伯字母的语言

ISO-8859-7 Latin/Greek part 7 现代希腊语，以及有希腊语衍生的数学符号

ISO-8859-8 Latin/Hebrew part 8 使用希伯来语的语言

ISO-8859-9 Latin 5 part 9 土耳其语

ISO-8859-10 Latin 6 拉普兰语、日耳曼语、爱斯基摩北欧语

ISO-8859-15 Latin 9 (aka Latin 0) 与 ISO 8859-1 类似，欧元符号和其他一些字符取代了一些较少使用的符号

ISO-2022-JP Latin/Japanese part 1 日本语

ISO-2022-JP-2 Latin/Japanese part 2 日本语

ISO-2022-KR Latin/Korean part 1 韩语

Unicode 标准

由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。

Unicode 标准涵盖了世界上的所有字符、标点和符号。

不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。

Unicode 联盟

Unicode 联盟开发了 Unicode 标准。他们的目标是用标准的 Unicode 转换格式 (UTF) 来取代现有的字符集。

Unicode 标准已经获得了成功，在 XML、Java、ECMAScript (JavaScript)、LDAP、CORBA 3.0、WML 中，Unicode 已经得到了实现。在许多操作系统以及所有的现代浏览器中，Unicode 同样得到了支持。

Unicode 联盟与领导性的标准发展组织进行合作，比如 ISO、W3C 以及 ECMA。

Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16：

UTF-8

UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。

UTF-16

16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。

提示：最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符。

提示：所有 HTML 4 处理器均已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16。

UTF实例学习(一)

你还认识我吗？记得两年前我哥哥小飞侠教我学习VB编程的时候你还是一名旁听生呢。呵呵，我就是小叮，自从上次和哥哥学习了VB之后就痴迷上了编写程序，凭借着我过人的编程技能和敏捷的思维能力，现在已经在一家大型软件公司担任程序员了。

最近天气太热，本来准备趁着休假时间在家好好调整一番，没料到表弟小蘑也看准了休假时间来这里玩，说是还要我教他VB编程，真是刚出虎穴又入狼窝呀。我这个人心地特善良，经不住他几句甜言蜜语就这么上钩了，好在小蘑他以前接触过VB，用不着我再从头讲解一些繁琐的基础知识，所以决定每天花一点时间给他来一个短期提高快捷的实例培训，这样既可以让他学习到VB知识，我也不用太劳累，可以多一些时间休息呢。

第一天、使用VB收发电子邮件

小叮：我说小蘑呀，既然你已经学习过VB的基础知识，也做过一些简单的程序，那么我也就不浪费口水教你认识界面、了解控件和学习语法了。不如我来教教你怎么样制作出一些切实可用的程序，这样既能够加深对VB的认识，还可以让你拥有十足的成就感呢！

小蘑：好呀，那做一些什么程序呢？

小叮：当然不会像我哥哥当年那样简单至极的程序，而是一些具有实用性的程序，也可以做一个小游戏之类的，你看怎么样？

小蘑：好的，不过今天别教我做游戏，不然明天就没有心思学了。

小叮：这个我自然知道，那我们就开始动手制作一个收发电子邮件的程序吧。

小蘑：收发电子邮件？这个会不会很难呢？

小叮：正所谓会者不难，难者不会，有我这位名师指点，你还怕什么呢？开始动手吧！

一、准备工作

小叮：在VB中编写电子邮件程序需要通过调用微软公司的MAPI（Messaging Application Programming Interface，消息应用程序编程接口），这需要借助两个实现电子邮件收发功能的核心控件：MAPI会话控件和MAPI消息控件。MAPI会话控件用于建立和控制一个Microsoft Mail会话，MAPI消息控件用于创建和收发邮件消息。此外，Windows系统中必须要有遵从MAPI的邮件系统，比如Exchange、Outlook等软件，而还要进行一番设置，确保邮件系统可以正常使用。

小蘑：呵呵，没关系，我用的就是Outlook，正好符合要求。不过你说的MAPI控件在哪里找呢？

小叮：在VB中就有现成的，不过程序没有直接放置在工具箱里，需要我们自己将MAPI控件加入VB工具箱。首先直接在VB左边的控件栏中右击鼠标，并在弹出菜单中选择“部件”命令，这时可以激活部件设置窗口，在其中的“控件”列表框中选取“Microsoft MAPI Controls”一项（如图1所示），接着按下“确定”按钮之后可以发现工具箱中将多出了两个图标，这就是MAPI会话控件和MAPI消息控件的图标（如图2所示）。

二、邮件发送程序

小叮：添加好我们所需要的控件之后，就开始定制邮件的发送程序吧。这个邮件发送程序的基本处理过程是：根据用户输入信息组成邮件，然后使用MAPI消息控件的Send方法将邮件发出。具体的方法按照下述步骤完成：

1、新建一个VB项目，并将缺省窗体Form1的Caption属性设置为“发送邮件”。 2、在Form1中加入一个MAPI会话控件MAPISession1和一个MAPI消息控件MAPIMessages1。

3、在Form1中加入三个TextBox控件，将它们的名称属性分别设置为“txtSendTo”、“txtSubject”和“txtMessage”，另外还要将txtMessage的Multiline属性设置为“True”。这三个TextBox控件将分别用于填写邮件的收件人地址、邮件主题和邮件正文。

4、在Form1中加入三个Label控件，将它们的Caption属性分别设置为“收件人”、“主题”和“内容”，并将它们放在合适的位置用以标注相应的TextBox控件。

5、在Form1中加入一个Command Button控件，将其Caption属性和名称属性分别设置为“发送”和“Send”。

小蘑：还挺像这么回事的呢，接着应该填写代码了吧。

小叮：是呀，下面就是代码部分的内容：

1、将下列代码加入Form1的Form_Load事件：

Private Sub Form_Load()

MAPISession1.SignOn/运行程序之后进行邮箱登录操作

End Sub

2、将下列代码加入Form1的Form_Unload事件：

Private Sub Form_Unload(Cancel As Integer)

MAPISession1.SignOff/退出程序时候进行退出邮箱操作

End Sub 3、将下列代码加入cmdSend的Click事件：

Private Sub cmdSend_Click()

With MAPIMessages1

.MsgIndex = -1

.RecipDisplayName = txtSendTo.Text/收信人地址

.MsgSubject = txtSubject.Text/邮件主题

.MsgNoteText = txtMessage.Text/邮件正文

.SessionID = MAPISession1.SessionID/发送程序和邮件工具之间建立的任务数

.Send

End With

MsgBox "邮件发送完毕！", , "发送邮件"/发送成功显示信息框

End Sub

这样一个电子邮件发送部分就制作完成了，运行程序之后只要填写好邮件的收件人、主题和内容后，按下“发送”命令按钮，邮件就已经成功地发往目的地了（如图4所示）。图4

小蘑：真的发送出去了，不过这是不是你的障眼法呢？我要收到这封信才相信！

小叮：对我还不相信？好吧，下面再制作一个邮件接收程序来收取这封信件。

三、邮件接收程序

小叮：邮件接收程序比邮件发送程序要复杂一些，这个程序首先需要使用MAPI消息控件的Fetch方法读取邮件，这个过程将把用户收件箱中所有未读邮件全部装入MAPI消息控件中。接着，检查MAPI消息控件的MsgCount属性以确定通过Fetch方法读取的邮件的总数，然后可以通过设置MAPI消息控件的MsgIndex属性来指定具体需要处理哪一封邮件。需要说明的是，MsgIndex属性值的计数是从0开始的，也就是说，第一封邮件的索引号是0，第二封邮件的索引号是1，依次类推。具体步骤如下： 1、新建一个VB项目，将缺省窗体Form1的Caption属性设置为“接收邮件”。

2、在Form1中加入一个MAPI会话控件MAPISession1和一个MAPI消息控件MAPIMessages1。

3、在Form1中加入三个Label控件和一个TextBox控件，将三个标签控件的名称属性分别设置为“lblMsgDateReceived”、“lblMsgOrigDisplayName”和“lblMsgSubject”，将TextBox控件的名称属性设置为“txtMsgNoteText”，并将标签控件的Caption属性和文本框控件的Text属性的内容清空。这四个控件将分别用于显示邮件的日期、发件人、主题和内容。

4、将txtMsgNoteText控件的Locked属性和Multiline属性设置为“True”，ScrollBars属性设置为“2-Vertical”。

5、在Form1中再加入四个Label控件用于标注上述四个控件，将它们的Caption属性分别设置为“日期”、“发件人”、“主题”和“内容”。

6、在Form1中加入一个Label控件，将其名称属性设置为“lblMsgCount”，Caption属性设置为“第 0 封邮件，总计 0 封邮件”。这个控件用于显示接收的邮件总数以及当前正在处理第几封邮件。

7、在Form1中加入三个Command Button控件，将它们的名称属性分别设置为“cmdPrevious”、“cmdNext”和“cmdClose”，Caption属性分别设置为“上一封”、“下一封”和“关闭”。

小蘑：那么具体的程序代码呢？

小叮：又着急了不是？我还会骗你吗？下面就是具体的程序代码：

1、编写一个子程序FetchNewMail：

Public Sub FetchNewMail()

MAPIMessages1.FetchUnreadOnly = True

MAPIMessages1.Fetch/Fetch命令将信件抓到系统存贮器的inbuffer中

End Sub

2、编写一个子程序DisplayMessage：

Public Sub DisplayMessage()

lblMsgCount.Caption = "第 " & Ltrim(Str(MAPIMessages1.MsgIndex + 1)) & " 封邮件，总计 " & Ltrim(Str(MAPIMessages1.MsgCount)) & " 封邮件"/由MsgCount知道信件数量，再用MsgIndex设置要看　哪一封信件的内容、标题

lblMsgDateReceived.Caption = MAPIMessages1.MsgDateReceived/收取信件的日期

txtMsgNoteText.Text = MAPIMessages1.MsgNoteText/收取信件的内容

lblMsgOrigDisplayName.Caption = MAPIMessages1.MsgOrigDisplayName/发送邮件的姓名

lblMsgSubject.Caption = MAPIMessages1.MsgSubject/邮件主题

End Sub 3、将下列代码加入Form1的Form_Load事件：

Private Sub Form_Load()

MAPISession1.SignOn

MAPIMessages1.SessionID = MAPISession1.SessionID

FetchNewMail/调用Fetch子程序

DisplayMessage/调用DisPlayMessage子程序

End Sub

4、将下列代码加入cmdPrevious的Click事件：

Private Sub cmdPrevious()

If MAPIMessages1.MsgIndex > 0 Then

MAPIMessages1.MsgIndex = MAPIMessages1.MsgIndex - 1/当收取信件超过1封的时候，通过“上一封”按钮查看前面的信件

DisplayMessage

Else

Beep

End If

End Sub

5、将下列代码加入cmdNext的Click事件：

Private Sub cmdNext_Click()

If MAPIMessages1.MsgIndex < MAPIMessages1.MsgCount - 1 Then

MAPIMessages1.MsgIndex = MAPIMessages1.MsgIndex + 1/当收取信件超过1封的时候，通过“下一封”按钮查看后面的信件

DisplayMessage

Else

Beep

End If

End Sub

6、将下列代码加入cmdClose的Click事件：

Private Sub cmdClose_Click()

Unload Me

End Sub

程序运行后，在窗体加载过程中，窗体Load事件中的代码会读取新邮件，如果有新邮件，就显示第一个新邮件，如果有多个新邮件，则可以使用“上一封”和“下一封”命令按钮前后翻阅。你再看看，这封收取下来的邮件是不是我们刚才发送出去的？

HTML5课堂学习笔记（颜色码）