HTML5课堂学习笔记色板.docx
- 文档编号:23812602
- 上传时间:2023-05-21
- 格式:DOCX
- 页数:20
- 大小:22.14KB
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()方法返回被选元素的首个元素。
下面的例子选取首个
元素:
实例
$(document).ready(function(){
$("divp").first();
});
jQuerylast()方法
DOCTYPEhtml>
$(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); }); });
100px;width:
300px;border:
1px/solidblack;background-color:
yellow;">
这是div中的一些文本。
这是在div中的一个段落。
这是在div中的另外一个段落。
last()方法返回被选元素的最后一个元素。
下面的例子选择最后一个
元素:
实例
$(document).ready(function(){
$("divp").last();
});
jQueryeq()方法
DOCTYPEhtml>
$(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); #panel,#flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid1px#c3c3c3; } #panel { padding: 50px; display: none; }
eq()方法返回被选元素中带有指定索引号的元素。
DOCTYPEhtml>
$(document).ready(function(){ $("#start").click(function(){ $("div").animate({left: '100px'},5000); $("div").animate({fontSize: '3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); });
点击"开始"按钮开始动画。
点击"停止"按钮停止当前激活的动画,但之后我们能再动画队列中再次激活。
点击"停止所有"按钮停止当前动画,并清除动画队列,所以元素的所有动画都会停止。
点击"停止动画,但完成动作"快速完成动作,并停止它。
#98bf21;height: 100px;width: 200px;position: absolute;">HELLO
索引号从0开始,因此首个元素的索引号是0而不是1。
下面的例子选取第二个
元素(索引号1):
实例
$(document).ready(function(){
$("p").eq
(1);
});
jQueryfilter()方法
filter()方法允许您规定一个标准。
不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名"url"的所有
元素:
实例
$(document).ready(function(){
$("p").filter(".url");
});
jQuerynot()方法
not()方法返回不匹配标准的所有元素。
提示:
not()方法与filter()相反。
下面的例子返回不带有类名"url"的所有
元素:
实例
$(document).ready(function(){
$("p").not(".url");
});
HTML颜色名
HTMLASCII
HTML字符集
如需正确地显示HTML页面,浏览器必须知道使用何种字符集。
万维网早期使用的字符集是ASCII。
ASCII支持0-9的数字,大写和小写英文字母表,以及一些特殊字符。
完整的ASCII参考手册
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML5 课堂 学习 笔记