混沌破晓

HTML语言剖析

Html简介-目录

全写： HyperText Mark-up Language
译名：超文本标识语言
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。
1. Html特点：

► 描述性语言，结构语言，用于决定网页内容以什么样的形式显示；

► 通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；

► 纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver是首选)

► 文件扩展名： .htm 或 .html；

► html文件必须在Web浏览器上运行；（运行环境）

► 具有跨平台性。

1. HTML语法结构：

► HTML文件是由一系列的元素和标签（tag）组成的；

► 元素：网页中的内容；

► 标签：用于规定元素的属性和它在文件中的位置；

► 格式：<元素名称属性="值"...>元素资料,<元素名称属性="值"...>

► 不区分大小写。

2. HTML文件结构：

► 起始标记：　　表示HTML网页的起始；

► 文件头部：　　设置初始化文档信息和文档管理标注；

► 文件主体：　　设置格式化的浏览器显示的文档（内容）；

► 注释部分：　可以放在任何位置；

►

※ 例:

Html简介

n 标签写法：

► 任何标签皆由"<>"所包含，如

► 标签名与小于号之间不能留有空白字符。

► 某些标签　要加上参数，某些则不必。如大家好

► 参数只可加于起始标签中。

► 在起始标签之标签名前加上符号" / "便是其终结标签，如

► 标签字母大小写皆可。

n 成对标签与单标签：
标签按型态分为成对标签与单标签

1. 成对标签
 顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。
 例如 HTML 源码：我愿意和大家显示成：我愿意和大家一起学好html/css!大家有信 心吗？
其中 便称为成对标签。
它以起始标签 及结尾标签 标示文字我愿意和大家一起学好html/css!令它显示成粗体，两者失其一都会发生错误显示。

2. 单标签
是指标签单独出现，只有起始标签没有终结标签。

※ 例如 HTML 源码：
I love my hometown.
It's a beautiful place.
显示成：
I love my hometown.
It's a beautiful place.

其中换行标签
便属单标签。
它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的，但有些人会为空标签加上终结标签，如果加上结尾标签，对 HTML没有影响。便于记忆。

HTML语言剖析

Html标记一览-目录

标记

类型

译名或意义

作用

备注

文件标记

●

文件声明

让浏览器知道这是HTML文件

●

开头

提供文件整体信息

 </td> <td> ● </td> <td> 标题 </td> <td> 定义文件标题，将显示于窗口标题 </td> </tr> <tr> <td> <BODY> </td> <td> ● </td> <td> 本文 </td> <td> 设计文件格式及内文所在 </td> </tr> <tr> <td colspan="5"> 段落标记 </td> </tr> <tr> <td>  </td> <td> ○ </td> <td> 说明标记 </td> <td> 为文件加上说明，但不被显示 </td> </tr> <tr> <td> </td> <td> ○ </td> <td> 段落标记 </td> <td> 为文字、图片、表格等之间留一空白行 </td> </tr> <tr> <td> </td> <td> ○ </td> <td> 换行标记 </td> <td> 令文字、图片、表格等显示于下一行 </td> </tr> <tr> <td> <HR> </td> <td> ○ </td> <td> 水平线 </td> <td> 插入一条水平线 </td> </tr> <tr> <td> <CENTER> </td> <td> ● </td> <td> 居中 </td> <td> 令文字、图片、表格等显示于页面中央 </td> <td> 不建议使用 </td> </tr> <tr> <td> <PRE> </td> <td> ● </td> <td> 保留原格式 </td> <td> 令文件按照原始格式的排列方式显示 </td> </tr> <tr> <td> <DIV> </td> <td> ● </td> <td> 区域标记 </td> <td> 设定文字、图片、表格等的摆放位置 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 强制不分行 </td> <td> 令文字不因太长而自动换行 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 根据宽度换行 </td> <td> 根据浏览器的大小显示文本 </td> </tr> <tr> <td colspan="5"> 字体标记 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 加重语气 </td> <td> 产生字体加粗Bold的效果 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 粗体标记 </td> <td> 产生字体加粗的效果 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 强调标记 </td> <td> 字体出现斜体效果 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 斜体标记 </td> <td> 字体出现斜体效果 </td> </tr> <tr> <td> <TT> </td> <td> ● </td> <td> 打字字体 </td> <td> Courier字体，字母宽度相同 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 加上底线 </td> <td> 加上底线 </td> <td> 不建议使用 </td> </tr> <tr> <td> <H1> </td> <td> ● </td> <td> 一级标题标记 </td> <td> 变粗变大加宽，程度与级数反比 </td> </tr> <tr> <td> <H2> </td> <td> ● </td> <td> 二级标题标记 </td> <td> 将字体变粗变大加宽 </td> </tr> <tr> <td> <H3> </td> <td> ● </td> <td> 三级标题标记 </td> <td> 将字体变粗变大加宽 </td> </tr> <tr> <td> <H4> </td> <td> ● </td> <td> 四级标题标记 </td> <td> 将字体变粗变大加宽 </td> </tr> <tr> <td> <H5> </td> <td> ● </td> <td> 五级标题标记 </td> <td> 将字体变粗变大加宽 </td> </tr> <tr> <td> <H6> </td> <td> ● </td> <td> 六级标题标记 </td> <td> 将字体变粗变大加宽 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 字形标记 </td> <td> 设定字形、大小、颜色 </td> <td> 不建议使用 </td> </tr> <tr> <td> <BASEFONT> </td> <td> ○ </td> <td> 基准字形标记 </td> <td> 设定所有字形、大小、颜色 </td> <td> 不建议使用 </td> </tr> <tr> <td> <BIG> </td> <td> ● </td> <td> 字体加大 </td> <td> 令字体稍为加大 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 字体缩细 </td> <td> 令字体稍为缩细 </td> </tr> <tr> <td> <STRIKE> </td> <td> ● </td> <td> 画线删除 </td> <td> 为字体加一删除线 </td> <td> 不建议使用 </td> </tr> <tr> <td> <CODE> </td> <td> ● </td> <td> 程式码 </td> <td> 字体稍为加宽如<TT> </td> </tr> <tr> <td> <KBD> </td> <td> ● </td> <td> 键盘字 </td> <td> 字体稍为加宽，单一空白 </td> </tr> <tr> <td> <SAMP> </td> <td> ● </td> <td> 范例 </td> <td> 字体稍为加宽如<TT> </td> </tr> <tr> <td> <VAR> </td> <td> ● </td> <td> 变数 </td> <td> 斜体效果 </td> </tr> <tr> <td> <CITE> </td> <td> ● </td> <td> 传记引述 </td> <td> 斜体效果 </td> </tr> <tr> <td> <BLOCKQUOTE> </td> <td> ● </td> <td> 引述文字区块 </td> <td> 缩排字体 </td> </tr> <tr> <td> <DFN> </td> <td> ● </td> <td> 述语定义 </td> <td> 斜体效果 </td> </tr> <tr> <td> <ADDRESS> </td> <td> ● </td> <td> 地址标记 </td> <td> 斜体效果 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 下标字 </td> <td> 下标字 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 上标字 </td> <td> 指数（平方、立方等） </td> </tr> <tr> <td colspan="5"> 列表标记 </td> </tr> <tr> <td> <OL> </td> <td> ● </td> <td> 有序列表 </td> <td> 列表项目将以数字、字母顺序排列 </td> </tr> <tr> <td> <UL> </td> <td> ● </td> <td> 无序列表 </td> <td> 列表项目将以圆点排列 </td> </tr> <tr> <td> <LI> </td> <td> ○ </td> <td> 列表项目 </td> <td> 每一标记标示一项列表项目 </td> </tr> <tr> <td> <MENU> </td> <td> ● </td> <td> 选单列表 </td> <td> 列表项目将以圆点排列，如<UL> </td> <td> 不建议使用 </td> </tr> <tr> <td> <DIR> </td> <td> ● </td> <td> 目录列表 </td> <td> 列表项目将以圆点排列，如<UL> </td> <td> 不建议使用 </td> </tr> <tr> <td> <DL> </td> <td> ● </td> <td> 定义列表 </td> <td> 列表分两层出现 </td> </tr> <tr> <td> <DT> </td> <td> ○ </td> <td> 定义条目 </td> <td> 标示该项定义的标题 </td> </tr> <tr> <td> <DD> </td> <td> ○ </td> <td> 定义内容 </td> <td> 标示定义内容 </td> </tr> <tr> <td colspan="5"> 表格标记 </td> </tr> <tr> <td> <TABLE> </td> <td> ● </td> <td> 表格标记 </td> <td> 设定该表格的各项参数 </td> </tr> <tr> <td> <CAPTION> </td> <td> ● </td> <td> 表格标题 </td> <td> 做成一打通列以填入表格标题 </td> </tr> <tr> <td> <TR> </td> <td> ● </td> <td> 表格列 </td> <td> 设定该表格的列 </td> </tr> <tr> <td> <TD> </td> <td> ● </td> <td> 表格栏 </td> <td> 设定该表格的栏 </td> </tr> <tr> <td> <TH> </td> <td> ● </td> <td> 表格标头 </td> <td> 相等于<TD>，但其内之字体会变粗 </td> </tr> <tr> <td colspan="5"> 表单标记 </td> </tr> <tr> <td> <FORM> </td> <td> ● </td> <td> 表单标记 </td> <td> 决定单一表单的运作模式 </td> </tr> <tr> <td> <TEXTAREA> </td> <td> ● </td> <td> 文字区域 </td> <td> 提供文字区域以输入更多文字 </td> </tr> <tr> <td> <INPUT> </td> <td> ○ </td> <td> 输入标记 </td> <td> 决定输入形式 </td> </tr> <tr> <td> <SELECT> </td> <td> ● </td> <td> 选择标记 </td> <td> 建立下拉列表 </td> </tr> <tr></tr> <tr> <td> <OPTION> </td> <td> ○ </td> <td> 选项 </td> <td> 每一标记标示一个选项（下拉列表时使用） </td> </tr> <tr> <td colspan="5"> 图形标记 </td> </tr> <tr> <td> <IMG> </td> <td> ○ </td> <td> 图形标记 </td> <td> 用以插入图形及设定图形属性 </td> </tr> <tr> <td colspan="5"> 连结标记 </td> </tr> <tr> <td> <A> </td> <td> ● </td> <td> 链接标记 </td> <td> 加入链接 </td> </tr> <tr> <td> <BASE> </td> <td> ○ </td> <td> 基准标记 </td> <td> 可将相对URL转绝对及指定链接目标 </td> </tr> <tr> <td colspan="5"> 框架标记 </td> </tr> <tr> <td> <FRAMESET> </td> <td> ● </td> <td> 框架设定 </td> <td> 设定框架 </td> </tr> <tr> <td> <FRAME> </td> <td> ○ </td> <td> 框窗设定 </td> <td> 设定框窗 </td> </tr> <tr> <td> <IFRAME> </td> <td> ○ </td> <td> 页内框架 </td> <td> 于网页中间插入动态框架 </td> <td> IE </td> </tr> <tr> <td> <NOFRAMES> </td> <td> ● </td> <td> 不支援框架 </td> <td> 设定当浏览器不支援框架时的提示 </td> </tr> <tr> <td colspan="5"> 影像地图 </td> </tr> <tr> <td> <MAP> </td> <td> ● </td> <td> 影像地图名称 </td> <td> 设定影像地图名称 </td> </tr> <tr> <td> <AREA> </td> <td> ○ </td> <td> 连结区域 </td> <td> 设定各连结区域 </td> </tr> <tr> <td colspan="5"> 多媒体 </td> </tr> <tr> <td> <BGSOUND> </td> <td> ○ </td> <td> 背景声音 </td> <td> 于背景播放声音或音乐 </td> <td> IE </td> </tr> <tr> <td> <EMBED> </td> <td> ○ </td> <td> 多媒体 </td> <td> 加入声音、音乐或影像 </td> </tr> <tr> <td colspan="5"> 其他标记 </td> </tr> <tr> <td> <MARQUEE> </td> <td> ● </td> <td> 滚动文字 </td> <td> 令文字左右走动 </td> <td> IE </td> </tr> <tr> <td> <BLINK> </td> <td> ● </td> <td> 闪烁文字 </td> <td> 闪烁文字 </td> <td> NC </td> </tr> <tr> <td> <ISINDEX> </td> <td> ○ </td> <td> 页内寻找器 </td> <td> 可输入关键字寻找于该一页 </td> <td> 不建议使用 </td> </tr> <tr> <td> <META> </td> <td> ○ </td> <td> 开头定义 </td> <td> 让浏览器知道这是HTML文件 </td> </tr> <tr> <td> <LINK> </td> <td> ○ </td> <td> 关系定义 </td> <td> 定义该文件与其他 URL 的关系 </td> </tr> <tr> <td colspan="5"> StyleSheet </td> </tr> <tr> <td> <STYLE> </td> <td> ● </td> <td> 样式表 </td> <td> 控制网页版面 </td> </tr> <tr> <td> </td> <td> ● </td> <td> 自订标记 </td> <td> 独立使用或与样式表同用 </td> </tr> <tr> <td colspan="5"> 注： ► ● 表示该标记属成对标记，即需要关闭标记如 </标记> 。 ► ○ 表示该标记属空标记，即不需要关闭标记。 ► IE 表示该标记只适用于 Internet Explorer。 ► NC 表示该标记只适用于 Netscape Communicator。 </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> HTML语言剖析 文件标记-目录 <HTML> ； <HEAD> ； <TITLE> ； <BODY>；<meta>；<base>；<link>；-文件头部标签 n HTML 基本架构： 1. 以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构： <HTML> <HEAD> <title>HTML超文本标记语言在线教程

网页的内容，很多标记都作用于此

2. 特点解说：

► 整个文件处于标记与之间。用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。

► 文件分两部分，由至称为开头，至称主体（或者称之为正文）。
基本上两者各有适用的标记，如只可出现于开头部分。 ► 开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。 ► <TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。 上述标记中只有<BODY>具有参数设定。 3. <META>标签相关属性 ► 文档标题标签：<title>HTML超文本标记语言在线教程

►

► 作者：

► 关键字：

► 描述信息：

► 刷新：

► 跳转：

► 文档过期：

► 基础地址：为当前文档提供了完整的URL

► 链接文件：
　　　　　
　　　　　定义在当前文档和其它文档之间的关系

属性描述：

href

提供被链接的文档的Internet地址。

rel

提供向前链接的类型。

rev

指明反向链接。

title

提供一个建议的标题。

type

指明连接的style sheet媒体类型。

► 页面过渡效果：

n 之参数设定：

※ 例:

► text ="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=" black " 。各种颜色的值及名称可参考【调色原理】一节。

► link ="#0000FF"
设定一般文字链接颜色。（默认为蓝色）

► alink ="#FF0000"
设定鼠标刚按下时文字颜色。

► vlink ="#0000FF"
设定链接访问后的颜色。（被点击过）。

► background ="bg1.gif"
设定背景图片。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。

► bgcolor ="#FFFFFF"
设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。

► leftmargin =2
设置网页的左边距，单位为像素。『只适用于IE』

► topmargin =2
设置网页的上边距。『只适用于IE』

► bgproperties ="fixed"
固定背景图片，当滚动条拖动时背景图片不会跟着滚动。『只适用于IE』

注：标记及参数之字母大小都可以。

HTML语言剖析

字体标记-目录




 ^{_{n 实体标记与逻辑标记：实体标记与逻辑标记的区别： 1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。例如逻辑标记的 由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。 2. 多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用。 ► 实体标记有： ► 逻辑标记有： 注：若要求真确的效果当然以实体标记为佳。 n ：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。 n ：这些标记于 Internet Explorer 都产生斜体效果，而只有于 Netscape Netvigator 失去作用。这些标记中只有较为特别，因为它自身具备换行效果所以不需要在它前面加上标记。 n ► 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。 ► 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。 ► 加上删除线的标记。 ► 令字体加大。 ► 令字体变细。 ► _{为下标字， ^{则为上标字，仅剩的数学标记}} n ：这些是标题标记，由至变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。 n ： ► 可以用于文件的开头部分，即 与 之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。是应用于文件的内文部分，即 与 之间的位置，只影响所标示的字句，是一个围堵标记。 ► 两标记可同时存在，唯没被 所标示的字句才直接受 所影响，而 本身亦受 的影响。的参数设定： ※例：我把青春献给你 ► face ="Arial" 设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记所指明的任何中文字形。 ► size ="+2" 设定文字的大小。其值可以是绝对或相对，绝对的意思便是标记自己决定文字的大小，不受 的影响，如 size=" 5 " 表示其大小便是 5 ，而html内定值为 3，即 size=" 3 "和没有设定是一样的。相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size=" +2 " 便等同绝对表示法的 size=" 5 "，但若已设定 则其实际大小便是 n+2 不再是 3+2 了。只有绝对表示法。 ► color ="#008000" 设定文字的颜色。 #008000 表示绿色 HTML语言剖析段落标记-目录；；；； ； ； ； ； n ： ► 为文中不同部份加上说明，方便日后修改。 ※例： ► 用作版权声明。假如你不希望别人使用或复制你的网页，可加上警告字眼。 ※例： n ：称为段落标记。作用：在文字、图、表格之间增加一空白行。原来是一成对标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要作结尾。的常用参数：如：align ="center"> ► align ="center" 可选值：right, left, center。内定值： align=" left " n ：称为换行标记。作用：使文字、图、表格等显示于下一行。由于浏览器会自动忽略原始码中空白和换行的部分，这令到成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。 ※ 例：错误示范：（邮局不会接受一行过的地址）源代码 9686# No.55 feixi road hefei anhui The People's Republic of China 结果 9686# No.55 feixi road hefei anhui The People's Republic of China 正确例子：源代码 9686# No.55 feixi road hefei anhui The People's Republic of China 结果 9686# No.55 feixi road hefei anhui The People's Republic of China n ：称为水平线。作用：插入一条水平线。之参数修改：以： 为例。 ► align ="LEFT" 设定线条置放位置，可选择：left；right；center 三种设定值。 ► size ="2" 设定线条高度，以像素作单位，默认为 2。 ► width ="70%" 设定线条长度，可以是绝对值（以像素作单位）或相对值，默认为 100%。 ► color ="#0000FF" 『只适用于IE』设定线条颜色，默认为黑色（#000000）。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text="blue"。双引号可以省略 ► noshade 设定线条为平面显示，若删去则具阴影或立体，这是默认值。即默认水平线是具备阴影效果，如加上noshade，则水平线实现为一个二维的黑线，不具备三维效果。 n ：称为居中标记。作用：使文字、图片、表格等显示于中间。这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align ="CENTER" 的参数，似乎多余了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align="CENTER"参数的标记亦要不厌其烦地加上居中标记，因有许多浏览器不支持标记中的align="CENTER"参数。 ※例：滚滚长江东逝水这几天心里颇不宁静这几天心里颇不宁静 n ：称为预设格式标记。作用：令文字按照原始的排列方式显示。这标记允许保留你于原始码中输入的空白。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。 n ：称为区域标记。作用：设定文字、图片、表格等的摆放位置。应用于Style Sheet（样式表）方面功能会更显得强大，它最终目的是给设计者另一种组织能力，有Class; Style; title ; ID等属性，在CSS部分详细讲解，这处只介绍一个属性设定。 ※以 为例： ► align ="center" 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。的作用和居中标记一样，前者是由 HTML3.0 开始的标准，后者是通用己久的标示法。 n ：称为不折行标记。作用：某些文字因太长而分开，以显示于同一行或下一行。它对网址、数学公式、一行数字、程序代码等尤为有用。 n ：称为建议折行标记。作用：预设折行部位。它没有抵触到的格式规范，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。 HTML语言剖析列表标记-目录 n : 称为有序列表标记。则用以标示列表项目。所谓有序列表就是在每一项前面加上 1,2,3... 等数目，又称编号列表。 1. 的参数设定（常用）： ※例： ► type="i" 设定数目样式，其值有五种，请参考右表，内定为 type="1"。 ► start="4" 设定开始数目，不论设定了哪一数目样式，其值只能是 1,2,3..等整数，默认为 start="1"。 2. 的参数设定（常用）： ※例： ► type ="square" 只适用于非顺序列表，设定符号款式，其值有三种，如下，内定为 type=" disc "：符号是当 type=" disc " 时的列项符号。符号是当 type=" circle " 时的列项符号。符号是当 type=" square " 时的列项符号。 ► value ="3" 只适用于顺序列表，设定该一项的数目，其后各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。 n ：称为无序列表标记。所谓无序列表就是在每一项前面加上、、等符号，故又称符号列表。的参数设定（常用）： ※例： ► type ="square" 设定符号款式，其值有三种，如下，内定为 type="disc"：符号是当 type="disc" 时的列项符号。符号是当 type="circle" 时的列项符号。符号是当 type="square" 时的列项符号。注意：由于及 都有 type 这个参数，两者尽可能选用其一。 n : 称为定义列表标记。 用以标示定义条目，则用以标示定义内容。所谓定义列表就是一种分二层的项目列表，其不顾符号及数目。三个标记都没有常用的参数。而可以独立使用，只是一些旧的浏览器并不支援，如 IE 3.0。常用的如标记可用以制造段落第一个字前面的空白。 ※例：古典文学《三国演义》《水浒传》 HTML语言剖析表格标记-目录 n ：这三个标记是定义表格的最重要的标记，是一个定义一个表格标记，用以声明这是表格而且其他表格标记只能在他的范围内才适用，属于表格标记的还有其它。用以表示表格列（row）用以表示表格单元格（cell） 3. 的参数设定（常用）： ※ 例： ► width="400" 表格宽度，接受绝对值（如 80）及相对值（如 80%）。 ► border="1" 表格边框宽度，不同浏览器有不同的设置值，使用时请指出。 ► cellspacing="2" 表格格线宽度， ► cellpadding="2" 文字与单元格距离（填充）， ► align="CENTER" 表格的摆放位置（水平），可选值为：left ,right ,center ， ► valign="TOP". 表格内文字图片等的摆放位置（垂直），可选值为：top,middle,bottom。 ► background="myweb.gif" 表格背景图片，与bgcolor不能同时使用。 ► bgcolor="#0000FF" 表格背景颜色，与background不能同时使用 ► bordercolor="#FF00FF" 表格边框颜色，NC与IE有不同的效果 ► bordercolorlight="#00FF00" 表格亮（外）边框部分的颜色。『只适用于 IE』 ► bordercolordark ="#00FFFF" 表格暗（内）边框部分的颜色，使用bordercolorlight 或 bordercolordark 时注注意：bordercolor 将会失效。『只适用于 IE』 ► cols="2" 表格跨行数目，让浏览器在下载表格前先画出整个表格 ► frame 边框 ► 表格的边框有 4 个：左边框、右边框、上边框、下边框。这四个边框都可以设置为显示或者隐藏。设置表格边框显示状态的基本语法如下：显示整个表格边框 不显示表格边框 只显示表格的上下边框 只显示表格的左右边框 只显示表格的上边框 只显示表格的下边框只显示表格的左边框只显示表格的右边框 ► 表格中分隔线的显示同样可以进行各种设置，设置表格中分隔线的显示状态的基本语法如下：显示所有分隔线 只显示组与组的分隔线 只显示行与行的分隔线 只显示列与列的分隔线 所有分隔线都不显示 4. 的参数设定（常用）： ※ 例： ► align="RIGHT" 该一列内文字图片等的摆放位置（水平），可选值为： left , center , right 。 ► valign="MIDDLE" 该一列内文字图片等的摆放位置（垂直），可选值为： top , middle , bottom 。 ► bgcolor="#0000FF" 该一列背景颜色， ► bordercolor ="#FF00FF" 该一列边框颜色『只适用于 IE』 ► bordercolorlight ="#808080" 该一列边框亮（外）边框部分的颜色，『只适用于 IE』 ► bordercolordark ="#FF0000" 该一列边框暗（内）边框部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 5. ► align ="TOP" 该表格标题列相对于表格的摆放位置（水平），可选值为：left , center , right , top , middle , bottom ，若 align=" bottom " 的话标题列便会出现对表格的下方，不管你的原始码中把的参数设定（常用）： ※ 例： ► width ="48%" 该一单元格宽度，接受绝对值（如 80）及相对值（如 80%）。 ► height ="400" 该一单元格高度。 ► colspan ="5" 该一单元格向右打通的栏数。 ► rowspan ="4" 该一单元格向下打通的列数。 ► align ="RIGHT" 该一单元格内字画等的摆放位置（水平），可选值为： left , center , right 。 ► valign ="BOTTOM" 该一单元格内字画等的摆放位置（垂直），可选值为： top , middle , bottom 。 ► bgcolor ="#FF00FF" 该一单元格底色， ► bordercolor ="#808080" 该一单元格边框颜色，『只适用于 IE』 ► bordercolorlight ="#FF0000" 该一单元格边框亮（外）边框部分的颜色『只适用于 IE』 ► bordercolordark ="#00FF00" 该一单元格边框暗（内）边框部分的颜色使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 ► background="myweb.gif" 该一单元格背景图片，与 bgcolor 任用其一。 n ：与同样是标示一个单元格，不同的是所标示的单元格中的文字是加粗且居中。通常用于表格第一列以标示栏目。用法是取代的位置便可以，其参数设定请参考。当然若为所标示的单元格中的文字加上粗体标记便等如的效果。 n ：的作用是为表格标示一个标题列，就像是在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。的参数设定（常用）： ※ 例：放在 中的头部或尾部。 ► valign ="TOP" 该表格标题列相对于表格的摆放位置（上下），可选值为：top , bottom。和 align ="TOP"或align ="BOTTOM" 相同。只有标题列置于下方及向右或向左贴，此参数值就可发挥作用。当只用一个参数时，首选 align，valign 是由 HTML3.0 才开始的参数。 HTML语言剖析链接标记-目录 n : 称链接标记，由 与 所围的文字、图片等等可以成为一个链接。的一般参数设定: 6. 页面链接 ※ 例： ► href="index.html" 这参数不能与name 同时使用，使用这参数才能生成可点击的链接。 o 当作为一外部链接时： href所设定的是该链接所要连到的文件名称，若该文件与此html 档不是同在一目录请加上适当的路径，相对绝对皆可。 o 当作为一内部链接时： href所设定的是该链接所要连到的同文件内锚点或指定文件之锚点，且不要其他标签只加上结束标示便可以，例如 、 及其中there便是锚点，并与其前加上符号#以作识别，参考点由下一个参数name。 ► name="hello" 这参数是为文件设置锚点，作为被链接，不会被显示。所以说构成一个内部链接要使用两次链接标记。一次使用参数 name 先在文件中插入一个锚点，另一个使用参数 href链接到这个锚点。 ► target="_top" 设定链接被点击的结果所要显示的窗口。可选值为： _blank , _parent , _self , _top , 打开方式名称。 o target=" 打开方式名称" 这只运用与框架中，若被设定则链接结果将显示与该“打开方式名称”之框架中，框架名称是事先由框架标记所命名。 o target="_blank" 或 target="new" 将链接的窗口内容，开在新的浏览器中打开。 o target="_parent" 将链接的画面内容，当成文件的上一个画面。 o target="_self" 将链接的画面内容，显示在目前的视窗中。(默认值) o target="_top" 将框架中链接的画面内容，显示在没有框架的窗口中。（即除去了框架) 7. 文件链接 8. 锚点链接先在页面上插入一个锚点，然后在页面上设一个链接（href=＂路径#锚点名＂）到这个锚点上。大致格式：; 9. 空链接 10. 脚本链接 javascript:self.print() javascript:self.close() 11. 电子邮件链接： n ：是一个链接基准标记，用以改变文件中所有链接标记的参数内定值。它只能应用与文件的开头部分，即标记 与 之间。的一般参数设定： ※ 例： ► href="http://www.microsoft.com/" 设定该页网页中所有 HTTP文件及图形（包括相对路径链接及图形标记等）的默认路径，其他如 ftp:// 及 gopher:// 等则不受影响。这个参数只可填入一个相对或绝对的路径，不必填入文件名称。一般相对路径链接及 图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有链接将会以 http://www.microsoft.com/ 作为起点，若其中有链接如 Back to Main Page ，那末它不会连到自已目录下的 index.html，它将会连到 Microsoft 的首页，这是因为相对路径己给 转成绝对的了。 ► target ="_top" 设定该页网页中所有链接被点击之结果所要显示的视窗，免得分别为所有链接加上 target 参数，常应用于框架中。其设定与 链接标记中 target 参数相同。 HTML语言剖析表单标记-目录表单的用处很多，在网上无处不见，当然是配合ASP，JSP，ASP 使用为佳，所以使用或学习动态网页的话，表单设计是必需的，表单的标记不多，但其参数变化很多。一份表单的基本架构是：在标记的包围下加上一种或多个的表单输入方式及一个或多个的按键。表单有三个基本组成部分： ► 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 ► 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 ► 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 INPUT 的种类： Text , Radio , Checkbox , Password , Submit/Reset , Image , File , Hidden , Button 。 n <FORM> <INPUT> ： <form>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。 <form>的参数设定（常用）： ※ 例：<form action ="http://localhost/example.asp" method ="POST"> ► action ="http://localhost/example.asp" 表单通常是与动态网页设计语言配合使用的，参数action 便是用以指明该动态语言页面的位置，这样此表单所填的资料才能正确传给动态页面或者数据库作处理。可设定此参数为 ACTION="mailto: your@email.com " 那样该表单所填的资料将会寄至此电邮地址（红色部分）。 ► method ="POST" 传送资料给数据库或者动态网页的的方式，可选值为 POST , GET 。请注意POST允许传送大量资料，但GET则只接受低于1K的资料，所以你若看过别人的表单原代码的话，你会发现申请表单用的是POST而搜索用的是GET。 <INPUT> 的参数设定（常用）： 由于其第一个参数type己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 ► type ="Text" 可选值为 Text , Radio , Checkbox , Password , Submit/Reset , Image , File , Hidden , Button 。 12. Text （单行文本字段） ※ 例：<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255" disabled> ► type="Text" 输入方式为 Text，能产生一单行文本字段，上限为255字符。 ► name="age" 此一单行文本字段名称，这是最重要的一个，方便动态网页辨认由表单传来的资料，可随便命名，但通常动态页面及数据库中都有指定名称，若转用其它名称便需要修改该动态页面和数据库字段了，名称可为空白或者特别符号的英文或数字，有大小写的分别，可以写成 Your_Age，若有访客于此表单此一文本字段填入40的话，那传给动态页面的值字串便是Your_Age=40。 ► value="20" 此一单行文本字段默认值。若不填写则文本字段是空白的，等待访客亲自键入，若value="20"的话，20便会出现在文本字段中，当然访客可以修改之。 ► align="MIDDLE" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大用处。 ► size="2" 此一单行文本字段显示的长度，若采用 Big5 编码的中文网页便要小心，同size的文本字段NC会显示得比IE冗长。 ► maxlength="255" 此一单行文本字段可输入字符的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或QQ号码可设为 9，年龄为2等。 ► disabled：不发生作用 13. Radio （单选） ※ 例:<input type="Radio" name="gender" value="female" align="MIDDLE" checked > ► type="Radio" 输入方式为 Radio，能产生一单选按钮，以供点选。 ► name="gender" 此一Radio名称，参考Text部分的说明。 ► value="female" 默认值。每一个radio 必须及仅有一个value，通常有同时采用两个或以上同name 不同 value 的Radio 输入方式，可让使用使任选其一。 ► align="middle" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 ► checked 设该Radio 为默认被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这参数。 14. Checkbox （复选按钮） ※ 例：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked> ► type="Checkbox" 输入方式为 Checkbox，能产生一复选按钮，以供复选。 ► name="idol" 此一 Checkbox 名称，参考Text部分的说明。 ► value="Leon" 默认值。每一个Checkbox 有切只有一个 value，当被选择时这值便会传给动态页面，例如所传字串 idol=Leon 。 ► align="RIGHT" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 ► checked 设该Checkbox 为默认被选。每个Checkbox都是独立的，所以每一个都可使用这参数，不像Radio。 15. Password （密码框） ※ 例：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"> ► Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。 两者作用不同，Password 所输入的字元全以 * 号表示。 16. Submit （提交）及 Reset （重写） 这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。 ※ 例：<input type ="Submit" name ="other_funtion" value ="确定" align ="MIDDLE"> <input type ="Reset" value ="清除" align ="MIDDLE"> ► type ="Submit" 设定输入方式为 Submit 或 Reset。 ► name ="other_funtion" Submit 的功能随 name 的不同而不同，须和动态语言配合。若只需要普通的提交键，则是其默认，不必用此参数。 ► value ="确定" 这个值不是输给动态语言的，而是显示在按键上，可以不用，传送键的内定值为Submit Query ，重写键的默认值为 Reset 。 ► align ="MIDDLE" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 17. Image （图片按键） 通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便允许采用自已制作的按键。 ※ 例：<input type ="Image" name ="submit" align ="bottom" src ="ex_icon.gif"> ► type ="Image" 输入方式为 Image。 ► name ="submit" 所要代表的按键，可以是 submit, reset, 或其它。 ► align ="bottom" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 ► src ="new017.gif" 按键图片来源，若此图片文件不与该html 文件在同一目录下，请加上相对或绝对路径。 18. File ※ 例：<input type ="File" name ="upload" align ="BOTTOM" size ="20" maxlength ="100" accept ="text/html"> ► input type ="File" 输入方式为 Image。通常用以传输文件。 ► name ="upload" 这文件传输的名称，用以识别之用。 ► align ="BOTTOM" 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 ► size ="20" 所显示文本字段的长度。 ► maxlength ="100" 可输入字符的上限。 ► accept ="text/html" 所接受的文件类别，有二十六种选择，但可不设定。 19. Hidden ※ 例：<input type ="Hidden" name ="ID" value ="6618"> ► type ="Hidden" 输入方式为隐藏或默认。它不会显示任何输入介面，而是一个默认值随表单一起传给ASP，列如由ASP产生的会员号码，或传入可更改的参数以调整ASP而避免修改ASP原代码。 ► name ="ID" 这文件传输的名称，用以识别之用。 ► value ="6618" 内定值，会以如 ID=6618 形式传给 ASP。 20. Button <input type ="Button" name ="useless" value ="Back"> ► type ="Button" 输入方式为一般按键。常配合 Java Script 作为其启动按键。 ► name ="useless" 这文件传输的名称，用处不大。 ► value ="Back" 按键显示名称。 n <SELECT> <OPTION> ： <SELECT>是列表选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标记使用都可以。 <SELECT> 的参数设定（常用）： ※ 例：<select name ="where" size ="6" multiple > ► name ="where" 这列表选择项的名称，作识别之用，将会传及 ASP。 ► size ="6" 这列表选择项的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效果。 ► multiple 令这列表选择项容许多重选择。 <OPTION> 的参数设定（常用）： ※ 例：<option value ="tw" selected > ► value ="tw" 这选项的值，将会传及 ASP。请自行修改，但不同选项必须有不同的值。 ► selected 设该选项为内定被选。一个单选列表选择项只能有一项或零可默认被选。 n <TEXTAREA> ： <TEXTAREA>是表单文字区块标记，常用于 bug report, feedback 等需要填写大量资料的用途。 <TEXTAREA> 的参数设定（常用）： ※ 例：<textarea name ="comments" cols ="40" rows ="4" wrap ="virtual"> ► name ="comments" 这文字区块的名称，作识别之用，将会传及 ASP。 ► cols ="40" 这文字区块的宽度，单位是单个字符宽度。 ► rows ="4" 这文字区块的列数，即其高度，单位是单个字符宽度。 ► wrap ="VIRTUAL" 设定其折行问题，可选值为： off , physical , virtual 。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 ASP（Web 服务器端）必须将实№文字中的换行一并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。 ★Css样式在表单中的应该： CSS层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等。 21. 字体样式的应用： 字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font) ► 文本框里的文字是加粗的，大小是9pt，字体是宋体，代码： ＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋体; font-size: 12px; font-weight: bold" value="加粗"＞ ► 口令框文字是红色的，代码： ＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞ ► 下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码： ＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞ ＜option value="2" selected＞yesky.com＜/option＞ ＜option value="1"＞redidea.net＜/option＞ ＜/select＞ ► 多行文本框了的字体是Verdana，有下划线，大小是9pt，代码： ＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞ 22. 背景颜色和图像样式的应用 背景颜色利用background-color属性，背景图像利用background-image属性 ► 文本框背景是黑色的，字体是白色的，代码： ＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞ ► 口令框背景是灰色的，代码： ＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞ ► 单选和复选按钮的背景是红色的，代码： ＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞ ＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞ ► 下拉选择框的选项是丰富多彩的背景，代码： ＜select name="select2" size="1"＞ ＜option selected style="background-color: #FF0000"＞yesky.com＜/option＞ ＜option style="background-color: #0000CC"＞redidea.com＜/option＞ ＜option style="background-color: #009900"＞chinabyte.com＜/option＞ ＜option style="background-color: #ff33cc"＞sina.com＜/option＞ ＜option style="background-color: #999999"＞sohu.com＜/option＞ ＜/select＞ ► 多行文本框的背景是一个图像，代码： ＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞ ► submit1按钮的背景是黄色的，代码： ＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞ ► submit2按钮的背景是一个图像，代码： ＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞ 23. 边框样式的应用 和边框有关的属性有： 边框式样border-style、上边框border-top、右边框border-right、下边框border-bottom、左边框border-left、边框颜色border-color、边框宽度 border-width、上边框宽度border-top-width、右边框宽度border-right-width、下边框宽度border-bottom-width、左边框宽度border-left-width、边框 border ► 文本框有8种类型边框样式，即border-style： none ：无边框，与任何指定的border-width值无关； dotted ：点线； dashed ：虚线； solid ：实线边框； double ：双线边框，两条单线与其间隔的和等于指定的border-width值； groove ：3D凹槽； ridge ：边框突起； inset ：3D凹边；outset ：3D凸边 边框宽度的设置有一个规律： border-width: [ thin | medium | thick | ＜长度＞ ]{1,4} 边框宽度用一到四个值来设置元素的边框宽度，它们分别被应用于上、右、下和左边框宽度。如果只给出一个值，它被应用于所有边框宽度。如果两个或三个值给出了，省略了的值与对边相等 例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞ 边框颜色的设置有一个规律： border-colr: ＜颜色＞{1,4} 边框颜色用一到四个值来设置元素的边框颜色。如果四个值都给出了，它们分别被应用于上、右、下和左边框颜色。如果只给出一个值，它被应用于所有边框颜色。如果两个或三个值给出了，省略了的值与对边相等。 ► 对于多行文本框以及按钮，设置边框的方法和文本框一样； ► 由于下拉选择框Select不支持边框的设置，所以对其设置无效； ► 单选按钮和复选按钮的边框，设置的效果不十分协调，所以建议不要对它们设置； ★ 表单的提交 表单是用来采集用户输入的数据，就应该保证用户的数据被准确地提交到预定的地点，也就是说，我们在表单提交的时候，应该对用户的数据进行检验，一来可以避免用户误输数据，二来可以避免用户输入非法的，或者说不合格的数据；检验合格以后，还要保证用户的数据提交到特定的程序。 1. 数据的检验 数据的检验，通常有两种程序：客户端检验和服务器端检验。客户端检验，比较快，服务器端检验，相对来说比较慢，为了确保安全，通常同时采用，这样就可以避免用户刻意破坏。不管采用什么方式，数据检验的原理都是一样的，一旦用户输入的数据不符合规定，就报错，要求用户重新输入，客户端检验常使用Javascrip脚本，服务器端的视系统而定。下面举个简单例子说明一下： ► 给表单添加了onSubmit事件，通过onSubmit="return CheckDate()"指定提交前，必须通过函数CheckDate()来检验，如果不合格，返回输入数据； ► 数据检验的函数如下： ＜script＞ function CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value; userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus(); return false; }else{ //如果没有输入Email，或者Email地址错误(不含@) if ((userEmail=="")||(userEmail.indexOf("@")==-1)) { alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return false; }else return true; } } ＜/script＞ 2. 表单的分支提交 有些情况，表单需要根据用户的选择，提交到不同的程序，需要通过脚本来检测用户的选择分支，从而向不同的程序提交表单，如下面的例子： ► 这里首先用到的是form的onSubmit="TwoSubmit(this)"然后根据选择的分支，来分别递交到不同的程序，TwoSubmit()函数如下： ► ＜script＞ function TwoSubmit(form){ if (form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{ form.action = "ind.asp";//这里是分之二 } form.submit(); } ＜/script＞ 3. 用任何元素提交表单 除了用按钮或者图片按钮提交表单，其实任何页面元素都可以提交表单，不过都是通过脚本来完成的。 例如用链接来代替Submit按钮： 通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素都可以实现提交表单了。 ★ 表单的常用技巧 下面这些常用的技巧，基本上都是和事件以及脚本联系在一起，注重功能，对脚本不加细述。常见的技巧有：下拉跳转菜单，表单内容的聚焦。 4. 下拉跳转菜单 例如：基于表单的下拉跳转菜单 ► 这里用到了一个函数，用于向选择的地址跳转， ＜script language="JavaScript"＞ function FormMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } ＜/script＞ ► 然后，给下拉选择框赋予一个事件onChange="FormMenu('parent',this,0)"，就可以了。 5. 表单内容的聚焦 常用的是：点击之后默认值自动消失onFocus="this.value=''"，自动选择的是onMouseOver="this.select()" 6. 去掉表格和表单间的空隙 把＜form＞标签放到＜tr＞和＜td＞中间，对应的＜/form＞放在＜/td＞和＜/tr＞中间！ 示例代码： ＜table width="100%" border="1" cellspacing="1" cellpadding="1"＞ ＜tr＞ ＜form name="form3" method="post" action=""＞ ＜td＞＜input type="text" name="textfield2"＞＜br＞ ＜input type="submit" name="Submit22" value="Submit"＞ 这里没有空隙＜/td＞ ＜/form＞ ＜/tr＞ ＜/table＞ 7. 用Email提交表单(只适合Outlook用户，不适合Foxmail用户) 格式如下： ＜form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表单反馈" enctype="text/plain" method="post"＞...＜/form＞ 这里的mailto:后面加上要接受信息的地址，?Subject是设置默认的Email标题，enctype="text/plain"是必要的，表示信息以文本方式提交，没有任何加密，所以这种方法常用于没有Asp/Php/cgi支持的空间，也只是一个代用的方法，用户必须安装Outlook，并且是默认的邮件程序，才能顺利执行提交，据说TheBat!也可以。 HTML语言剖析 图形标记-目录 <img> n <img> <IMG> 称图形标记，主要用以插入图片于网页中，另外IMG标签还可以配合如配合影片文件等的播放及影像地图（Image Map 或称一图多连结）请看【影像地图】及【其他标记】。 <IMG> 的一般参数设定： ※ 例：<img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif"> ► src ="logo.gif" 图片来源，接受 .gif, .jpg 及 .png 格式，若图片文件与该html文件同处一目录则只写上文件名，否则必须加上正确的路径，相对或者是绝对路径都可以。 ► width="100"　height="100" 设定图片大小，此宽度、及高度一般采用pixels（像素）作单位。通常只设为图片的真实大小以免失真，若要改变图片大小最好事先使用图像编辑工具。如photoshop ► hspace="5" vspace="5" 设定图片四周空白，以免文字或其它图片过于贴近。hspace是设定图片左右的空间，vspace则是设定图片上下的空间，高度采用pixels （像素）作单位。 ► border="2" 图片边框粗细。 ► align="top" 调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top, middle, bottom, left, right，默认为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom， texttop 表示图片和文字依顶线对， baseline 表示图片对到目前文字行底线值， absmiddle 表示图片对到目前文字行绝对中央， absbottom 表示图片对到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。 ► alt="这里是一张图片" 这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字也会显示。 ► lowsrc="pre_logo.gif" 设定先显示低质量图片，若所加入的是一张很大的图片，下载时很长，这张低质量图片会先被显示以免浏览者失去兴趣，通常是原图片的灰度模式版本。 n 热区: ※ 例： <map name="Map"> <area shape="circle" coords="17,19,10" href="#" target="_blank" alt="这是圆形热区！"> <area shape="rect" coords="54,40,146,105" href="#" target="_blank" alt="这是矩形热区！"> <area shape="poly" coords="159,141,227,162,204,114" href="#" target="_blank" alt="这是多边形热区！"> </map> HTML语言剖析 框架标记-目录 <FRAMESET> <FRAME> <NOFRAMES> <IFRAME> n 框架概念： 所谓框架便是网页画面分成几个框窗，同时取得多个URL。只要 <FRAMESET> <FRAME> 即可，而所有框架标记要放在一个总起的html里，这个html只记录了该框架是如何划分，不会显示任何资料，所以不必放入<BODY> 标记，浏览这框架必须读取这html而不是其它框窗的档案。<FRAMESET> 是用以划分框窗，每一框窗由一个 <FRAME> 标记所标示，<FRAME>必须在 <FRAMESET> 范围中使用。 ※ 例： <frameset cols="50%,*"> <frame name="hello" src="up2u.html"> <frame name="hi" src="me2.html"> </frameset> 此例中<FRAMESET> 把画面分成左右两相等部分，左便是显示up2u.html，右边则会显示me2.html 这档案，<FRAME> 标记所标示的框窗永远是按由上而下、由左至右的次序。 n <FRAMESET> <FRAME> ： <FRAMESET> 称框架标记，用以宣告HTML文件为框架模式，并设定视窗如何分割。 <FRAME> 则只是设定某一个框窗内的参数属性。 <FRAMESET> 参数设定： <frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> ► COLS=" 90,* " 垂直切割画面(如分左右两个画面)，接受整数值、百分数，*则代表占用馀下空间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗後剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。 ► ROWS=" 120,* " 就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中，因 Netacape 偶然不能显示这类形的框架，尽采用多重分割。 ► frameborder=" 0 " 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ） ► border=" 0 " 设定框架的边框厚度，以 pixels 为单位。 ► bordercolor=" #008000 " 设定框架的边框颜色。 ► framespacing=" 5 " 表示框架与框架间的保留空白的距离。 <FRAME> 参数设定： ※ 例： <frame name ="top" src ="a.html" marginwidth ="5" marginheight ="5" scrolling ="Auto" frameborder ="0" noresize framespacing ="6" bordercolor ="#0000FF"> ► SRC=" a.html " 设定此框窗中要显示的网页档案名称，每个框窗一定要对应著一个网页档案。你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。 ► NAME=" top " 设定这个框窗的名称，这样才能指定框架来作连接，必不可少，可以任意命名。 ► frameborder= 0 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避免使用 yes 或 no ） ► framespacing=" 6 " 表示框架与框架间的保留空白的距离。 ► bordercolor=" #008000 " 设定框架的边框颜色。颜色值请参考【HTML 剖析】。 ► scrolling=" Auto " 设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。 ► noresize 设定不让使用者可以改变这个框框的大小，如果没有设定此参数，使用者可以很随意地拉动框架，改变其大小。 ► marginhight= 5 表示框架高度部份边缘所保留的空间。 ► marginwidth= 5 表示框架宽度部份边缘所保留的空间。 n <NOFRAMES> ： 当别人使用的浏览器版本太低，不支援框架这个功能时，他看到的将会是一片空白。为了避免这种情况，可使用 <NOFRAMES> 这个标记，当使用者的浏览器看不到框架时，他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的内容，而不是一片空白。这些内容可以是提醒浏览转用新的浏览器的字句，甚至是一个没有框架的网页或能自动切换至没有框架的版本亦可。 应用方法： 在<frameset> 标记范围加入 </NOFRAMES> 标记，以下是一个例子： <frameset rows="80,*"> <noframes> <body> 有时候，使用的浏览器不支持框架功能，请转用新的浏览器。 </body> </noframes><frame name="top" src="a.html"> <frame name="bottom" src="b.html"> </frameset> 若浏览器支持框架，那它不会理会 <noframes> 中的东西，但若浏览器不支持框架，由於不认识所有框架标记，不明的标记会被略过，标记包围的东西便被解读出来，所以放在<noframes>范围内的文字会被显示。 n <IFRAME> ： 这标记只适用于IE。它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是一个围堵标记，但围堵的字句只有在浏览器不支持 iframe 标记时才会显示，就像<noframes> 一样，可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的JavaScript 会较好，若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。 <iframe> 的参数设定如下： ※ 例： <iframe src ="iframe.html" name ="test" align ="MIDDLE" width ="300" height ="100" marginwidth ="1" marginheight ="1" frameborder ="1" scrolling="Yes"> ► src="iframe.html" 欲显示於此框窗的文件来源处档案名称，必要加上相对或绝对路径。 ► name ="test" 此框窗名称，这是连结标记的 target 参数所要的， ► align ="MIDDLE" 可选值为 left, right, top, middle, bottom，作用不大 ► width ="300" height ="100" 框窗的宽及长，以 pixels 为单位。 ► marginwidth ="1" marginheight ="1" 该插入的文件与框边所保留的空间。 ► frameborder ="1" 使用 1 表示显示边框， 0 则不显示。（可以是 yes 或 no） ► scrolling ="Yes" 使用 Yes 表示容许卷动（内定）， No 则不容许卷动。 HTML语言剖析 多媒体标记-目录 <BGSOUND> <EMBED> n <BGSOUND>： <BGSOUND> 是用以插入背景音乐，但只适用於 IE，其参数设定不多。如下所示： <BGSOUND src ="your.mid" autostart =true loop =infinite> ► src ="your.mid" 设定 midi 档案及路径，可以是相对或绝对路径。 ► autostart =true 是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。 ► loop =infinite 是否自动反覆播放。LOOP=2 表示重复两次，Infinite 表示重复多次。 n <img>： <img>--嵌入视频文件（.avi）标签： <img src=... dynsrc=... start="fileopen|mouseover" loop=...> n <MARQUEE>： <MARQUEE> 只适用於 IE ，译为「跑马灯」如 Status Bar 的那种，意指走动或卷动的文字，其参数设定较多。我先举些例子，然後再列出各参数。使用 <marquee> 标签可以简便地实现文字的移动，以达到动感十足的视觉效果。 <marquee> 是一个成对标签，它有 direction 、 behavior 、 loop 、 scrollamount 、 scrolldelay 、 align 、 bgcolor 、 height 、 width 、 hspace 和 vspace 等属性。其语法如下： <marquee direction= 参数值 behavior= 参数值 loop= 循环次数 scrollamount=数值 scrolldelay= 数值、 align= 参数值、bgcolor="#" height=数值 width=数值 hspace=数值 vspace=数值> 要滚动的文字</maruqee> ► <marquee behavior ="SCROLL" direction ="LEFT" bgcolor ="#0000FF" height ="30" width ="150" hspace ="0" vspace ="0" loop ="INFINITE" scrollamount ="30" scrolldelay ="500">behavior ="SCROLL"> 决定文字的卷动方式，可选值为： SCROLL 一般卷动，是内定值。 SLIDE 如幻灯片，一格格的，效果是文字一接触左边便全部消失。 ALTERNATE 文字向左右两边撞来撞去。 ► direction ="LEFT" 设定文字的卷动方向， LEFT 表示向左，是内定值， RIGHT 表示向右。 ► bgcolor ="#0000FF" 设定文字卷动范围的背景颜色。 ► height ="30" width ="150" >设定文字卷动范围，可采用相对或绝对，如 30% 或 30 等，单位为像素。 ► hspace ="0" vspace ="0" 设定文字的水平及垂直空白位置。 ► loop ="INFINITE" 设定文字卷动次数，其值可以是正整数或 INFINITE，INFINITE 是内定值，表示无限次。 ► scrollamount ="30" 每「格」文字之间的间隔，单位是像素。 ► scrolldelay ="500" 文字卷动的停顿时间，单位是毫秒。 ► Hello</marquee> n <object><param>--控件对象/参数标签：Flash　　RealMedia　　Java Applet ► <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="594" height="394"> <param name="movie" value="swf/enigma.swf"> <param name="quality" value="high"> <embed src="swf/enigma.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="594" height="394"></embed> </object> ► <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="300" height="240"> <param name="SRC" value="video/videotest.rm"> <param name="CONTROLS" value="ImageWindow"> <param name="CONSOLE" value="cons"> <param name="autostart" value="true"> <embed src="video/videotest.rm" width="300" height="240" autostart="true" controls="ImageWindow" console="cons" type="audio/x-pn-realaudio-plugin"></embed> </object> ► <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="300" height="32"> <param name="SRC" value="video/videotest.rm"> <param name="CONTROLS" value="ControlPanel|PlayOnlyButton|PauseButton|StopButton"> <param name="CONSOLE" value="cons"> <embed src="video/videotest.rm" width="300" height="32" controls="ControlPanel" console="cons"></embed> </object> n <EMBED>： <EMBED> 是用以插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及新版的 IE 都支援。其参数设定较多。 如下： <EMBED src ="your.mid" autostart ="true" loop ="true" hidden ="true"> ► src ="your.mid" 设定 midi 档案及路径，可以是相对或绝对路径。 ► autostart =true 是否在音乐档传完之後，就自动播放音乐。true 是，false 否 (内定值)。 ► loop ="true" 是否自动反覆播放。LOOP=2 表示重复两次，true 是， false 否。 ► HIDDEN ="true" 是否完全隐藏控制画面，true 为是，no 为否 (内定)。 ► STARTTIME ="分:秒" 设定歌曲开始播放的时间。如 STARTTIME="00:30" 表示从第30秒处开始播放。 ► VOLUME ="0-100" 设定量的大小，数值是0到100之间。内定则为使用者系统本身之设定。 ► WIDTH ="整数" 和 HIGH ="整数" 设定控制画面的宽度和高度。(若 HIDDEN="no") ► ALIGN ="center" 设定控制画面和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、 left、right、texttop、middle、absmiddle、absbottom。 ► CONTROLS ="smallconsole" 设定控制画面的外貌。预设值是 console。 console 一般正常的面板　　 smallconsole 较小的面板　　 playbutton 只显示播放按钮　　 pausecutton 只显示暂停按钮　　 stopbutton 只显示停止按钮　　 volumelever 只显示音量调整钮 CSS样式剖析 1. CSS简介： CSS-- Cascading Style Sheets，层叠式样式表。该技术始于1996年，1998年5月，level2(水平) 成为了W3C 的新标准。CSS扩展了HTML的功能，CSS与HTML、脚本相结合，可以更加有效的实现对网页元素的布局、排版和显示效果的控制。 2. CSS特点： (1)标识语言，纯文本，可以使用各种文本编辑器编写； (Dreamweaver是首选) (2)CSS可以灵活的方式与HTML和脚本相结合； (3)易用性、高效率、一致性、可靠性、可维护性、可移植性； (3)CSS文件扩展名：css； (5)CSS文件亦需在Web浏览器上解释执行；（运行环境） (6)具有跨平台性。 3. CSS语法规则： （selector）选择器 (1)tag {property:value;...} //标签，属性：值 (2)tag.Classname {property:value;...}　　//Class-selector，关联选择符 (3).Classmate {property:value;...}　　//Class-selector，独立选择符 (4)tag#IDname {property:value;...}　　//ID-selector，关联选择符 (5)#IDname {property:value;...}　　//ID-selector，独立选择符 (6)归类规则： h1,p{font-family:"黑体"} (7)继承规则： b标签设定的样式i标签内的元素将予以继承 ；如果不继承，若要采用独立的样式用 (8)情景选择规则： 格式：情景标签标识符{属性：值；...} 例： <html> <head> <title>带情景选择的样式表实例</title> </head> <style type="text/css"> p i{font-size:30pt;color:red} </style> <body bgcolor=lightblue> <center> <h1>这是一个样式表实例</h1> 这是一个样式表实例 </center> </body> </html> 4. CSS与HTML结合方式： (1)内联：<tag style="property:value;...">[</tag>] (2)嵌入： 　　 <STYLE type="text/css"> 　　  　　 </STYLE> (3)链接外部样式表文件： 　　 <link href="../mycss.css" rel="stylesheet" type="text/css"> (4)导入外部样式表文件： 　　 <STYLE type="text/css"> 　　  　　 </STYLE> (5)外部样式表文件： 　　扩展名：.css 　　不能包含任何HTML标签 　　遵循CSS语法规则 5. CSS应用： (1)<tag>[</tag>] (2)<tag style="property:value;...">[</tag>] (3)<tag class="Classname">[</tag>] (4)<tag id="IDname">[</tag>] (5)优先顺序：(后定义的优先) 内联样式最高； 其它，按层次处理。 l font Ø 字体属性：font-family </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <style type="text/css">  </style> <head> <title>font-family属性</title> </head> <body bgcolor=lightyellow> <center> font-family属性的应用效果 </center> 将按照幼圆、隶书、宋体的顺序对字体进行设置 </body> </html> Ø </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 字体风格：font-style 字体风格通常指字型，主要有正常，斜体，和偏斜体，分别对应值为normal,italic,oblique </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <style type="text/css">  </style> <head> <title>font-style属性</title> </head> <body bgcolor=lightyellow> <center> font-style属性的应用效果 这是normal风格 这是italic风格 这是oblique风格 </center> </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 字体变形：font-variant 字体变形具备如下属性：正常和小型大写字母两种，主要对英文字母有效果。对应值为normal,small-caps Ø 字体加粗：font-weight 默认，粗体，特粗，细体和具体的值，分别对应 <table> <tbody> <tr> <td> 参数值 </td> <td> 说明 </td> </tr> <tr> <td> normal </td> <td> 浏览器默认字体为7，字体粗细约为400 </td> </tr> <tr> <td> bold </td> <td> 粗体，字体粗细约为700 </td> </tr> <tr> <td> bolder </td> <td> 粗全再加粗，字体粗细约为900 </td> </tr> <tr> <td> lighter </td> <td> 比默认字体还细 </td> </tr> <tr> <td> 100~900 </td> <td> 数字越小字体越细，数字越大字体越粗 </td> </tr> </tbody> </table> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <style type="text/css">  </style> <head> <title>font-variant属性</title> </head> <body bgcolor=lightyellow> <center> font-weight属性的应用效果 <table border=2 > <tr align=center> <td id=w-ligher>lighter</td> </tr><tr> <td id=w-normal>normal</td> </tr><tr> <td id=w-bold>bold</td> </tr><tr> <td id=w-bolder>bolder</td> </tr> <tr> <td id=w-1>字体粗细为100</td> </tr><tr> <td id=w-2>字体粗细为900</td> </tr> </table> </center> </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 字号：font-size 语法格式：font-size:<绝对尺寸>|<关键字>|<相对尺寸>|<比例尺寸> ⑴ 绝对尺寸举例： </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <title>使用绝对尺寸控制字号的大小</title> </head> <body bgcolor=lightyellow> 字号为5em 字号为5ex 字号为0.5in 字号为1cm 字号为10mm 字号为25pt 字号为25px 字号为2pc </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> (2) 关键字和相对尺寸举例： </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <title>使用关键字和相对尺寸控制字号大小</title> </head> <body bgcolor=lightyellow> 这是浏览器默认的字号 关键字为xx-small 关键字为x-small 关键字为small 关键字为medium 关键字为large 关键字为x-large 关键字为xx-large 相对尺寸为smaller 相对尺寸为larger </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> (3) 比例尺寸举例 </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <style type="text/css">  </style> <title>使用比例尺寸控制字号大小</title> </head> <body> 风格风格 </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 文字的更改：text-transform 方便网页设计者控制字母的大小写。 </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <title>文字的更改</title> </head> <body bgcolor=puer> uppercase:使所有字母大写显示 LOWERCASE：使所有字母小写显示 capitalize：词首字母大写 none：字母以正常形式显示 </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 文字的修饰：text-decoration 格式：text-decoration:underline|overline|line-throungh|blink|none </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <title>text-decoration属性</title> </head> <style type="text/css">  </style> <body bgcolor=lightyellow> <center> text-decoration属性的应用效果 </center> 此行文字加下划线 此行文字加顶线 此行文字加删除线 </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 字体属性font：{font：字体风格||字体变形||字体加粗||字号/行高||字体} 格式：font:font-family||font-style||font-variant||font-weight||font-size 说明：字体属性主要用于不同字体属性的略写；可以同时设置多种属性；属性与属 性之间必须利用分号隔开。 p{font:italic small-caps bold 22pt/54px 隶书,宋体} l 控制图文布局 Ø 字距：letter-spacing word-spacing letter-spacing用于设置英文字母之间距离;word-spacing设置英文单词之间距离 </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <html> <head> <title>word-spacing和letter-spacing属性</title> </head> <style type="text/css">  </style> <body bgcolor=lightyellow> <center> word-spacing和letter-spacing属性的应用效果 <table border=4> <tr> <td>字母间距为4pt</td> <td id=letter1>CSS的英文全称为Cascading Style Sheets</td> </tr> <tr> <td>字母间距为正常</td> <td id=letter2>CSS的英文全称为Cascading Style Sheets</td> </tr> <tr> <td>单词间距为10pt</td> <td id=word1>CSS的英文全称为Cascading Style Sheets</td> </tr> <tr> <td>单词间距为正常</td> <td id=word2>CSS的英文全称为Cascading Style Sheets</td> <tr> </table> </center> </body> </html> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 行距：line-height 数字行距：p{font-size:12pt;line-height:2;}//12pt*2 单位行距：p{line-height:9pt;} 比例行距：p{font-size:10pt;line-height:140%;}//10pt*140% Ø 文本对齐 格式：text-align：left|right|center|justify vertical-align：top|bottom|text-top|text-bottom|baseline|middle|sub|super 说明：text-align属性用于文字水平对齐，但这个属性只用于整块内容，如：<h1>~<h6><u1>等;vertical-align属性用于控制文字或其它网页对象相对于母体对象的垂直位置。 <HTML> <HEAD> <TITLE>vertical-align垂直对齐属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY BGCOLOR=lightyellow> <CENTER> vertical-align垂直对齐属性的应用 <TABLE BORDER=2 HEIGHT=200> <TR BGCOLOR=LIGHTGREEN align=center> <TD>设置vertical-align属性</TD><TD>显示结果</TD> <TD>设置vertical-align属性</TD><TD>显示结果</TD></TR> <TR> <TD>vertical-align:sub</TD> <TD>C+O2-->CO2</TD>  <TD>vertical-align:super</TD> <TD>a2+b2 =c2</TD>  </TR> <TR> <TD ID=top>vertical-align:top</TD> <TD ID=top><IMG SRC="logo.gif"></TD>  <TD ID=t-top>vertical-align:text-top</TD> <TD ID=t-top><IMG SRC="logo.gif"></TD>  </TR> <TR> <TD ID=mid>vertical-align:middle</TD> <TD ID=mid><IMG SRC="logo.gif"></TD>  <TD ID=base>vertical-align:baseline</TD> <TD ID=base><IMG SRC="logo.gif"></TD>  </TR> <TR> <TD ID=bot>vertical-align:bottom</TD> <TD ID=bot><IMG SRC="logogriph"></TD>  <TD ID=t-bot>vertical-align:text-bottom</TD> <TD ID=t-bot><IMG SRC="logo.gif"></TD>  </TR> </TABLE> </CENTER> </BODY> </HTML> Ø 首行缩进 text-indent:数字|百分比 <html> <head> <title>text-indent属性</title> <style type="text/css"> .indent1{text-indent:30pt} </style> </head> <body bgcolor=lightyellow> <center> text-indent属性的应用效果 </center> 首行不缩进效果: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 首行缩进30pt: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </body> </html> l 颜色及背景 Ø 颜色属性：color h1{color:red} h2{color:#000080} Ø 背景颜色属性：background-color （默认为透明transparent） body{background-color:while} h1{background-color:#000080} Ø 背景图像属性：background-image 格式：background-image: url(图像文件名)|none(无) <HTML> <HEAD> <TITLE>background-image属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY ID=bc-1> <CENTER> background-color属性的应用 春望 国破山河在，城春草木深。 感时花溅泪，恨别鸟惊心。 烽火连三月，家书抵万金。 白头搔更短，浑欲不胜簪。 </CENTER> </BODY> </HTML> Ø 背景图片重复属性：background-repeat 格式：background-repeat:repeat|repeat-x|repeat-y|no-repeat <HTML> <HEAD> <TITLE>background-repeat属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY ID=bi> <CENTER> background-repeat属性设置背景图片横向重复 </CENTER> </BODY> </HTML> Ø 固定背景图片属性：background-attachment 格式：backfround-attachment:scroll|fixed <HTML> <HEAD> <TITLE>background-attachment属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY ID=bi> <CENTER> background-attachment固定背景图片属性的应用 </CENTER> </BODY> </HTML> Ø 背景图片位置属性 格式：background-position:<百分比>|<长度>|<关键字> 按百分比定位格式：background-position:x% y% 按长度定位格式：background-position:x y 按关键字定位格式：background-position: top|center|bottom left|center|right p{background-position:70% 50%;repeat-y;url(..\pic\sky.jpg)} p{background-position:70px 50px;url(..\pic\sky.jpg)} p{background-position:right top;url(..\pic\sky.jpg)} Ø background属性 格式：{background:背景颜色||背景图像||背景重复||背景附件||背景位置} body{background:#000080 url(tree.jpg) no-repeat bottom right} l 列表样式 格式： list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none; list-style-image: url(图像文件名); list-style-position: inside|outside; list-style 属性：{list-style: type值||image 值 ||position 值 } .item{list-style:url(IMAGES/ITEM.GIF) inside} l 美化网页与超链接的设置 Ø 网页链接属性anchor语法 <table> <tbody> <tr> <td> a:link </td> <td> 尚未链接过的超链接文字的样式 </td> </tr> <tr> <td> a:visited </td> <td> 已链接过的超链接文字的样式 </td> </tr> <tr> <td> a:active </td> <td> 当鼠标单击超链后文字所显示的样式 </td> </tr> <tr> <td> a:hover </td> <td> 当鼠标拖动到超链上文字所显示的样式 </td> </tr> <tr> <td> a </td> <td> 在此属性内设置样式时，上述4种将同时引用此值 </td> </tr> </tbody> </table> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <HTML> <HEAD> <TITLE>anchor属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY BGCOLOR=yellow> <CENTER> </CENTER> <UL> <LI><A href="http://www.sina.com.cn">新浪网</A> <LI><A href="http://www.163.com">网易</A> <LI><A href="http://www.yahoo.com.cn">雅虎</A> </UL> </BODY> </HTML> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> Ø 光标属性：cursor <HTML> <HEAD> <TITLE>多变鼠标</TITLE> </HEAD> <BODY bgcolor=lightgreen> <H3>鼠标显示效果</h1> 请把鼠标移动到下面文字上 <div > <table width=300 style="font-size:9pt;color:#ee82ee;" border="0" cellspacing="1" cellpadding="0" bgcolor=Black> <tr> <td bgcolor=#FEF7ED>手的形状</td> <td bgcolor=#FEF7ED>反方向</td> </tr> <tr> <td bgcolor=#FEF7ED>移动</td> <td bgcolor=#FEF7ED>求助</td> </tr> <tr> <td bgcolor=#FEF7ED>十字形</td> <td bgcolor=#FEF7ED>移动到文本上的那种效果</td> </tr> <tr> <td bgcolor=#FEF7ED>等待</td> <td bgcolor=#FEF7ED>向右箭头</td> </tr> <tr> <td bgcolor=#FEF7ED>向上箭头</td> <td bgcolor=#FEF7ED>向右上箭头</td> </tr> <tr> <td bgcolor=#FEF7ED>向左上箭头</td> <td bgcolor=#FEF7ED>向左箭头</td> </tr> <td bgcolor=#FEF7ED>向左下箭头</td> <td bgcolor=#FEF7ED>由系统自动给出效果</td> <tr> <td bgcolor=#FEF7ED>向右下箭头</td> <td bgcolor=#FEF7ED> </td> </tr> </table> </div> </BODY> </HTML> Ø 滚动条属性：scrollbar scrollbar-3dlight-color:color 说明：设置或检索滚动条亮边框颜色,对应的脚本特性为 scrollbar3dLightColor. div {scrollbar-3dlight-color :threedhighlight; } scrollbar-highlight-color:color 说明：设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色,对应的脚本特性为 scrollbarHighlightColor。 div {scrollbar-highlight-color :threedhighlight; } scrollbar-face-color：color 说明：设置或检索滚动条3D表面(ThreedFace)的颜色，对应的脚本特性为 scrollbarFaceColor。 div {scrollbar-face-color : threedface; } scrollbar-arrow-color : color 说明：设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。对应的脚本特性为 scrollbarArrowColor。 div {scrollbar-arrow-color : buttontext; } scrollbar-shadow-color：color 说明：设置或检索滚动条3D界面的暗边(ThreedShadow)颜色。对应的脚本特性为 scrollbarShadowColor. div {scrollbar-shadow-color :ThreedDarkShadow; } scrollbar-darkshadow-color : color 说明：设置或检索滚动条暗边框(ThreedDarkShadow)颜色。对应的脚本特性为 scrollbarDarkShadowColor. div {scrollbar-darkshadow-color :threeddarkshadow; } scrollbar-base-color : color 说明：设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。对应的脚本特性为 scrollbarBaseColor. div {scrollbar-base-color : buttonface; } scrollbar-track-color : color 说明：设置或检索滚动条的拖动区域(TrackBar)颜色。对应的脚本特性为 scrollbarTrackColor. div {scrollbar-track-color :ThreedDarkShadow; } </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> <HTML> <HEAD> <TITLE>scrollbar属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY BGCOLOR=lightyellow> <CENTER> 制作立体的滚动条效果 <IMG src="dog.jpg"> </CENTER> </BODY> </HTML> </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> l DIV.span Ø <div>-图层标签： <div>标签：用于定义网页上一个相对独立的区域（文本、图形、表格、媒体、窗体、<div>等）。 格式： <div id=IDname>...</div> <div class=Classname>...</div> <div id=name style="property:value;...">...</div> 图层： <div id="Layer" style="position:absolute; left:217px; top:135px; width:177px; height:122px; z-index:1; visibility: visible; overflow: scroll; clip: rect(1 170 120 1); background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; background-image: url(images/dw_splash.gif); layer-background-image: url(images/dw_splash.gif)">...</div> Ø -标签： 和<div>的区别：<div>使上下文自动换行。 格式： ... ... ... 注：主要用于样式的应用。 l 边框、边界、填充样式 Ø 边框属性：border-width border-color border-style 格式： border-width:thin|medium|thick|数值[ thin|medium|thick|数值..] border-top-width:数值 border-bottom-width:数值 border-left-width:数值 border-right-width:数值 border-color:#rrggbb[ #rrggbb..]/*按顺时针分配*/ border-top-color:#rrggbb border-bottom-color:#rrggbb border-left-color:#rrggbb border-right-color:#rrggbb border-style:dotted|dashed|solid|double|groove|ridge|inset|outset border-top-style: border-bottom-style: border-left-style: border-right-style: <HTML> <HEAD> <TITLE>border-style属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY> <CENTER> <h4>设置边框线样式属性border-style</h4> <TABLE border=2 > <TR><TD id=bs1>边框线样式为小点虚线</TD></TR> <TR><TD id=bs2>边框线样式为大点虚线</TD></TR> <TR><TD id=bs3>边框线样式为实线</TD></TR> <TR><TD id=bs4>边框线样式为双直线</TD></TR> <TR><TD id=bs5>边框线样式为3D凹线</TD></TR> <TR><TD id=bs6>边框线样式为3D凸线</TD></TR> <TR><TD id=bs7>边框线样式为3D框入线</TD></TR> <TR><TD id=bs8>边框线样式为3D隆起线</TD></TR> </TABLE> </CENTER> </BODY> </HTML> Ø border属性：{border:宽度||样式||颜色} body{border:12px solid red} Ø 边界属性：margin 格式：margin : auto | length margin-top:宽度|百分比|auto margin-right:宽度|百分比|auto margin-bottom:宽度|百分比|auto margin-left:宽度|百分比|auto margin:宽度|百分比|auto[ 宽度|百分比|auto..] <HTML> <HEAD> <TITLE>margin属性</TITLE> <STYLE TYPE="TEXT/CSS">  </STYLE> </HEAD> <BODY> <CENTER> <h4>利用margin属性设置边界的值</h4> </CENTER> 花儿什么也没有。它们只有凋谢在风中的轻微、 凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁， 悲哀无助地发出一声声垂死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲。 </BODY> </HTML> Ø 填充属性：padding: length padding是控制元素的内容与元素外框内缘的距离,用法同border-color.其格式如下: padding-top:宽度|百分比 padding-right:宽度|百分比 padding-bottom:宽度|百分比 padding-left:宽度|百分比 padding:宽度|百分比[ 宽度|百分比..] l CSS滤镜（Filter） 分类：视觉滤镜（Visual Filters）和转换滤镜（Transition Filters） Ø Alpha滤镜：透明和渐变透明效果 格式： filter:alpha(opacity=*,finishopacity=*,style=*,startx=*,starty=*,finishx=*,finishy=*) Opacity/finishopacity：开始/结束透明度（0 -- 100） style:渐变的形状。0代表统一形状、1代表线形、2代表放射状、3代表长方形 STARTX STARTY:代表渐变透明效果的开始X和Y坐标(度量单位为图片宽/高度的百分比） FINISHX FINISHY:代表渐变透明效果的结束X和Y 的坐标(度量单位同上) Ø Blur滤镜：模糊效果 格式： filter:blur(add=0|1,direction=*,strength=*) add：0 ---不显示原图，1 ---显示原图（默认） direction：设置模糊的方向(0 0---垂直向上,依顺时针,45°递增,默认:270 0） strength：代表有多少像素的大小将受到模糊影响，默认是5px Ø Dropshadow滤镜：阴影效果 格式： filter:dropshadow(color=#rrggbb,offx=*,offy=8,positive=0|1)} color：阴影的颜色 offx offy：X方向和Y方向阴影的偏移量，px（±） positive：阴影的透明效果（0 ---透明，1 ---不透明） Ø Glow滤镜：光晕效果 格式： filter:glow(color=#rrggbb,strength=*) color：边缘光晕的颜色 strength：边缘光晕的强度大小（1 -- 255） Ø Shadow滤镜：渐变阴影效果 格式： filter:shadow(color=#rrggbb,direction=*) color：阴影的颜色 direction：设置阴影的方向（0 0 ---垂直向上，依顺时针，45 0 递增，默认：225 0） Ø Wave滤镜：垂直的波浪效果 格式： style="filter:wave(add=*,freq=*,lightstrength=*,phase=*,strength=*)" add：0 ---不显示原图（默认），1 ---显示原图 freq：出现在对象上的波浪数目（以正数设置） lightstrength：波浪上光的照射强度（0 -- 100） phase：正弦波的起始位置0—100，(相当于将360°划分为100个等分) strength：波浪的振幅大小（px） Ø Gray,Invert,Xray滤镜 Gray:将对象中的颜色除去,变成黑白效果. Invert:将颜色饱和度及亮度值反转,类似底片效果. Xray:让对象显示轮廓加亮,类似X光片的效果. 格式: style="filter:Gray" style="filter:Invert" style="filter:Xray" Ø FlipH和FlipV滤镜 FlipH:设置对象产生水平翻转效果. FlipV:设置对象产生垂直翻转180°的效果. 格式: style="filter:FlipH" style="filter:FlipV" Ø Mask滤镜:设置对像的屏蔽效果,如同印章一样印出模型的模样. 格式： style="filter:mask(color=#rrggbb)" Ø Chroma滤镜：主要用于指定对象中的某个颜色,变为透明效果. 格式： style="filter:chroma(color=#rrggbb)" Ø Light滤镜：光照效果 格式: ①AddAmbient 加入包围的光源： 　filters.Light[(n)].AddAmbient(R,G,B,strength) ②AddCone 加入锥形光源： 　filters.Light[(n)].addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) ③AddPoint 加入点光源： 　filters.Light[(n)].addPoint(x,y,z,R,G,B,strength) ④Changcolor 改变光的颜色： 　filters.Light[(n)].ChangeColor(lightnumber, r,g,b, fAbsolute) ⑤Changstrength 改变光源的强度： 　filters.Light[(n)].ChangeStrength(lightnumber, strength, fAbsolute) ⑥Clear 清除所有的光源： ⑦MoveLight 移动光源： 　filters.Light[(n)].MoveLight(lightnumber, x, y, z, fAbsolute) Ø BlendTrans滤镜：淡入淡出效果 格式： style="filter:blendtrans(duration=秒)" Ø RevealTrans滤镜：形状渐变效果 格式： filter:revealtrans(duration = 秒 , transition= 代码 ) 代码描述 </div> <div style="font-family:Arial; font-size:14px; line-height:26px"> 0 Box in 矩形缩小 1 Box out 矩形扩大 2 Circle in 圆形缩小 3 Circle out 圆形扩大 4 Wipe up 向上擦除 5 Wipe down 向下擦除 6 Wipe right 向右擦除 7 Wipe left 向左擦除 8 Vertical blinds 垂直百页 9 Horizontal blinds 水平百页 10 Checkerboard across 棋盘状通过 11 Checkerboard down 棋盘状向下 12 Random dissolve 随机融化 13 Split vertical in 垂直向内分开 14 Split vertical out 垂直向外分开 15 Split horizontal in 水平向内分开 16 Split horizontal out 水平向内分开 17 Strips left down 左下条状 18 Strips left up 左上条状 19 Strips right down 右下条状 20 Strips right up 右上条状 21 Random bars horizontal 随机的水平栅栏 22 Random bars vertical 随机的垂直栅栏 23 Random effect (any of the other 23) 随机任意的上述一种效果 </div> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1772700000292241408"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML语言剖析)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> Magnetic_h <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835512542735200256.htm" title="C语言宏函数" target="_blank">C语言宏函数</a> 南林yan <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<<c<<endl;//800return0;}二、为什么要使用宏函数使用宏函数</div> </li> <li><a href="/article/1835511911769272320.htm" title="C语言如何定义宏函数？" target="_blank">C语言如何定义宏函数？</a> 小九格物 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参</div> </li> <li><a href="/article/1835511030260789248.htm" title="c++ 的iostream 和 c++的stdio的区别和联系" target="_blank">c++ 的iostream 和 c++的stdio的区别和联系</a> 黄卷青灯77 <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/iostream/1.htm">iostream</a><a class="tag" taget="_blank" href="/search/stdio/1.htm">stdio</a> <div>在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835507248395284480.htm" title="【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数" target="_blank">【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数</a> 广龙宇 <a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Rust%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">Rust设计模式</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分</div> </li> <li><a href="/article/1835506869838376960.htm" title="Python数据分析与可视化实战指南" target="_blank">Python数据分析与可视化实战指南</a> William数据分析 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学</div> </li> <li><a href="/article/1835502705553010688.htm" title="LLM 词汇表" target="_blank">LLM 词汇表</a> 落难Coder <a class="tag" taget="_blank" href="/search/LLMs/1.htm">LLMs</a><a class="tag" taget="_blank" href="/search/NLP/1.htm">NLP</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">大语言模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/llama/1.htm">llama</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>Contextwindow“上下文窗口”是指语言模型在生成新文本时能够回溯和参考的文本量。这不同于语言模型训练时所使用的大量数据集，而是代表了模型的“工作记忆”。较大的上下文窗口可以让模型理解和响应更复杂和更长的提示，而较小的上下文窗口可能会限制模型处理较长提示或在长时间对话中保持连贯性的能力。Fine-tuning微调是使用额外的数据进一步训练预训练语言模型的过程。这使得模型开始表示和模仿微调数</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> 好看资源平台 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835498547785592832.htm" title="【华为OD机试真题2023B卷 JAVA&JS】We Are A Team" target="_blank">【华为OD机试真题2023B卷 JAVA&JS】We Are A Team</a> 若博豆 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代</div> </li> <li><a href="/article/1835497664381284352.htm" title="探索OpenAI和LangChain的适配器集成：轻松切换模型提供商" target="_blank">探索OpenAI和LangChain的适配器集成：轻松切换模型提供商</a> nseejrukjhad <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#探索OpenAI和LangChain的适配器集成：轻松切换模型提供商##引言在人工智能和自然语言处理的世界中，OpenAI的模型提供了强大的能力。然而，随着技术的发展，许多人开始探索其他模型以满足特定需求。LangChain作为一个强大的工具，集成了多种模型提供商，通过提供适配器，简化了不同模型之间的转换。本篇文章将介绍如何使用LangChain的适配器与OpenAI集成，以便轻松切换模型提供商</div> </li> <li><a href="/article/1835497538023682048.htm" title="使用Apify加载Twitter消息以进行微调的完整指南" target="_blank">使用Apify加载Twitter消息以进行微调的完整指南</a> nseejrukjhad <a class="tag" taget="_blank" href="/search/twitter/1.htm">twitter</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>#使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。</div> </li> <li><a href="/article/1835497411179540480.htm" title="深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具" target="_blank">深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具</a> nseejrukjhad <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工</div> </li> <li><a href="/article/1835497284750635008.htm" title="如何部分格式化提示模板:LangChain中的高级技巧" target="_blank">如何部分格式化提示模板:LangChain中的高级技巧</a> nseejrukjhad <a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495644123459584.htm" title="Day1笔记-Python简介&标识符和关键字&输入输出" target="_blank">Day1笔记-Python简介&标识符和关键字&输入输出</a> ~在杰难逃~ <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程</div> </li> <li><a href="/article/1835494131535802368.htm" title="人工智能时代，程序员如何保持核心竞争力？" target="_blank">人工智能时代，程序员如何保持核心竞争力？</a> jmoych <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员</div> </li> <li><a href="/article/1835493138270089216.htm" title="梁文道《尽头:怎样是好的阅读和书写》片段" target="_blank">梁文道《尽头:怎样是好的阅读和书写》片段</a> 白夜书摘 <div>1、写小说的人，有时会强烈地感到一种现实的召唤，想去面对和回应现实。这时他们会觉得自己正站在时代中心，就像黑格尔说的，要把时代精神掌握在自己的小说（不是哲学）里面。但是这也很危险，当一个作家像一个时代那样书写，可能就会出现问题了。2、文字是远比语言大块而且湿冷的木头，又距离我们内心的火花稍远，不容易瞬间点燃起来，这处隙缝，给了我们回身的余地，可以再多看一下想一下设身处地一下；人类过往这最后五千年，</div> </li> <li><a href="/article/1835492869062881280.htm" title="pyecharts——绘制柱形图折线图" target="_blank">pyecharts——绘制柱形图折线图</a> 2224070247 <a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">数据可视化</a> <div>一、pyecharts概述自2013年6月百度EFE(ExcellentFrontEnd）数据可视化团队研发的ECharts1.0发布到GitHub网站以来，ECharts一直备受业界权威的关注并获得广泛好评，成为目前成熟且流行的数据可视化图表工具，被应用到诸多数据可视化的开发领域。Python作为数据分析领域最受欢迎的语言，也加入ECharts的使用行列，并研发出方便Python开发者使用的数据</div> </li> <li><a href="/article/1835490712716668928.htm" title="第六集如何安装CentOS7.0，3分钟学会centos7安装教程" target="_blank">第六集如何安装CentOS7.0，3分钟学会centos7安装教程</a> date分享 <div>从光盘引导系统按回车键继续进入引导程序安装界面，选择语言这里选择简体中文版点击继续选择桌面安装下面给系统分区选择磁盘，点击完成选择基本分区，点击加号swap分区,大小填内存的两倍在选择根分区，使用所有可用的磁盘空间选择文件系统ext4点击完成，点击开始安装设置root密码，点击完成设置普通用户和密码，点击完成整个过程持续八分钟左右根据个人配置不同，时间长短不同好，现在点击重启系统进入重启状态点击本</div> </li> <li><a href="/article/1835489208152715264.htm" title="Rust基础知识" target="_blank">Rust基础知识</a> GRKF15 <a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>1.Rust语言简介1.1基础语法变量声明：let关键字用于声明变量，可以指定或不指定类型，如leta=10;和letmutc=30i32;。函数定义：使用fn关键字定义函数，并指定参数类型及返回类型，如fnadd(i:i32,j:i32)->i32{i+j}。控制流：包括if、else等，控制语句后需要使用;来结束语句。1.2数据类型整数类型：i8、i16、i32、i64、i128，以及无符号的</div> </li> <li><a href="/article/1835482277870661632.htm" title="简介Shell、zsh、bash" target="_blank">简介Shell、zsh、bash</a> zhaosuningsn <a class="tag" taget="_blank" href="/search/Shell/1.htm">Shell</a><a class="tag" taget="_blank" href="/search/zsh/1.htm">zsh</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/bash/1.htm">bash</a> <div>Shell是Linux和Unix的外壳，类似衣服，负责外界与Linux和Unix内核的交互联系。例如接收终端用户及各种应用程序的命令，把接收的命令翻译成内核能理解的语言，传递给内核，并把内核处理接收的命令的结果返回给外界，即Shell是外界和内核沟通的桥梁或大门。Linux和Unix提供了多种Shell，其中有种bash，当然还有其他好多种。Mac电脑中不但有bash，还有一个zsh，预装的，据说</div> </li> <li><a href="/article/1835476983614631936.htm" title="Python开发常用的三方模块如下：" target="_blank">Python开发常用的三方模块如下：</a> 换个网名有点难 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Python是一门功能强大的编程语言，拥有丰富的第三方库，这些库为开发者提供了极大的便利。以下是100个常用的Python库，涵盖了多个领域：1、NumPy，用于科学计算的基础库。2、Pandas，提供数据结构和数据分析工具。3、Matplotlib，一个绘图库。4、Scikit-learn，机器学习库。5、SciPy，用于数学、科学和工程的库。6、TensorFlow，由Google开发的开源机</div> </li> <li><a href="/article/1835474314728665088.htm" title="希望和悲伤都是照亮我们人生的一缕光" target="_blank">希望和悲伤都是照亮我们人生的一缕光</a> 山月映雪 <div>我开始并不想读《云边有个小卖部》，但看到好几个学生就都在读这本书，为了了解学生的阅读实际，我就拿起这本书翻看起来。读了十几页，发现小说的语言中不时有一些粗俗的字眼，感觉自己读不下去了。小说一开始把云边镇风景写的特别的美好，我错判为脱离现实的鸳鸯蝴蝶派小说，对于人为制造的童话世界的人与物，我真的不太感兴趣，所以就没有再读了。有天在教室闲转，顺手又拿起了这本书看了起来，这次我才真的看进去了。这部小说除</div> </li> <li><a href="/article/1835470931783413760.htm" title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a> 张风捷特烈 <a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div> </li> <li><a href="/article/1835468915828944896.htm" title="C语言判断回文数" target="_blank">C语言判断回文数</a> Y雨何时停T <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一，回文数概念“回文”是指正读反读都能读通的句子，它是古今中外都有的一种修辞方式和文字游戏，如“我为人人，人人为我”等。在数学中也有这样一类数字有这样的特征，成为回文数。设n是一任意自然数。若将n的各位数字反向排列所得自然数n1与n相等，则称n为一回文数。例如，若n=1234321，则称n为一回文数；但若n=1234567，则n不是回文数。二，判断回文数实现思路一：数组与字符串将数字每一位按顺序放</div> </li> <li><a href="/article/66.htm" title="项目中枚举与注解的结合使用" target="_blank">项目中枚举与注解的结合使用</a> 飞翔的马甲 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div>前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。 </div> </li> <li><a href="/article/193.htm" title="【Scala十七】Scala核心十一：下划线_的用法" target="_blank">【Scala十七】Scala核心十一：下划线_的用法</a> bit1129 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义 1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r</div> </li> <li><a href="/article/320.htm" title="web缓存基础：术语、http报头和缓存策略" target="_blank">web缓存基础：术语、http报头和缓存策略</a> dalan_123 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下</div> </li> <li><a href="/article/447.htm" title="crontab 问题" target="_blank">crontab 问题</a> 周凡杨 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div> 一： 0481-079 Reached a symbol that is not expected. 背景： */5 * * * * /usr/IBMIHS/rsync.sh </div> </li> <li><a href="/article/574.htm" title="让tomcat支持2级域名共享session" target="_blank">让tomcat支持2级域名共享session</a> g21121 <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。打开tomcat下conf下context.xml文件找到Context标签,修改为如下内容如果你的域名是www.test.com <Context sessionCookiePath="/path&q</div> </li> <li><a href="/article/701.htm" title="web报表工具FineReport常用函数的用法总结（数学和三角函数）" target="_blank">web报表工具FineReport常用函数的用法总结（数学和三角函数）</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div> ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。 ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角</div> </li> <li><a href="/article/828.htm" title="linux 启动java进程 sh文件" target="_blank">linux 启动java进程 sh文件</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a> <div>#!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid </div> </li> <li><a href="/article/955.htm" title="我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory" target="_blank">我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory</a> aijuans <a class="tag" taget="_blank" href="/search/Spring+3+%E7%B3%BB%E5%88%97/1.htm">Spring 3 系列</a> <div>如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import</div> </li> <li><a href="/article/1082.htm" title="Linux 内存使用方法详细解析" target="_blank">Linux 内存使用方法详细解析</a> annan211 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/Linux%E5%86%85%E5%AD%98%E8%A7%A3%E6%9E%90/1.htm">Linux内存解析</a> <div>来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用</div> </li> <li><a href="/article/1209.htm" title="数据库的单表查询常用命令及使用方法(-)" target="_blank">数据库的单表查询常用命令及使用方法(-)</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E8%A1%A8%E6%9F%A5%E8%AF%A2/1.htm">单表查询</a> <div> 创建数据库; --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2)); 创建bloguser表,里面有三个字段 &nbs</div> </li> <li><a href="/article/1336.htm" title="多线程基础知识" target="_blank">多线程基础知识</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>一．进程和线程进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。线程：是进程内部单一的一个顺序控制流。线程和进程 a. 每个进程都有独立的</div> </li> <li><a href="/article/1463.htm" title="fastjson简单使用实例" target="_blank">fastjson简单使用实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a> <div>一.简介 阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征： </div> </li> <li><a href="/article/1590.htm" title="【RPC框架Burlap】Spring集成Burlap" target="_blank">【RPC框架Burlap】Spring集成Burlap</a> bit1129 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成 </div> </li> <li><a href="/article/1717.htm" title="【Mahout一】基于Mahout 命令参数含义" target="_blank">【Mahout一】基于Mahout 命令参数含义</a> bit1129 <a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a> <div>1. mahout seqdirectory $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna</div> </li> <li><a href="/article/1844.htm" title="linux使用flock文件锁解决脚本重复执行问题" target="_blank">linux使用flock文件锁解决脚本重复执行问题</a> ronin47 <a class="tag" taget="_blank" href="/search/linux+lock%E3%80%80%E9%87%8D%E5%A4%8D%E6%89%A7%E8%A1%8C/1.htm">linux lock　重复执行</a> <div>linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。例如： <? // test .php </div> </li> <li><a href="/article/1971.htm" title="java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字" target="_blank">java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间</div> </li> <li><a href="/article/2098.htm" title="linux 系统相关命令" target="_blank">linux 系统相关命令</a> candiio <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>系统参数 cat /proc/cpuinfo cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参</div> </li> <li><a href="/article/2225.htm" title="[经营与资产]保持独立性和稳定性对于软件开发的重要意义" target="_blank">[经营与资产]保持独立性和稳定性对于软件开发的重要意义</a> comsci <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a> <div> 一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造 如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中 那么软件开发者原有的设计思想和开发路线</div> </li> <li><a href="/article/2352.htm" title="在CentOS5.5上编译OpenJDK6" target="_blank">在CentOS5.5上编译OpenJDK6</a> Cwind <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a> <div>几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是</div> </li> <li><a href="/article/2479.htm" title="java乱码问题" target="_blank">java乱码问题</a> dashuaifu <a class="tag" taget="_blank" href="/search/java%E4%B9%B1%E7%A0%81%E9%97%AE%E9%A2%98/1.htm">java乱码问题</a><a class="tag" taget="_blank" href="/search/js%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">js中文乱码</a> <div>swfupload上传文件参数值为中文传递到后台接收中文乱码在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t</div> </li> <li><a href="/article/2606.htm" title="cygwin很多命令显示command not found的解决办法" target="_blank">cygwin很多命令显示command not found的解决办法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a> <div>cygwin很多命令显示command not found的解决办法修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us</div> </li> <li><a href="/article/2733.htm" title="[介绍]从 Yii 1.1 升级" target="_blank">[介绍]从 Yii 1.1 升级</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发</div> </li> <li><a href="/article/2860.htm" title="Linux SSH免登录配置总结" target="_blank">Linux SSH免登录配置总结</a> eksliang <a class="tag" taget="_blank" href="/search/ssh-keygen/1.htm">ssh-keygen</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E5%85%8D%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81/1.htm">Linux SSH免登录认证</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E4%BA%92%E4%BF%A1/1.htm">Linux SSH互信</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。生成公钥与私钥有两种加密方式，第一种是</div> </li> <li><a href="/article/2987.htm" title="手势滑动销毁Activity" target="_blank">手势滑动销毁Activity</a> gundumw100 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>老是效仿ios，做android的真悲催！有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？不用~，网上先问一下百度。结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay</div> </li> <li><a href="/article/3114.htm" title="JavaScript变换表格边框颜色" target="_blank">JavaScript变换表格边框颜色</a> ini <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&</div> </li> <li><a href="/article/3241.htm" title="Kafka Rest : Confluent" target="_blank">Kafka Rest : Confluent</a> kane_xie <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/confluent/1.htm">confluent</a> <div>最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。环境声明：Ubu</div> </li> <li><a href="/article/3368.htm" title="Calender不是单例" target="_blank">Calender不是单例</a> men4661273 <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/Calender/1.htm">Calender</a> <div> 在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。测试： Calendar c1 = </div> </li> <li><a href="/article/3495.htm" title="线程内存和主内存之间联系" target="_blank">线程内存和主内存之间联系</a> qifeifei <a class="tag" taget="_blank" href="/search/java+thread/1.htm">java thread</a> <div>1， java多线程共享主内存中变量的时候，一共会经过几个阶段， lock:将主内存中的变量锁定，为一个线程所独占。 unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。 read:将主内存中的变量值读到工作内存当中。 load:将read读取的值保存到工作内存中的变量副本中。 </div> </li> <li><a href="/article/3622.htm" title="schedule和scheduleAtFixedRate" target="_blank">schedule和scheduleAtFixedRate</a> tangqi609567707 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/schedule/1.htm">schedule</a> <div>原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest { </div> </li> <li><a href="/article/3749.htm" title="erlang 部署" target="_blank">erlang 部署</a> wudixiaotie <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>1.如果在启动节点的时候报这个错： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]}, 2.当generate时，遇到： ERROR</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>}}

HTML语言剖析

： 这些是标题标记，由

至

：

这些是标题标记，由