HTML+css+JavaScript

来源：互联网发布：外汇的算法编辑：程序博客网时间：2024/05/16 16:00

主要参见：http://www.w3school.com.cn/

一、HTML

1、<html>和</html> 标签限定了文档的开始和结束点。
属性：
(1) dir: 文本的显示方向，默认是从左向右
(2) lang: 表示整个文档中所使用的语言，en--英文，zh--中文 (3) version：定义创作文档的HTML的标准版本 2、<head></head>用于封装位于文档头部的其他标签
属性：
(1) dir:文本的显示方向 (2) Lang:语言信息
(3) Profile:提供了与当前文件相关联的文档数据的URL 可放在<head>标签中的标签为
(1) <base>:标注当前文档的URL的全称
属性：
Href：指定文档的基础URL地址（<body>中的相对地址都是以此基地址为基础） Target：定义打开页面的窗口
属性值：
_parent:在上一级窗口中打开 _blank:在新一窗口中打开 _self:在本窗口中打开
_top:在浏览器的整个窗口中打开
(2) <basefont>：设定基准的字体，字号和颜色
属性：
Face:设置字体（如黑体，楷体等）
Size:设置大小（属性值从1——7，从小到大） Color;字体颜色（值为十六进制颜色）
(3) <title>：设定显示在浏览器左上方的标题内容
属性：
Dir:文本的显示方向 Lang:语言信息
(4) <meta>：有关文档本身的元素信息
属性：
http-equiv: 生成http标题域，取值与content的属性值相同
属性值：
Refresh 为自动刷新，在content里设定刷新时间，content里也可以跟上刷新的URL，实现页面跳转； content-type 在content里用charset设置内码语系如charset=gb2312;
Expires 定义网页有效期，在content里的格式为星期，日月年时分秒 GMT，用英文和数字 Page-enter 进入网页时的效果 Page-exit 退出网页时的效果在content中对应的值为：
0：盒状收缩 1：盒状展开 2：圆形收缩 3：圆形展开 4：向上擦除 5：向下擦除 6：向左擦除 7：向右擦除 8：垂直百叶窗 9：水平百叶窗 10：横向棋盘式 11：纵向棋盘式 12：溶解 13：左右向中部收缩 14：中部向左右展开 15：上下向总中部收缩 16：中部向上下展开 17：梯状左下展开 18：梯状左上展开 19：梯状右下展开 20：梯状右上展开 21：随机水平线 22：随机垂直线 23：随机
Name：如果元数据是以关键字/取值出现的话，那么name的值就是其关键字
属性值：
Keywords 在content里定义关键字；
Discription 为定意描述，在content里定义描述内容； Author 在content里描述作者；

Content: 关键字/取值的内容

(5) <style>：设定有关CSS层叠样式表的内容 (6) <link>：设定外部文件的链接 (7) <script>：设定文件脚本的内容 3、<body></body>界定了文档的主题
属性：
(1)、text: 页面文字的颜色
(2)、bgcolor: 页面背景的颜色（用十六进制的颜色表示） (3)、background: 页面的背景图像（所需的是图片的URL）
(4)、bgproperties: 页面的背景图片是否固定(其只有一个值fixed，设为Fixed后图像不会随着滚动条的滚动而动) (5)、link: 页面默认的链接颜色
(6)、alink: 鼠标正在单击时的链接颜色 (7)、vlink: 访问过后的链接颜色
上面三个控制的是标签<a></a>中的颜色 (8)、topmargin: 页面的上边距 (9)、leftmargin: 页面的左边距
4、 定义空格  5、文字标记
(1)、<hn>（n=1~6）标记标题字
属性：
Dir：文字方向 Lang：语言信息 Align：对齐方式
属性值：
Left:左对齐（默认） Right：右对齐 Center：居中
Class：用一个名称来标记标题，标记名称指向在外部定义的样式表
Id：为段落设置一个标记，将来可以在一个超链接中明确的引用这个标记，以便作为样式表的选择器 Style：创建标题内容的内联样式 Title：给标题加上一个说明性的文字
(2)、<font>标记普通字
属性：
Face:字体 size: 字号 color:颜色
(3)、<b>或<strong> 粗体 (4)、<i>,<em>,<cite> 斜体 (5)、<sup> 上标 (6)、<sub> 下标 (7)、<big> 大字号 (8)、<small> 小字号 (9)、<u> 下划线 (10)、<s> 删除线
(11)、<address> 显示地址如Email 6、段落标记
(1)、<p> 表示一个段落的开始
属性：dir lang align class id style title (2)、<br> 换行 <nobr>
属性：class id style title (3)、<div>分块文字
属性：dir lang align class id style title nowrap（强制不换行）
(4)、<span> 行内样式定义
属性： dir lang align class id style title

(5)、<center> 水平居中显示
属性： dir lang class id style title (6)、<blockquote> 块引用
属性： dir lang class id style title
7、下划线
<hr> 插入水平分割线
属性：dir lang class id style align size noshade width color
8、列表
(1)、 <ul>无序列表,用<li>来罗列项目
属性：dir lang class id style title compact（紧凑无需列表）type(项目符号类型) Type的属性值：disc：实心原点 circle：空心原点 square：实心方形 (2)、<ol>定义一个有序列表
属性：dir lang class id style title compact start(数字起始值) Type的属性值：1，A，a，i，|
(3)、目录列表<dir>,无序列表的一种特殊形式
属性： dir lang class id style title (4)、定义列表<dl>
基本用法： <dl>
<dt>名词</dt> <dd>解释</dd> </dl>
属性：dir lang class id style title compact (5)、菜单列表<menu>,用于表示简短的列表
属性：dir lang class id style title
9、插入图片
<img> 插入图片标签属性：
Src：图像的源文件路径 Alt：文字提示（图像不显示时） width、hight：宽度、高度 border：边框 Vspace：垂直间距 hspace：水平间距 dynsrc:设定avi文件的播放 loop：设定avi播放次数 Loopdelay:设定avi播放延迟 start：设定avi文件的播放方 lowsrc：设定低分辨率图片 usemap：映像地图 Dir lang class id align style title Align的属性值极其说明：
Top：文字的中线在图片的上方 middle：文字的中线位于图片的中部 Bottom：文字的中线位于图片的底部 left：图片在文字左侧 Right:图片在文字的右侧 absbottom:文字的底线位于图片的底部 Absmiddle：文字的底线位于图片的中部 baseline：英文文字基准线对齐 Texttop：英文文字上边线对齐
10、插入超链接
(1)、标签<a></a>为超链接标签属性：
Href：指定链接地址 name:给链接命名 target:指定链接打开窗口 accesskey：链接热键 Dir lang align class id style title charset rel：指定从原文档到目标文档的关系 Rev:指定从目标文档到源文档的关系 type tabindex:对新窗口中的对象重新排序 URL格式：
http://进入万维网站点 ftp://进入文件传输服务器 news://启动新闻讨论组 telnet://启动telnet方式 Gopher://访问gopher服务器 mailto://启动邮件（href=”mailto://sdut@qq.com? Subject=给我来信”） (2)、书签链接，试用于页面太长时，避免翻页，格式如下
<a name=”name”> 文字 </a> <a href=”#name”> 文字链接 </a> (3)、空链接： <a href=”#”> 链接 </a>
(4)、脚本链接：<a href = “javascript：.....”> 文字链接 </a>
(5)、制作图像映射：在同一图像上嵌入不同的链接，创建图像映射的方式是通过<img>标签的usemap属性再结合<map> 以及<area>标签来实现的，<a>或<area>标签包含在<map>标签内

<map>的属性：
name 给链接命名 dir lang id class style title
<area>的属性:
Href alt accesskey target dir lang id class style title tabindex shape(图像映射区域的形状) coords(图像对光标敏感区域的坐标)
Shape的属性值：
Rect 矩形区域 circle 椭圆形区域 poly 多边形区域
事例：
<img usemap=”#map” src=”URL” hight=”” width = “” border = “”> <map name = “map”>
<area shape = “rect” coords = “100,23,56,90” href = “URL”> <area shape = ...............................................................................> </map>
11、插入多媒体
(1)、插入声音标签<bgsound>
属性： src (声音文件路径) loop 循环次数
(2)、<embed>标签可以在网页中加入MP3音乐，电影，swf动画等多媒体文件
属性: src loop autostart width hight hidden(是否隐藏内嵌播放器) dir lang class id style align title type(嵌入多媒体类型)
Hidden 和 autostart 的属性值有true和no 当嵌入flash动画时还有以下属性：
Quality 动画的播放质量 puginspage 播放插件所在位置 wmode 动画播放时的窗口模式
(3)、制作滚动字幕标签<marquee></marquee>
属性： align behavior(滚动方式) bgcolor class direction(滚动方向) width hight Hspace vspace
Style loop scrollamount(滚动速度) scrolldelay（滚动延迟） Direction的属性值：up down left right Behavior 的属性值: scroll（循环往复《默认》） slide（只走一次滚动） alternate（交替进行滚动） Scrollamount后跟数字越小越慢，scrolldelay后跟毫秒，vspace和hspace 定义字幕与周围文字的距离
12、其他嵌入
(1)、<object>标签用于往文档中嵌入对象
属性：classid（指定包含对象的位置） archive（URL列表） border codebase（提供一个可选的插件URL）hight
Width data(指定需要对象处理的数据文件) hspace vspace name type tabindex dir lang align class id style title (2)、<applet>标签用来插入applet小程序
属性: code (指定浏览器运行的Java类小程序的名称) codebase hight width hspace vspace name type class alt id title style align (3)、<param>标签为把包含他的<object>或<applet>提供参数
属性：type name id value
13、表单：
表单由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有的这些都放在<form>中 (1)、<form>
属性： dir lang align class id style title name method(定义表单结果从浏览器传输到服务器的方法一般有post 和get 两种方法) action(用来定义表单处理程序（asp,CGI等）的位置（相对或绝对）) enctype（设置表单编码方式） target(表单返回显示方式)
Enctype的属性值： text/plain(以纯文本形式传送) application/x-www-urlencoded(默认编码方式) multipart/form-data 使用mine 编码 (2)、表单输入标签<input>
属性: dir lang class id alt name align style title type accesskey value size src accept（文件上传的MIME表列） checked（已选中） disabled（禁止某个元素输入）maxlength(最大字符数)
Type的属性值：text 文字域 password密码域 file 文件域 checkbox复选框 radio单选框 button 普通按钮 submit 提交按钮 reset 重置按钮 hidden隐藏域 image 图像提交按钮

(3)、多行文字域<textarea>
属性：dir lang class id style title name accesskey disabled tabindex rows（行数） cols（列数） wrap（多行文字域的换行） Wrap的属性值：virtual 虚拟换行 physical 物理换行 off 不换行 (4)、<select>下拉菜单和下拉列表标签，把标记条目放在<option>标签中
属性：dir lang class id style title name disabled（禁用某个列表） size tabindex multiple（列表中的多选项目） 14、表格
(1)、定义表格<table>
属性：dir lang class id style title name bgcolor background bordercolor bordercolorlight bordercolordark border height width cellpadding(单元格边距) cellspacing(单元格间距) nowrap frame(表格边框的可见方式) rules(行列之间边的可见方式) summary(整个表格的概要描述)
Frame的属性值：
Above 显示上边框 below显示下边框 border 边框全显示 hside显示上下边框 vside显示左右边框 lhs显示右边框 rhs显示左边框 void 显示 Rules的属性值：
All 显示所有内部边框 cols仅显示列边框 groups显示位于行列间的边框 none不显示内部边框 rows仅显示行边框
(2)、定义行<tr>
属性：dir lang class id style title bgcolor background bordercolorlight bordercolordark valign(表格行的垂直对齐方式) (3)、定义列<td>，<th>为定义表头
属性：dir lang class id style title bgcolor background bordercolorlight bordercolordark valign width height abbr（单元格的缩写） axis（用逗号分割目录名列表） rowspan（单元格跨行个数）
Colspan（单元格跨列个数） headers（标题单元格的列表） nowrap（禁止换行） scope（指定单元格提供信息）
(4)、表格标题内容<caption>
属性:dir lang class align id style title valign
15、框架主要分为两部分：一个是框架集，另一个是框架
(1)、<frameset>框架集，仅是一个框架的集合
属性：class id style title rows cols bordercolor frameborder framespacing(框架集间距) (2)、定义框架<frame>
属性：class id style title bordercolor frameborder name noresize(禁止调整边框大小) src(框架源文件)
Marginwidth(框架边缘宽度) marginheight(框架边缘高度) Frameborder的属性值：yes 出现边框 no 不出现边框
(3)、<iframe>定义内联框架，在文档中定义一个独立的矩形区域，有独立的滚动条和边框
属性：class id style title frameborder name src marginwidth marginheight align height width scrolling（是否允许出现滚动条）
Scrolling的属性值：yes 出现 no不出现 auto自动出现滚动条

二、css
16、样式表
(1)、内联样式表：只需在标签内含一个上style属性，style属性后在跟一系列属性和属性值即可。
事例：<标签 style = “属性：属性值”>

(2)、文档样式表用<style>标签表示
属性：dir lang title media(文档要使用的媒介类型) type（样式类型）级联样式表type的属性值都是text/css，javascript使用的样式表都是text/javascript
Media的属性值：screen 计算机显示屏（默认） tv（电视） projection 剧场 handheld（PDA和手提电话） print 打印 all所有媒体

(3)、外部样式表：用<link>标签来实现
属性：dir title lang target type class id style charset href media rel rev

(4)/样式表语法
（a）、HTML重新定义标签样式表语法：exp: td｛color：red;font-size:8pt｝（b）、类样式表：能够在文档样式表或外部样式表中为同一个元素创建不同的样式，在文档后面通过设置class属性来选择特定的样式。

例子： .bg ｛background-image: url（路径）；｝
<body class = ”bg”>
17、样式表的属性
(1)、字体属性： font-family 用一个指定的字体名 font-size 字体显示的大小 font-style 字体显示的样式 font-weight 定义字体的粗细 font-variant 设置英文大小写转换 font 组合设置字体属性
Font-style的属性值：normal 正常值 italic 斜体 oblique 扁斜体 Font-weight的属性值： normal 正常值 bold 粗体 bolder 在加粗 lighter 变细 100—900 共有100到900个级别数越大越粗 Font-variant的属性值：normal 正常 small-caps 将小写转换为大写 Font组合时的顺序：样式，粗细，大小 (2)、颜色和背景属性：
Color 颜色 background-color 背景颜色 background-image 背景图片 background-repeat 背景图片如何重复
Background-position 设置背景图片水平和垂直的位置 background 组合设置背景属性属性值：
Background-repeat：repeat 平铺 repeat-x X方向上平铺 repeat-y Y方向上平铺 no-repeat不平铺 Background-position： value 以百分比(x%.y%)或绝对值的形式(x.y)来确定背景图像的位置 top 居顶 Center 居中 bottom居底 left 居左 right居右 Background可以任意组合以上的属性值

(3)、文本属性：
Letter-spacing 定义一个附加在字符间的间隔数量 word-spacing单词间的间隔数量 text-index文字的首行缩进
Text-align 文本对齐方式 line-height行高间隔 text-transform控制英文文字大小写 text-decoration文字修饰属性值：
Letter-spacing: normal 正常值长度单位如2em Word-spacing ： normal 正常值长度单位
Text-decoration：underline 加下划线 overline 加上划线 line-through 加删除线 blink闪烁文字，只使用于 netscape浏览器 none默认值
Text-align：left 左对齐 right右对齐 center居中 justify两端对齐 Text-index:后跟长度单位如2em
Text-transform: capitalize将每个单词首字母大写 uppercase 将每个都转换为大写 lowercase 转换为小写 none
(4)、边框属性：
Border-color 边框颜色 border-style 边框样式 border-width边框宽度 border-top-color 上边框颜色
Border-left-color 左边框颜色 border-right-color 右边框颜色 border-bottom-color 底边框颜色 border-top-style border-left-style border-right-style border-bottom-style border-top-width border-left-width
Border-right-width border-bottom-width border 组合设置 border-top(right/left/right/bottom) 属性值：
Border-style：none 无边框 dotted 边框由点组成 dash 边框由短线组成 solid边框是视线 double双线 Groove 立体沟槽 ridge 边框成脊形 inset 边框内嵌一个立体边框 outset边框外嵌一个立体边框
(5)、方框属性：
Float 让文字环绕在元素四周 clear指定在某一元素的某一边是否允许有环绕的文字和对象 clip限定只显示裁切出来的区域 width设定对象的宽度 height设定对象的高度 padding设定边框和内容间的距离 margin 元素里浏览器的距离 overflow 当本层内容容纳不下时的处理方式 position 设置对象位置 z-index决定层的先后顺序和覆盖关系
属性值：
Float: none left right
Overflow: visible无论层的大小，内容都会显示出来 hidden 隐藏超出层的内容 scroll 不管是否超出都会添加滚动条 auto 只有超出时才会有滚动条

(6)、列表属性:
List-style-type 设定引导列表的项目类型 list-style-image 选择图像作为项目的引导符号 list-style-position 决定列表项目所缩进的程度属性值：
List-style-type: disc 在文本行前加实心圆 circle 加空心圆 square 加实心方块 decimal 加阿拉伯数字
Lower-roman 小写罗马数字 upper-roman 大写罗马数字 lower-alpha 小写字母 upper-alpha 大写字母 none 不显示任何符号
List-style-image:的属性值为URL(图片路径) List-style-position: outside 列表贴近左侧边框 inside 列表缩进
(7)、滤镜属性：基本语法 filter: 滤镜（参数）
Alpha 透明的层次效果 blur 快速移动的模糊效果 chroma 特定颜色的透明效果 dropshadow阴影效果 Fliph 水平翻转效果 flipv 垂直翻转效果 glow 边缘光晕效果 gray灰度效果 invert 颜色亮度值翻转 Mask遮罩效果 shadow渐变阴影效果 wave波浪效果 xray X射线效果
(8)、鼠标滤镜：用法---------cursor: value
Value的值： hand 手型 crosshair 交叉十字 text 文本选择符号 wait沙漏装 default 默认形状 help 问号 N(W、S、E)-resize 向北（西、南、东）的箭头

三、JavaScript
18、在页面中加入Javascript脚本
(1)、用标签<script>实现
属性： charset编码脚本程序的字符集 language 脚本语言 src 包含脚本程序的URL type脚本类型 (2)、js内在事件：onBlur光标离开文本框时 onChange 当文本框的内容给被改变是时 onClick单击时 onLoad载入时 onMouseOver鼠标经过时 onMouseOut鼠标移开时 onReset 复位表单时 onSubmit提交表单时 onSlecte 文本域被选中时 onUnload退出载入时 onFocus当光标落在文本框时

HTML+css+JavaScript解析

HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要。

▲知识点一——头部信息里设置网页的基底网址

基底网址的实质是统一设置超级链接的属性，基底网址标签是</base>，它有两个属性，href和_target。href用于设置基底网址的路径，_target用于设置超级链接的打开方式。
通过基底网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过<base>标记将相对网站跟目录地址附加在基底网址路径的后面，从而转化成绝对地址。我们首先创建一个base.htm，编写HTML代码如下：
1. <html> 2. <head>
3. <title>基底网址的设置</title>
4. <base href="http://www.google.com" target="_blank" /> 5. </head> 6. <body> 7. </body> 8. </html>
通过以上代码对基底网址的设置。Base.htm页面中的任何超级链接的地址，都将在其前面加上"http://www.google.com",即转换为绝对地址。并且，页面中的超级链接打开方式都是打开新窗口。

▲知识点二——头部信息的元信息标签

元信息标签是头部信息的基本标签，专业网页代码中都对元信息有详细设置。元信息标签为</meta>，为单标签。Meta元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称，关键字，作者等。在HTML页面中，一个meta标签内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。
meta标签属性分两种：页面描述属性（name）和http标题信息（http-equiv）。

★name属性

name属性主要用于描述网页的内容，用于对搜索引擎的优化，必须重点掌握。正确地设置name属性，以便搜索引擎（比如google，baidu）的搜索机器人查找，分类，搜索引擎一般都会自动查找meta值来给网页分类。name的取值如下：
<1>keywords。即关键字，用于说明网页所包含的关键字等信息，从而提高被搜索引擎搜索到的概率。编写格式为<meta name="keywords" content =“关键字”/>，content属性的值为用户所设置的具体关键字。（一般可设置多个关键字，他们之间用英文半角的逗号分开，搜索引擎都限制关键字的数量，所以关键字内容要简洁精练）
<2>description。中文意思为"描述"，用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。格式为<meta name="description" content =“对页面的描述”/>，content属性值为用户所设置的页面具体描述的内容，最多容纳1024个字符，但搜索引擎一边只显示约前175个字符。
<3>author。作者，用于设置网站作者的名称，比较专业的网站经常用到。格式为<meta name="author" content =“作者名称”/>
<4>generator。生成器，用于设置网站编辑工具的名称，比较专业的网站页面上经常用到。格式<meta name="generator" content =“网站编辑工具名称”/>
<5>robots。机器人，用于限制页面搜索方式。搜索引擎的搜索机器人，沿着网页上的链接（如http和src链接），不断地检索资料建立自己的数据库。通过这种meta 标签可以限制部分内容不被搜索引擎检测到，降低部分信息公开性。编写格式为<meta name=“robots” content="指令组合">。该属性的值包含4个命令，分别是index、noindex、follow、nofollow，根据排列组合，有4种组合。Index和 follow组合也可称为all，noindex和nofollow也可称为none。 ★http-equiv属性

http-equiv属性的取值具体如下：
<1>content- type，内容类别，用于设置页面的类别和语言字符集。编写格式
<meta http-equiv=“content- type” context=“text/html”；charset=“gb2312”/>，content属性的值代表页面采用HTML代码输出，字符集为gb2312（简体中文），国际化网站开发的话，为了字符统一，建议charset采用utf-8.
<2>refresh。刷新，用于设置多长时间内网页自己刷新一次，或者用一段时间自动跳转到其他页面，第一种编写格式<meta http- equiv=“refresh” context=“30”/>表示隔30秒刷新一次，第二种编写格式<meta http- equiv=“refresh” context=“30；url=www.google.com”/>，表示30秒后页面自动跳转到 www.google.com网站
<3>expires，中文意思为“到期”，用于设置页面到期时间。一旦网页过期，必须到服务器上重新调用网页。第一种编写格式为<meta http- equiv=“expires” context=“Wed,10 Mar 2011 12：00：00 GMT”/>，content值代表网页过期的时间，必须使用GMT时间格式。第二种编写格式为<meta http-equiv=“expires” context=“30”/& gt;，表示多少秒后过期。

<4>cache-control，缓存控制。用于禁止在缓存中调用网页，编写格式为<meta http-equiv=“cache-control” context=“no-cache”/>，no-cache代表不允许缓存。
<5>set- cookie，设置cookie，用于设置本页面cookie多久过期，编写格式为<meta http-equiv=“set- cookie” context=“Wed,10 Mar 2011 12：00：00 GMT”/>，代表到这个时间，cookie将被删除。

▲知识点三——头部信息实现与CSS及JavaScript混编

CSS负责HTML网页的样式，JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。

<1>加入CSS只需在头部信息中加入<style type=“text/css”></style>标签对。范例代码如下：
1. <html> 2. <head>
3. <title>CSS的设置</title> 4. <style type=“text/css”> 5. CSS具体内容 6. </style> 7. </head> 8. <body> 9. </body> 10.</html>
<2>加入JavaScript只需要在头部信息中加入<script type=“text/javascript”></script>标签对。范例代码如下：
1. <html>

2. <head>
3. <title>CSS的设置</title>

4. <style type=“text/css”>

5. CSS具体内容

6. </style>
7. <script type=“text/javascript”>

8. JavaScript具体内容

9. </script>

10.</head>

11.<body>

12.</body>

13.</html>

▲知识点四——常用头部信息功能推荐

<1>页面切换特效，其中一种特效的编写格式如下：
<meta http-equiv=“page-enter” content=“blendtrans（duration=0.5）”/>
http-equiv属性的值为page-enter时表进入该页面时启用特效，http-equiv属性的值为page-exit时代表退出（离开）该页面时启用特效。
Content属性的值代表特效的种类，这种特效也叫动态滤镜。滤镜种类很多，比如blendtrans就是很常见得一种，效果为淡入淡出，duration值表示效果持续的时间（单位为秒）。另一种滤镜特效编写格式如下：
<meta http-equiv=“page-enter” content=“revealTrans（duration=6）”/>
动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间（单位为秒），Transition是滤镜类型，表示想使用哪种特效，取值为0~23。
<2>强制页面在当前窗口以独立页面显示，可以防止网页被其他网站框架，编写格式如下： <meta http-equiv="window-target" content=“_top"> <3>页面图标设置，编写格式如下： <link rel="Shortcut Icon" href="/myicon.ico">
href属性的值是ico图标文件的路径，这里采用的是相对根目录路径。

for example：

1. HTML

   1:  <!doctype html>

   2:  <!-- This is a test html for html, css, javascript -->

   3:  <!-- It will use all html label -->

   4:  <!-- 大的方向还是想逻辑结构, 逐步细化 -->

   5:  <html>

   6:  <head>

   7:      <link rel="stylesheet" type="text/css" href="practice.css" />

   8:      <script type="text/javascript" src="./myfwim_1030.js"></script>

   9:  </head>

10:

  11:  <body>

  12:      <div id="front">

  13:          <a class="red" href="css.asp">Css syntax</a>

  14:          <table width="100%">

  15:          <!-- tr 表示增加 1 行, td 表示增加 1 列 -->

  16:              <tr >

  17:                  <td width="30%" bgcolor="green">

  18:                      <img src="./images/bg2.jpg" width="200" height="100"/>

  19:                  </td>

  20:                  <td width="60%">

  21:                      <table width="100%" >

  22:                          <tr>

  23:                              <td width="30%">111</td>

  24:                              <td width="30%">222</td>

  25:                              <td width="30%">333</td>

  26:                          </tr>

  27:                          <tr>

  28:                              <td width="30%">444</td>

  29:                              <td width="30%">555</td>

  30:                              <td width="30%">666</td>

  31:                          </tr>

  32:                      </table>

  33:                  </td>

34:

  35:              </tr>

  36:          </table>

  37:      </div>

  38:      <hr />

  39:      <div id="main" >

  40:          <table width="100%" class="center">

  41:              <tr>

  42:                  <td width="30%" bgcolor="yellow">

  43:                      <ol>

  44:                          <li>ol01</li>

  45:                          <li>ol02</li>

  46:                          <li>ol03</li>

  47:                      </ol>

  48:                      <ul>

  49:                          <li>ul01</li>

  50:                          <li>ul02</li>

  51:                          <li>ul03</li>

  52:                      </ul>

  53:                      <dl>

  54:                          <dt>title01</dt>

  55:                          <dd>detail01</dd>

  56:                          <dd>detail02</dd>

  57:                          <dt>title11</dt>

  58:                          <dd>detail11</dd>

  59:                          <dd>detail12</dd>

  60:                      </dl>

  61:                  </td>

  62:                  <td width="60%">

  63:                          <table width="100%">

  64:                              <tr>

  65:                                  <td>

  66:                                      <select>

  67:                                          <optgroup label="Swedish Cars">

  68:                                            <option value ="volvo">Volvo</option>

  69:                                            <option value ="saab">Saab</option>

  70:                                          </optgroup>

71:

  72:                                          <optgroup label="German Cars">

  73:                                            <option value ="mercedes">Mercedes</option>

  74:                                            <option value ="audi">Audi</option>

  75:                                          </optgroup>

  76:                                      </select>

  77:                                      <!-- 上边option标签, value是真实需要传递的值, 括号外边的值是用来显示的 -->

  78:                                  </td>

  79:                                  <td><textarea></textarea></td>

  80:                              </tr>

  81:                              <tr>

  82:                                  <td>

  83:                                      <form>

  84:                                        <fieldset>

  85:                                          <legend>Personalia:</legend>

  86:                                          Name: <input type="text" /><br />

  87:                                          Email: <input type="text" /><br />

  88:                                          Date of birth: <input type="text" />

  89:                                        </fieldset>

  90:                                      </form>

  91:                                  </td>

  92:                                  <td>

  93:                                      <form>

  94:                                          <label for="male">Male</label>

  95:                                          <input type="radio" name="sex" id="male" />

  96:                                          <br />

  97:                                          <label for="female">Female</label>

  98:                                          <input type="radio" name="sex" id="female" />

  99:                                      </form>

 100:                                  </td>

 101:                              </tr>

 102:                              <tr>

 103:                                  <td>

 104:                                      <image src="./images/2.jpg" width="500" height="300"/>

 105:                                  </td>

 106:                                  <td>

 107:                                      <image src="./images/1.jpg" width="500" height="300"/>

 108:                                  </td>

 109:                              </tr>

 110:                          </table>

 111:                          <table>

 112:                              <tr>

 113:                                  <td width="300", height="300">

 114:                                      <p>List 2</p>

 115:                                  </td>

 116:                                  <td width="700", height="300">

 117:                                      <p>List 3</p>

 118:                                  </td>

 119:                              </tr>

 120:                          </table>

 121:

 122:                  </td>

 123:              </tr>

 124:

 125:          </table>

 126:      </div>

 127:      <hr />

 128:      <div id="bottom">

 129:          <table width="100%">

 130:              <tr>

 131:                  <td width="30%" bgcolor="blue">

 132:                      <image src="./images/4.jpg" />

 133:                  </td>

 134:                  <td width="60%" bgcolor="green">

 135:                      <p>List 3</p>

 136:                  </td>

 137:              </tr>

 138:          </table>

 139:      </div>

 140:  </body>

 141:

 142:  </html>

2. -----------------------------

   1:  <!doctype html>

   2:  <html>

   3:  <head>

   4:      <script type="text/javascript" src="./myfwim_1030.js"></script>

   5:  </head>

   6:  <body bgcolor="#FFFFFF" text="#000000">

   7:      <form name="form1">

   8:          <input type="hidden" name="type">

   9:          <input type="hidden" name="selFlag" value="<%=selFlag%>">

  10:          <input type="hidden" name="b_bl_no" value="<%=h_bl_no%>">

11:

  12:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

  13:              <tr>

  14:                  <td></td>

  15:              </tr>

  16:          </table>

17:

  18:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

  19:              <tr>

  20:                  <td width="15%" class="cell_title">

  21:                      <div align="left">MAWB No.</div>

  22:                  </td>

  23:                  <td width="35%" class="cell_data">

  24:                      <input type="text" name="m_bl_no" value="" class="inputsubmit" size="20" maxlength="20"

  25:                              onBlur="javascript:this.value=this.value.toUpperCase();"

  26:                              onkeypress="return handleEnter_gubun(event);">    <!-- Question -->

27:

  28:                      <a href="javascript: searchNo(setMBLNo)">

  29:                          <img src="./images/butt_popup_query.gif" border="0" >

  30:                      </a>

  31:                  </td>

  32:                  <td width="15%" class="cell_title">HAWB No. List</td>

  33:                  <td class="cell_data" height="2">

  34:                      <div align="left">

  35:                          <select name="h_bl_no_list" tabindex="230" class="input_re_red"

  36:                                  onchange="javascript:goHBL(this)">

  37:                              <optgroup label="1 group">

  38:                                  <option value="1aa">aa</option>

  39:                                  <option value="1bb">bb</option>

  40:                              </optgroup>

  41:                              <optgroup label="2 group">

  42:                                  <option value="2cc">cc</option>

  43:                                  <option value="2dd">dd</option>

  44:                              </optgroup>

  45:                          </select>

  46:                      </div>

  47:                  </td>

  48:                  <td class="cell_data" align="right">

  49:                      <script>btn("amend()", "Amend Request");</script>

  50:                  </td>

  51:              </tr>

  52:          </table>

  53:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

  54:              <tr>

  55:                  <td align="left" valign="bottom" width="17%">

  56:                      <input type="button" value="Send" class="input1" onClick="Pre_send()">

  57:                  </td>

58:

  59:                  <td align="right" height="30" >

  60:                      <a href="javascript:getProposePopup()">

  61:                          <img src="./images/butt_hbl_pro.gif" align="absmiddle" border="0">

  62:                      </a>

  63:                      <a href="javascript: getPop()">

  64:                          <img src="./images/butt_search.gif" align="absmiddle" border="0">

  65:                      </a>

  66:                  </td>

67:

  68:              </tr>

69:

  70:          </table>

  71:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

  72:              <tr>

  73:                  <td width="15%" class="cell3_title">

  74:                      <div align="left">Shipper</div>

  75:                  </td>

  76:                  <td class="cell3_data" colspan="3">

  77:                      <div align="left">

  78:                          <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">

  79:                          <a href="aa" colspan="3" border="0">

  80:                              <img src="./images/butt_popup_query.gif">

  81:                          </a>

  82:                          <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">

  83:                      </div>

  84:                      <div align="left">

  85:                          <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">

  86:                      </div>

  87:                      <div align="left">TEL<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

  88:                                        FAX<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

  89:                      </div>

  90:                  </td>

  91:              </tr>

  92:          </table>

93:

  94:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

  95:              <tr>

  96:                  <td width="15%" class="cell3_title">

  97:                      <div align="left">Consignee</div>

  98:                  </td>

  99:                  <td class="cell3_data" colspan="3">

 100:                      <div align="left">

 101:                          <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">

 102:                          <a href="aa" colspan="3" border="0">

 103:                              <img src="./images/butt_popup_query.gif">

 104:                          </a>

 105:                          <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">

 106:                      </div>

 107:                      <div align="left">

 108:                          <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">

 109:                      </div>

 110:                      <div align="left">TEL<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

 111:                                        FAX<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

 112:                      </div>

 113:                  </td>

 114:              </tr>

 115:          </table>

 116:

 117:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

 118:              <tr>

 119:                  <td width="15%" class="cell3_title">

 120:                      <div align="left">Notify</div>

 121:                  </td>

 122:                  <td class="cell3_data" colspan="3">

 123:                      <div align="left">

 124:                          <input type="text" name="ship_code" value="" class="inpur1" size="20" maxlength="20">

 125:                          <a href="aa" colspan="3" border="0">

 126:                              <img src="./images/butt_popup_query.gif">

 127:                          </a>

 128:                          <input type="text" name="view_code" value="" class="input1" size="50" maxlength="50">

 129:                      </div>

 130:                      <div align="left">

 131:                          <input type="text" name="view_code2" value="" class="input1" size="77" maxlength="77">

 132:                      </div>

 133:                      <div align="left">TEL<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

 134:                                        FAX<input type="text" name="view_code2" value="" class="input1"size="30"maxlength="30">

 135:                      </div>

 136:                  </td>

 137:              </tr>

 138:          </table>

 139:

 140:          <div align="left">[Shipping information]</div>

 141:

 142:          <table width="98%" border="0" cellspacing="0" cellpadding="0">

 143:              <tr>

 144:                  <td width="15%" class="cell3_title"><div align="left">Carrier(AirLine)</div></td>

 145:                  <td width="35%">

 146:                      <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">

 147:                      <a href="aaa">

 148:                          <img src="./images/butt_popup_query.gif">

 149:                      </a>

 150:                  </td>

 151:                  <td width="15%" class="cell4_title"><div align="left">Co-Loader</div></td>

 152:                  <td width="35%">

 153:                      <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">

 154:                      <a href="aaa">

 155:                          <img src="./images/butt_popup_query.gif">

 156:                      </a>

 157:                  </td>

 158:              </tr>

 159:              <tr>

 160:                  <td width="15%" class="cell3_title"><div align="left">Flight No.(AirLine)</div></td>

 161:                  <td width="35%">

 162:                      <input type="text" name="carrier" value="" class="input1" size="20" maxlength="20">

 163:                  </td>

 164:                  <td width="15%" class="cell4_title"><div align="left">Cur.</div></td>

 165:                  <td width="35%">

 166:                      <select>

 167:                          <option>aaa</option>

 168:                          <option>bbb</option>

 169:                          <option>ccc</option>

 170:                      </select>

 171:                  </td>

 172:              </tr>

 173:

 174:              <tr>

 175:                  <td width="15%" class="cell3_title"><div align="left">Port of Departure</div></td>

 176:                  <td width="35%">

 177:                      <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">

 178:                      <a href="aaa">

 179:                          <img src="./images/butt_popup_query.gif">

 180:                      </a>

 181:                       <input type="text" name="depart_port_name"

 182:                              maxlength="100" value="<%=depart_port_name%>" class="input_data3"

 183:                              size="28">

 184:                  </td>

 185:                  <td width="15%" class="cell4_title"><div align="left">Port of Destination</div></td>

 186:                  <td width="35%">

 187:                      <input type="text" name="carrier" value="" class="input1" size="6" maxlength="6">

 188:                      <a href="aaa">

 189:                          <img src="./images/butt_popup_query.gif">

 190:                      </a>

 191:                      <input type="text" name="depart_port_name"

 192:                              maxlength="100" value="" class="input_data3"

 193:                              size="28" >

 194:                  </td>

 195:              </tr>

 196:          </table>

 197:          <div align="left">[Cargo Information]</div>

 198:  </table>

 199:

 200:      </form>

 201:  </body>

 202:  </html>

2. css

body {color: brown;}h1, h2, h3, h4, h5, h6 {color: blue;font-size: 20px;}p {color: green;font-size: 15px;font-family: "sans serif";text-align: center;background-color: gray;padding: 10px;}/* id 唯一 */#front {color: red;}/* class 类别 */.center {color: brown;}/*  */h1.center {color: red;}/* 属性, 对于所有带 dir 属性的标签起作用 */[dir] {color: yellow;}[type=text] {color: blue;}/* 后代选择器, 可以有间隔 */h1 em {color: red;}/* 子选择器, 只能直接继承 */h1 > strong {color: red;}/* 注意, 以下内容顺序不能变 */a:link {color: #FF0000}a:visited {color: #00FF00}a:focus {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}a.red: visited {color:#FF0000}

3. JAVASCRIPT

/* 变量声明, 立刻就要初始化 */var x = ""var mycars = new Array()mycars[0] = "sbba"mycars[1] = "Volvo"mycars[2] = "BMW"for (x in mycars) {document.write[mycars[x] + "<br/>"]}document.write("hello \world" );/* data type: undefined, Null, Boolean, Number, String, */// ============================== Array ========================================================var colors = ["red", "blue", "yellow"]alert(colors.length);colors[colors.length] = "black";/* 增加了数组的长度, 因为下标是从 0 开始, 所以以上本来数组长度是3, 增加了一个就变成 4 了*/colors.toString()  // 返回结果为 red,blue,yellow,black // 数组可以自动实现 "栈" 数据结构var count = colors.push("white","brown")// 可以一次性入栈多个var item = colors.pop();// 出栈// 数组自动实现 " 队列 " 数据结构var count = colors.push();// 从队尾入var count = colors.shift();// 队头出// 数组实现循环队列var count = colors.unshift()// 从队头入var count = colors.pop()// 队尾出// 数组内容元素排序// 默认情况, 将数组内元素都调用 toString(), 进行比较, 10 会比 5 小colors.sort()// 也可以调用比较函数来进行比较colors.sort(compare)function compare(value1, value2) {if (value1 < value2)return -1;else if (value1 > value2)return 1;elsereturn 0;}// 数组元素　concat() 结合var colors2 = colors.concat("yellow")// 数组元素 截取var colors2 = colors.slice(1)// 从 第 1 个, 截到最后var colors = colors.slice(1, 3) // 从 第 1 个, 截到第 3 个// 数组 插入, 删除splice(0, 2)  // 0表示下标位置, 2表示删除 2 个splice(2, 0, "red", "green") // 2表示下标位置, 0 表示需要删除几个, 后边两项表示要增加内容splice(2, 1, "red", "green")// 同样, 只不过这次先删除了 1 个内容, 给出一种替换的效果 // 时间类型var date = new Nate(Date.UTC(2005, 4, 5, 17, 55, 55))// 2005年5月5日17时55分55秒//============================================================================================// 定义对象s/* 不想要被原型链共享的内容, 写在构造函数中 */function Person(name, age, job) {this.name = name;this.age = age;this.job = job;this.friends = ["shely", "count"];}Person.prototype = {constructor: Person,sayName : function() {alert(this.name);}};// 继承的方法, 组合继承(经典继承)function SuperType(name) {this.name = name;this.colors = ["red", "blue", "green"];}SuperType.prototype = {constructor: SuperType,sayName : function() {alert(this.name);}}function SubType(name, age) {SuperType.call(this, name);this.age = age;}SubType.prototype = new SuperType();// 子类原型链继承了是父类的一个实例// 因为父类的实例, 会继承父类自己原型链中的方法和变量// 从而实现了子类继承父类// 函数内部不能再定义一个函数, 使用闭包, 可以使内部函数访问到外部函数的作用域内的变量// 内部函数说白了, 其实就是一个将函数作为一个值, 但是这样做有很大的灵活性, 例如// =============================================================================================// 块级作用域( function() {// 这里是块级别作用域})();// =============================================================================================// 超时调用, 在指定时间后, 调用一次var timeoutId = setTimeout(function(){alert("Hello, world!");}, 1000);clearTimeout(timeoutId);// 间歇调用, 在指定间隔内, 反复调用var intervalId = setInterval(function(){alert("Hello,world!");}, 10000)clearInterval(intervalId);// 实际开发环境中很少使用间歇调用, 因为有可能两个间歇调用之间时间会掌握不好// 一般可以是用超时调用, 加循环来实现间歇调用// ==============================================================================================document.getElementById() // 很好用, 用来定位 HTML 标签document.forms // <form>var fisrtForm = document.forms[0];// html 中的第一个表单var myForm = document.forms["form2"]// 名字为 form2 的表单// 提交表单的方法, html 中<input type="submit" value="Submit Form"><button type="submit">Submit Form</button><input type="submit" src="graphic.gif">// javascript 中提交表单var form = document.getElementById("myForm");form.submit();// ====================== Event ================================================================var btn = document.getElementByid("myBtn")btn.onclick = function() {alert("Click");};btn.onclick = null;// 删除事件处理程序// ==================== Head First javascript ==================================================var cookies = document.cookie.split(';');for (var i=0; i<cookies.length; i++) {var c = cookies[i];while (c.charAt(0) == '')c = c.substring(1, c.length);if (c.indexOf(searchName) == 0)return c.substring(searchName.length, c.length);}// 二维数组var seats = new Array(new Array(9), new Array(9), new Array(9));var seats = [ [false, true],  [false, true],  [false, true] ];// 正则表达式, 说的不错// 正则表达式, 很有用, 比如可以用它来确认用户输入的表单内容, 是否符合你自己要求的格式, 比如输入的日期型

0 0

HTML+css+JavaScript

HTML+CSS+Javascript标签及属性

1. HTML

2. css

3. JAVASCRIPT