omiga » HTML

EditPlus使用详解

omiga — Wed, 23 Dec 2009 12:55:34 +0000

EditPlus（EP）帮助手册中列出了EP的主要功能：

语法高亮
Internet功能
HTML工具栏
文档选择器
用户工具和帮助文件
自动完成
素材文本窗口
文档模板
其他功能

其中“语法高亮”，“自动完成”和“文档模板”在EP中非常灵活，用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示，基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限，而且可能并不符合个人日常的一些编码习惯，那么则需要我们自己根据习惯进行配置，才能得心应手。

自动完成

自定义自动完成功能可分为两步：1.编写自动完成文件；2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

#TITLE – 为自动完成文件标题
#CASE – 指定是否区分大小写。‘y’表示是，‘n’表示否。默认值是‘n’。
每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词，换行后开始匹配自动完成文本，直到遇到“#”符号。如：

#T=m
margin:^!px;

^! – 指定每一次自动完成后光标的停留位置。
^ – 转义字符，如果需要在自动完成文本中插入“^”或“#”则需要先进行转义：“^^”，“^#”。

自动完成文件编写完成后，保存为.acp文件在任一文件目录即可。

随后打开“工具”菜单-“首选项”-“文件”-“设置和语法”，为相关文件类型设置自动完成文件，“确定”完成设置。

自此自动完成功能配置完成，在对应类型的文件编码中，空格触发自动完成功能。当然，你可以通过Shift 键或Window徽标键来暂时禁止此功能。

文档模板

我们日常处理的不论是HTML文档，还是CSS,JavaScript文档，都存在一定的文档规范，比如版权信息，title，keywords，description，或者一些固定的文档结构。我们显然不希望每次新建这些文档的同时，都需要重新录入这些代码，即使是“Ctrl+v”也还是有损效率。那么EP的“文档模板”则可帮助我们完成所有的工作。

自定义“文档模板”也分为两步：1.编写文档模板，2.关联模板

编写文档模板非常简单，无任何语法。比如，我需要一个HTML文档模板，那么新建一个HTML文档如下。






title | wondger@gmail.com/

根据个人需要编写模板完成后，保存为.html在任一文件目录。

随后打开“工具”菜单-“首选项”-“文件”-“模板”，在模板列表中选择相应模板关联模板文件即可。模板可以是默认模板，也可以新建模板（MY_PAGE）。

这样便完成“文档模板”设置，现在文件新建菜单中便可选择新建该模板文档。（其实你还可以自定义新建文档快捷键，稍后介绍）

其他功能

自定义快捷键

EP所有操作的快捷键皆在“工具”菜单-“首选项”-“工具”-“键盘”中进行设置。我们以新建模板文档为例。

在“文件”菜单的“命令”中并不存在新建的“MY_PAGE”模板，那么如何自定义“新建MY_PAGE文档”的快捷键？其实这里存在一个对应关系，在“文件”菜单的“命令”列表中存在一个“模板1”-“模板20”的选项列表，这就对应于我们的自定义模板。

在EP的模板列表中默认的HTML和XHTML模板无法删除，那么我们自定义的模板则按照从上到下的顺序为“模板1”、“模板2”…（其实我在想第21个自定义模板怎么办？-_-!）。这里“MY_PAGE”对应于“模板5”，在设置快捷键的时候会提示该快捷键是否已定义，如果分配已定义的快捷键，那么较早的定义会被覆盖。一个命令可以定义多个快捷键。

自动保存

EP具有定时自动保存的功能，保存间隔时间可在“工具”菜单-“首选项”-“文件”中进行设置。

保存时创建备份

EP默认会在保存时自动创建一个.bak备份文件。备份文件存放目录，后缀名皆可自定义。

HTML工具栏

EP具有强大的HTML工具栏，具有插入图像、选择颜色、插入特殊字符、表格、段落、列表、注释、表单等丰富功能。这个HTML工具同时也是可以在“工具”菜单-“首选项”-“工具”-“工具栏”自定义。

OK，以上内容为个人认为是在EP使用中较多涉及的一些功能。除此之外关于软件本身的一些设置，如字体，颜色，背景，布局等，大家就慢慢折腾吧！

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

omiga — Fri, 03 Jul 2009 01:38:13 +0000

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity. (Permalink)

HTML5

omiga — Mon, 29 Jun 2009 05:19:04 +0000

尽管HTML5草案最终定稿要在遥远的2012，而最终的标准的正式发布可能会在更遥远的2022，但是还是可以YY一下，听说safari4已经支持HTML5了～···

HTML5主要在嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档方面增加了很多新的特性，同时也包括新的页面元素，比如

label的隐式连接

omiga — Fri, 13 Mar 2009 02:37:39 +0000

label用来向控件定义标注（标记），如果不是用于这个用途，那完全也没有必要使用label，使用span就可以了。使用label可以与控件建立一种连接，当选择label时，即会触发此控件，即该控件会因为与之连接的label的选择而获取到焦点。

通常这一工作是通过label标签的for属性来完成的，将for属性指向一个控件的id即完成连接。

姓名：

这就是label的显示连接。

而隐式连接就不再需要for属性，只需简单地将控件包含在label标签中即可。

密码:

label与其他控件建立连接的这两种方法，绝大部分现代浏览器都是支持的（IE6不支持隐式连接方式）。隐式方式虽简单快捷却缺乏良好的语义结构，所以还是不赞成使用；显示方式良好的结构已表现出一定的语义（结构也应该是具有语义的），所以显示方式仍然是最佳的选择。

进一步认识table

omiga — Thu, 08 May 2008 08:18:28 +0000

基础的东西在这里，就不重复了～

用于定义一个表格的标题，书写时候需紧随

标签之后。可通过样式属性：caption-side:left 设置标题在表格中所处的位置。但是目前仅非IE浏览器支持该样式属性，而IE浏览器中可通过标签的align属性完成（IE6,IE7仅支持top,bottom）。同时

标签无法继承其上级table的某些样式属性（如backgroud，border等）。同时FF对caption的出来还表现出一些异常，如当对其上级设置外边距时，

并不会随上级流动～查看演示

用于对表格中的列进行分组。如：我们将表格中的第一列设置为红字白底。

查看演示我们可以看到不同浏览器对该标签的支持都不尽相同，safari对该标签的支持相当苛刻，需将该标签紧随

,,,,标签。微软更是为table完美的数据表现添加了大量的扩展属性。当然了，如果表格单纯用于页面布局，这些标签或者属性基本是一无是处。但是当table回归它本来地位时，这一切变得重要。

：其内容组成表格的标题，它可以包含,：与标签类似，其用于在表格中创建一个页脚，亦可在多页上出现。

：指定表格正文，并可以出现多次（、只可在表格中出现一次）。熟悉各标签相应功能后，那么构建一个合理的用于呈现数据的表格，就变得很简单了。各尽其用，最大限度地表示出数据间的关系，这才是table真正用途之所在。那么我们可以构建如下完美数据表格。

/书写。同时在非IE浏览器中该标签的书写位置不会影响到中单元格的显示属性，中的列亦可应用设置。而IE中只有位于之后的表格对象方可应用此标签设置，同时部分浏览器对通过该标签进行的样式设置无效，经测试，目前仅IE支持最好。查看演示

为表格中一个或多个列定义属性值，只能在colgroup中使用此元素。如：将表格中的第一列设置为红字白底，第二，第三列设置为黑底白字。查看演示

的span属性定义其影响的列数～

表格边框

表格的默认边框是很丑陋的，一个最为关键的问题是相邻单元格的重复边框，所以我们不得不动手对其进行美化。

方法一：取消默认的表格,单元格设置，将单元格间距设置为指定宽度，为表格设置背景色进而实现无重复边框。查看演示

方法二：更为简单有效的方法是通过设置border-collapes。查看演示

标签详解

omiga — Wed, 26 Mar 2008 01:38:06 +0000

定义和用法

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对。

HTML 与 XHTML 之间的差异

在 HTML 中，标签没有结束标签。在 XHTML 中，标签必须被正确地关闭。

提示和注释：

注释：标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性	值	描述	DTD
content	some_text	定义与 http-equiv 或 name 属性相关的元信息	STF

可选的属性 DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.

属性	值	描述	DTD
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP头部。	STF
name	author description keywords generator revised others	把 content 属性关联到一个名称。	STF
scheme	some_text	定义一种用来翻译 content 属性值的格式。	STF

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。 “keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。使用带有 http-equiv 属性的标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

http-equiv="charset" content="iso-8859-1">
http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

和用以说明主页制作所使用的文字以及语言；
定时让网页在指定的时间n内，跳转到页面http://yourlink；
可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。 content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由标签的 profile 属性指定的概况文件中进行了定义。

标准属性 dir, lang, xml:lang

HTML4默认样式

omiga — Wed, 05 Mar 2008 14:18:58 +0000

html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,
h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre{display:block;}
li{display:list-item;}
head{display:none;}
table{display:table;}
tr{display:table-row;}
thead{display:table-header-group;}
tbody{display:table-row-group;}
tfoot{display:table-footer-group;}
col{display:table-column;}
colgroup{display:table-column-group;}
td,th{display:table-cell;}
caption{display:table-caption;}
th{font-weight:bolder; text-align:center;}
caption{text-align:center;}
body{margin:8px; line-height:1.12;}
h1{font-size:2em; margin:.67em 0;}
h2{font-size:1.5em; margin:.75em 0;}
h3{font-size:1.17em; margin:.83em 0;}
h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu{margin:1.12em 0;}
h5{font-size:.83em; margin:1.5em 0;}
h6{font-size:.75em; margin:1.67em 0;}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:bolder;}
blockquote{margin-left:40px; margin-right:40px;}
i,cite,em,var,address{font-style:italic;}
pre,tt,code,kbd,samp{font-family:monospace;}
pre{white-space:pre;}
button,textarea,input,object,select{display:inline-block;}
big{font-size:1.17em;}
small,sub,sup{font-size:.83em;}
sub{vertical-align:sub;}
sup{vertical-align:super;}
table{border-spacing:2px;}
thead,tbody,tfoot{vertical-align:middle;}
td,th{vertical-align:inherit;}
s,strike,del{text-decoration:line-through;}
hr{border:1px inset;}
ol,ul,dir,menu,dd{margin-left:40px;}
ol{list-style-type:decimal;}
ol ul,ul ol,ul ul,ol ol{margin-top:0; margin-bottom:0;}
u,ins{text-decoration:underline;}
br:before{content:"\A";}
:before,:after{white-space:pre-line;}
center{text-align:center;}
abbr,acronym{font-variant:small-caps; letter-spacing:0.1em;}
:link,:visited{ text-decoration:underline;}
:focus{outline: thin dotted invert;}
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]{direction:ltr; unicode-bidi:bidi-override;}
BDO[DIR="rtl"]{direction:rtl; unicode-bidi:bidi-override;}
*[DIR="ltr"]{direction:ltr; unicode-bidi:embed;}
*[DIR="rtl"]{direction:rtl; unicode-bidi:embed;}
@media print{
h1{ page-break-before: always;}
h1,h2,h3,h4,h5,h6{page-break-after:avoid;}
　　ul,ol,dl{page-break-before:avoid;}
}

你记得多少HTML标签？

omiga — Thu, 06 Dec 2007 23:35:13 +0000

极度汗颜～···用了五分钟，抓破脑袋也只写出了51个，还有40没想出来。看结果，没想出来的，要么是用的最多的，比如我都没想出来，要么就是我根本不知道的。51个，算算～···[redface]，原来还没有及格呀～···看来我对HTML还是一无所知～

标记一下

我写出来的:

A, B, BODY, CAPTION, CENTER, CODE, COL, DD, DIV, DL, DT, EM, FONT, FORM, H1, H2, H3, H4, H5, H6, HR, HTML, I, IMG, INPUT, LABEL, LI, MAP, MENU, META, OBJECT, OL, P, PRE, S, SCRIPT, Select, SPAN, STRONG, STYLE, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, U, UL。

这是我没写出来的:(似乎有十多个从来没见过)

ABBR, ACRONYM, ADDRESS, APPLET, AREA, BASE, BASEFONT, BDO, BIG, BLOCKQUOTE, BR, BUTTON, CITE, COLGROUP, DEL, DFN, DIR, FIELDSET, FRAME, FRAMESET, HEAD, IFRAME, INS, ISINDEX, KBD, LEGEND, LINK, NOFRAMES, NOSCRIPT, OPTGROUP, OPTION, PARAM, Q, SAMP, SMALL, STRIKE, SUB, SUP, TT, VAR。

看看你能写出多少个：http://www.justsayhi.com/bb/html_quiz

标准化你的表格

omiga — Fri, 23 Nov 2007 21:44:34 +0000

“div+css”极度盛行的今天，很多人已经忘了在HTML里还有table呃～，也有很多人记得只是不愿再想起。单纯为了div而完全抛弃table的做法绝对是不可取的。table没什么错，初衷就是用来显示数据的，错在很多人在那个年代把它用在了布局上，而且用滥了。

在table广泛用于布局的时代，或许很多人眼中table就是，其实不然，即使早在HTML4之前，至少就有了，标签，HTML4开始引入

：用于指定可选的表格外加标题，内容通常显示在表格上方或者下方以表明表格的内容，默认居中显示。

：设置表格的标题，浏览器以不同的样式显示标题，一般将标题居中，并以黑体显示。

、和

。除了便于组织和应用样式外，为这些内容分组的优点在于这样可能在多个页面中重复某些元素，主要体现在打印表格中。

wondger’s blog
Category ID	Category Name	Description
1	简单生活	我的简单生活
2	web相关	web应用，业界新闻
3	设计制作	web标准，web设计

查看代码效果

合理的数据表格呈现，远不止构建一个合理的代码结构，更要在数据的视觉表现上做一定的设计。比如标题与正文内容的区分，数据的显示方式，对齐原则等，设计者大可自由发挥。

BTW:啥是标准啊？我相信很多人回答不上来。尽管很多人都自称是css高手，div+css高手，在一个web标准的群里问，没人吭声，都是潜水王，都忘了这个世界除了70%的水，还有30%的空气。我也不知道啥是标准，绝大多数用户也不知道。但是我知道大谈标准化的今天，标准化并不是都是为了用户而标准化，相反更多地是在为计算机标准化。计算机笨，只认识代码，管他什么结构，表现，seo，大部分是为计算机做的。国外用人工搜索引擎工作时，不会去查看源代码。个人对标准化在HTML这部分的理解是，用最合理的标签和结构去呈现最适合的内容，纯属个人观点！意见相左者就当我在YY～···