HTML教程 – 设计之家

HTML教程 – 设计之家 //www.laura-marie.com 传播先进设计理念推动原创设计发展 Wed, 08 Jun 2016 01:56:41 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9.4 带你轻松打开SVG动画的大门 //www.laura-marie.com/45531.html //www.laura-marie.com/45531.html#respond Wed, 08 Jun 2016 01:53:54 +0000 初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。

首先我们定义一块画布，然后在上面画一个圆形。

他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器）

点击查看Demo

现在我们就让这个圆动起来

动起来是这个样子的（gif循环之后234三个demo将无法区分，所以这里的gif只循环一次，需要多次查看效果请刷新或者进入demo查看）：

点击查看Demo

我们可以看到圆动起来的时候，circle元素里边不再是空的，多了一个animate的元素，这个animate含有下面几个属性：

attributeName：动画属性名，顾名思义，你想要改变哪个属性

attributeType：动画属性的类别，常见的两个值，XML和css，取决于属性是在xml里还是在style里，下面改变opacity的demo里，就是使用的css。不写的时候默认值为auto，他会先搜索css，建议写上。

from to ：性的开始和结束值，from可选，当不写的时候会取默认值。

begin dur ：动画的开始时间与结束时间。如果你想打开页面过几秒才开始动画，那么就定义begin就好了。

观察上边的动画，我们发现动画结束的时候又回到了第一帧，如果我们想让他停在最后一帧，就需要用到 fill 属性（animate的fill属性与svg的fill填充要区分一下）

fill支持参数有：freeze与remove. 其中remove是默认值，表示动画结束直接回到开始的地方，现在再看这个动画的样子：

点击查看Demo

这样看起来动画还是没有满足我的需求，我想让动画一直循环播放怎么办？这就要用到 repeatCount

属性的取值可以是一个数字，也可以是“indefinite”表示无限循环。现在动画变成了这样：

点击查看Demo

现在动画是循环了，可我还是觉得哪里别扭，第一帧和最后一帧并没有衔接起来，看起来有突兀。这时候我们就回过头再看看动画的开始和结束。
from和to只能定义开始和终结两个时间点，另外还有一个属性by，是可以替代to的，to表示的是一个绝对值，by表示的是一个offset，比如from为50，to为80，表示从50到80，by为80的话，表示offset为80，那么最终的结果就是130,如果我们的demo使用by，那么就是by 30.除了by意外，还有一个属性values，他可以接受一组数值，比如我们想作出圆的呼吸效果，那么只需要

现在我们再看一眼刚才的动画

点击查看Demo

可是现在的效果我还是不满意，我想让这个圆形呼吸的同时改变透明度，这就是svg在单个对象上面做多重动画了。我们在 attributeName=”r” 下面，增加一个animate元素，用来改变圆的透明度

现在这个动画是这个样子的（gif并不能很好的展示出透明度的渐变，建议使用标准浏览器打开demo查看）：

点击查看Demo

写到这里，我上边的呼吸效果已经实现了，但是我现在又有了新的想法，我想放一排的圆，让一个动完，才让下一个接着动。这也就是我们编程里的“同步”概念，在svg里就是同步动画。同步动画的实现很简单，只需要有动画id，然后下一个动画的 begin 值为上一个的 id.end, 比如

我们来看一下同步动画的实例：

点击查看Demo

更为强大的是，begin的值可以是表达式，比如

这样就实现了同步的同时，带有5s的偏移，也就是第一个结束5s之后，第二个动画才开始。OK，同步动画实现了，不过现在我要改需求……..把刚才的圆还给我，我要让他旋转。SVG的旋转动画需要用到另一个<animateTransform>元素，他的用法和animate并没有本质的区别，只不过属性需要换一批。比如我们相让刚才那个圆形旋转起来，等等，圆形原地旋转的话，好像我们并看不出他在旋转呀，那好吧，我们换一个旋转起来视觉效果比较强的图形，现场写一个五角星出来，并给他加animateTransform ：

查看一下他动起来的样子：

点击查看Demo

和前边的例子并没有本质区别，唯一不同的地方在于from部分，from和to都是三个值，第一个值是角度，从0到360度的旋转，第二个和第三个组成一个坐标，这个坐标决定了svg围绕哪个点来进行旋转，关于这方面的知识推荐新同学了解一下SVG的坐标系相关知识。transform的type可以包括translate，scale,skew等，和css相通，用法也与rotate大同小异，这里就不一一的列举实例。实现了旋转以后，我们再换一个更强大的动画元素，<animateMotion>.我们可以用他来实现引导线动画，让你的图形沿着复杂的路径运动。比如我们先画一条路径

哎呀一不小心画的太圆了，不过没关系，我们现在把用过的二手五角星拿过来

加入了animateMotion元素，animateMotion的path决定了五角星的运动路线，可以先看一下效果，是这样的

点击查看Demo

好像哪里不对劲，对了，五角星沿着路径转动的时候能不能随着角度倾斜？那么就需要用到

这个属性会让你的图形随着你的路径自动做角度的调整。加上之后的最终动效是这样的

点击查看Demo

总结语：看完上边的实例，你其实已经站在SVG动画的门里了，剩下的就是进阶知识的获取，以及熟练度的达成。下一次我继续和大家一起学习SVG动画一些进阶的技巧！

原文链接: 腾讯ISUX

]]> //www.laura-marie.com/45531.html/feed 0 36个重要的HTML标签 //www.laura-marie.com/31065.html //www.laura-marie.com/31065.html#respond Tue, 15 May 2012 15:31:00 +0000 每一个HTML标签都有其用法，但我们在写HTML代码时，却常常舍近求远，忽略了很多非常重要且特别有用的标签。

既然HTML中定义了这么多标签，而且每种标签都有其用法，我们为什么不尽量去使用这些标签呢。下面收集并整理了36个常被我们遗忘却非常有用的HTML标签。

1. <!? ?> :注释

2. <!DOCTYPE>：文档类型声明

文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTDs，将使网页进入一种混乱模式(quirks mode)。

示例：

XHTML过渡定义类型，此类型可以使用HTML4中的标签

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML严格定义类型，此文档只可以使用XHTML1中定义的标签

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML1.1版定义类型

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

XHTML框架定义类型。(可以使用框架)

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

3. <abbr>：缩写

示例：<abbr title=”Pmited”>Ltd.</abbr>

说明：简称和缩写是对一个惯用词组的缩写表示，一般使用词组中每个单词的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一种提取首字母的缩写.有时候缩写经常会在最后加一个。

4. <acronym>：取首字母的缩写

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>：定义图像点击区域

area标签是单独出现的，<area />

area标签必须使用在map标签中，而且必须配合img标签使用。

属性：

Common ― 一般属性

accesskey ― 链接的快捷键访问方式

alt ― 图像的提示文字

coords ― 定义可点击区域图形的坐标

href ― HTML链接源的URL

nohref ― 图像点击排除的区域，当不使用href时应使用nohref

shape ― 可点击区域的形状

tabindex ― 使用”Tab”键的遍历顺序

target ― 链接目标

area是cPent-side image map area的意思，区域

area标签示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

6. <base>: 定义基URL用于页面的链接与引用

base标签是单独出现的，<base />

base标签只能放置在head标签内

当使用相对路径定义链接时，可以使用base标签定义基URL解析所有文档中定义的相对路径的URL

属性：

href ― 基URL

target ― 链接目标

base是document base URI的意思

base标签示例

<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>

使用上面示例代码的html页面中的相对链接，将直接指向基URL http://www.renniaofei.com/，并且使用弹出窗口。

base标签在框架中的使用

base标签通常可以使用在框架链接中，例如
<frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>

链接页Pst.htm

l<head> <base target=”mainTarget”> </head> < a href=”http://www.renniaofei.com/category/design/”>design</a> < a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>

通过上面示例可以避免在每个链接中写入target=”mainTarget”

7. <blockquote>：表示引用块

blockquote标签是成对出现的，以<blockquote>开始，以</blockquote>结束

属性：

Common ― 一般属性

cite ― 被引用内容的URI

示例：

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>标准网页设计要区分内容与表现，学习标准网页设计。</p> </blockquote>

8. <button> ：定义按钮

button标签是成对出现的，以<button>开始，</button>结束

可以定义比input内容更丰富的按钮。

属性：

Common ― 一般属性

accesskey ― 快捷键访问方式

disabled ― 禁止使用

name ― 标签名称

tabindex ― 使用”Tab”键的遍历顺序

type ― 按钮类型

button ― 普通按钮

reset ― 重置表单按钮

submit ― 提交按钮

value ― 通过表单传递到服务器端的数据

button是push button的意思，按钮

button标签示例：

<button type=”submit”>提交</button>

一个使用文字的普通的提交按钮

<button type=”reset”> 从<strong>任鸟飞</strong>提交表单 </button>

改变按钮内加重文字的button标签

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

说明：使用图片的button标签，注意有alt的提示文字。

9. <caption>：HTML表格的标题

caption标签是成对出现的，以<caption>开始。</caption>结束

属性：

Common ― 一般属性

caption:标题

示例：

<table width=”80%”> <caption> 域名数量介绍 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的数量</th> <th>.cn域名的数量</th> < th>.net域名的数量</th> </tr> <tr> < td>2003年</td> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

说明：

caption标签可以为表格提供一个描述，和图像的说明alt比较类似.默认情况下，浏览器显示表格标题在表格的上方。

CSS里的caption-side属性用来控制表格标题显示的位置。

10. <cite>引用

cite标签是成对出现的，以<cite>开始，以</cite>结束

属性：

Common ― 一般属性

cite ― 引用内容的URI

cite是citation的缩写

示例：

<cite cite=”http://www.renniaofei.com/”>一步步的教我学会HTML与XHTML</cite>

11. <col> 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行

col标签是单独出现的，<col />

属性：

Common ― 一般属性

span ― 定义一个col跨越的列数,默认值为1

12. <colgroup>表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式

colgroup标签是成对出现的，以<colgroup>开始，以</colgroup>结束

属性：

Common ― 一般属性

span ― 定义一个colgroup跨越的列数,默认值为1

13. <dd>代表HTML自定义列表描述

dd标签是成对出现的，,以<dd>开始，</dd>结束

属性：

Common ― 一般属性

dd是definition description的缩写

14. del 标签 ― 定义被删除的文本

del标签是成对出现的,以<del>开始，</del>结束

del通常应连同ins标签一同使用，表示被删除与被插入的文本

通过del与ins定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统

使用del定义的文本通常带有删除线

属性：

Common ― 一般属性

cite ― 引用网址，定义为何删除的引用网址

datetime ― 删除的时间与日期

title ― 定义删除的目的或提示

del是deleted text的缩写，删除文本

del标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 网址已经删除。 </p>

15. <dir> 定义多层目录列表

不符合标准网页设计的理念，不赞成使用.

dir标签是成对出现的，以<dir>开始，</dir>结束

属性：

Common ― 一般属性

dir是directory Psts的缩写，目录列表

16. <dfn> ? 定义标签

dfn标签是成对出现的，以<dfn>开始，以</dfn>结束

属性：

Common ― 一般属性

dfn是defining instance的缩写

示例： <dfn>任鸟飞</dfn>网页设计网!

17. <dl> 代表HTML自定义列表

dl标签是成对出现的，以<dl>开始，</dl>结束

自定义列表的开始使用<dl>标签，列表中每个元素的标题使用<dt>(definition term)定义，后面跟随<dd>(definition description)用于描述列表中元素的内容.

属性：

Common ― 一般属性

dl是definition Psts的英文缩写

示例：

<dl> <dt>www</dt> <dd>World Wide Web的缩写.</dd> <dt>renniaofei</dt> < dd>任鸟飞</dd> <dd>www的:).</dd> < dt>com</dt> <dt>com.cn</dt> < dt>cn</dt> <dd>这都是域名的后缀.</dd> </dl>

说明：

不一定每个dt标签要对应一个dd，可以一对多或多对一(就像上面的例子)

18. <dt>代表HTML自定义列表组

dt标签是成对出现的，以<dt>开始，</dt>结束

属性：

Common ― 一般属性

dt是definition term的缩写

19. <em> 强调标签

em标签是成对出现的，以<em>开始，以</em>结束

属性：

Common ― 一般属性

em是emphasis的缩写

示例： 强调一下,<em>不要</em>和我开玩笑!

20. <ins> 定义被插入的文本

ins标签是成对出现的，以<ins>开始，</ins>结束

ins通常应连同del标签一同使用，表示被插入与被删除的文本

通过ins与del定义文档可以帮助了解文档内容的修改过程，利于多人编辑系统

使用ins定义的文本通常带有下划线

属性：

Common ― 一般属性

cite ― 引用网址，定义为何插入的引用网址

datetime ― 插入的时间与日期

title ― 定义插入的目的或提示

ins是inserted text的缩写，插入文本

ins标签示例：

<p>任鸟飞网页设计网址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 网址已经删除。 </p>

21. <kbd>标签表明使用者输入的文字

kbd标签是成对出现的，以<kbd>开始，以</kbd>结束

属性:

Common ― 一般属性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定义图像点击区域的集合

map标签是成对出现的,以<map>开始，</map>结束

map标签必须配合area标签使用

map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致

属性

Common ― 一般属性

id ― 定义map的名称。

name ― 定义map的名称。

map是cPent-side image map的意思

map标签示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

23. <menu> 定义菜单列表

不符合标准网页设计的理念，不赞成使用。

menu标签是成对出现的,以<menu>开始，</menu>结束

属性

Common ― 一般属性

menu:菜单

24. <noframes>对不支持框架的设备进行提示

noframes标签是成对出现的，以<noframes>开始，</noframes>结束

由于frameset内不能包含body标签，因此noframes内部必须包含body标签

示例

<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> < p>任鸟飞网页设计网使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问。</p> < /body> </noframes> </frameset>

25. <noscript>无法加载脚本时的提示文字

noscript标签是成对出现的，以<noscript>开始,以</noscript>结束

示例

<noscript>此页面无法加载js脚本代码。</noscript>

26. <q>

表示一个行引用

q标签是成对出现的，以<q>开始，以</q>结束。

属性:

Common ― 一般属性

cite ― 引用内容的URI

q是quoted text的缩写

示例：

<cite>古人</cite>云：<q>良言一句三冬暖，恶语伤人六月寒。</q>

27. <s>定义删除线的文字

不符合标准网页设计的理念，不赞成使用。

s标签是成对出现的，以<s>开始，以</s>结束

属性：

Common ― 一般属性

s是strikethrough的缩写

28. <sub>表示下标

sub标签是成对出现的，以<sub>开始。以</sub>结束

属性：

Common ― 一般属性

sub是subscript的缩写

29. <sup>表示上标

sup标签是成对出现的，以<sup>开始，以</sup>结束

属性：

Common ― 一般属性

sup是superscript的缩写

30. <tbody> 表示HTML表体

浏览器显示表格时，通常是完全下载表格后，再全部显示，所以当表格很长时,可以使用tbody分段显示。

31. <tfoot>表示HTML表脚

表格的表脚tfoot，可以使用单独的样式定义表脚，并且在打印时可以在分页的下部打印表脚。

32. <th>代表HTML表格中的表头

th标签是成对出现的,以<th>开始，</th>结束

属性：

Common ― 一般属性

abbr ― 代表表头的简写

axis ― 对单元格在概念上分类

colspan ― 一行跨越多列

headers ― 连接表格的数据与表头

rowspan ― 一列跨越多行

scope ― 定义行或列的表头

aPgn ― 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)

vaPgn ― 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | basePne(基线对齐))(此属性应该使用CSS实现)

th是table header cell的缩写

示例：

<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的数量</th> <th>.cn域名的数量</th> < th>.net域名的数量</th> </tr> <tr> < th>2003年</th> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

33. <thead>表示HTML表头

表格的头部thead，可以使用单独的样式定义表头，并且在打印时可以在分页的上部打印表头

34. l 标签 ― 表示一段语句

l标签是成对出现的，以<l>开始,以</l>结束

属性：

Common ― 一般属性

l是Pne of text的缩写

示例： <l>一行实实在在的文字!</l>

35. <Code>代码标签

code标签是成对出现的，以<code>开始，以</code>结束，常用于显示源代码。

36. <fieldset> 表单分组

如果一个页面的表单项太多，我们最好把它们分组显示，就像使用p标签分开段落一样，可以使用fieldset与legend标签对表单内容分组。

fieldset标签是成对出现的，以<fieldset>开始，以</fieldset>结束

一个表单可以有多个<fieldset>，每对<fieldset>为一组，每组内容的描述可以使用legend标签说明

示例：

<fieldset> <legend>我最喜爱的：</legend> <label for=”computer”>计算机</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>购物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>

]]> //www.laura-marie.com/31065.html/feed 0 10个最容易犯的HTML标签错误 //www.laura-marie.com/24565.html //www.laura-marie.com/24565.html#respond Sat, 11 Sep 2010 06:53:00 +0000

保持良好的代码风格是每个Coder必学的课程,同样在HTML设计的时候也要特别注意代码的规范性,虽然说不规范的代码不会直接造成严重的后果,但很有可能对用户体验造成一定的干扰,同时也会降低搜索引擎对网站的好感度.这份列表包含了10个最容易犯的HTML标签错误,记下他们,能够让我们避免犯此常见错误,让我们的HTML标签符合语义,和标准的要求.

罪行1:把块级元素放入了行内元素内

HTML 元素的表现方式不外乎就两种:块级和行内.每一个标签都有默认的表现方式不是块级就是行内.像P和p 就是块级元素,他们用来形成文档结构.行内元素只能在快级元素内.

罪行2: img 标签没有包含alt属性

alt属性是所有显示在网页中图片的必须属性,它能够帮助人们知道这是什么图片.或者在网速比较慢的时候显示图片的含义是什么.它的主要目的是,说明图片的含义,想这样的说明 alt=”image”是很糟糕的.如果,有些图片的确只是装饰作用而已,那么建议你写成 alt=””.

罪行3:在必要的时候没使用list

犯罪4：使用<b>和<i>显示黑体字和斜体

可以用css样式定义 font-weight 和 font-style. 如果必须在页面中写标签的话,用 <strong> 或 <em>标签来替换.<b><i>的没有任何语义可言, 但是,为了更简洁的页面,还是选择 css定义样式吧

犯罪5：使用太多<br/>

<br />换行标记只应该用于插入是在第一个文本流换行符敲到一个新行一个特别字了。它不应该被用来制造元素之间的差距，而是分裂成不同的段落，或调整的幅度CSS样式的文本。

罪行6: 使用错误的 Strikethrough 标签

在昔日，<S>和<strike>允许用来定义网站文字。不过，现在他们被定义为不推荐使用的标签,当他们任然可以有效果.现在用新的标记集- <del>和<ins>。来替换<s><strike>

罪行 7: 使用内联样式

css最重要的目的只是为了区分文档和样式,如果,你把style写到页面里面,那么完全没有css的作用可言.所以,记住把你的样式放在它该放的位子

罪行 8: 把border添加到HTML中

罪行 9: 没有使用header标签<h1>-<h6>

罪行10: 没有语义的 <blink> 或<marquee>

不被w3推荐，<blink>和<marquee> (闪动,滚动)标签是纯粹的丑陋。

不要使用这个标签,如果一定要用这样的效果,相信,你会有其他更好的效果

]]> //www.laura-marie.com/24565.html/feed 0 border:none;与border:0;的区别 //www.laura-marie.com/21445.html //www.laura-marie.com/21445.html#respond Thu, 26 Nov 2009 06:21:00 +0000

这问题在网络相信已经有不少人问到，最近再次被牵起讨论，籍此记录一下个人的理解，border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。

性能差异：

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，如下例Demo1：

【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如下例Demo2：

总结：

对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，如下例Demo3：

对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

原文：http://blog.gulu77.com/?p=614

]]> //www.laura-marie.com/21445.html/feed 0 网页制作中段落缩进的5种解决方法 //www.laura-marie.com/20810.html //www.laura-marie.com/20810.html#respond Sun, 13 Sep 2009 08:22:00 +0000

   1、人为的加入两个中文全角空格，才能够显示出位置缩进效果。
    2、插入点图或图形
    点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。
    同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。
    插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。
    3、插入没有边框和内容的表格
    这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。
    利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。
    4、插入特殊的空格字符“＆nbsp”
    “＆nbsp”代表非显示空格字符。插入若干个“＆nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape 3.01中只能写小写字母，而在IE中大小写都可以。
    这四种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具，如网景浏览器中有专门加入空格的工具条，也可以完成段落缩进。
    5、预格式(PRE)
    用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：
<pre>
－－预格式显示……
</pre>

　　网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。
　　通过以上方法，就可以解决网页制作中段落缩进的问题。

]]> //www.laura-marie.com/20810.html/feed 0 HTML网页头部代码全接触 //www.laura-marie.com/20809.html //www.laura-marie.com/20809.html#respond Sun, 13 Sep 2009 08:18:00 +0000

对于刚刚开始学习HTML的新手而言，了解网页头部代码是非常必要的。

以下所有代码全是在<head>…</head>之间，具体内容有：

1.<title>…</title>

标题元素，帮助用户更好识别文件，有且只有一个。当作为首页或收藏时做文件名。

2.<link>…</link>

显示本文档和其它文档之间的关系：<link rel=“stylesheet” href=“s.css”> 和外部样式表的连接。

rel说明html文件和url两文档之间的关系，href说明文档名。

3.<style>…</style>

可以在文档中包含风格页。文档本身的内部样式。

4.<base>…</base>

为相对路径定义绝对路径url，读者下载你的文档后，也可知道从哪下的

url格式：通信协议：//主机名/路径/文件名

5.<script>…</script>

用于包含脚本（一系列脚本语言写的命令）可以是 Javascript 或 VbScript。

6.<meta>…</meta>

meta是用来在HTML文档中模拟HTTP协议的响应头报文。

meta标签的常见功能：

1.帮助主页被各大搜索引擎登录；

2.定义页面的使用语言；

3.自动刷新并指向新的页面；

4.实现网页转换时的动画效果；

5.网页定级评价；

6.控制页面缓冲；

7.控制网页显示的窗口。

meta 的属性有两种：name和http-equiv。

name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。

name 属性

1.<meta name=”Generator” contect=”editplus”>用以说明生成工具（如Microsoft FrontPage 4.0）等；

2.<meta name=”KEYWords” contect=”webjx,cnrose”>向搜索引擎说明你的网页的关键词；

3.<meta name=”Description” contect=”webjx’s blog”>告诉搜索引擎你的站点的主要内容；

4.<meta name=”Author” contect=”webjx”>告诉搜索引擎你的站点的制作的作者；

5.<meta name=”Robots” contect=”all|none|index|noindex|follow|nofollow”>

name属性：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性：

1.<meta http-equiv=”Content-Type” contect=”text/html”;charset=gb_2312-80″>和 <meta http-equiv=”Content-Language” contect=”zh-CN”>用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2.<meta http-equiv=”Refresh” content=”n; url=http://yourlink”> 定时让网页在指定的时间n秒内，跳转到页面http;//yourlink；

3.<meta http-equiv=”Expires” contect=”Mon,12 May 2001 00:20:00 GMT”>可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

4.<meta http-equiv=”Pragma” contect=”no-cache”>是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5.<meta http-equiv=”set-cookie” contect=”Mon,12 May 2004 00:20:00 GMT”>cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6.<meta http-equiv=”Pics-label” contect=””>网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7.<meta http-equiv=”windows-Target” contect=”_top”>强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8.<meta http-equiv=”Page-Enter” contect=”revealTrans(duration=10,transtion= 50)”>和<meta http-equiv=”Page-Exit” contect=”revealTrans(duration=20，transtion=6)”>设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

Duration的值为网页动态过渡的时间，单位为秒。

Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

0：盒状收缩；1：盒状放射；2：圆形收缩；3：圆形放射；4：由下往上；5：由上往下；6：从左至右；7：从右至左；8：垂直百叶窗；9：水平百叶窗；10：水平格状百叶窗；11：垂直格状百叶窗；12：随意溶解；13：从左右两端向中间展开；14：从中间向左右两端展开；15：从上下两端向中间展开；16：从中间向上下两端展开；17：从右上角向左下角展开；18：从右下角向左上角展开；19：从左上角向右下角展开；20：从左下角向右上角展开；21：水平线状展开；22：垂直线状展开；23：随机产生一种过渡方式。

]]> //www.laura-marie.com/20809.html/feed 0 网页表格或div层在网页中被撑开解决方法 //www.laura-marie.com/20393.html //www.laura-marie.com/20393.html#respond Wed, 01 Jul 2009 08:04:00 +0000

在我们设计网页的时候，总会遇到一些不愉快的事情，最常见的莫过于在后台添加内容后才发现显示的页面被撑开，导致网页极度不美观。以前大家基本上都是设计表格，网上自然不少对于的解决方法，如今还有div+css标准设计，很少看到相关好的方法，现在潇湘在线把平时找到的防止表格被撑开的好方法总结归纳一下，和大家一起分享。

一、直接在网页里设置图片大小，比如代码：<img src=”//images.sj33.cn/uploads/allimg/200907/20090701160532188.jpg” width=”600″ height=”500″ border=”0″>，这样虽然可以限制了图片大小，但是需要在上传图片之前手动修改图片大小，否则上传的图片就会变形。

二、使用如下代码：<img src=”//images.sj33.cn/uploads/allimg/200907/20090701160532188.jpg” onload=”javascript:if(this.width>600}{this.resized=true;this.style.width=600;}”>

这种方法会在调用图片的时候，自动按比例缩小到指定的宽度，不会引起图片的变形，并且也不会撑破表格，但是缺点是，如果图片太大，在图片下载过程中，也就是图片显示过程中，会先以图片原大小显示，这时就会撑破表格，页面很难看，二当图片完全显示后，图片又会自动缩小。

三、我们可以针对表格的属性来限制大小防止被撑开，比如在<table width=”600″ border=”0″ cellpadding=”0″ cellspacing=”0″>里添加代码“style=”table-layout:fixed;word-wrap:break-word;word-break;break-all;””，其中“table-layout:fixed; ”是为了将表格布局固定住，就可以有效地防止表格被撑开，“word-wrap:break-word; ”是控制换行的，也就是强制执行换行，这个在文本内容较多的情况下需要使用到，特别是重复的内容出现，不执行换行的话，表格就被撑开了；而“word-break: break-all; ”可以解决IE的框架被英文（非亚洲语言文本行）撑开的问题，但是不会强制换行，只显示表格宽度里的内容。一般情况下只要用到“style=”table-layout:fixed;word-wrap:break-word;””就可以。当然，上面调用的语句可以定义在css里，比如

table {
table-layout: fixed;
word-wrap:break-word;
}

四、用css控制图片自适应大小，代码如：

img {
max-width: 600px;
width:expression(this.width > 600 ? “600px” : this.width);
overflow:hidden;
}

其中 max-width:600px; 在IE7、FireFox等其他非IE浏览器下最大宽度为600px，但在IE6中无效；width:600px; 在所有浏览器中图片的大小为600px，当图片大小大于600px，自动缩小为600px，在IE6中有效；而 overflow:hidden; 指将超出设置大小的部分隐藏，避免控制图片大小失败而引起的表格撑开变形。

五、最后总结一下最实用的代码：

如果是表格，请用：

table {
table-layout: fixed;
word-break: break-all;
}

如果是div层，请用：

div {
table-layout: fixed;
word-wrap: break-word;
width: 加上宽度;
overflow: hidden; (让多出来的不显示。)
}

]]> //www.laura-marie.com/20393.html/feed 0 实例讲解BR和P标签的区别 //www.laura-marie.com/20392.html //www.laura-marie.com/20392.html#respond Wed, 01 Jul 2009 07:59:00 +0000

换行标记<br>的使用

换行标记<br>是一个没有结尾的标记，HTML文件中任何位置只要使用了<br>标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行，该<br>标记就是起到换行的标记！

请注意！在一般的文字文件中，只要按下键盘上的Enter健便用产生了换行，但是在HTML文件中按Enter键换行是没用的，我们必须用特定的标记<br>来让它们产生换行！例：

以下为引用的内容：
<html>
<head>
<title>br标记的使用</title>
</head>
<body>
清平调<br>
云想衣裳花想容，<br>
春风拂槛露华浓，<br>
若非群玉山头见，<br>
会向瑶台月下逢。<br>
</body>
</html>

看看会出现什么效果呢~！

有人要问把整首诗让它在页面居中该怎么办呢？如果实现居中我们可以用到我们以前学过的<p align=center>内容</p>来实现！
例:

以下为引用的内容：
<html>
<head>
<title>br标记的使用</title>
</head>
<body>
<p align=center>清平调<br>
云想衣裳花想容，<br>
春风拂槛露华浓，<br>
若非群玉山头见，<br>
会向瑶台月下逢。<br>
</p>
</body>
</html>

================================================

段落标记<p>的使用

由<p>标记所标识和文字，代表同一个段落的文字。在浏览器中,不同段落文字间除了换行外,有时还会以一行空白加以间隔,以便区别出文字的不同段落,其语法如下:
<p>文字</p>
但在一般的应用中,往往只会在要区分为段落的文字后,加是上一个<p>标.记例:

以下为引用的内容：
<html>
<head>
</head>
<title><p>标记的使用</title>
</head>
<body>
清平调<p>
云想衣裳花想容，<p>
春风拂槛露华浓，<p>
若非群玉山头见，<p>
会向瑶台月下逢，<p>
</body>
</html>

那么<br>和<p>的有什么区别呢？通俗的讲就是，它们在分行的时候<br>分得行比

<p>分得行距比较大！我们可以看一下：

以下为引用的内容：
<html>
<head>
</head>
<title><p>标记的使用</title>
</head>
<body>
清平调<br>
云想衣裳花想容，<br>
春风拂槛露华浓，<p>
若非群玉山头见，<p>
会向瑶台月下逢，<p>
</body>
</html>

这样就可以看到效果了，看出来了吗？

]]> //www.laura-marie.com/20392.html/feed 0 HTML网页实例说明head区代码的意思 //www.laura-marie.com/20391.html //www.laura-marie.com/20391.html#respond Wed, 01 Jul 2009 07:54:00 +0000 举例熟悉网页的头部信息表示涵义

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“><!–文档类型–>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″><!–设置网页的文件编码–>
<meta http-equiv=”expires” content=”2008/10/15 18:00:00″><!–脱机浏览的过期时间–>
<meta http-equiv=”pragma” content=”no-cache”><!–禁止网页从缓存中读取–>
<meta http-equiv=”Refresh” content=”5;http://www.webjx.com”><!–网页重新定向–>
<meta http-equiv=”set-cookie” content=”2007/10/18 18:00:00″><!–设置网页的cookie过期时间–>
<meta http-equiv=”Window-target” content=”_top”><!–设置网页中链接的目标窗口–>
<meta http-equiv=”Page-Enter” content=”revealTrans(duration=1000000,transition=50000000)”><!–设置网页的打开效果–>
<meta http-equiv=”Page-Exit” content=”revealTrans(duration=1000000,transition=50000000)”><!–设置网页的关闭效果–>
<meta name=”keywords” content=”web,webdesign”><!–设置网页的关键字，搜索的时候优先！！！重要！！！该数据被搜索引擎编入索引–>
<meta name=”description” content=”哈哈哈哈哈”><!–插入描述搜索时被搜索引擎编入索引–>
<title>标题一定不要少啊！对SEO很有用的！</title>
</head>
<body>
aaa
</body>
</html>

]]> //www.laura-marie.com/20391.html/feed 0 html标签：sub标记和sup标记 //www.laura-marie.com/20390.html //www.laura-marie.com/20390.html#respond Wed, 01 Jul 2009 07:47:00 +0000

今天来认识一下两个我不太常用到的html标签：sub标记和sup标记。

定义和用法:

<sub> 标签可定义下标文本。<sup> 可定义上标文本。都属于行内元素，默认比当前字体稍小。

例子:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub与sup标签</title>
<style type=”text/css”>
* { font-size:12px; font-family:Tahoma}
</style>
</head>

<body>
<div>
这个标签是<sub>sub</sub>
这个标签是<sup>sup</sup>
</div>
</body>
</html>

举一反三：

我们来看看数学方程式这种效果怎么实现？

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub与sup标签</title>
<style type=”text/css”>
* { font-size:12px; font-family:Tahoma}
</style>
</head>

<body>
<div>
x<sub>1</sub>+y<sub>2</sub><sup>3</sup>=15
</div>
</body>
</html>

其他应用：

偶然的机会，发现前段时间的淘宝网在价格上做了点修饰(不知道什么原因，现在又复原了)，和以前传统的价格表现不一样。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub与sup标签</title>>
</head>
<style type=”text/css”>
<!–
body { font:12px/1.8 Tahoma}
span.price { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:red;}
span.price sub { vertical-align:baseline; font-size:12px;}
span.price sup { vertical-align:text-bottom; color:#555}
–>
</style>
<body>
<span class=”price”><sup>￥</sup>43.<sub>26</sub></span>
</body>
</html>

相信sub和sup标签的应用不止局限于此，其他html标签也如此，只要你了解了它们，发动我们的思维和想象，就可以熟练的运用它们、展现它们独特魅力的一面。

]]> //www.laura-marie.com/20390.html/feed 0