HTML5课堂学习笔记色板.docx

HTML5课堂学习笔记色板.docx

《HTML5课堂学习笔记色板.docx》由会员分享，可在线阅读，更多相关《HTML5课堂学习笔记色板.docx（20页珍藏版）》请在冰点文库上搜索。

HTML5课堂学习笔记色板

HTML学习（颜色名）

HTML文档类型

HTML设定字符集：

metahttp-equiv=Content-Type

HTML字符集用于说明HTML页面的内容所使用的文字和语言。

HTML语言用于告诉浏览器该以什么内码、什么语言来显示网页。

错误的设置网页的字符集会导致页面出现乱码的现象。

语法：

说明：

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多语言。

--forHTML5-->

ZC:

注意：

源码文件（?

.html等），需要保存为UTF-8编码格式的文件

HTML代码:

jQuery代码:

$（"forminput"）

结果:

[,]

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

例子：

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

HTML代码:

jQuery代码:

$（"form>input"）

结果:

[]

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

例子：

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

HTML代码:

jQuery代码:

$（"label+input"）

结果:

[,]

提示：

W3C的HTML4.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字符集

jQuery过滤选择器

（一）

1.ID选择器

根据控件ID获取jQeruy，相当于javascript的getelementById。

使用方法：

$（"#myid"），获取ID等于myid的jquery对象。

2.标签选择器

使用标签名称获取jQuery,相当于javascript的getElementsByTagName_r（）。

使用方法：

$（"p"），获取所有p标签。

3.class选择器

class为元素的定义样式，根据class名称获取jquery对象。

如：

$（".btn"），获取页面中所有使用了class为btn的标签。

4.多条件选择器

根据多个条件一次性选择多种标签。

使用方法：

$（"p,div,span.menuitem"）获取标签p,div和css名称为menuitem的span标签。

5.层次选择器

1）.$（"divli"）,获取div标签内部的所有li元素。

2）.$（"dvi>li"）,获取div标签的li子元素。

3）.$（".menuitem+div"）,获取css名称为menuitem之后的第一个div元素。

4）.$（".menuitem~div"）,获取css名称为menuitem之后的所有div元素。

jQuery选择器

（二）

1.next（）方法

1）.$（"#mydiv"）.next（）,获取id为mydiv元素的下一个同辈元素。

2）.$（"#mydiv"）.next（"div"）,获取id为mydiv元素紧跟后面的div元素。

3）.$（"#mydiv"）.nextAll（）,获取id为mydiv元素的所有同辈元素。

4）.$（"#mydiv"）.nextAll（"div"）,获取id为mydiv元素的所有是div的同辈元素。

2.siblings（）方法

1）.$（this）.siblings（）,获取除了自己以外的所有同级标签。

2）.#（this）.siblings（"div"）,获取除了自己以外的所有同级的div标签。

jquery过滤选择器选择器（三）

1.first

$（"div:

first"），选择第一个选择器。

2.last

$（"div:

last"），选择最后一个选择器。

3.not

$（"div:

not（.line）"）,选择除了css等于line的div元素。

4.even

$（"div:

even"）,选取所有div元素索引为奇数的div元素。

5.odd

$（"div:

odd"）,选择所有div元素索引为偶数的div元素。

6.eq、gt、lt

$（"div:

eq（5）"）,选择所有div中索引等于5的div元素，

$（"div:

gt（5）"）,选择所有div中索引大于5的div元素，

$（"div:

lt（5）"）,选择所有div中索引小于5的div元素。

注意：

gt和lt组合使用时：

$（"div:

gt（3）:

lt（3）"）的选择结果是首先获取div中索引大于3的div，然后再在索引大于3的结果集中获取索引值小于2的div。

7.animated

$（"div:

animated"）选择所有div中正在执行动画效果的div元素。

jQuery选择器（四）

1.属性选择器

根据标签的属性获取对象。

如：

1）.$（"div[id]"）,获取div中包含ID属性的div.

2）.$（"div[id=content]"）,获取div中ID属性为content的div.

3）.$（"div[id!

=content]"）,获取div中ID属性不是content的div.

4）.$（"div[id^=aa]"）,获取div中ID属性值以aa开头的div.

5）.$（"div[id$=aa]"）,获取div中ID属性值以aa结尾的div.

6）.$（"div[id*=aa]"）,获取div中ID属性值包含aa的div.

2.表单选择器

1）.$（"#from:

enabled"）,选择id为form的表单内所有启用的元素。

2）.$（"#from:

disabled"）,选择id为from的表单内所有禁用元素。

3）.$（"input:

checked"）,选择所有选中的元素。

4）.$（"select:

selected"）,选择所有选中的元素（下拉列表或listbox）。

缩小搜索元素的范围

三个最基本的过滤方法是：

first（）,last（）和eq（），它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如filter（）和not（）允许您选取匹配或不匹配某项指定标准的元素。

jQueryfirst（）方法

first（）方法返回被选元素的首个元素。

下面的例子选取首个

eq（）方法返回被选元素中带有指定索引号的元素。

DOCTYPEhtml>

开始

停止

停止所有

停止动画，但完成动作

点击"开始"按钮开始动画。

点击"停止"按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。

点击"停止所有"按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。

点击"停止动画，但完成动作"快速完成动作，并停止它。

#98bf21;height:

100px;width:

200px;position:

absolute;">HELLO