SimpleHTML.doc

简单超文本使用说明 说明： v 本文作为易语言支持库“扩展界面支持库五”的辅助使用文档。 v 易语言支持库“扩展界面支持库五”中的“气球提示框”“简单超文本框”控件分别封装自网友Eugene Pustovoyt的CPPTooltip和CPPHtmlDrawer。本文主要内容参考了CPPTooltip2.0的说明文档，特此感谢。 v 译文中多处注明“易语言不支持”，更准确地说法应该是“易语言‘扩展界面支持库五’的当前版本不支持”。 v “易语言”是一款全中文编程语言集成开发环境(IDE)，支持可视化、跨平台编程，基于组件，面向对象编程(OOP)。 作者： Eugene Pustovoyt pustovoyt@mail.ru 译者： 大连大有吴涛易语言软件开发有限公司, service@ 2005年8月 2009年9月修改个别文字错误 目录 · 所支持的HTML标记 o <a> - 超链接 o <b> - 粗体 o <baseline> - 基准线对齐 o <big> - 较大字体 o <bmp> - BMP图片 （易语言不支持） o <bottom> - 底对齐 o <br> - 换行 o <center> - 居中 o <code> - 显示代码段 o <em> - 强调，通过显示为斜体，类似于<i> o <font> - 字体 o <h1> - <h6> - 标题 o <hr> - 水平线 o <i> - 斜体 o <icon> - 图标 （易语言不支持） o <ilst> - 图片组 （易语言不完全支持） o <left> - 左对齐 o <middle> - 垂直居中，类似于<vcenter> o <pre> - 预定义格式 o <right> - 右对齐 o <s> - 删除线，等效于<strike> o <small> - 较小字体 o <span> - 可容纳其它HTML标记 o <strike> -删除线 o <string> - 字符串 （易语言不支持） o <sub> - 下标 o <sup> - 上标 o <t> - TAB o <table> - 表格 o <td> - 表格列 o <top> - 顶对齐 o <tr> - 表格行 o <vcenter> - 垂直对齐，类似于<middle> · 颜色使用说明及颜色表 · 层叠样式表规范 · 层叠样式表长度单位 · 转义字符 所支持的HTML标记 译者注： l 格式1：<标记 属性=属性值>，如<hr color=”blue”> l 格式2：<标记 属性=属性值>…</标记>，如<font color=”red”>红色</font> l 适用格式1还是格式2，关键看下表的第二列，“－”适用格式１，“＋”适用格式２。 l 所有标记、属性、属性值均不区分大小写，所以<hr color=”blue”> 与 <HR Color=”RED”>是等效的。 l 属性值两边的双引号可有可无，但不能用单引号。如<font color=”red”>红色</font>等效于<font color=red>红色</font>，但写作<font color=’red’>红色</font>就不对了。无论是在易语言中，还是在C/C++中，字符串都是以双引号表示的，在双引号内部再套双引号就不容易了，所以使用不带引号的属性值最方便。 l 一个标记中，可以同时对多个属性赋值，如<font color="green" face="隶书" size="36pt">易语言</font> l 关于颜色的表示方法表示，下文有详细说明。 l 总之，这一套简化版的HTML，会尽量与标准HTML保持统一，但它不支持一些高级特征如<SCRIPT>等。 我（作者，非译者）开发了一个简单的、类似于HTML的文本格式化语言。它支持一些简单的标记，以下是对这些标记的详细说明： 标记名称 属性名称 说明 默认值 <A> + 超链接 href 设置URL地址 例如: <a href="">请访问易语言主页</a> <a href=”mailto: service@”>给我写信</a> //译者新增   msg 自定义超链接文本 参考SetCallbackHyperlink ()方法以获取更多信息。 例如: <a msg="1234567890">请点击</a> //译者注：msg属性可以是汉字，两边的双引号也可以不要（但不能用单引号），如： <a msg=汉字>请点击</a> 易语言中，当用户点击了这种以msg属性指定的超链接时，会触发“自定义超链接被单击”事件，该事件的文本参数“标识文本”就是<a>标记的msg属性的属性值。   <B> + 粗体   例如: <b>粗体字</b>   <BASELINE> + 文本基线对齐   例如: <baseline>文本基线对齐</baseline> <BIG> + 较大字体   例如: <big>较大字体</big> <BMP> - 显示图片 易语言不支持! idres 资源ID 例如: <bmp idres="139"> handle BMP句柄。注意，本属性的值必须在运行时指定（因为句柄不可能是静态的）。 例如: <bmp handle="0xFC00D6"> //译者注：动态生成此文本 file 图片文本名 例如: <bmp file="C:\Temp\apps.bmp"> iddll 资源库（Resour Dll，参见srcdll属性）中的图片资源ID 例如: <bmp iddll="145"> srcdll 资源库（Resour Dll）文件名 例如: <bmp srcdll="C:\Temp\resources.dll"> width 图片显示宽度 例如: <bmp width="28"> height 图片显示高度 例如: <bmp height="40"> mask 透明色 · "" – 使用默认透明色：品红, RGB(255, 0, 255) · color 指定透明色，可用颜色名称（见下文颜色表）或RGB表示 例如: <bmp mask> <bmp mask="magenta"> <bmp mask="#FF0000"> //译者新增，#rrggbb ！！！红色! style 图片显示效果 (无悬停效果) · d – 令图片变暗 · g – 令图片变为灰度图片 · l – 令图片加亮 · s – 给图片加上阴影 例如: <bmp style="dg"> //译者注：变暗(d) + 灰度(g) hotstyle 悬停效果 (当<BMP>标记位于<a>与</a>之间，且鼠标指向时) · d - 令图片变暗 · g - 令图片变为灰度图片 · l - 令图片加亮 · s - 给图片加上阴影 例如: <bmp hotstyle="ls"> //译者注：加亮(l) + 阴影(s) <a><bmp style="g" hotstyle="l"></a> //译者注：正常时显示灰度图片，当鼠标指向时显示加亮的图片 <BOTTOM> + 底对齐   例如: <bottom>底对齐</bottom> <BR> - 换行 = 重复换行 例如: <br> <br="2"> //译者注：连续两个换行，等效于 <br><br> 1 <CENTER> + 水平居中   例如: <center>水平居中</center>   <CODE> + 代码段 （位于其中的文本将按原格式显示，通常在其中放置程序代码）   例如: <code>Code</code> //下例为译者新增： <code> public class AClass { public static void main(String[] args) { System.out.println(“Hello World! Hello China!”); } } </code>   <EM> + 强调，一般显示为斜体，类似于<i> <FONT> + 字体 color 字体颜色 （可以使用颜色名称、RGB串(#rrggbb) 或颜色数值，详见下文对颜色使用的说明） 例如: <font color="blue">String</font> <font color="infotext">String</font> <font color=#FF0000>String</font> //译者注：显示为红色文本 face 字体名称 例如: <font face="Times New Roman"> Times New Roman(外文字体)</font> <font face="楷体_GB2312">楷体</font> //译者新增 size 字体大小 译者注：可选的字体单位有 in: 英寸（约2.54厘米） cm: 厘米 mm: 毫米 pt: 点（1/72英寸） pc: 1pc = 12 点 = 1/6英寸 约4.23毫米 例如: <font size="16">Text</font> <font face=”宋体” size=”9pt”>宋体小五号(9pt)</font> //译者新增 style 字体风格 · + 增加一个风格(可省略) · - 删除一个风格 · b – 粗体 · s – 删除线 · u – 下划线 · o – 上划线 · i – 斜体 例如: <font style="bo-i-s">Text</font> //译者注：使用粗体(b)上划线(o)，取消斜体(i)删除线(s) bkgnd 背景颜色 · transparent – 透明色 (默认值) · color 指定颜色 例如: <font bkgnd="transparent">透明背景</font> <font bkgnd="red">红色背景</font> weight 字体高度 · normal 正常 · bold 粗体 · bolder 较粗 · lighter 较细 · [numeric 100 - 1000] 100到1000之间的数值 例如: <font weight="bold">字体高度bold</font> <font weight="800">字体高度800</font> <H1> - <H6> + 标题 （译者注：H1字体最大，H6字体最小）   例如: <h2>标题二</h2> <h5>标题五</h5> <HR> - 水平线 color 线的颜色 例如: <hr color="blue"> size 线的粗细 译者注：单位为象素 例如: <hr size="2"> 1 width 水平线宽度 译者注：如果数值后面带%表示百分比，否则单位为象素。 例如: <hr width="200"> <hr width="100%"> 100% <I> + 斜体   例如: <i>斜体</i> <ICON> - 显示图标 易语言不支持!! idres 图标资源ID 例如: <icon idres="139"> handle 图标句柄。（） 例如: <icon handle="0xFC00D6"> file 图标文件名 例如: <icon file="C:\Temp\apps.ico"> iddll 资源库(Resource Dll)中的图标资源ID 例如: <icon iddll="145"> srcdll 资源库(Resource Dll)文件名 例如: <icon srcdll="C:\Temp\resources.dll"> width 图标显示宽度 例如: <icon width="32"> SM_CXICON height 图标显示高度 例如: <icon height="32"> SM_CYICON style 图标显示效果 (无悬停效果) 译者注：参考<bmp>标记的同名属性 · d – 令图标变暗 · g – 令图标变为灰度图片 · l – 令图标加亮 · s – 给图片加上阴影 例如: <icon style="dg"> hotstyle 悬停效果 (当<BMP>标记位于<a>与</a>之间，且鼠标指向时) 译者注：参考<bmp>标记的同名属性 · d – 令图标变暗 · g – 令图标变为灰度图片 · l – 令图标加亮 · s – 给图片加上阴影 例如: <icon hotstyle="ls"> <a><icon style="g" hotstyle="s"></a> <ILST> - 显示图片组中的图片 易语言不完全支持!! 译者注：在易语言中，<image> 等效于 <ilst> (<image> 作为<ilst>的别名)。 index 图片索引（索引从0开始，即0表示第一个图片，1表示第二个图片，类推 ） 例如: <ilst index="2"> //译者注：显示图片组中的第三个图片 //易语言中，图片组即“气球提示框”“简单超文本框”组件的“图片图片组”属性 //C/C++中，图片组由handle, file, idres, srcdll/iddll指定 idres 图片资源ID 易语言不支持!! 例如: <ilst idres="139"> handle 图片句柄 易语言不支持!! 例如: <ilst handle="0xFC00D6"> file 图片文件名 易语言不支持!! 例如: <ilst file="C:\Temp\apps.bmp"> iddll 资源库(Resource Dll)中的图片资源ID 易语言不支持!! 例如: <ilst iddll="145"> srcdll 资源库(Resource Dll)文件名 易语言不支持!! 例如: <ilst srcdll="C:\Temp\resources.dll"> cx 图片显示宽度，单位为象素 例如: <ilst cx="16"> cy 图片显示高度，单位为象素 例如: <ilst cy="16"> width 图片显示宽度 译者注：数值后加%表示百分比，否则单位为象素 例如: <ilst width="28"> <ilst width=200% height=200% index=0> //译者新增：按2倍大小显示 height 图片显示高度 译者注：数值后加%表示百分比，否则单位为象素 例如: <ilst height="40"> mask 透明色 · "" – 使用默认透明色：品红，RGB(255, 0, 255) · color 指定透明颜色 例如: <ilst mask> <ilst mask="magenta"> style 正常显示效果 (无悬停效果) 译者注：参考<bmp>标记的同名属性 · d – 令图标变暗 · g – 令图标显示为灰度图片 · l – 令图标加亮 · s – 给图片加上阴影 例如: <ilst style="dg"> //译者注：变暗(d) + 灰度(g) hotstyle 悬停效果 (当<ilst>标记位于<a>与</a>之间，且鼠标指向时) 译者注：参考<bmp>标记的同名属性 · d – 令图标变暗 · g – 令图标显示为灰度图片 · l – 令图标加亮 · s – 给图片加上阴影 例如: <ilst hotstyle="ls"> <a><ilst style="g" hotstyle="s"></a> <LEFT> + 左对齐   例如: <left>左对齐</left> <MIDDLE> + 垂直居中，类似于<vcenter>标记   例如: <middle>垂直居中</middle> <PRE> + 预定义格式   例如: <pre>预定义格式</pre>   <RIGHT> + 右对齐   例如: <right>右对齐</right> <S> + 删除线，等效于<strike> <SMALL> + 小字体     例如: <small>小字体</small>   <SPAN> + 可容纳任意其它标记 译者注：请注意<span>标志有一个其它大部分标记都没有的属性class（用于指定一个CSS样式，以控制其外观）。如果想对其它没有class属性的标记应用CSS样式，该怎么办呢？答案就是把它嵌入到<span>中。例如： <span class=”cpp-comment”> <b>font</b> </span> 上例就相当于为<b>应用了cpp-comment样式。   class 指定CSS中的class 译者注：CSS定义文本可通过SetCSSStyle()方法设定。在易语言中，直接设置“气球提示框”或“简单超文本框”的“层叠样式表”属性即可。 例如: <span class="cpp-comment">span</span> //译者注：默认的CSS样式中已定义了"cpp-comment"这个class, 见SetCSSStyle()方法说明。   <STRIKE> + 删除线   例如: <strike>删除线</strike>   <STRING> - 显示字符串 易语言不支持!! idres 字符串资源ID 例如: <string idres="220"> iddll 资源库(Resource Dll)中的字符串资源ID 例如: <string iddll="145"> srcdll 资源库(Resource Dll)文件名 例如: <string srcdll="C:\Temp\resources.dll"> <SUB> + 下标     例如: _下标H H₂O //译者新增，水的化学方程式 H2O   <SUP> + 上标     例如: ^{Superscript Text} X² //译者新增，X的平方 X2   <T> - 制表符 = 重复插入多个制表符 例如: <t> <t="2"> //连续两个<t>，等效于<t><t> 1 <TABLE> + 表格 译者注：一般来说，一个<table>内总是包含多个<tr>标记，而<tr>总是包含多个<td>标记。   align 水平对齐方式 · left – 左对齐 · center – 水平居中 · right – 右对齐 例如: <table align="center">...</table> left   background 背景图片 · idres – 图片资源ID 易语言不支持!! · iddll – 资源库(Resource Dll)中的资源ID 易语言不支持!! · file – 图片文件名 例如: <table background="file:felix.bmp">...</table>     bgcolor 背景颜色 例如: <table bgcolor="silver">...</table>     bgeffect 背景效果 · solid – 颜色填充 · hgradient – 水平渐变，从bgcolor到bgendcolor · vgradient – 垂直渐变，从bgcolor到bgendcolor · hcgradient – 水平双向渐变，从bgcolor到bgendcolor到bgcolor) · vcgradient – 垂直双向渐变，从bgcolor到bgendcolor到bgcolor) · 3hgradient - 水平三色渐变，从bgcolor到bgmidcolor到bgendcolor) · 3vgradient - 垂直三色渐变，从bgcolor到bgmidcolor可bgendcolor) · noise, diagshade, hshade, vshade, hbump, vbump, softbump, hardbump, metal available only with CeXDib from Davide Calabro and Davide。 Pizzolato 译者注：在易语言中，noise, diagshade, hshade, vshade, hbump, vbump, softbum等特殊背景效果，都已得到支持。 例如: <table bgeffect="hgradient">...</table>     bgendcolor 背景颜色3 例如: <table bgendcolor="brown">...</table>     bgmidcolor 背景颜色2 例如: <table bgmidcolor="yellow">...</table>     border 边框 译者注：本属性的单位为象素，指定边框线的宽度 例如: <table border="2">...</table>     bordercolor 边框线颜色 例如: <table bordercolor="black">...</table>     bordercolordark 暗边框颜色 例如: <table bordercolordark="darkgray">...</table>     bordercolorlight 亮边框颜色 例如: <table bordercolorlight="lightgray">...</table>     borderstyle 边框效果 · none – 无边框 · solid – 实线 · dotted – 虚线 · dashed – 点划线 · double – 双虚线 例如: <table borderstyle="solid">...</table> none   cellpadding 单元线与表格边框之间的间距 译者注：单位为象素 例如: <table cellpadding="3">...</table>     cellspacing 单元格与单元格之间的间距 译者注：单位为象素 例如: <table cellspacing="2">...</table>     valign 垂直对齐方式 · top – 顶对齐 · middle – 垂直居中 · vcenter – 垂直居中 · bottom – 底对齐 译者注：middle与vcenter等效 例如: <table valign="middle">...</table> top <TD> + 表格列   align 水平对齐方式 · left – 左对齐 · center – 水平居中 · right – 右对齐 例如: <td align="center">...</td> left   bgcolor 背景颜色 例如: <td bgcolor="silver">...</td>     bgeffect 背景效果 · solid – 颜色填充 · hgradient – 水平渐变，从bgcolor到bgendcolor · vgradient – 垂直渐变，从bgcolor到bgendcolor · hcgradient – 水平双向渐变，从bgcolor到bgendcolor到bgcolor) · vcgradient – 垂直双向渐变，从bgcolor到bgendcolor到bgcolor) · 3hgradient - 水平三色渐变，从bgcolor到bgmidcolor到bgendcolor) · 3vgradient - 垂直三色渐变，从bgcolor到bgmidcolor可bgendcolor) · noise, diagshade, hshade, vshade, hbump, vbump, softbump, hardbump, metal available only with CeXDib from Davide Calabro and Davide。 Pizzolato · 译者注：在易语言中，noise, diagshade, hshade, vshade, hbump, vbump, softbum等特殊背景效果，都已得到支持。 例如: <td bgeffect="softbump">...</td>     bgendcolor 背景颜色3 例如: <td bgendcolor="brown">...</td>     bgmidcolor 背景颜色2 例如: <table bgmidcolor="yellow">...</table>     border 边框 例如: <td border="2">...</td>     bordercolor 边框颜色 例如: <td bordercolor="black">...</td>     bordercolordark 暗边框颜色 例如: <table bordercolordark="darkgray">...</table>     bordercolorlight 亮边框颜色 例如: <td bordercolorlight="lightgray">...</td>     borderstyle 边框风格 · none – 无边框 · solid – 实线 · dotted – 虚线 · dashed – 点划线 · double – 双虚线 例如: <td borderstyle="solid">...</td>     cellpadding 单元格与表格边框之间的间距 译者注：单位为象素 例如: <td cellpadding="3">...</td>     cellspacing 单元格与单元格内容之间的间距 译者注：单位为象素 例如: <td cellspacing="2">...</td>     valign 垂直对齐方式 · top – 顶对齐 · middle – 垂直居中 · vcenter -垂直居中 · bottom – 底对齐 译者注：middle与vcenter等效 例如: <td valign="middle">...</td> top <TOP> + 顶对齐   例如: <top>顶对齐</top> <TR> + 表格行   align 水平对齐方式 · left – 左对齐 · center – 水平居中 · right – 右对齐 例如: <tr align="center">...</tr> left   bgcolor 背景颜色 例如: <tr bgcolor="silver">...</tr>     bgeffect 背景效果 · solid – 颜色填充 · hgradient – 水平渐变，从bgcolor到bgendcolor · vgradient – 垂直渐变，从bgcolor到bgendcolor · hcgradient – 水平双向渐变，从bgcolor到bgendcolor到bgcolor) · vcgradient – 垂直双向渐变，从bgcolor到bgendcolor到bgcolor) · 3hgradient - 水平三色渐变，从bgcolor到bgmidcolor到bgendcolor) · 3vgradient - 垂直三色渐变，从bgcolor到bgmidcolor可bgendcolor) · noise, diagshade, hshade, vshade, hbump, vbump, softbump, hardbump, metal available only with CeXDib from Davide Calabro and Davide。 Pizzolato · 译者注：在易语言中，noise, diagshade, hshade, vshade, hbump, vbump, softbum等特殊背景效果，都已得到支持。 例如: <tr bgeffect="hgradient">...</tr>     bgendcolor 背景颜色3 例如: <tr bgendcolor="brown">...</tr>     bgmidcolor 背景颜色2 例如: <tr bgmidcolor="yellow">...</tr>     border 边框 例如: <tr border="2">...</tr>     bordercolor 边框颜色 例如: <tr bordercolor="black">...</tr>     bordercolordark 暗边框颜色 例如: <tr bordercolordark="darkgray">...</tr>     bordercolorlight 亮边框颜色 例如: <tr bordercolorlight="lightgray">...</tr>     borderstyle 边框风格 · none – 无边框 · solid – 实线 · dotted – 虚线 · dashed – 点划线 · double – 双虚线 例如: <tr borderstyle="solid">...</tr>     cellpadding 单元格与表格边框之间的间距 译者注：单位为象素 例如: <tr cellpadding="3">...</tr>     cellspacing 单元格与单元格之间的间距 译者注：单位为象素 例如: <tr cellspacing="2">...</tr>     valign 垂直对齐方式 · top – 顶对齐 · middle – 垂直居中 · vcenter – 垂直居中 · bottom – 底对齐 例如: <tr valign="middle">...</tr> top <VCENTER> + 垂直居中对齐，类似于<middle>   例如: <vcenter>垂直居中对齐</vcenter>           颜色表示方法 译者注： 关于颜色的表示，有三种方式（译者私自添加了第三种方式） 1、以颜色名称表示，如<font color=”red”>红色</font> 2、以十六进制RGB表示，格式为#rrggbb，如<font color=”#ff0000”>红色</font> 3、以十进制颜色值表示，如<font color=”255”>红色</font>　(易语言中的颜色值是以整数型表示的，使用“到文本()”转换为文本型后即可使用。) 第一种方式只能表示部分预定义的颜色，后两种方式可以表示任意颜色。 颜色值两边的双引号可有可无，但不能用单引号，遵循属性值的通用表示规则。 以下是被支持的颜色名称及其RGB对照表： aliceblue (#F0F8FF) antiquewhite (#FAEBD7) aqua (#00FFFF) aquamarine (#7FFFD4) azure (#F0FFFF) beige (#F5F5DC) bisque (#FFE4C4) black (#000000) blanchedalmond (#FFEBCD) blue (#0000FF) blueviolet (#8A2BE2) brown (#A52A2A) burlywood (#DEB887) cadetblue (#5F9EA0) chartreuse (#7FFF00) chocolate (#D2691E) coral (#FF7F50) cornflowerblue (#6495ED) cornsilk (#FFF8DC) crimson (#DC143C) cyan (#00FFFF) darkblue (#00008B) darkcyan (#008B8B) darkgoldenrod (#B8860B) darkgray (#A9A9A9) darkgreen (#006400) darkkhaki (#BDB76B) darkmagenta (#8B008B) darkolivegreen (#556B2F) darkorange (#FF8C00) darkorchid (#9932CC) darkred (#8B0000) darksalmon (#E9967A) darkseagreen (#8FBC8B) darkslateblue (#483D8B) darkslategray (#2F4F4F) darkturquoise (#00CED1) darkviolet (#9400D3)