整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
（本文作于2013年并发表在其它平台，因时间太久个别配图已不能加载）对于经常开发应用软件的人来说，都希望创建一个帮助系统，帮助使用者了解自己软件的功能与应用方法。如何创建自己软件的帮助系统呢？本文就这方面的问题谈谈自己的应用方法，也希望通过自己的实际应用经验能对朋友们有所帮助。
Windows 98及以上版本的帮助文件与Windows 95的有比较大的改变，它使用一种基于HTML文件特征的帮助文件，用Internet Explorer显示帮助内容，支持HTML、ActiveX、Java、脚本（Java脚本和VB脚本）以及HTML图像格式（.JPEG、GIF、PNG），它的图标也变了，后缀名为chm，Windows 98称之为Compiled HTML Help File。为了叙述方便，下面就称之为chm文件。典型的Windows 98规范的帮助文件（.chm文件）的窗口和Windows 98资源管理器差不多，左侧是目录、索引和搜索这三个功能项，通过选项卡切换；右侧是HTML文件的显示部分，改变了原来帮助文件目录窗口和主题窗口分离的情况。由于HTML文件具有多媒体表现力，因此chm文件的内容不再局限于文字和静态图像，在其中可以插入GIF动画，也可以利用浏览器的插件在文档中播放声音文件、动画影片、或其它格式的多媒体内容。加入URL地址可与因特网联系在一起，这样chm文件就不局限于包装好的内容了，它是微软公司的下一代联机帮助系统。同时，chm文件的核心是充分利用HTML文件的表现能力，对分散的HTML文件作整体的包装，这也是目前在Web网页以外利用HTML文件的一个趋势。如果你用这个方式制作学习教程、电子图书和杂志，或为用户提供产品目录和宣传材料，比已经流行的PDF文件更简洁和方便。
chm文件从结构上来看可分为两个部分：运行器和文档内容。运行器是操作系统的一部分，而文档内容随其所附的应用程序而变化。这与以前的Winhelp的结构没有多少差别。不过运行器部分有了较大的改进，运行器很小巧并且不直接运行HTML文件，而是操作一个ActiveX 的组件，控制支持ActiveX 组件的网页浏览器，如微软的Explorer 3.0以上版本的浏览器。它的一个好处是能跨平台运行，只要有不同平台上的运行器和浏览器，chm文件不再需要重新编制。 制作chm文件的工具是微软公司的Htmlhelp Workshop工具包，目前，最新的HTML Help Workshop版本是4.74。这是中文版的，安装Htmlhelp Workshop很方便，只要按照提示进行即可。它的使用也很方便，没有编程和写语言的要求，只要你会制作HTML文件就行了。
制作chm文件很方便，也很简单。大量的工作是以编写HTML文件为主，它的每个主题就是一个HTML文件，这些主题应该事先编辑好，并用Internet Explorer检查确认无误。主题文件可以用任何一个HTML编辑器编辑，也可用Htmlhelp Workshop编辑。如果不熟悉HTML文件的编辑，还可用Word，因为Word 97以上版本可以把Word文档（.doc文件）另存为HTML文件，还可以将Word文档批量转换成HTML文件。这样就可以完全按照编辑Word文档的习惯编辑成Word文档，再转换成HTML文件。
运行Htmlhelp Workshop时，它的工作窗口很简单，菜单栏上有五个命令，分别是“文件”、“视图”、“测试”、“工具”、“帮助”。下面的工具栏有五个按钮，分别是“新建”、“打开”、“编译HTML文件”、“校验编译文件”、“联机帮助”。下面介绍具体步骤：
一、创建帮助文本
创建帮助文本是创建帮助系统的第一步。所谓帮助文本，就是针对自己开发的应用软件的功能、使用方法的介绍和说明。这里，以我开发的《通信工程（概）预算系统》为例，谈谈其帮助系统的创建过程。用WORD2000创建《通信工程（概）预算系统帮助》文本。
通信工程（概）预算系统主界面
通信工程（概）预算系统帮助文本
二、创建分页网页文件
根据帮助系统框架结构，将每一段需要分页显示的帮助文本用WORD2000转换成网页文件。下图是通信工程（概）预算系统帮助需要的分页网页文件。
分页网页文件
三、创建项目文件
启动Htmlhelp Workshop系统，打开主界面。
新建一个方案
单击Htmlhelp Workshop菜单或工具栏中的“新建”命令，这时出现“选择新建内容”的对话框。这里有五个选项：“方案”、“文本”、“HTML文件”、“目录”、“索引”。选择“方案”，接着出现“方案”向导，告诉你这个向导可以转换的文件格式，一般情况下我们是要创建方案（.hhp）文件，不需要转换。直接进入“下一步”指定放置的目录和输入文件名就可以了，单击“下一步”，进入了“现有文件”对话框，如果你想将已经存在的文件包含进“方案”里，在下面列表中选择。这里一般空着，这些文件（包括已经编辑好的主题文件）以后可以添加。进入“下一步”后再“确定”就进入了Htmlhelp Workshop工作窗口。在窗口的上方是3个选项卡，分别是“方案”、“目录”、“索引”。在“方案”窗口的左侧是7个按钮，它们的功能名称自上而下分别是：“改变项目选项”、“添加/删除主题文件”、“添加/修改窗口定义”、“HHTML帮助API信息”、“校验HTML源文件”、“保存项目、目录和索引文件”、“保存全部文件并编译”。
单击“改变项目选项”按钮，出现“选项”对话框，光标在“常规”选项卡的“标题”文本框内闪烁，在这里加入标题，编译后这个标题将出现在chm文件窗口的标题栏中。其它的内容暂时用系统的默认值。然后单击“添加/删除主题文件”按钮，再选择“添加”按钮，把作为封面页的HTML文件添上。封面页的文件一定要有，否则编译的帮助文件运行后，系统会报错。好了，简单的“方案”编辑就完成了。
四、创建目录文件
单击“目录”选项卡，这时系统弹出一个对话框，提示你“方案”还没有关联目录文件（.hhc），你可以创建一个新的目录文件，或者指定一个现有的。这里选择“创建一个新目录文件”，进入下一步请你选定一个新目录文件的名称和存放路径，指定后出现目录编辑窗口。在目录窗口的左侧有11个按钮，前5个分别是：“目录工具”、“插入标题”、“插入页面”、“编辑选择”、“删除选择”，中间4个箭头用来调整指定标题或页面的位置，最后两个已在项目编辑窗口中出现过。根据需要插入标题或页面目录，按下“插入标题”或“插入页面”按钮，都会弹出“目录条目”对话框，在“条目标题”文本框中输入条目的标题，并根据情况选定对应的主题（HTML文件），单击“条目标题”下的“添加”按钮，在弹出的对话框的下面“文件或URL地址”文本框中输入文件名或URL地址并确定；单击“高级”选项卡，在“图像索引”栏中为条目指定图标，比如包含其它条目的条目可以用书形图标，而页面条目的可以用问号图标。如果在单击“插入页面”按钮之前所选择的条目不包含别的条目，也不被别的条目所包含，那么会询问“是否要创建一个起始条目”，选择了“是”会增加起始条目（一级条目），选择了“否”会增加一个子条目。标题可以不添加主题文件或URL地址，也可放置需要的主题文件，作为标题的说明内容。标题可以分为多级，要按照制作的内容统一考虑。如果觉得不满意，可以用左侧的箭头进行调整，也可以选定该条目，单击鼠标右键，不但可以调整，还可以插入标题、主题或目录文件。编辑目录文件是制作chm文件最关键的工作，目录文件应该包含一个chm文件所有目录（主题），而每个目录又包含条目标题（名称）和该条目的主题文件，要避免条目标题与对应的主题不一致的情况出现。等所有目录都添加好后目录就算完成了。
创建目录
已生成的帮助文件
完成目录编制后，一个chm文件已具备了雏形，索引的内容暂时空着。保存项目文件和目录文件后就可以编译，编译就是把所有用到的HTML文件统统压缩后包装在一起，形成一个后缀名是.chm的文件。在主工具栏按钮中可以找到编译按钮和试运行按钮，也可直接按项目窗口左下方的“保存全部文件并编译”按钮进行编译。编译后再运行就可以看到作品的面貌了。目录的内容在编译后显示在chm文件窗口的左侧，可以展开标题后显示以下的目录，单击目录可以打开相应的主题文件，显示相应的内容。如果发现问题，还可以进行修改调整。
五、创建索引文件
在Htmlhelp Workshop的工作窗口上单击“索引”选项卡，和创建目录文件一样，也会弹出一个对话框，操作也是一样的。进入索引编辑窗口，左侧也有11个按钮，有8个是已经熟悉的，还有3个分别是：“索引工具”、“插入关键字”、“排序关键字”。所谓关键字是用户可能用到的并与一个或多个帮助主题文件关联在一起的字、词或短语，索引文件（.hhk）也是一个HTML文件，它包含若干个关键字，当用户打开chm文件后，单击索引标签并输入一个关键字后，chm文件将显示与这个关键字有关的主题的列表，非常方便地找到相关主题。单击“插入关键字”按钮，出现一个“索引项”对话框，在“常规”选项卡的“关键字”文本框中输入关键字，单击“添加”按钮指定与该关键字相关联的主题文件。如果想跳转到另一个关键字，在“索引项”对话框中按“高级”选项卡，选中下面的“目的地是另一个关键字”，单击“常规”选项卡，单击“添加”按钮，在“文件或URL地址”框中输入要跳转的关键字，单击“确定”。
创建索引
六、创建搜索
chm文件的“搜索”选项卡允许用户在所有主题文件中搜索字、词或短语，将它们的标题显示出来，而且在主题中用醒目的方式来显示。打开一个方案文件，单击“方案”选项卡的“改变方案选项”，在“选项”对话框的“编译”选项卡中选中“编译全文搜索信息”即可。 上述介绍的是编制HTML帮助文件的基本步骤，上手很容易。但它的功能远非这些，如在窗口定义中可以设计你所喜爱的形式，几乎所有的窗口要素都可以改变。向HTML文件中插入快捷方式、相关主题、关键字链接、联想链接、HTML Help ActiveX控件、Java脚本、弹出式窗口等等，详细的内容请参考Htmlhelp Workshop的帮助文件，或微软的相应网页。相信你试过以后一定会喜欢它。
其实没必要，这里教你离线看 Python 模块的办法。
就算没有上网权限也能学习 Python 模块.
$ python -m pydoc -p 5
pydoc server ready at http://localhost:1234/
效果如下：
#每天一个编程技巧#
TML 中使用 <input> 元素表示单行输入框和 <textarea> 元素表示多行文本框。
HTML中使用的 <input> 元素在 JavaScript 中对应的是 HTMLInputElement 类型。HTMLInputElement 继承自 HTMLElement 接口：
interface HTMLInputElement extends HTMLElement {
...
}HTMLInputElement 类型有一些独有的属性和方法：
而在上述介绍 HTMLInputElement 类型中的属性时，type 属性要特别关注一下，因为根据 type 属性的改变，可以改变<input>的属性。
类型 | 描述 |
text | 文本输入 |
password | 密码输入 |
submit | 表单数据提交 |
button | 按钮 |
radio | 单选框 |
checkbox | 复选框 |
file | 文件 |
hidden | 隐藏的字段 |
image | 定义图像作为提交按钮 |
reset | 重置按钮 |
省略 type 属性与 type="text"效果一样， <input> 元素显示为文本框。
当 type 的值为text/password/number/时，会有以下属性对 <input> 元素有效。
属性 | 类型 | 描述 |
autocomplete | string | 字符串on或off，表示<input>元素的输入内容可以被浏览器自动补全。 |
maxLength | long | 指定<input>元素允许的最多字符数。 |
size | unsigned long | 表示<input>元素的宽度，这个宽度是以字符数来计量的。 |
pattern | string | 表示<input>元素的值应该满足的正则表达式 |
placeholder | string | 表示<input>元素的占位符，作为对元素的提示。 |
readOnly | boolean | 表示用户是否可以修改<input>的值。 |
min | string | 表示<input>元素的最小数值或日期。 |
max | string | 表示<input>元素的最大数值或日期。 |
selectionStart | unsigned long | 表示选中文本的起始位置。如果没有选中文本，返回光标在<input>元素内部的位置。 |
selectionEnd | unsigned long | 表示选中文本的结束位置。如果没有选中文本，返回光标在<input>元素内部的位置。 |
selectionDirection | string | 表示选中文本的方向。可能的值包括forward、backward、none。 |
下面创建一个 type="text" ，一次显示 25 个字符，但最多允许显示 50 个字符的文本框：
<input type="text" size="25" maxlength="50" value="initial value">HTML 使用的 <textarea> 元素在 JavaScript 中对应的是 HTMLTextAreaElement 类型。HTMLTextAreaElement类型继承自 HTMLElement 接口：
interface HTMLTextAreaElement extends HTMLElement {
...
}HTMLTextAreaElement 类型有一些独有的属性和方法：
下面创建一个高度为 25，宽度为 5 的 <textarea> 多行文本框。它与 <input> 不同的是，初始值显示在 <textarea>...</textarea> 之间：
<textarea rows="25" cols="5">initial value</textarea>注意：处理文本框值的时候最好不要使用 DOM 方法，而应该使用 value 属性。
<input> 与 <textarea> 都支持 select() 方法，该方法用于选中文本框中的所有内容。该方法的语法为：
select(): void下面看一个示例：
let textbox = document.forms[0].elements["input-box"];
textbox.select();也可以在文本框获得焦点时，选中文本框的内容：
textbox.addEventListener("focus", (event) => {
event.target.select();
});当选中文本框中的文本或使用 select() 方法时，会触发 select 事件。
let textbox = document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event) => {
console.log(`Text selected: ${textbox.value}`);
});HTML5 对 select 事件进行了扩展，通过 selectionStart 和 selectionEnd 属性获取文本选区的起点偏移量和终点偏移量。如下所示：
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}注意：在 IE8 及更早版本不支持这两个属性。
HTML5 提供了 setSelectionRange() 方法用于选中部分文本：
setSelectionRange(start, end, direction): void;下面看一个例子：
<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">选中部分文本</button>
<script>
function selectText() {
let input = document.getElementById("text-sample");
input.focus();
input.setSelectionRange(4, 8); // o Wo
}
</script>如果想要看到选中效果，必须让文本框获得焦点。
不同文本框经常需要保证输入特定类型或格式的数据，或许数据需要包含特定字符或必须匹配某个特定模式。而文本框并未提供验证功能，因此要配合 JavaScript 脚本实现输入过滤功能。
有些输入框需要出现或不出现特定字符。如果想要将输入框变成只读的，只需要使用 preventDefault()方法将按键都屏蔽：
input.addEventListener("keypress", (event) => {
event.preventDefault();
});而要屏蔽特定字符，就需要检查事件的 charCode 属性。如下所示，使用正则表达式实现只允许输入数字的输入框：
input.addEventListener("keypress", (event) => {
if (!/\d/.test(event.key)) {
event.preventDefault();
}
});还有一个问题需要处理：复制、粘贴及涉及Ctrl 键的其他功能。在除IE 外的所有浏览器中，前面代码会屏蔽快捷键Ctrl+C、Ctrl+V 及其他使用Ctrl 的组合键。因此，最后一项检测是确保没有按下Ctrl键，如下面的例子所示：
textbox.addEventListener("keypress", (event) => {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否允许在文本框中输入某些字符。
IE 是第一个实现了剪切板相关的事件以及通过JavaScript访问剪切板数据的浏览器，其它浏览器在后来也都支持了相同的事件和剪切板的访问，后来 HTML5 将其纳入了规范。以下是与剪切板相关的 6 个事件：
剪切板事件的行为及相关对象会因浏览器而异。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只会在显示文本框的上下文菜单时触发，但 IE 不仅在这种情况下触发，也会在 copy、cut 和 paste 事件在所有浏览器中都会按预期触发。
在实际的事件发生之前，通过beforecopy、beforecut 和 beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消 copy、cut和 paste 事件。
剪贴板的数据通过 clipboardData 对象来获取，且clipboardData 对象提供 3 个操作数据的方法：
而 clipboardData 对象在 IE 中使用 window 获取，在 Firefox、Safari 和 Chrome 中使用 event 获取。为防止未经授权访问剪贴板，只能在剪贴板事件期间访问 clipboardData 对象；IE 会在任何时候都暴露 clipboardData 对象。因此，要兼容两者，最好在剪贴板事件期间使用该对象。
function getClipboardText(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
}
function setClipboardText (event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
}如果文本框只有数字，那剪贴时，就需要使用paste事件检查剪贴板上的文本是否无效。如果无效，可以取消默认行为：
input.addEventListener("paste", (event) => {
let text = getClipboardText(event);
if (!/^\d*$/.test(text)){
event.preventDefault();
}
});注意：Firefox、Safari和Chrome只允许在onpaste事件中访问getData()方法。
在 JavaScript 中，可以用在当前字段完成时自动切换到下一个字段的方式来增强表单字段的易用性。比如，常用手机号分为国家好加手机号。因此，我们设置 2 个文本框：
<form>
<input type="text" name="phone1" id="phone-id-1" maxlength="4">
<input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>当文本框输入到最大允许字符数后，就把焦点移到下一个文本框，这样可以增加表单的易用性并加速数据输入。如下所示：
<script>
function tabForward(event){
let target = event.target;
if (target.value.length == target.maxLength){
let form = target.form;
for (let i = 0, len = form.elements.length; i < len; i++) {
if (form.elements[i] == target) {
if (form.elements[i+1]) {
form.elements[i+1].focus();
}
return;
}
}
}
}
let inputIds = ["phone-id-1", "phone-id-2"];
for (let id of inputIds) {
let textbox = document.getElementById(id);
textbox.addEventListener("keyup", tabForward);
}
</script>这里，tabForward() 函数通过比较用户输入文本的长度与 maxLength 属性的值来检测输入是否达到了最大长度。如果两者相等，就通过循环表中的元素集合找到当前文本框，并把焦点设置到下一个元素。
注意：上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。
HTML5 新增了一些表单提交前，浏览器会基于指定的规则进行验证，并在出错时显示适当的错误信息。而验证会基于某些条件应用到表单字段中。
表单字段中添加 required 属性，用于标注该字段是必填项，不填则无法提交。该属性适用于<input>、<textarea>和<select>。如下所示：
<input type="text" name="account" required>也可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填项：
let isRequired = document.forms[0].elements["account"].required;也可以检测浏览器是否支持 required 属性：
let isRequiredSupported = "required" in document.createElement("input");注意：不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和Opera 会阻止表单提交并在相应字段下面显示有帮助信息的弹框，而Safari 什么也不做，也不会阻止提交表单。
HTML5 为 <input> 元素增加了几个新的 type 值。如下所示：
类型 | 描述 |
number | 数字值的输入 |
date | 日期输入 |
color | 颜色输入 |
range | 一定范围内的值的输入 |
month | 允许用户选择月份和年份 |
week | 允许用户选择周和年份 |
time | 允许用户选择时间（无时区） |
datetime | 允许用户选择日期和时间（有时区） |
datetime-local | 允许用户选择日期和时间（无时区） |
电子邮件地址的输入 | |
search | 搜索（表现类似常规文本） |
tel | 电话号码的输入 |
url | URL地址的输入 |
这些输入表名字段应该输入的数据类型，并且提供了默认验证。如下所示：
<input type="email" name="email">
<input type="url" name="homepage">要检测浏览器是否支持新类型，可以在 JavaScript 中创建 <input> 并设置 type 属性，之后读取它即可。老版本中会将我只类型设置为 text，而支持的会返回正确的值。如下所示：
let input = document.createElement("input");
input.type = "email";
let isEmailSupported = (input.type == "email");而上面介绍的几个如 number/range/datetime/datetime-local/date/month/week/time 几个填写数字的类型，都可以指定 min/max/step 等几个与数值有关的属性。step 属性用于规定合法数字间隔，如 step="2"，则合法数字应该为 0、2、4、6，依次类推。如下所示：
<input type="number" min="0" max="100" step="5" name="count">上面的例子是<input>中只能输入从 0 到 100 中 5 的倍数。
也可以使用 stepUp() 和 stepDown() 方法对 <input> 元素中的值进行加减，它俩会接收一个可选参数，用于表示加减的数值。如下所示：
input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 减1
input.stepDown(10); // 减10HTML5 还为文本添加了 pattern 属性，用于指定一个正则表达式。这样就可以自己设置 <input> 元素的输入模式了。如下所示：
<input type="text" pattern="\d+" name="count">注意模式的开头和末尾分别假设有^和$。这意味着输入内容必须从头到尾都严格与模式匹配。
与新增的输入类型一样，指定 pattern 属性也不会阻止用户输入无效内容。模式会应用到值，然后浏览器会知道值是否有效。通过访问 pattern 属性可以读取模式：
let pattern = document.forms[0].elements["count"].pattern;使用如下代码可以检测浏览器是否支持pattern 属性：
let isPatternSupported = "pattern" in document.createElement("input");HTML5 新增了 checkValidity() 方法，用来检测表单中任意给定字段是否有效。而判断的条件是约束条件，因此必填字段如果没有值会被视为无效，字段值不匹配 pattern 属性也会被视为无效。如下所示：
if (document.forms[0].elements[0].checkValidity()){
// 字段有效，继续
} else {
// 字段无效
}要检查整个表单是否有效，可以直接在表单上调用checkValidity()方法。这个方法会在所有字段都有效时返回true，有一个字段无效就会返回false：
if(document.forms[0].checkValidity()){
// 表单有效，继续
} else {
// 表单无效
}validity 属性会返回一个ValidityState 对象，表示 <input> 元素的校验状态。返回的对象包含一些列的布尔值的属性：
因此，通过 validity 属性可以检查表单字段的有效性，从而获取更具体的信息，如下所示：
if (input.validity && !input.validity.valid){
if (input.validity.valueMissing){
console.log("请指定值.")
} else if (input.validity.typeMismatch){
console.log("请指定电子邮件地址.");
} else {
console.log("值无效.");
}
}通过指定 novalidate 属性可以禁止对表单进行任何验证：
<form method="post" action="/signup" novalidate>
<!-- 表单元素 -->
</form>也可以在 JavaScript 通过 noValidate 属性设置，为 true 表示属性存在，为 false 表示属性不存在：
document.forms[0].noValidate = true; // 关闭验证如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加formnovalidate 属性，指定通过该按钮无需验证即可提交表单：
<form method="post" action="/foo">
<!-- 表单元素 -->
<input type="submit" value="注册提交">
<input type="submit" formnovalidate name="btnNoValidate"
value="没有验证的提交按钮">
</form>也可以使用 JavaScript 设置 formNoValidate 属性：
// 关闭验证
document.forms[0].elements["btnNoValidate"].formNoValidate = true;以上总结了 <input> 和 <textarea> 两个元素的一些功能，主要是 <input> 元素可以通过设置 type 属性获取不同类型的输入框，可以通过监听键盘事件并检测要插入的字符来控制文本框的内容。
还有一些与剪贴板相关的事件，并对剪贴的内容进行检测。还介绍了一些 HTML5 新增的属性和方法和新增的更多的 <input> 元素的类型，和一些与验证相关的属性和方法。
*请认真填写需求信息，我们会在24小时内与您取得联系。
