HTML语言剖析

HTML语言剖析
原稿http://wwwb.pconline.com.cn/pcedu/sj/jq/htmlp/01221.htm

太平洋网络学院

Html简介

全写： HyperText Mark-up Language
译名：超文件注标式语言（译名之一）
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标记（tag）使文件达到预期的显示效果。

HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C++ 和 Java 之类，它只是标示语言，基本上你只要明白了各种标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于编辑方面，任何文字编辑器都可以，只要能将文件另存成 ASCII 纯文字格式即可，当然以专业的网页编辑软件为佳。

■ 阅读须知：

这一篇【HTML剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必读的，其余可任意选择。这一篇不会提及任何网页编辑软件，只要掌握了 HTML ，任何网页编辑工具都可以变成一把利器。

■ 标记写法：

任何标记皆由"<"及">"所围住，如
标记名与小于号之间不能留有空白字符。
某些标记　要加上参数，某些则不必。如 Hello
参数只可加于起始标记中。
在起始标记之标记名前加上符号"/"便是其终结标记，如
标记字母大小写皆可。

■ 围堵标记与空标记：

标记按型态分为围堵标记与空标记

围堵标记
顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。
例如 HTML Source ： Creation of Webpage is my favourite.
显示成： Creation of Webpage is my favourite.

其中便称为围堵标记。
它以起始标记及终结标记标示文字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。
空标记
是指标记单独出现，只有起始标记没有终结标记。
例如 HTML Source：
I love Creation of Webpage.
It's a wonderful place.
显示成：
I love Creation of Webpage.
It's a wonderful place.

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

HTML语言剖析

太平洋网络学院

HTML 标记一览

标记	类型	译名或意义	作用	备注
文件标记
	●	文件声明	让浏览器知道这是 HTML 文件
	●	开头	提供文件整体资讯
</span></td> <td class="article"><span>●</span></td> <td class="article"><span>标题</span></td> <td class="article"><span>定义文件标题，将显示于浏览顶端</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><BODY></span></td> <td class="article"><span>●</span></td> <td class="article"><span>本文</span></td> <td class="article"><span>设计文件格式及内文所在</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>排版标记</span></td> </tr> <tr> <td class="article"><span><!--注解--></span></td> <td class="article"><span>○</span></td> <td class="article"><span>说明标记</span></td> <td class="article"><span>为文件加上说明，但不被显示</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><P></span></td> <td class="article"><span>○</span></td> <td class="article"><span>段落标记</span></td> <td class="article"><span>为字、画、表格等之间留一空白行</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><BR></span></td> <td class="article"><span>○</span></td> <td class="article"><span>换行标记</span></td> <td class="article"><span>令字、画、表格等显示于下一行</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><HR></span></td> <td class="article"><span>○</span></td> <td class="article"><span>水平线</span></td> <td class="article"><span>插入一条水平线</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><CENTER></span></td> <td class="article"><span>●</span></td> <td class="article"><span>居中</span></td> <td class="article"><span>令字、画、表格等显示于中间</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><PRE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>预设格式</span></td> <td class="article"><span>令文件按照原始码的排列方式显示</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><DIV></span></td> <td class="article"><span>●</span></td> <td class="article"><span>区隔标记</span></td> <td class="article"><span>设定字、画、表格等的摆放位置</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><NOBR></span></td> <td class="article"><span>●</span></td> <td class="article"><span>不折行</span></td> <td class="article"><span>令文字不因太长而绕行</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><WBR></span></td> <td class="article"><span>●</span></td> <td class="article"><span>建议折行</span></td> <td class="article"><span>预设折行部位</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>字体标记</span></td> </tr> <tr> <td class="article"><span><STRONG></span></td> <td class="article"><span>●</span></td> <td class="article"><span>加重语气</span></td> <td class="article"><span>产生字体加粗 Bold 的效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><B></span></td> <td class="article"><span>●</span></td> <td class="article"><span>粗体标记</span></td> <td class="article"><span>产生字体加粗的效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><EM></span></td> <td class="article"><span>●</span></td> <td class="article"><span>强调标记</span></td> <td class="article"><span>字体出现斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><I></span></td> <td class="article"><span>●</span></td> <td class="article"><span>斜体标记</span></td> <td class="article"><span>字体出现斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><TT></span></td> <td class="article"><span>●</span></td> <td class="article"><span>打字字体</span></td> <td class="article"><span>Courier字体，字母宽度相同</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><U></span></td> <td class="article"><span>●</span></td> <td class="article"><span>加上底线</span></td> <td class="article"><span>加上底线</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><H1></span></td> <td class="article"><span>●</span></td> <td class="article"><span>一级标题标记</span></td> <td class="article"><span>变粗变大加宽，程度与级数反比</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><H2></span></td> <td class="article"><span>●</span></td> <td class="article"><span>二级标题标记</span></td> <td class="article"><span>将字体变粗变大加宽</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><H3></span></td> <td class="article"><span>●</span></td> <td class="article"><span>三级标题标记</span></td> <td class="article"><span>将字体变粗变大加宽</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><H4></span></td> <td class="article"><span>●</span></td> <td class="article"><span>四级标题标记</span></td> <td class="article"><span>将字体变粗变大加宽</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><H5></span></td> <td class="article"><span>●</span></td> <td class="article"><span>五级标题标记</span></td> <td class="article"><span>将字体变粗变大加宽</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><H6></span></td> <td class="article"><span>●</span></td> <td class="article"><span>六级标题标记</span></td> <td class="article"><span>将字体变粗变大加宽</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><FONT></span></td> <td class="article"><span>●</span></td> <td class="article"><span>字形标记</span></td> <td class="article"><span>设定字形、大小、颜色</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><BASEFONT></span></td> <td class="article"><span>○</span></td> <td class="article"><span>基准字形标记</span></td> <td class="article"><span>设定所有字形、大小、颜色</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><BIG></span></td> <td class="article"><span>●</span></td> <td class="article"><span>字体加大</span></td> <td class="article"><span>令字体稍为加大</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><SMALL></span></td> <td class="article"><span>●</span></td> <td class="article"><span>字体缩细</span></td> <td class="article"><span>令字体稍为缩细</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><STRIKE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>画线删除</span></td> <td class="article"><span>为字体加一删除线</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><CODE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>程式码</span></td> <td class="article"><span>字体稍为加宽如<TT></span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><KBD></span></td> <td class="article"><span>●</span></td> <td class="article"><span>键盘字</span></td> <td class="article"><span>字体稍为加宽，单一空白</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><SAMP></span></td> <td class="article"><span>●</span></td> <td class="article"><span>范例</span></td> <td class="article"><span>字体稍为加宽如<TT></span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><VAR></span></td> <td class="article"><span>●</span></td> <td class="article"><span>变数</span></td> <td class="article"><span>斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><CITE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>传记引述</span></td> <td class="article"><span>斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><BLOCKQUOTE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>引述文字区块</span></td> <td class="article"><span>缩排字体</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><DFN></span></td> <td class="article"><span>●</span></td> <td class="article"><span>述语定义</span></td> <td class="article"><span>斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><ADDRESS></span></td> <td class="article"><span>●</span></td> <td class="article"><span>地址标记</span></td> <td class="article"><span>斜体效果</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><SUB></span></td> <td class="article"><span>●</span></td> <td class="article"><span>下标字</span></td> <td class="article"><span>下标字</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><SUP></span></td> <td class="article"><span>●</span></td> <td class="article"><span>上标字</span></td> <td class="article"><span>指数（平方、立方等）</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>清单标记</span></td> </tr> <tr> <td class="article"><span><OL></span></td> <td class="article"><span>●</span></td> <td class="article"><span>顺序清单</span></td> <td class="article"><span>清单项目将以数字、字母顺序排列</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><UL></span></td> <td class="article"><span>●</span></td> <td class="article"><span>无序清单</span></td> <td class="article"><span>清单项目将以圆点排列</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><LI></span></td> <td class="article"><span>○</span></td> <td class="article"><span>清单项目</span></td> <td class="article"><span>每一标记标示一项清单项目</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><MENU></span></td> <td class="article"><span>●</span></td> <td class="article"><span>选单清单</span></td> <td class="article"><span>清单项目将以圆点排列，如<UL></span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><DIR></span></td> <td class="article"><span>●</span></td> <td class="article"><span>目录清单</span></td> <td class="article"><span>清单项目将以圆点排列，如<UL></span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><DL></span></td> <td class="article"><span>●</span></td> <td class="article"><span>定义清单</span></td> <td class="article"><span>清单分两层出现</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><DT></span></td> <td class="article"><span>○</span></td> <td class="article"><span>定义条目</span></td> <td class="article"><span>标示该项定义的标题</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><DD></span></td> <td class="article"><span>○</span></td> <td class="article"><span>定义内容</span></td> <td class="article"><span>标示定义内容</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>表格标记</span></td> </tr> <tr> <td class="article"><span><TABLE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表格标记</span></td> <td class="article"><span>设定该表格的各项参数</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><CAPTION></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表格标题</span></td> <td class="article"><span>做成一打通列以填入表格标题</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><TR></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表格列</span></td> <td class="article"><span>设定该表格的列</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><TD></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表格栏</span></td> <td class="article"><span>设定该表格的栏</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><TH></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表格标头</span></td> <td class="article"><span>相等于<TD>，但其内之字体会变粗</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>表单标记</span></td> </tr> <tr> <td class="article"><span><FORM></span></td> <td class="article"><span>●</span></td> <td class="article"><span>表单标记</span></td> <td class="article"><span>决定单一表单的运作模式</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><TEXTAREA></span></td> <td class="article"><span>●</span></td> <td class="article"><span>文字区块</span></td> <td class="article"><span>提供文字方盒以输入较大量文字</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><INPUT></span></td> <td class="article"><span>○</span></td> <td class="article"><span>输入标记</span></td> <td class="article"><span>决定输入形式</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><SELECT></span></td> <td class="article"><span>●</span></td> <td class="article"><span>选择标记</span></td> <td class="article"><span>建立 pop-up 卷动清单</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><OPTION></span></td> <td class="article"><span>○</span></td> <td class="article"><span>选项</span></td> <td class="article"><span>每一标记标示一个选项</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>图形标记</span></td> </tr> <tr> <td class="article"><span><IMG></span></td> <td class="article"><span>○</span></td> <td class="article"><span>图形标记</span></td> <td class="article"><span>用以插入图形及设定图形属性</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>连结标记</span></td> </tr> <tr> <td class="article"><span><A></span></td> <td class="article"><span>●</span></td> <td class="article"><span>连结标记</span></td> <td class="article"><span>加入连结</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><BASE></span></td> <td class="article"><span>○</span></td> <td class="article"><span>基准标记</span></td> <td class="article"><span>可将相对 URL 转绝对及指定连结目标</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>框架标记</span></td> </tr> <tr> <td class="article"><span><FRAMESET></span></td> <td class="article"><span>●</span></td> <td class="article"><span>框架设定</span></td> <td class="article"><span>设定框架</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><FRAME></span></td> <td class="article"><span>○</span></td> <td class="article"><span>框窗设定</span></td> <td class="article"><span>设定框窗</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><IFRAME></span></td> <td class="article"><span>○</span></td> <td class="article"><span>页内框架</span></td> <td class="article"><span>于网页中间插入框架</span></td> <td class="article"><span>IE</span></td> </tr> <tr> <td class="article"><span><NOFRAMES></span></td> <td class="article"><span>●</span></td> <td class="article"><span>不支援框架</span></td> <td class="article"><span>设定当浏览器不支援框架时的提示</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>影像地图</span></td> </tr> <tr> <td class="article"><span><MAP></span></td> <td class="article"><span>●</span></td> <td class="article"><span>影像地图名称</span></td> <td class="article"><span>设定影像地图名称</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><AREA></span></td> <td class="article"><span>○</span></td> <td class="article"><span>连结区域</span></td> <td class="article"><span>设定各连结区域</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>多媒体</span></td> </tr> <tr> <td class="article"><span><BGSOUND></span></td> <td class="article"><span>○</span></td> <td class="article"><span>背景声音</span></td> <td class="article"><span>于背景播放声音或音乐</span></td> <td class="article"><span>IE</span></td> </tr> <tr> <td class="article"><span><EMBED></span></td> <td class="article"><span>○</span></td> <td class="article"><span>多媒体</span></td> <td class="article"><span>加入声音、音乐或影像</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>其他标记</span></td> </tr> <tr> <td class="article"><span><MARQUEE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>走动文字</span></td> <td class="article"><span>令文字左右走动</span></td> <td class="article"><span>IE</span></td> </tr> <tr> <td class="article"><span><BLINK></span></td> <td class="article"><span>●</span></td> <td class="article"><span>闪烁文字</span></td> <td class="article"><span>闪烁文字</span></td> <td class="article"><span>NC</span></td> </tr> <tr> <td class="article"><span><ISINDEX></span></td> <td class="article"><span>○</span></td> <td class="article"><span>页内寻找器</span></td> <td class="article"><span>可输入关键字寻找于该一页</span></td> <td class="article"><span>反对</span></td> </tr> <tr> <td class="article"><span><META></span></td> <td class="article"><span>○</span></td> <td class="article"><span>开头定义</span></td> <td class="article"><span>让浏览器知道这是 HTML 文件</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><LINK></span></td> <td class="article"><span>○</span></td> <td class="article"><span>关系定义</span></td> <td class="article"><span>定义该文件与其他 URL 的关系</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article" colspan="5"><span>StyleSheet</span></td> </tr> <tr> <td class="article"><span><STYLE></span></td> <td class="article"><span>●</span></td> <td class="article"><span>样式表</span></td> <td class="article"><span>控制网页版面</span></td> <td class="article"><span> </span></td> </tr> <tr> <td class="article"><span><span></span></td> <td class="article"><span>●</span></td> <td class="article"><span>自订标记</span></td> <td class="article"><span>独立使用或与样式表同用</span></td> <td class="article"><span> </span></td> </tr> </tbody> </table> <p></p> <p><span>注： </span></p> <ul> <li><span>● 表示该标记属围堵标记，即需要关闭标记如 </标记>。 </span></li> <li><span>○ 表示该标记属空标记，即不需要关闭标记。 </span></li> <li><span>IE 表示该标记只适用于 Internet Explorer。 </span></li> <li><span>NC 表示该标记只适用于 Netscape Communicator。 </span></li> <li><span>反对表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支持，只是 HTML 标准中有其它同功能或更好的选择。 </span></li> <li><span>弃用表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特性，不用担心新浏览器不支援旧标记。 </span></li> <li><span>新表示该标记是 HTML 4.0 中新增的。 </span></li> </ul> <p> <br><span class="title">HTML语言剖析</span></p> <p>太平洋网络学院</p> <p class="green">文件标记</p> <p> </p> <table width="100%"> <tbody> <tr> <td class="article"><span><HTML> ； <HEAD> ； <TITLE> ； <BODY> </span> <p><span>欲明白本篇【HTML剖析】之标记分类请看【标记一览】。 <br>亦请先明白围堵标记与空标记的分别请看【HTML概念】。 </span></p> </td> </tr> <tr> <td class="article"> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ HTML 基本架构： </div> </td> </tr> <tr> <td class="article"><span>以下 HTML Source Code 便是一份 HTML 文件的基本架构：</span> <p> </p> <table width="60%"> <tbody> <tr> <td><span><HTML> <br><HEAD> </span> <dd> <span><TITLE> 网页的标题网页的内容，很多标记都作用于此

特点解说：

整份文件处于标记与之间。
用以声明这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。
文件分两部分，由至称为开头，至称本文。
基本上两者各有适用的标记，如只可出现于开头部分。 </span> <p> </p> </li> <li><span>开头部分用以存载重要资讯，而只有本文部分会被显示。 <br>所以大部分标记会运用于本文部分。 </span> <p> </p> </li> <li><span><TITLE>所标示的是文件的标题。 <br>会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题是需要的。 </span></li> </ul> <p><span>上述标记中只有<BODY>具参数设定。 </span></p> </td> </tr> <tr> <td class="article"> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <BODY> 之参数设定： </div> </td> </tr> <tr> <td class="article"><span>例子： </span> <p><span><BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed"> </span></p> <ul> <li><span>text="#000000" <br>用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text="black" 。各种颜色的值及名称可参考【调色原理】一节。 </span> <p> </p> </li> <li><span>link="#0000FF" <br>设定一般文字连结颜色。 </span> <p> </p> </li> <li><span>alink="#FF0000" <br>设定刚按下时文字连结颜色。 </span> <p> </p> </li> <li><span>vlink="#0000FF" <br>设定连结后的颜色。（被按过）。 </span> <p> </p> </li> <li><span>background="bg1.gif" <br>设定背景墙纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。 </span> <p> </p> </li> <li><span>bgcolor="#FFFFFF" <br>设定背景颜色。当己设定背景墙纸时会失去作用，除非墙纸有透明部分。 </span> <p> </p> </li> <li><span>leftmargin=2 <br>设定整份文件显示画面的左方边沿空间，单位为像素。『只适用于IE』 </span> <p> </p> </li> <li><span>topmargin=2 <br>设定整份文件显示画面的上方边沿空间。『只适用于IE』 </span> <p> </p> </li> <li><span>bgproperties="fixed" <br>固定背景墙纸，当卷动文字时墙纸不会跟著卷动。『只适用于IE』 </span></li> </ul> <p><span>标记及参数之字母大小都可以。其他如 onload 等事件将于【Java Script 剖析】介绍。 </span></p> </td> </tr> </tbody> </table> <br><span class="title">HTML语言剖析</span> <p></p> <p>太平洋网络学院</p> <p class="green">排版标记</p> <p> </p> <table width="100%"> <tbody> <tr> <td class="article"><span> ； <P> ； <BR> ； <HR> ； <CENTER> ； <PRE> ； <DIV> ； <NOBR> ； <WBR> ； </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的： </span> <ul> <li><span>为文中不同部份加上说明，方便日后修改。 <br>这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分做什么、那部分做什么。 <br>例子： <br> </span> <p> </p> </li> <li><span>用作版权声明。 <br>假如你不希望别人使用或复制你的网页，可加上警告字眼。 <br>例子： <br> </span></li> </ul> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <P> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><P>称为段落标记。作用：为字、画、表格等之间留一空白行。 </span> <p><span>本来<P>是一围堵标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要</P>作结尾。 </span></p> <p><span><P> 的常用参数：如：<p align="center"> </span></p> <ul> <li><span>align="center" <br>可选值：right, left, center。 <br>内定值： align="left" </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span>Here is the text for my paragraph. It does't matter how long it is, <br>how many space are between the words or when I decide to hit the return key. <br>It will create a new paragraph only when I begin the tag with another one. <br><P>Here's the next paragraph. </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p><span>Here is the text for my paragraph. It does't matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. </span></p> <p><span>Here's the next paragraph. </span></p> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <BR> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><BR>称为换行标记。作用：令字、画、表格等显示于下一行。 </span> <p><span>由于浏览器会自动忽略原始码中空白和换行的部分，这令到<BR>成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。 </span></p> <p><span>错误示范：（邮局可不会接受一行过的地址） </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span>566 E Boston Post RD <br>Mamaroneck NY 10543-9982 <br>United States of America </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td><span>566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America </span></td> </tr> </tbody> </table> <p></p> <p><span>正确例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span>566 E Boston Post RD <br><BR>Mamaroneck NY 10543-9982 <br><BR>United States of America </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td><span>566 E Boston Post RD <br>Mamaroneck NY 10543-9982 <br>United States of America </span></td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <HR> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><HR>称为水平线。作用：插入一条水平线。 </span> <p><span><HR> 之参数修改： <br>以： <HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> 为例。 </span></p> <ul> <li><span>align="LEFT" <br>设定线条置放位置，可选择：left；right；center 三种设定值。 </span> <p> </p> </li> <li><span>size="2" <br>设定线条厚度，以像素作单位，内定为 2。 </span> <p> </p> </li> <li><span>width="70%" <br>设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。 </span> <p> </p> </li> <li><span>color="#0000FF" 『只适用于IE』 <br>设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text="blue" 。 </span> <p> </p> </li> <li><span>noshade <br>设定线条为平面显示，若删去则具阴影或立体，这是内定值。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><HR> <br><HR align="LEFT" size="4"> <br><HR align="LEFT" size="2" width="70%" color="#0000FF" noshade> <br><HR align="LEFT" size="4" width="70" color="#008000"> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td><span> </span></td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <CENTER> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><CENTER>称为居中标记。作用：令字、画、表格等显示于中间。 </span> <p><span>这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align="CENTER" 的参数，<CENTER>似乎多馀了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有 align="CENTER" 参数的 <TABLE> 标记亦要不厌其烦地加上居中标记，因有狻多浏览器不支持<TABLE> 标记中的 align="CENTER" 参数。 </span></p> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><CENTER>Chris's First Homepage</CENTER> <br><CENTER>What's new</CENTER> <br><CENTER>My profile</CENTER> </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td> <span>Chris's First Homepage</span> <span>What's new</span> <span>My profile</span> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <PRE> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><PRE>称为预设格式标记。作用：令文件按照原始码的排列方式显示。 </span> <p><span>这标记允许保留你于原始码中输入的空白及 Return。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。 </span></p> <p><span>能以<PRE>标记产生对　效果，或产生多于一行的空白才算上乘！ </span></p> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td> <pre> <span><pre> Creation of Webpage Log Analysis I<br><br> Composer Learning 459 407 480 522 547 586 673<br> HTML Advanced 200 268 296 358 385 453 506</pre></span></pre> </td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <pre><span> Creation of Webpage Log Analysis I <br><br> Composer Learning 459 407 480 522 547 586 673<br> HTML Advanced 200 268 296 358 385 453 506</span></pre> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <DIV> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><DIV>称为区隔标记。作用：设定字、画、表格等的摆放位置。 </span> <p><span><DIV>应用于 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织能力，有 Class ; Style ; title ; ID 等属性，将会于【Style Sheet】一节才作详述，这处只介绍一个属性设定。 <br>以 <DIV align="center"> 为例： </span></p> <ul> <p> </p> <li><span>align="center" <br>可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 <br><DIV align="center"> 的作用和居中标记 <CENTER>一样，前者是由 HTML3.0 开始的标准，后者是通用己久的标示法。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><DIV align="center">Chris's First Homepage <br><br>What's new <br><br>My profile</DIV> </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td> <div> <span>Chris's First Homepage <br>What's new <br>My profile</span> </div> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <NOBR> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><NOBR>称为不折行标记。作用：令某些文字不因太长而绕行，一　显示于同一行或下一行。它对住址、数学算式、一行数字、程式码等尤为有用。 </span> <p><span>例子：（其中 Chris's Creation of Webpage 将不被分开而显示于同一行。） </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>码</span></td> <td><span>If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot. </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td><span>If you want to know how to create you own homepage quickly, don't miss Chris's Creation of Webpage which will help you a lot. </span></td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <WBR> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><WBR>称为建议折行标记。作用：预设折行部位。 <br>它没有侵犯到 <BR> 的责任，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。 </span> <p><span>例子：（若不加<WBR>标记，整个网址会显示于下一行。） </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span>Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/<WBR>Sector/8234/index.html There are many softwares for download. I think you will really love that place. </span></td> </tr> <tr> <td width="4%"><span>结果</span></td> <td><span>Please visit my other homepage which locate at http://www.geocities.com/SiliconValley/Sector/8234/index.html There are many softwares for download. I think you will really love that place</span></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> </li> <li> <p><span class="title">HTML语言剖析</span></p> <p>太平洋网络学院</p> <div class="green"> 字体标记 </div> <p> </p> <table width="100%"> <tbody> <tr> <td class="article"><span><STRONG> <B> <br><I> <EM> <VAR> <CITE> <DFN> <ADDRESS> <br><TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> <br><H1> <H2> <H3> <H4> <H5> <H6> <br><FONT> <BASEFONT> </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■实体标记与逻辑标记： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同的标记却有相同的效果。两者分别有以下两处： </span> <ol> <li><span>实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。 <br>例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介绍。 </span> <p> </p> </li> <li><span>多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。 <br>例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。 </span></li> </ol> <ul> <p> </p> <li><span>实体标记有： <br><I> <B> <U> </span></li> <li><span>逻辑标记有： <br><STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT> </span></li> </ul> <p><span>若要求真确的效果当然以实体标记为佳。 </span></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<STRONG> <B> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。 </span> <p><span>例子：（第一行是没有任何字体标记的，作对照之用） </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span>Creation of Webpage <br><br><STRONG>Creation of Webpage</STRONG> <br><br><B>Creation of Webpage</B> </span></td> <td><span>Creation of Webpage <br><strong>Creation of Webpage</strong> <br><strong>Creation of Webpage</strong> </span></td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这些标记于 Internet Explorer 都产生斜体效果，而只有 </DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。 </span> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span><I>Creation of Webpage</I> <br><br><EM>Creation of Webpage</EM> <br><br><VAR>Creation of Webpage</VAR> <br><br><CITE>Creation of Webpage</CITE> <br><br><DFN>Creation of Webpage</DFN> <br><ADDRESS>Creation of Webpage</ADDRESS> </span></td> <td><span><em>Creation of Webpage</em> <br><em>Creation of Webpage</em> <br>Creation of Webpage <br><cite>Creation of Webpage</cite> <br>Creation of Webpage </span> <span>Creation of Webpage</span> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>为方便对照及记认，所以把十个标记于在一起介绍。 </span> <ul type="square"> <li><span><TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。 </span></li> <li><span><U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。 </span></li> <li><span><STRIKE> 加上删除线的标记。 </span></li> <li><span><BIG> 令字体加大。 </span></li> <li><span><SMALL> 令字体变细。 </span></li> <li><span><SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。 </span></li> </ul> <p><span>例子：（第一行是没有任何字体标记的，作对照之用） </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span>Creation of Webpage <br><br><TT>Creation of Webpage</TT> <br><br><SAMP>Creation of Webpage</SAMP> <br><br><CODE>Creation of Webpage</CODE> <br><br><KBD>Creation of Webpage</KBD> <br><br><U>Creation of Webpage</U> <br><br><STRIKE>Creation of Webpage</STRIKE> <br><br><BIG>Creation of Webpage</BIG> <br><br><SMALL>Creation of Webpage</SMALL> <br><br>12345<SUB>7</SUB> 6789<SUP>9</SUP> </span></td> <td><span>Creation of Webpage <br>Creation of Webpage <br>Creation of Webpage <br><code>Creation of Webpage</code> <br>Creation of Webpage <br><u>Creation of Webpage</u> <br> <strike> Creation of Webpage </strike> <br>Creation of Webpage <br><small>Creation of Webpage</small> <br>12345<sub>7</sub> 6789<sup>9</sup> </span></td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<H1> <H2> <H3> <H4> <H5> <H6>： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。 </span> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><H1>Header Level 1</H1> <br><H2>Header Level 2</H2> <br><H3>Header Level 3</H3> <br><H4>Header Level 4</H4> <br><H5>Header Level 5</H5> <br><H6>Header Level 6</H6> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <h1>Header Level 1</h1> <h2>Header Level 2</h2> <h3>Header Level 3</h3> <h4>Header Level 4</h4> <h5>Header Level 5</h5> <h6>Header Level 6</h6> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<FONT> <BASEFONT>： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、字形及颜色，但各有用处，且看以下比较： </span> <ul> <li><span><BASEFONT> 可以用于文件的开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。 <br><FONT> 是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响所标示的字句，是一个围堵标记。 </span></li> <li><span>两标记可同时存在，唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影响，而 <FONT> 本身亦受 <BASEFONT> 的影响。 </span></li> </ul> <p><span><FONT>的参数设定： <br>例子： <font face="Arial" size="+2" color="#008000">Creation of Webpage</font> </span></p> <p> </p> <ul type="square"> <li><span>face="Arial" <br>设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记所指明的任何中文字形。 </span></li> <li><span>size="+2" <br>设定文字的大小。其值可以是绝对或相对， <br>绝对的意思便是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如 <br>size="5" 表示其大小便是 5，而html内定值为 3，即 size="3"和没有设定是一样的。 <br>相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size="+2" 便等同绝对表示法的 size="5"，但若已设定 <BASEFONT size="n"> 则其实际大小便是 n+2 不再是 3+2 了。<BASEFONT>只有绝对表示法。 </span></li> <li><span>color="#008000" <br>设定文字的颜色。#008000 表示绿色</span> </li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><font size="+1">I love Creation of Webpage</font> <br><br><font size="+2" color="#800080">I love Creation of Webpage</font> <br><br><font face="Times New Roman" size="5" color="#008000">I love Creation of Webpage</font> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td>I love Creation of Webpage <br>I love Creation of Webpage <br>I love Creation of Webpage</td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> </li> <li> <p><span class="title">HTML语言剖析</span></p> <p>太平洋网络学院</p> <div class="green"> 清单标记 </div> <p> </p> <table width="100%"> <tbody> <tr> <td class="article"><span><OL> <LI> <br><UL> <br><MENU> <DIR> <br><DL> <DT> <DD> </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <OL> <LI> : </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><OL>称为顺序清单标记。<LI>则用以标示清单项目。 <br>所谓顺序清单就是在每一项前面加上 1,2,3... 等数目，又称编号清单。 </span> <p><span><OL> 的参数设定（常用）： <br>例如： <ol type="i" start="4"></ol></span> </p> <p> </p> <table width="100%"> <tbody> <tr> <td class="article" width="50%"> <ul> <li><span>type="i" <br>设定数目款式，其值有五种，请参考右表，内定为 type="1"。 </span></li> <li><span>start="4" <br>设定开始数目，不论设定了哪一数目款式，其值只能是 1,2,3.. 等整数，内定为 start="1"。 </span></li> </ul> </td> <td width="50%"> <table width="100%"> <tbody> <tr> <th><span>Type</span></th> <th colspan="2"><span>Numbering style</span></th> </tr> <tr> <td><span>1</span></td> <td><span>arabic numbers</span></td> <td><span>1, 2, 3, ...</span></td> </tr> <tr> <td><span>a</span></td> <td><span>lower alpha</span></td> <td><span>a, b, c, ...</span></td> </tr> <tr> <td><span>A</span></td> <td><span>upper alpha</span></td> <td><span>A, B, C, ...</span></td> </tr> <tr> <td><span>i</span></td> <td><span>lower roman</span></td> <td><span>i, ii, iii, ...</span></td> </tr> <tr> <td><span>I</span></td> <td><span>upper roman</span></td> <td><span>I, II, III, ...</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p></p> <p><span><LI> 的参数设定（常用）： <br>例如： <li type="square" value="4"> </span></p> <ul> <li><span>type="square" <br>只适用于非顺序清单，设定符号款式，其值有三种，如下，内定为 type="disc"： <br>符号是当 type="disc" 时的列项符号。 <br>符号 if" width=10 height=10 border=0> 是当 type="circle" 时的列项符号。 <br>符号是当 type="square" 时的列项符号。 </span></li> <li><span>value="4" <br>只适用于顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增，但前面各项则不受影响，其值只能是 1,2,3.. 等整数，没有内定值。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span>My best friends: <br><ol> <br><li>Michelle Wei <br><li>Michael Wan <br><li>Gloria Lam <br></ol> </span></td> <td><span>My best friends: </span> <ol> <li><span>Michelle Wei </span></li> <li><span>Michael Wan </span></li> <li><span>Gloria Lam </span></li> </ol> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <UL> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><UL>称为无序清单标记。 <br>所谓无序清单就是在每一项前面加上、、等符号，故又称符号清单。 </span> <p><span><UL> 的参数设定（常用）： <br>例如： <UL type="square"> </span></p> <ul> <li><span>type="square" <br>设定符号款式，其值有三种，如下，内定为 type="disc"： <br>符号是当 type="disc" 时的列项符号。 <br>符号是当 type="circle" 时的列项符号。 <br>符号是当 type="square" 时的列项符号。 </span></li> </ul> <p><span>注意：由于 <UL> 及 <LI> 都有 type 这个参数，两者尽可能选用其一。 </span></p> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span>My Homepages: <br><ul> <br><li>Penpals Garden <br><li>ICQ Garden <br><li>Software City <br><li>Creation of Webpage <br></ul> </span></td> <td><span>My Homepages: </span> <ul> <li><span>Penpals Garden </span></li> <li><span>ICQ Garden </span></li> <li><span>Software City </span></li> <li><span>Creation of Webpage </span></li> </ul> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <MENU> <DIR> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这两个标记都不为 W3C 所赞同，希望用者能以 <ul> 及 <ol> 代之。 <br><MENU> 及 <DIR>，基本上它和 <ul> 是一样的，在一些特别的浏览器可能表现出 <ol> 的效果，于旧版的 IE 或 NC 标记 <DIR> 不显示符号或数目。两标记的用法与 <ul> 完全一样。 </span> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td><span>HTML Source Code （原始码）</span></td> <td><span>浏览器显示结果</span></td> </tr> <tr> <td><span>My Homepages: <br><dir> <br><li>Penpals Garden <br><li>ICQ Garden <br><li>Software City <br><li>Creation of Webpage <br></dir> </span></td> <td><span>My Homepages: </span> <li><span>Penpals Garden </span></li> <li><span>ICQ Garden </span></li> <li><span>Software City </span></li> <li><span>Creation of Webpage </span></li> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <DL> <DT> <DD> : </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><DL>称为定义清单标记。 <DT> 用以标示定义条目，<DD> 则用以标示定义内容。 <br>所谓定义清单就是一种分二层的项目清单，其不故符号及数目。 </span> <p><span>三个标记都没有常用的参数。而 <DT> <DD> 可以独立使用，只是一些旧的浏览器并不支援，如 IE 3.0。常用的如 <DD> 标记可用以制造段落第一个字前面的空白。 </span></p> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><dl> <br><dt>How to use Definition List <br><dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. <br><dt>Other things to know <br><dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. <br></dl> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <dl> <dt> <span>How to use Definition List </span> </dt> <dd> <span>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML. </span> </dd> <dt> <span>Other things to know </span> </dt> <dd> <span>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags. </span> </dd> </dl></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <br><span class="title">HTML语言剖析</span><p></p> <p>太平洋网络学院</p> <div class="green"> 表格标记 </div> <p> </p> <table width="100%"> <tbody> <tr> <td class="article"><span><TABLE> <TR> <TD> <br><TH> <br><CAPTION> </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <TABLE> <TR> <TD> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span>这三个标记是定义表格的最重要的标记，可以说只学这三个己足够。 <br><TABLE>是一个容器标记，意思是说它用以声明这是表格而且其他表格标记只能在他的范围内才适用，属容器标记的还有其他。 <br><TR>用以标示表格列（row） <br><TD>用以标示储存格（cell） </span> <p><span><TABLE> 的参数设定（常用）： <br>例如： <table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"></span> </p> <p> </p> <ul> <li><span>width="400" <br>表格宽度，接受绝对值（如 80）及相对值（如 80%）。 </span> <p> </p> </li> <li><span>border="1" <br>表格边框厚度，不同浏览器有不同的内定值，故请指明。 </span> <p> </p> </li> <li><span>cellspacing="2" <br>表格格线厚度，请看例子三，那是加厚到 5 的格线。 </span> <p> </p> </li> <li><span>cellpadding="2" <br>文字与格线的距离，请看例子四，那是加至 10 的 padding。 </span> <p> </p> </li> <li><span>align="CENTER" <br>表格的摆放位置（水平），可选值为： left, right, center，请看例子五或六，那表格是放于中间的，为怕一些浏览器不支援，故特加上居中标记<CENTER>，只是多层保证而己，当然只用<CENTER>亦可。 </span> <p> </p> </li> <li><span>valign="TOP". <br>表格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 </span> <p> </p> </li> <li><span>background="myweb.gif" <br>表格　纸，与 bgcolor 不要同用。 </span> <p> </p> </li> <li><span>bgcolor="#0000FF" <br>表格底色，与 background 不要同用，请看例子六。 </span> <p> </p> </li> <li><span>bordercolor="#FF00FF" <br>表格边框颜色，NC 与 IE 有不同的效果，请看例子六。 </span> <p> </p> </li> <li><span>bordercolorlight="#00FF00" <br>表格边框向光部分的颜色，请看例子二。『只适用于 IE』 </span> <p> </p> </li> <li><span>bordercolordark="#00FFFF" <br>表格边框背光部分的颜色，请看例子二，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 </span> <p> </p> </li> <li><span>cols="2" <br>表格栏位数目，只是让浏览器在下载表格是先画出整个表格而己。 </span></li> </ul> <p><span><TR> 的参数设定（常用）： <br>例如：<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> </span></p> <ul> <li><span>align="RIGHT" <br>该一列内字画等的摆放贴　位置（水平），可选值为： left, center, right。 </span> <p> </p> </li> <li><span>valign="MIDDLE" <br>该一列内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 </span> <p> </p> </li> <li><span>bgcolor="#0000FF" <br>该一列底色，请看例子五。 </span> <p> </p> </li> <li><span>bordercolor="#FF00FF" <br>该一列边框颜色，请看例子三。『只适用于 IE』 </span> <p> </p> </li> <li><span>bordercolorlight="#808080" <br>该一列边框向光部分的颜色，请看例子三。『只适用于 IE』 </span> <p> </p> </li> <li><span>bordercolordark="#FF0000" <br>该一列边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 </span></li> </ul> <p><span><TD> 的参数设定（常用）： <br>例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> </span></p> <ul> <li><span>width="48%" <br>该一储存格宽度，接受绝对值（如 80）及相对值（如 80%）。 </span> <p> </p> </li> <li><span>height="400" <br>该一储存格高度。 </span> <p> </p> </li> <li><span>colspan="5" <br>该一储存格向右打通的栏数。请看例子六 </span> <p> </p> </li> <li><span>rowspan="4" <br>该一储存格向下打通的列数。请看例子六 </span> <p> </p> </li> <li><span>align="RIGHT" <br>该一储存格内字画等的摆放贴　位置（水平），可选值为： left, center, right。 </span> <p> </p> </li> <li><span>valign="BOTTOM" <br>该一储存格内字画等的摆放贴　位置（垂直），可选值为： top, middle, bottom。 </span> <p> </p> </li> <li><span>bgcolor="#FF00FF" <br>该一储存格底色，请看例子四。 </span> <p> </p> </li> <li><span>bordercolor="#808080" <br>该一储存格边框颜色，请看例子三。『只适用于 IE』 </span> <p> </p> </li> <li><span>bordercolorlight="#FF0000" <br>该一储存格边框向光部分的颜色，请看例子三。『只适用于 IE』 </span> <p> </p> </li> <li><span>bordercolordark="#00FF00" <br>该一储存格边框背光部分的颜色，请看例子三，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。『只适用于 IE』 </span> <p> </p> </li> <li><span>background="myweb.gif" <br>该一储存格　纸，与 bgcolor 任用其一。 </span></li> </ul> <p><span>例子一： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><table width="60%" border="1"> <br><tr><td>只有一个储存格（cell）的表格</td></tr> <br></table> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="60%"> <tbody> <tr> <td><span>只有一个储存格（cell）的表格</span></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> <p><span>例子二： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><table width="60%" border="5" bordercolorlight="#FF00FF" bordercolordark="#FF0000"> <br><tr><td>第一列第一栏</td><td>第一列第二栏</td></tr> <br></table> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="60%"> <tbody> <tr> <td><span>第一列第一栏</span></td> <td><span>第一列第二栏</span></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> <p><span>例子三： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><table width="60%" border="1" cellspacing="5"> <br> <tr bordercolor="#0000FF"> </span> <dd> <span><td>第一列第一栏</td> </span> </dd> <dd> <span><td>第一列第二栏</td> <br> </tr> <br> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> </span> </dd> <dd> <span><td>第二列第一栏</td> </span> </dd> <dd> <span><td>第二列第二栏</td> <br> </tr> <br></table> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="60%"> <tbody> <tr> <td><span>第一列第一栏</span></td> <td><span>第一列第二栏</span></td> </tr> <tr> <td><span>第二列第一栏</span></td> <td><span>第二列第二栏</span></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> <p><span>例子四： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><table width="60%" border="1" cellpadding="10"> <br> <tr> </span> <dd> <span><td bgcolor="#FFCCE6">第一列第一栏</td> </span> </dd> <dd> <span><td bgcolor="#FFFFC6">第一列第二栏</td> <br> </tr> <br> <tr> </span> </dd> <dd> <span><td bgcolor="#FFD9FF">第二列第一栏</td> </span> </dd> <dd> <span><td bgcolor="#DAB4B4">第二列第二栏</td> <br> </tr> <br></table> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="60%"> <tbody> <tr> <td><span>第一列第一栏</span></td> <td><span>第一列第二栏</span></td> </tr> <tr> <td><span>第二列第一栏</span></td> <td><span>第二列第二栏</span></td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> <p><span>例子五： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><center> <br><table width="60%" cellspacing="0" cellpadding="2" align="CENTER"> <br> <tr> </span> <dd> <span><td bgcolor="#FFD2E9">第一列第一栏</td> </span> </dd> <dd> <span><td bgcolor="#FFDAB5">第一列第二栏</td> </span> </dd> <dd> <span><td bgcolor="#FFFFB5">第一列第三栏</td> <br> </tr> <br> <tr bgcolor="#C0C0C0"> </span> </dd> <dd> <span><td>第二列第一栏</td> </span> </dd> <dd> <span><td>第二列第二栏</td> </span> </dd> <dd> <span><td>第二列第三栏</td> <br> </tr> <br></table> <br></center> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="60%"> <tbody> <tr> <td><span>第一列第一栏</span></td> <td><span>第一列第二栏</span></td> <td><span>第一列第三栏</span></td> </tr> <tr> <td><span>第二列第一栏</span></td> <td><span>第二列第二栏</span></td> <td><span>第二列第三栏</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p></p> <p><span>例子六 </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><center> <br><table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#FFC4E1" bordercolor="#0000FF"> <br> <tr> </span> <dd> <span><td>第一列第一栏</td> </span> </dd> <dd> <span><td colspan="2">第一列之第二栏及第三栏</td> <br> </tr> <br> <tr> </span> </dd> <dd> <span><td rowspan="2">第二列及第三列之第一栏</td> </span> </dd> <dd> <span><td>第二列第二栏</td> </span> </dd> <dd> <span><td>第二列第三栏</td> <br> </tr> <br> <tr> </span> </dd> <dd> <span><td>第三列第二栏</td> </span> </dd> <dd> <span><td>第三列第三栏</td> <br> </tr> <br></table> <br></center> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="350"> <tbody> <tr> <td><span>第一列第一栏</span></td> <td colspan="2"><span>第一列之第二栏及第三栏</span></td> </tr> <tr> <td rowspan="2"><span>第二列及第三列之第一栏</span></td> <td><span>第二列第二栏</span></td> <td><span>第二列第三栏</span></td> </tr> <tr> <td><span>第三列第二栏</span></td> <td><span>第三列第三栏</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <TH> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><TH>与<TD>同样是标示一个储存格，唯一不同的是<TH>所标示的储存格中的文字是以粗体出现，通常用于表格第一列以标示栏目。它的用法是取代<TD>的位置便可以，其参数设定请参考<TD>。 <br>当然若为<TD>所标示的储存格中的文字加上粗体标记<B>便等如<TH>的效果。 </span> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><center> <br><table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <br> <tr align="CENTER"> </span> <dd> <span><th>Month</th><th>% of IE visitor</th><th>% of NC visitor</th> <br> </tr> <br> <tr align="CENTER"> </span> </dd> <dd> <span><td>August</td><td>61%</td><td>39%</td> <br> </tr> <br> <tr align="CENTER"> </span> </dd> <dd> <span><td>July</td><td>54%</td><td>46%</td> <br> </tr> <br> <tr align="CENTER"> </span> </dd> <dd> <span><td>June</td><td>52%</td><td>48%</td> <br> </tr> <br></table> <br></center> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="350"> <tbody> <tr> <th><span>Month</span></th> <th><span>% of IE visitor</span></th> <th><span>% of NC visitor</span></th> </tr> <tr> <td><span>August</span></td> <td><span>61%</span></td> <td><span>39%</span></td> </tr> <tr> <td><span>July</span></td> <td><span>54%</span></td> <td><span>46%</span></td> </tr> <tr> <td><span>June</span></td> <td><span>52%</span></td> <td><span>48%</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <CAPTION> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><CAPTION> 的作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。当然亦可置于下方，通常用以存放该表格的标题。 </span> <p><span><CAPTION> 的参数设定（常用）： <br>例如：<caption align="TOP" valign="TOP"></caption> </span></p> <ul> <li><span>align="TOP" <br>该表格标题列相对于表格的摆放贴　位置（水平），可选值为： left, center, right, top, middle, bottom，若 align="bottom" 的话标题列便会出现对表格的下方，不管你的原始码中把 <caption> 放在 <table> 中的头部或尾部。 </span> <p> </p> </li> <li><span>valign="TOP" <br>该表格标题列相对于表格的摆放位置（上下），可选值为： top, bottom。和 align="TOP" 或 align="BOTTOM" 是一样的，虽然功能重复了，但如果你要标题列置于下方及向右或向左贴　，那末两个参数便可一　用了。当只　一个参数时，请首选 align，因为 valign 是由 HTML 3.0 才开始的参数。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><center> <br><table width="350" border="1" cellspacing="0" cellpadding="2" align="CENTER"> <br><caption>网页速成八月份访客浏览器使用分析</caption> <br> <tr align="CENTER"> </span> <dd> <span><th>Month</th> </span> </dd> <dd> <span><th>% of IE visitor</th> </span> </dd> <dd> <span><th>% of NC visitor</th> <br> </tr> <br> <tr align="CENTER"> </span> </dd> <dd> <span><td>August</td> </span> </dd> <dd> <span><td>61%</td> </span> </dd> <dd> <span><td>39%</td> <br> </tr> <br></table> <br></center> </span> </dd></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <p> </p> <table width="350"> <caption> <span>网页速成八月份访客浏览器使用分析</span> </caption> <tbody> <tr> <th><span>Month</span></th> <th><span>% of IE visitor</span></th> <th><span>% of NC visitor</span></th> </tr> <tr> <td><span>August</span></td> <td><span>61%</span></td> <td><span>39%</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <p></p> </li> <li> <p><span class="title">HTML语言剖析</span></p> <p>太平洋网络学院</p> <p class="green">表单标记</p> <p> </p> <table width="100%"> <tbody class="article"> <tr> <td class="article"><span><FORM> <INPUT> <br>INPUT 的种类： Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。 <br><SELECT> <OPTION> <br><TEXTAREA> </span></td> </tr> <tr> <td class="article"> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ 引子 </div> </td> </tr> <tr> <td class="article"><span>表单的用处很多，于网上无处不见，当然是配合 CGI 使用为佳，所以馈下有意使用或学习 CGI 的话，表单设计见必需的，这一节介绍的标记不多，但其参数变化很多。一份表单的基本架构是：在 <FORM> 标记的包围下加上一种或以上的表单输入方式及一个或以上的按键。 </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■<FORM> <INPUT> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><FORM>称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。 </span> <p><span><FORM> 的参数设定（常用）： <br>例如： <form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> </span></p> <ul> <li><span>action="http://your.isp.com/cgi-local/example.cgi" <br>表单通常是与 CGI 配合使用的，参数 action 便是用以指明该 CGI 程式的位置，这样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可设定此参数为 ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至此电邮地址（红色部分）。 </span></li> <li><span>method="POST" <br>传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜找器用的是 GET。 </span></li> </ul> <p><span><INPUT> 的参数设定（常用）： <br>由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 </span></p> <ul> <li><span>type="Text" <br>可选值为 Text, Radio,Checkbox, Password, Submit/Reset, Image, File, Hidden, Button。 </span></li> </ul> <span>输入方式一： Text （单行文字盒） </span> <p><span>例如<input type="Text" name="age" value="20" align="MIDDLE" size="2" maxlength="255"> </span></p> <ul> <li><span>type="Text" <br>输入方式为 Text，能产生一单行文字盒，上限为 255 字元。 </span></li> <li><span>name="age" <br>此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料，虽说可随便命名，但通常 CGI 程式中都有指定名称，若转用其它名称便需要修改该 CGI 程式了，名称可为没空白没特别符号的英文或数字，有大小写的分别，可以写成 Your_Age，若有访客于此表单此一文字盒填入 40 的话，那末传给 CGI 的字串便是 Your_Age=40。 </span></li> <li><span>value="20" <br>此一单行文字盒内定值。若不填写则文字盒是空白的，等待访客亲自键入，若 value="20" 的话， 20 便会出现在文字盒中，当然访客可以修改之。 </span></li> <li><span>align="MIDDLE" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。 </span></li> <li><span>size="2" <br>此一单行文字盒显示的长度，若馈下是采用 Big5 编码的中文网页便要小心，同 size 的文字盒 NC 会显示得比 IE 狻长。 </span></li> <li><span>maxlength="255" <br>此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br>请填入电话号码：<input type="Text" name="phone" value="" size="10" maxlength="8"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span>请填入电话号码： </span></td> </tr> </tbody> </table> <p></p> <span>输入方式二： Radio （单一选择） </span> <p><span>例如：<input type="Radio" name="gender" value="female" align="MIDDLE" checked> </span></p> <ul> <li><span>type="Radio" <br>输入方式为 Radio，能产生一单一选择，以供点选。 </span></li> <li><span>name="gender" <br>此一 Radio 名称，参考 Text 部分的说明。 </span></li> <li><span>value="female" <br>内定值。每一个 radio 必须及仅有一个 value，通常有同时采用两个或以上同 name 不同 value 的 Radio 输入方式，可让使用使任选其一。 </span></li> <li><span>align="MIDDLE" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 </span></li> <li><span>checked <br>设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这参数。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br>请选性别： <br><input type="Radio" name="gender" value="Female">女性 <br><input type="Radio" name="gender" value="Male" checked>男性 <br><br>你喜欢吗： <br><input type="Radio" name="like" value="Yes">喜欢 <br><input type="Radio" name="like" value="No">不喜欢 <br><input type="Radio" name="like" value="NotSure">不肯定 <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span>请选性别：女性男性 <br>你喜欢吗：喜欢不喜欢不肯定 </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式三： Checkbox （确认盒） </span> <p><span>例如：<input type="Checkbox" name="idol" value="Leon" align="RIGHT" checked> </span></p> <ul> <li><span>type="Checkbox" <br>输入方式为 Checkbox，能产生一确认盒，以供剔选。 </span></li> <li><span>name="idol" <br>此一 Checkbox 名称，参考 Text 部分的说明。 </span></li> <li><span>value="Leon" <br>内定值。每一个 Checkbox 必须及仅有一个 value，当被剔选时这值便会传及 CGI，例如所传字串 idol=Leon 。 </span></li> <li><span>align="RIGHT" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 </span></li> <li><span>checked <br>设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这参数，不像 Radio。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br>你喜欢以下那些明星： <br><br><input type="Checkbox" name="idol01" value="Leon">黎明 <br><input type="Checkbox" name="idol02" value="Noriko_Sagai">酒井法子 <br><input type="Checkbox" name="idol03" value="Leon">郑秀文 <br><input type="Checkbox" name="idol04" value="BonJovi" checked>BonJovi <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span>你喜欢以下那些明星： <br> 黎明酒井法子郑秀文 BonJovi </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式四： Password （密码输方盒） </span> <p><span>例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"> </span></p> <ul> <li><span>Password 的其他参数和 Text 是完全相同的，请参考 Text 的介绍。 <br>两者作用不同，Password 所输入的字元全以 * 号表示。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br>请输入姓名：<input type="Text" name="name"> <br><br>请输入密码：<input type="Password" name="pw" maxlength="9"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span>请输入姓名： <br>请输入密码： </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式五： Submit （传送键）及 Reset （清除键） </span> <p><span>这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。 </span></p> <p><span>例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE"> <br><input type="Reset" value="清除" align="MIDDLE"> </span></p> <ul> <li><span>type="Submit" <br>设定输入方式为 Submit 或 Reset。 </span></li> <li><span>name="other_funtion" <br>Submit 的功能随 name 的不同而不同，须和 CGI 配合。若你只需要普通的传送键，则是其内定，不必用此参数。 </span></li> <li><span>value="确定" <br>这个值不是输给 CGI 的，而是显示在按键上，可以不用，传送键的内定值为 Submit Query，清除键的内定值为 Reset。 </span></li> <li><span>align="MIDDLE" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br><input type="Submit"><input type="Reset"> <br><br><input type="Submit" value=" 确定 "><input type="Reset" value="清除"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> <br> </div> </td> </tr> </tbody> </table> <p></p> <span>输入方式六： Image （图片按键） </span> <p><span>这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便容许你采用自已制造的按键。 </span></p> <p><span>例如：<input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> </span></p> <ul> <li><span>type="Image" <br>输入方式为 Image。 </span></li> <li><span>name="submit" <br>所要代表的按键，可以是 submit, reset, 或其它。 </span></li> <li><span>align="BOTTOM" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 </span></li> <li><span>src="ex_icon.gif" <br>按键图片来源，若此图片文件不与该 html 文件在同一目录下，请加上相对或绝对途径。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br><input type="Image" name="submit" align="BOTTOM" src="ex_icon.gif"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span> </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式七： File </span> <p><span>例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html"> </span></p> <ul> <li><span>input type="File" <br>输入方式为 Image。通常用以传输文件。 </span></li> <li><span>name="upload" <br>这文件传输的名称，用以识别之用。 </span></li> <li><span>align="BOTTOM" <br>可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 </span></li> <li><span>size="20" <br>所显示文字盒的长度。 </span></li> <li><span>maxlength="100" <br>可输入字元的上限。 </span></li> <li><span>accept="text/html" <br>所接受的文件类别，有二十六种选择，但可不设定。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br><type="File" name="upload" size="30" maxlength="100" accept="text/html"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span> </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式八： Hidden </span> <p><span>例如：<input type="Hidden" name="ID" value="6618"> </span></p> <ul> <li><span>type="Hidden" <br>输入方式为隐藏或内定。它不会显示任何输入介面，而是一个内定值随表单一起传给 CGI，列如由 CGI 产生的会员号码，或传入可更改的参数以调整 CGI 而避免修改 CGI 程式码。 </span></li> <li><span>name="ID" <br>这文件传输的名称，用以识别之用。 </span></li> <li><span>value="6618" <br>内定值，会以如 ID=6618 形式传给 CGI。 </span></li> </ul> <p><span>例子：（"Hidden" 是不被显示的，所以这处多放了一个 "Submit" 键，表示 Hidden 之内定值会随 submit 键被按而传给 CGI） </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br><input type="Hidden" name="ID" value="6618"> <br><input type="Submit" value="Submit"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span> </span> </td> </tr> </tbody> </table> <p></p> <span>输入方式九： Button </span> <p><span>例如：<input type="Button" name="useless" value="Back"> </span></p> <ul> <li><span>type="Button" <br>输入方式为一般按键。常配合 Java Script 作为其启动按键。 </span></li> <li><span>name="useless" <br>这文件传输的名称，用处不大。 </span></li> <li><span>value="Back" <br>按键显示名称。 </span></li> </ul> <p><span>例子：其中 οnclick="history.go( -1 );return true; 属 JAVA 事件。 </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form> <br><input type="Button" value="回前一页" οnclick="history.go( -1 );return true;"> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <span> </span> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <SELECT> <OPTION> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><SELECT>是卷动选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标记使用都可以。 </span> <p><span><SELECT> 的参数设定（常用）： <br>例如： <select name="where" size="6" multiple> </span></p> <ul> <li><span>name="where" <br>这卷动选单的名称，作识别之用，将会传及 CGI。 </span></li> <li><span>size="6" <br>这卷动选单的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效果。 </span></li> <li><span>multiple <br>令这卷动选单容许多重选择。 </span></li> </ul> <p><span><OPTION> 的参数设定（常用）： <br>例如： <option value="tw" selected> </span></p> <ul> <li><span>value="tw" <br>这选项的值，将会传及 CGI。请自行修改，但不同选项必须有不同的值。 </span></li> <li><span>selected <br>设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。 </span></li> </ul> <p><span>例子一：（普通 POP UP 卷动选单）</span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <br><select name="where"> <br><option value="hk">Hong Kong</option> <br><option value="tw" selected>Taiwan</option> <br><option value="cn">China</option> <br><option value="us">United States</option> <br><option value="ca">Canada</option> <br></select> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> Where you com from? <br> Hong Kong Taiwan China United States Canada </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子二：（容许多重选择的卷动选单）</span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <br><select name="where" multiple> <br><option value="hk">Hong Kong</option> <br><option value="tw" selected>Taiwan</option> <br><option value="cn">China</option> <br><option value="us">United States</option> <br><option value="ca">Canada</option> <br></select> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> Where you com from? <br> Hong Kong Taiwan China United States Canada </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子三：（设定了 Size 的卷动选单）</span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> Where you com from? <br><select name="where" size="5"> <br><option value="hk">Hong Kong</option> <br><option value="tw" selected>Taiwan</option> <br><option value="cn">China</option> <br><option value="us">United States</option> <br><option value="ca">Canada</option> <br></select> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> Where you com from? <br> Hong Kong Taiwan China United States Canada </div> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <TEXTAREA> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> <span><TEXTAREA>是表单文字区块标记，常用于 bug report, feedback 等需要填写大量资料的用途。 </span> <p><span><TEXTAREA> 的参数设定（常用）： <br>例如： <textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"> </span></p> <ul> <li><span>name="comments" <br>这文字区块的名称，作识别之用，将会传及 CGI。 </span></li> <li><span>cols="40" <br>这文字区块的宽度，请自行修改。 </span></li> <li><span>rows="4" <br>这文字区块的列数，即其高度，请自行修改。 </span></li> <li><span>wrap="VIRTUAL" <br>设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。 </span></li> </ul> <p><span>例子： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><form action="http://your.isp.com/cgi-local/example.cgi" method="POST"> <br>Give comments: <br><textarea name="comments" cols="40" rows="4" wrap="VIRTUAL"> <br>这是预设的字句，通常留空的，随你喜欢。</textarea> <br></form> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> Give comments: <br> 这是预设的字句，通常留空的，随你喜欢。 </div> </td> </tr> </tbody> </table> <p></p> <p> </p> </td> </tr> </tbody> </table> <br><span class="title">HTML语言剖析</span><p></p> <p>太平洋网络学院</p> <p class="green">链接标记</p> <p> </p> <table width="478"> <tbody> <tr> <td class="article"><span><A> <br><BASE> </span></td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <A> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><A> 称连结标记，由 <A> 与 </A> 所围的文字、图片等等可以成为一个连结。 </span> <p><span><A> 的一般参数设定： </span></p> <p><span>例如 <a href="index.html" name="hello" target="_top"> </span></p> <ul> <li><span>href="index.html" <br>这参数不能与另一参数 name 同时使用，使用这参数才能造成可按的连结。 </span> <ul> <li><span><strong>当作为一外部连结时：</strong> href 所设定的是该连结所要连到的文件名称，若该文件与此 html 档不是同在一目录请加上适当的路径，相对绝对皆可。 </span></li> <li><span><strong>当作为一内部连结时：</strong> href 所设定的是该连结所要连到的同文件内参考点或指定文件之参考点，且不　要包围任何字画只　加上结束标示 </a>便可以，例如 <a href="#there"></a> 、 <a href="index.html#there"></a> 及 <a href="http://www.school.net.hk/~chris55/index.html#there"></a> 其中 there 便是参考点，并　於其前加上符号 # 以作识别，参考点由下一个参数 name 事先於文件中埋下。 </span></li> </ul> <p> </p> </li> <li><span>name="hello" <br>这参数是为文件埋下参考点，作为被连结，不会被显示。所以说造成一个内部连结　要使用两次 <A> 连结标记。一个使用参数 name 事先於文件中埋下一参考点，另一个使用参数 href 连到这个参考点。 </span> <p> </p> </li> <li><span>target="_top" <br>设定连结被按後之结果所要显示的视窗。可选值为： _blank, _parent, _self, _top, 框窗名称。 </span> <p> </p> <ul> <li><span>target="框窗名称" <br>这只运用於框架中，若被设定则连结结果将显示於该“框窗名称”之框窗中，框窗名称是事先由框架标记所命名。 </span></li> <li><span>target="_blank" 或 target="new" <br>将连结的画面内容，开在新的浏览视窗中。 </span></li> <li><span>target="_parent" <br>将连结的画面内容，当成文件的上一个画面。 </span></li> <li><span>target="_self" <br>将连结的画面内容，显示在目前的视窗中。(内定值) </span></li> <li><span>target="_top" <br>将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架) </span></li> </ul> </li> </ul> <p><span>例子一：（外部连结） </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 原始码 </div> </td> <td><span><a href="../promote/engines.html">四百五十个寻找引擎</a> <br><p><a href="http://www.hkseek.com/icq"> <br><img src="link_image.gif" width=99 height=44 border=1 alt="ICQ Garden"></a> <br><p><a href="http://www.hkseek.com/icq"> <br><img src="link_image.gif" width=99 height=44 border=0 alt="ICQ Garden"></a> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 四百五十个寻找引擎 <p> </p> <p> </p> </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子二（内部连结）：请到 PenPal Garden 的 FAQ Page 刻体验一下何为内部连结。 </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><a name="test"></a> <br><a href="#test">本页的内部连结</a> <br><br><a href="http://www.school.net.hk/~chi/faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a> </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; LINE-HEIGHT: 12pt; FONT-FAMILY: 新细明体"> 本页的内部连结 <br> 跳到 PenPal Garden 的 FAQ 部分 </div> </td> </tr> </tbody> </table> <p></p> </td> </tr> <tr> <td class="article"> <table width="100%"> <tbody> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <BASE> ： </div> </td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ▲Top </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="article"><span><BASE> 是一个连结基准标记，用以改变文件中所有连结标记的参数内定值。它只能应用於文件的开头部分，即标记 <HEAD> 与 </HEAD> 之间。 </span> <p><span><BASE> 的一般参数设定： </span></p> <p><span>例如 <base href="http://www.microsoft.com/" target="_top"> </span></p> <ul> <li><span>href="http://www.microsoft.com/" <br>设定该页网页中所有 HTTP 文件及图形（包括相对路径连结及 <IMG> 图形标记等）的内定路径，其他如 ftp:// 及 gopher:// 等则不受影响。这参数只可填入一个相对或绝对的路径，不必填入档案名称。一般相对路径连结及 <IMG> 图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有连结将会以 http://www.microsoft.com/ 作为起点，若其中有连结如 <a href="index.html">Back to Main Page</a> ，那末它不会连到自已目录下的 index.html，它将会连到 Microsoft 的首页，这是因为相对路径己给 <BASE> 转成绝对的了。 </span></li> <li><span>target="_top" <br>设定该页网页中所有连结被按後之结果所要显示的视窗，免得分别为所有连结加上 target 参数，常应用於框架中。其设定与 <A> 连结标记中 target 参数相同。 </span></li> </ul> <p><span>例子容後再写，你可亲自尝试或到一些以框架制作的网</span></p> </td> </tr> </tbody> </table> <p></p> </li> <li> <p class="green">图形标记</p> <p> </p> <table width="100%"> <tbody> <tr class="article"> <td><span><IMG> </span></td> </tr> <tr> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> ■ <IMG> ： </div> </td> </tr> <tr class="article"> <td><span><IMG> 称图形标记，主要用以插入图片于网页中，至于其它用处如配合影片文件等的播放及影像地图（Image Map 或称一图多连结）则于不会在这节提及，请看【影像地图】及【其他标记】。 </span> <p><span><IMG> 的一般参数设定： </span></p> <p><span>例如 <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"> </span></p> <ul> <li><span>src="logo.gif" <br>图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行己久，后者由 96 年开始发展，于未来取代前两者。若图片文件与该 html 文件同处一目录则只　写上文件案名称，否则必须加上正确的途径，相对及绝对皆可。</span> </li> <li><span>width=100 height=100 <br>设定图片大小，此宽度、及高度一般采用 pixels 作单位。通常只设为图片的真实大小以免失真，若　要改变图片大小最好事先使用图像编辑工具。 </span></li> <li><span>hspace=5 vspace=5 <br>设定图片边沿空白，以免文字或其它图片过于贴近。hspace 是设定图片左右的空间，vspace 则是设定图片上下的空间，高度采用 pixels 作单位。 </span></li> <li><span>border=2 <br>图片边框厚度。 </span></li> <li><span>align="top" <br>调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底端、左右等，可选值：top, middle, bottom, left, right，内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom， <br>texttop 表示图片和文字依顶线对　， <br>baseline 表示图片对　到目前文字行底线值， <br>absmiddle 表示图片对　到目前文字行绝对中央， <br>absbottom 表示图片对　到目前文字行绝对底部，（绝对底部意指它考虑到比方 y 、g、q 等字的下缘）。 </span></li> <li><span>alt="Logo of PenPal Garden" <br>这是用以描述该图形的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示。 </span></li> <li><span>lowsrc="pre_logo.gif" <br>设定先显示低解像图片，若所加入的是一张很大的图片，下载　时很长，这张低解像图片会先被显示以免浏览失却兴趣，通当是原图片灰阶版本。 </span></li> </ul> <p><span>例子一： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><img src="girl.gif" width=100 height=112 border=0 alt="beautiful girl"> 普通插入 </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 普通插入 </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子二： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><img src="girl.gif" width=100 height=112 border=0 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 设定上下左右空白位置 </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子三： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><img src="girl.gif" width=100 height=112 border=4 alt="beautiful" hspace=10 vspace=20"> 设定上下左右空白位置 </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 设定字画中间对　，边框厚度为 4。 </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子四： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><img src="girl.gif" width=100 height=112 alt="beautiful lady" align="right" border=0> 设定图片靠右。 </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 设定图片靠右。 </div> </td> </tr> </tbody> </table> <p></p> <p><span>例子五： </span> </p> <table width="100%"> <tbody> <tr> <td width="4%"><span>原始码</span></td> <td><span><img src="girl.gif" width=200 height=220 alt="I'm not beautiful right now" border=0> 放大了的图片 </span></td> </tr> <tr> <td width="4%"><span>显示结果</span></td> <td> <div style="FONT-SIZE: 9pt; FONT-FAMILY: 新细明体"> 放大了的图片 </div> </td> </tr> </tbody> </table> <p></p> </td> </tr> </tbody> </table> <br><p></p> </li> </ol> </td> </tr> </tbody> </table> <br> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1170298114507083776"></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/XML)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902904455809003520.htm" title="Webpack4从入门到精通以及和webpack5对比_webpack现在用的是哪个版本" target="_blank">Webpack4从入门到精通以及和webpack5对比_webpack现在用的是哪个版本</a> <span class="text-muted">2501_90253044</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>'css-loader',//less-loader：将less文件编译成css文件，需要下载less-loader和less'less-loader'],},{test:/\.css$/,//使用多个loader用use,使用一个loader用loaderuse:['style-loader','css-loader'],},{//url-loader：处理图片资源，问题：默认处理不了html中</div> </li> <li><a href="/article/1902887557906100224.htm" title="Pollinations AI文生图html源码" target="_blank">Pollinations AI文生图html源码</a> <span class="text-muted">酷爱码</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a> <div>源码介绍用deepseek辅助制作了一个电脑端文生图小程序，html语言的，接口使用的是Pollinations，上传服务器访问首页即可一次生成4张，提示词最好用英文，点击小图可以预览大图，也可以点击下载按钮直接下载截图预览源码免费获取PollinationsAI文生图html源码</div> </li> <li><a href="/article/1902878104855048192.htm" title="springboot整合Thymeleaf详解" target="_blank">springboot整合Thymeleaf详解</a> <span class="text-muted">weiha666</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>Thymeleaf介绍简单说，Thymeleaf是一个跟Velocity、FreeMarker类似的模板引擎，它可以完全替代JSP。相较与其他的模板引擎，它有如下三个极吸引人的特点：Thymeleaf在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持html原型，然后在html标签里增加额外的属性来达到模板+数</div> </li> <li><a href="/article/1902863980490190848.htm" title="浏览器 DOM 深度解析：从节点类型到遍历操作的全攻略" target="_blank">浏览器 DOM 深度解析：从节点类型到遍历操作的全攻略</a> <span class="text-muted">码农的时光故事</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a> <div>一、DOM核心概念与节点类型DOM（文档对象模型）是浏览器提供的核心API之一，用于将HTML文档转换为可操作的对象树结构。其核心设计遵循树形结构，每个节点都继承自Node接口，主要分为以下类型：1.基础节点类型Element：对应HTML标签，包含属性和子节点（）Text：文本内容节点Comment：注释节点Document：文档根节点，通过document全局对象访问（）2.特殊节点类型Doc</div> </li> <li><a href="/article/1902863853843181568.htm" title="浏览器工作原理深度解析（阶段一）：从 URL 到页面渲染的完整流程" target="_blank">浏览器工作原理深度解析（阶段一）：从 URL 到页面渲染的完整流程</a> <span class="text-muted">码农的时光故事</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、浏览器工作流程概述作为前端开发者，我们每天都在与浏览器打交道，但多数人对其内部工作机制却知之甚少。实际上，浏览器的核心功能就是将用户输入的URL转换为可视化的网页。这一过程大致分为六个关键步骤：网络请求：通过HTTP/HTTPS协议获取页面资源构建DOM树：解析HTML代码生成文档对象模型样式计算：解析CSS规则并应用到对应元素布局渲染：计算元素位置和尺寸生成渲染树合成优化：将渲染层合并为位图</div> </li> <li><a href="/article/1902862844316151808.htm" title="JAVA学习-练习试用Java实现“实现一个Spark应用，对大数据集中的文本数据进行情感分析和关键词筛选”" target="_blank">JAVA学习-练习试用Java实现“实现一个Spark应用，对大数据集中的文本数据进行情感分析和关键词筛选”</a> <span class="text-muted">守护者170</span> <a class="tag" taget="_blank" href="/search/java%E5%AD%A6%E4%B9%A0/1.htm">java学习</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>问题：实现一个Spark应用，对大数据集中的文本数据进行情感分析和关键词筛选。解答思路：要实现一个Spark应用，对大数据集中的文本数据进行情感分析和关键词筛选，需要按照以下步骤进行：1.环境准备确保的环境中已经安装了ApacheSpark。可以从[ApacheSpark官网](https://spark.apache.org/downloads.html)下载并安装。2.创建Spark应用以下是</div> </li> <li><a href="/article/1902849849804517376.htm" title="Bilibili 视频弹幕自动获取和自定义屏蔽词" target="_blank">Bilibili 视频弹幕自动获取和自定义屏蔽词</a> <span class="text-muted">dreadp</span> <a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>脚本地址:项目地址:GazerdmGrab.py提要适用于:任意B站视频弹幕XML文件下载.如不能,请提交issues联系我.支持指定屏蔽词.1秒即可完成自动解析任意B站视频的视频弹幕XML文件请求链接,并下载.使用方法克隆或下载项目代码。安装依赖:pipinstallrequestslxml,或者克隆项目代码后pipinstall-rrequirements.txt脚本顶部:指定常量FOLDER</div> </li> <li><a href="/article/1902847571139817472.htm" title="pear-admin-boot开发框架使用记录（三）" target="_blank">pear-admin-boot开发框架使用记录（三）</a> <span class="text-muted">后青春期的诗go</span> <a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>一、实现部门选择操作用于从组织架构里选择出部门的操作，如开发日志管理模块，创建人新增日志时可以通过选择框选择相应共享的部门。数据库表调整在数据表添加2个字段：sharedeptid共享部门idvarcharsharedeptname共享部门名称varchar前端html页面调整页面添加如下代码：共享部门前端JS调整添加如下代码：letdtree=layui.dtree;dtree.renderSe</div> </li> <li><a href="/article/1902843160275513344.htm" title="python中的构造函数" target="_blank">python中的构造函数</a> <span class="text-muted">weixin_30770495</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>python中构造函数可以这样写classclassname（）：def——init——（self）：#构造函数函数体转载于:https://www.cnblogs.com/begoogatprogram/p/4649076.html</div> </li> <li><a href="/article/1902841270674452480.htm" title="HBuilderX的下载、安装" target="_blank">HBuilderX的下载、安装</a> <span class="text-muted">听海边涛声</span> <a class="tag" taget="_blank" href="/search/HBuilderX/1.htm">HBuilderX</a> <div>HBuilderX简称HX，是一款轻量级的、免费的IDE。它具有强大的语法提示和vue支持。访问HBuilderX的官网：https://www.dcloud.io/hbuilderx.html选择要下载的版本，我下载的是v4.08版本：将压缩包下拉以后解压到某个目录下就可以了，不需要安装过程，例如，我解压到D:\HBuilderX目录下面：双击HBuilderX.exe，就可以运行了：注意：HB</div> </li> <li><a href="/article/1902835346278772736.htm" title="微信小程序云开发实现登录功能" target="_blank">微信小程序云开发实现登录功能</a> <span class="text-muted">Bilkan-studio</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用云开发数据库实现登录功能，多的不说了直接看代码登录功能代码段WXML代码账号密码登录WXSS代码page{width:100%;height:100%;direction:ltr;}.waikuang{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:colu</div> </li> <li><a href="/article/1902832447561723904.htm" title="hive 使用oracle数据库" target="_blank">hive 使用oracle数据库</a> <span class="text-muted">sardtass</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE/1.htm">开源项目</a> <div>hive使用oracle作为数据源，导入数据使用sqoop或kettle或自己写代码（淘宝的开源项目中有一个xdata就是淘宝自己写的）。感觉sqoop比kettle快多了，淘宝的xdata没用过。hive默认使用derby作为存储表信息的数据库，默认在哪启动就在哪建一个metadata_db文件放数据，可以在conf下的hive-site.xml中配置为一个固定的位置，这样不论在哪启动都可以了。</div> </li> <li><a href="/article/1902808876462436352.htm" title="Pybind11教程：从零开始打造 Python 的 C++ 小帮手" target="_blank">Pybind11教程：从零开始打造 Python 的 C++ 小帮手</a> <span class="text-muted">Yc9801</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">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>参考官网文档：https://pybind11.readthedocs.io/en/stable/index.html一、Pybind11是什么？想象你在Python里写了个计算器，但跑得太慢，想用C++提速，又不想完全抛弃Python。Pybind11就像一座桥，把C++的高性能代码“嫁接”到Python里。你可以用Python调用C++函数，就像请了个跑得飞快的帮手来干活。主要功能：绑定函数：</div> </li> <li><a href="/article/1902802949088800768.htm" title="HTML 教程：从零开始掌握常用语法" target="_blank">HTML 教程：从零开始掌握常用语法</a> <span class="text-muted">LoveYa!</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>免费无广纯净版微信小程序测mbti很有趣，不需要任何授权，也不需要登录，直接就是测，几分钟了解自己的人格mbti，快来试试吧。可以微信直接搜索小程序名“一秒MBTI”HTML教程：从零开始掌握常用语法欢迎来到HTML的世界！HTML（HyperTextMarkupLanguage，超文本标记语言）是网页开发的基石，它负责定义网页的结构和内容。无论你是想成为一名前端开发者，还是仅仅想了解网页背后的魔</div> </li> <li><a href="/article/1902795746898407424.htm" title="Spring Boot项目开发常见问题及解决方案（上）" target="_blank">Spring Boot项目开发常见问题及解决方案（上）</a> <span class="text-muted">小芬熊</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>启动相关问题问题1：项目启动时报错“找不到主类”在使用SpringBoot打包成可执行JAR文件后启动，有时会遇到这个头疼的问题。通常是因为打包配置有误或者项目结构不符合要求。解决方案：首先，检查pom.xml（Maven项目）或build.gradle（Gradle项目）中的打包插件配置。确保spring-boot-maven-plugin（Maven示例）配置正确，比如：org.springf</div> </li> <li><a href="/article/1902793473547890688.htm" title="Kotlin第十六讲---实战通过委托完成SharedPreferences封装" target="_blank">Kotlin第十六讲---实战通过委托完成SharedPreferences封装</a> <span class="text-muted">奇舞移动</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>内容简介前面讲解了Kotlin具有类委托和属性委托。接下来我给大家分享1个实战技巧，使用属性委托来完成SharedPreferences的封装。前景介绍说起SharedPreferences在Android中是一种常用的本地化存储数据的方案。以前Java封装都是将SharedPreferences封装成单利，原因就是SharedPreferences对象创建过程会解析xml文件，这个过程比较耗性能</div> </li> <li><a href="/article/1902791080596795392.htm" title="vue3+Ts+elementPlus二次封装Table分页表格，表格内展示图片、switch开关、支持" target="_blank">vue3+Ts+elementPlus二次封装Table分页表格，表格内展示图片、switch开关、支持</a> <span class="text-muted">龙井>_<</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/elementPlus/1.htm">elementPlus</a> <div>目录一.项目文件结构二.实现代码1.子组件（表格组件）2.父组件（使用表格）一.项目文件结构1.表格组件（子组件）位置2.使用表格组件的页面文件（父组件）位置3.演示图片位置elementPlus表格Table表格|ElementPlus4.笑果演示表格笑果点击图片放大显示笑果二.实现代码1.子组件（表格组件）1.src/views/Table.vuehtml部分{{scope.$index+1}</div> </li> <li><a href="/article/1902788812375912448.htm" title="使用opengl绘制立方体_一步步学OpenGL(25) -《Skybox天空盒子》" target="_blank">使用opengl绘制立方体_一步步学OpenGL(25) -《Skybox天空盒子》</a> <span class="text-muted">weixin_39962153</span> <a class="tag" taget="_blank" href="/search/%E4%BD%BF%E7%94%A8opengl%E7%BB%98%E5%88%B6%E7%AB%8B%E6%96%B9%E4%BD%93/1.htm">使用opengl绘制立方体</a> <div>教程25Skybox天空盒子原文：http://ogldev.atspace.co.uk/www/tutorial25/tutorial25.htmlCSDN完整版专栏：https://blog.csdn.net/cordova/article/category/9266966背景天空盒子是一种让场景看上去更广阔无垠的一种视觉技术，用无缝对接的封闭纹理将摄像机的视口360度无死角的包裹起来。封闭纹</div> </li> <li><a href="/article/1902757292042940416.htm" title="01.AJAX 概念和 axios 使用" target="_blank">01.AJAX 概念和 axios 使用</a> <span class="text-muted">Lv547</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/AJAX/1.htm">AJAX</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>01.AJAX概念和axios使用1.什么是AJAX?使用浏览器的XMLHttpRequest对象与服务器通信浏览器网页中，使用AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页2.什么是服务器？可以暂时理解为提供数据的一台电脑3.为何学AJAX?以前我们的数据都是写在代码里固定的,无法随时变化现在我们的数据可以从服务器</div> </li> <li><a href="/article/1902752749120974848.htm" title="深入理解Ajax原理" target="_blank">深入理解Ajax原理</a> <span class="text-muted">lfsf802</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">前端技术</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/xmlhttprequest/1.htm">xmlhttprequest</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/asynchronous/1.htm">asynchronous</a> <div>1.概念ajax的全称是AsynchronousJavaScriptandXML，其中，Asynchronous是异步的意思，它有别于传统web开发中采用的同步的方式。2.理解同步异步异步传输是面向字符的传输，它的单位是字符；而同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。举个例子来说同步和异步，同步就好像我们买楼一次性支付，而异步就是买楼分期付款。所以</div> </li> <li><a href="/article/1902750096563433472.htm" title="【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring MVC 的核心组件：DispatcherServlet 的工作原理" target="_blank">【＜二＞丹方改良：Spring 时代的 JavaWeb】之 Spring MVC 的核心组件：DispatcherServlet 的工作原理</a> <span class="text-muted">Foyo Designer</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/HandlerMapping/1.htm">HandlerMapping</a><a class="tag" taget="_blank" href="/search/ViewResolver/1.htm">ViewResolver</a> <div>点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、DispatcherServ</div> </li> <li><a href="/article/1902750092612399104.htm" title="【脑洞小剧场】零帧起手创业小公司之第一次技术分享会" target="_blank">【脑洞小剧场】零帧起手创业小公司之第一次技术分享会</a> <span class="text-muted">Foyo Designer</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E8%81%8C%E5%9C%BA%E5%B0%8F%E5%89%A7/1.htm">技术职场小剧</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a><a class="tag" taget="_blank" href="/search/%E6%94%B9%E8%A1%8C%E5%AD%A6it/1.htm">改行学it</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E5%88%9B%E5%AF%8C/1.htm">程序员创富</a> <div>点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的早晨，段萌儿怀揣着对新工作的无限憧憬，踏入了这家充满未知的小公司。然而，她万万没想到，第一天上班就迎来了一场“惊悚”之旅。阳光透过会议室的窗户，洒在摆满椅子的地板上，技术分享会的氛围既紧张又期待。今天，将是公司第一次正式的技术交流盛会，各路技术大牛摩拳擦掌，</div> </li> <li><a href="/article/1902734574870392832.htm" title="springboot使用163发送自定义html格式的邮件" target="_blank">springboot使用163发送自定义html格式的邮件</a> <span class="text-muted">星月前端</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>springboot使用163发送html格式的邮件效果:下面直接开始教学注册邮箱，生成授权码获取163邮箱的授权码，可以按照以下步骤操作：登录163邮箱打开浏览器，访问163邮箱登录页面。使用你的邮箱账号和密码登录。进入邮箱设置登录后，点击页面右上角的“设置”图标（通常是一个齿轮图标）。在菜单中选择“POP3/SMTP/IMAP”选项。开启SMTP服务在“POP3/SMTP/IMAP”设置页面中</div> </li> <li><a href="/article/1902724362268635136.htm" title="bitset and valarray" target="_blank">bitset and valarray</a> <span class="text-muted">heraldww</span> <a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%A6/1.htm">数学</a><a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%BC%82%E4%BA%AE%E7%9A%84UI%E7%95%8C%E9%9D%A2/1.htm">漂亮的UI界面</a><a class="tag" taget="_blank" href="/search/%E5%AE%8C%E6%95%B4%E7%9A%84%E7%95%8C%E9%9D%A2%E8%AE%BE%E8%AE%A1/1.htm">完整的界面设计</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a> <div>记录一个比较少用的容器C++std::bitsethttps://www.cnblogs.com/wangshaowei/p/10297877.htmlvalarrayvalarray面向数值计算的数组，在C++11中才支持支持很多数值数组操作，如求数组总和、最大数、最小数等。需要头文件valarray支持</div> </li> <li><a href="/article/1902707338272370688.htm" title="前端性能优化之SSR优化" target="_blank">前端性能优化之SSR优化</a> <span class="text-muted">xiangzhihong8</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>我们常说的SSR是指Server-SideRendering，即服务端渲染，属于首屏直出渲染的一种方案。SSR也是前端性能优化中最常用的技术方案了，能有效地缩短页面的可见时间，给用户带来很好的体验。SSR渲染方案一般来说，我们页面加载会分为好几个步骤：请求域名，服务器返回HTML资源。浏览器加载HTML片段，识别到有CSS/JavaScript资源时，获取资源并加载。现在大多数前端页面都是单页面应</div> </li> <li><a href="/article/1902682115355504640.htm" title="常用的pdf技术有哪些？--笔记" target="_blank">常用的pdf技术有哪些？--笔记</a> <span class="text-muted">我不是彭于晏灬</span> <a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>常用的pdf技术有哪些？1.iTextPDF：iText是著名的开放项目，是用于生成PDF文档的一个java类库。通过iText不仅可以生成PDF或rtf的文档，而且可以将XML、Html文件转化为PDF文件。Openoffice：openoffice是开源软件且能在windows和linux平台下运行，可以灵活的将word或者Excel转化为PDF文档。JasperReport：是一个强大、灵活</div> </li> <li><a href="/article/1902681107065794560.htm" title="cocos2dx : 解决中文乱码问题" target="_blank">cocos2dx : 解决中文乱码问题</a> <span class="text-muted">^随风~~</span> <a class="tag" taget="_blank" href="/search/Cocos2d-x/1.htm">Cocos2d-x</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E4%B9%B1%E7%A0%81/1.htm">乱码</a> <div>在使用cocos2dx的时候，代码里面使用了中文或者是在cocosstudio编辑器里面使用了中文，显示的时候会出现乱码问题，下面提供几个解决方案：方案一：最前面加上命令:#pragmaexecution_character_set("utf-8")方案二：使用XML文件：问题与解决方法在windows环境下使用visualstudio开发cocos2d-x，由于visualstudio默认编码为</div> </li> <li><a href="/article/1902678535080833024.htm" title="vite中使用Web Worker 脚本" target="_blank">vite中使用Web Worker 脚本</a> <span class="text-muted"></span> <div>MDN对WebWorker的说明WebWorker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用XMLHttpRequest（尽管responseXML和channel属性总是为空）或fetch（没有这些限制）执行I/O。一旦创建，一个worker可以将消息发送到创建它的JavaScript代码，通过将消息发布到该代码指定的事件处理器（反</div> </li> <li><a href="/article/1902676816485740544.htm" title="【VSCode】VSCode常用快捷键" target="_blank">【VSCode】VSCode常用快捷键</a> <span class="text-muted">Ctrl Z.</span> <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>！+回车键快速创建html骨架Ctrl+/单行注释（取消）快捷键Alt+Shift+A块注释（取消）快捷键Ctrl+加号代码放大（适合浏览器）Ctrl+减号代码缩小（适合浏览器）Ctrl+Shift+K删除当前行Ctrl+H替换查询下一个/上一个：F3/Shift+F3选中所有出现在查询中的：Alt+EnterCtrl+D匹配当前选中的词汇或者行，再次选中-可操作Shift+Alt+F格式化代码F</div> </li> <li><a href="/article/1902676817559482368.htm" title="【IDEA】IDEA常用快捷键（适应包括xml所有类型文件）" target="_blank">【IDEA】IDEA常用快捷键（适应包括xml所有类型文件）</a> <span class="text-muted">Ctrl Z.</span> <a class="tag" taget="_blank" href="/search/intellij-idea/1.htm">intellij-idea</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>IntellijIDEA快速编写代码sout等价于System.out.println();soutp等价于System.out.println(“”);soutv等价于System.out.println(“变量名=”+变量);soutm等价于System.out.println(“当前类名.当前方法”);psvm等价于publicstaticvoidmain(String[]args){}In</div> </li> <li><a href="/article/88.htm" title="ztree设置禁用节点" target="_blank">ztree设置禁用节点</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/setDisabledNode/1.htm">setDisabledNode</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); }); </div> </li> <li><a href="/article/215.htm" title="JVM patch by Taobao" target="_blank">JVM patch by Taobao</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and</div> </li> <li><a href="/article/342.htm" title="将session存储到数据库中" target="_blank">将session存储到数据库中</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date</div> </li> <li><a href="/article/469.htm" title="Vector" target="_blank">Vector</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/vector/1.htm">vector</a> <div>public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i); </div> </li> <li><a href="/article/596.htm" title="各连接池配置参数比较" target="_blank">各连接池配置参数比较</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a> <div> 排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名</div> </li> <li><a href="/article/723.htm" title="[简单]mybatis insert语句添加动态字段" target="_blank">[简单]mybatis insert语句添加动态字段</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&</div> </li> <li><a href="/article/850.htm" title="struts2拦截器配置" target="_blank">struts2拦截器配置</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &</div> </li> <li><a href="/article/977.htm" title="IE中页面不居中，火狐谷歌等正常" target="_blank">IE中页面不居中，火狐谷歌等正常</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IE%E4%B8%AD%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%B1%85%E4%B8%AD/1.htm">IE中页面不居中</a> <div>问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3</div> </li> <li><a href="/article/1104.htm" title="String,int,Integer,char 几个类型常见转换" target="_blank">String,int,Integer,char 几个类型常见转换</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.</div> </li> <li><a href="/article/1231.htm" title="PL/SQL的游标类型" target="_blank">PL/SQL的游标类型</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%B8%B8%E6%A0%87%28%E9%9D%99%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">显示游标(静态游标)</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%B8%B8%E6%A0%87/1.htm">隐式游标</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87%E7%9A%84%E6%9B%B4%E6%96%B0%E5%92%8C%E5%88%A0%E9%99%A4/1.htm">游标的更新和删除</a><a class="tag" taget="_blank" href="/search/%25rowtype/1.htm">%rowtype</a><a class="tag" taget="_blank" href="/search/ref%E6%B8%B8%E6%A0%87%28%E5%8A%A8%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">ref游标(动态游标)</a> <div>游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐</div> </li> <li><a href="/article/1358.htm" title="JUnit4中@AfterClass @BeforeClass @after @before的区别对比" target="_blank">JUnit4中@AfterClass @BeforeClass @after @before的区别对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JUnit4/1.htm">JUnit4</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次</div> </li> <li><a href="/article/1485.htm" title="精通Oracle10编程SQL(12)开发包" target="_blank">精通Oracle10编程SQL(12)开发包</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><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/plsql/1.htm">plsql</a> <div>/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规</div> </li> <li><a href="/article/1612.htm" title="【EhCache二】ehcache.xml配置详解" target="_blank">【EhCache二】ehcache.xml配置详解</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache.xml/1.htm">ehcache.xml</a> <div>在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac</div> </li> <li><a href="/article/1739.htm" title="java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL" target="_blank">java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动</div> </li> <li><a href="/article/1866.htm" title="angular.element" target="_blank">angular.element</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.element/1.htm">angular.element</a> <div>angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e</div> </li> <li><a href="/article/1993.htm" title="java-给定两个已排序序列，找出共同的元素。" target="_blank">java-给定两个已排序序列，找出共同的元素。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素</div> </li> <li><a href="/article/2120.htm" title="sftp 异常，有遇到的吗？求解" target="_blank">sftp 异常，有遇到的吗？求解</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jcraft/1.htm">jcraft</a><a class="tag" taget="_blank" href="/search/auth/1.htm">auth</a><a class="tag" taget="_blank" href="/search/jsch/1.htm">jsch</a><a class="tag" taget="_blank" href="/search/jschexception/1.htm">jschexception</a> <div>com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec</div> </li> <li><a href="/article/2247.htm" title="[生物智能与人工智能]神经元中的电化学结构代表什么?" target="_blank">[生物智能与人工智能]神经元中的电化学结构代表什么?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经</div> </li> <li><a href="/article/2374.htm" title="通过LAC和CID获取经纬度信息" target="_blank">通过LAC和CID获取经纬度信息</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/lac/1.htm">lac</a><a class="tag" taget="_blank" href="/search/cid/1.htm">cid</a> <div>方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&</div> </li> <li><a href="/article/2501.htm" title="JAVA的困难分析" target="_blank">JAVA的困难分析</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2628.htm" title="小学5年级英语单词背诵第二课" target="_blank">小学5年级英语单词背诵第二课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front </div> </li> <li><a href="/article/2755.htm" title="linux下面没有tree命令" target="_blank">linux下面没有tree命令</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式</div> </li> <li><a href="/article/2882.htm" title="Map迭代方式，Map迭代，Map循环" target="_blank">Map迭代方式，Map迭代，Map循环</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/Map%E5%BE%AA%E7%8E%AF/1.htm">Map循环</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3/1.htm">Map迭代</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3%E6%96%B9%E5%BC%8F/1.htm">Map迭代方式</a> <div>Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年</div> </li> <li><a href="/article/3009.htm" title="Spring Cache注解+Redis" target="_blank">Spring Cache注解+Redis</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </div> </li> <li><a href="/article/3136.htm" title="Guava中针对集合的 filter和过滤功能" target="_blank">Guava中针对集合的 filter和过滤功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"</div> </li> <li><a href="/article/3263.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3390.htm" title="架构师之流处理---------bytebuffer的mark,limit和flip" target="_blank">架构师之流处理---------bytebuffer的mark,limit和flip</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/ByteBuffer/1.htm">ByteBuffer</a> <div>1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy</div> </li> <li><a href="/article/3517.htm" title="org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1" target="_blank">org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%24/1.htm">$</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E4%B9%89/1.htm">转义</a><a class="tag" taget="_blank" href="/search/el%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">el表达式</a> <div>最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, </div> </li> <li><a href="/article/3644.htm" title="用Java实现发送邮件到163" target="_blank">用Java实现发送邮件到163</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div>/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用</div> </li> <li><a href="/article/3771.htm" title="探索实体类存在的真正意义" target="_blank">探索实体类存在的真正意义</a> <span class="text-muted">java小叶檀</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <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>