推荐阅读
摄影技巧:用慢速快门为城市生活减速 让生活慢下来
在城市里拍摄车流时，尽量让相机保持不动，并使用一个较慢的快门速度，这样你可以拍到一些很有意思的照片。模糊的影像效果与飞驰而过的汽车和永久不变的城市形成了鲜明的对比。这两张照片出自劳伦特·拜尔莱特（Laurent Baillet）的“时光记录法”（Chronography）系列Ⅰ作品。劳伦特说，“时间对我来说非常重要。当背景始终保持不变时，你既可以捕捉到一个短暂的瞬间，也能把一段时间内每一个物体从画面中移动消失的轨迹记录下来。”拍摄窍门拍摄时使用三脚架和遥控快门线。要想减少进光量并缩短曝光时长，可以有如下两种做法，一是在镜头前加装中灰密度滤镜或偏振镜，二是使用小光圈和低感光度来拍摄。如果你用1秒以上的快门速度拍摄，那么最好选择手动模式进行对焦和曝光设定。如果有行人出现在了你的镜头中，最好将他们拍成模糊的或是完全静止的效果。试着拍摄路面上减速行驶或是飞驰而过的汽车，车的速度不同，在照片上留下的轨迹也不同。
著名设计大师王孟友教你如何设计标志
标志：外来语叫logo是表明事物特征的记号。它以单纯、显著、易识别的物象、图形或文字符号为直观语言，除标示什么、代替什么之外，还具有表达意义、情感和指令行动等作用。 标志，按照使用的功能可分：商标、徽标、标识、企业标、文化性标、社会活动标、社会公益标、服务性标、交通标、环境标、标记、符号等。作为人类直观联系的特殊方式，在社会活动与生产活动中无处不在，越来越显示其极重要的独特功用。例如：国旗、国徽、公共场所标志、交通标志、安全标志、操作标志等，各种国内外重大活动、会议、运动会以及邮政运输、金融财贸、机关、团体、公司及个人的图章、签名等几乎都有表明自己特征的标志。随着国际交往的日益频繁，标志的直观、形象、不受语言文字障碍等特性极其有利于国际间的交流与应用，因此国际化标志得以迅速推广和发展，成为视觉传送最有效的手段之一。我们发展中的中国，早已认识到了这一点！各个单位、个人已经在发展的初期，就意识到要设计一个标志。 标志有很多特点，介绍几点让大家了解：1． 功用性 标志的本质在于它的功用性。虽然具有观赏价值，但标志主要不是为了供人观赏，而是为了实用。具有不可替代的独特功能。具有法律效力的标志尤其兼有维护权益的特殊使命。 2． 识别性 标志最突出的特点是易于识别.显示事物自身特征,标示事物间不同的意义、区别与归属是标志的主要功能。 3． 显著性 显著是标志又一重要特点，除隐形标志外，绝大多数标志的设置就是要引起人们注意。因此色彩强烈醒目、图形简练清晰。 4． 多样性 标志种类繁多、用途广泛，无论从其应用型式、构成形式、表现手段来看，都有着极其丰富的多样性。 其应用形式，不仅有平面的、立体的，具象、意象、抽象图形构成的，还有以色彩构成的。多数标志是由几种基本形式组合构成的。
Illustrator 图表工具详解（4）
Illustrator 图表工具详解 在本教程中我们这里我们使用Illustrator 10，以一个实例贯穿始终，讲解最基本的图表工具应用。 Illustrator 10的图表工具功能很多，并且十分强大，本文只是简略讲述了制作简单图表的基本方法，更多的精彩还有待于大家进一步探索。六、图表数值轴的位置 除了饼图和雷达图，其他图表一般都可以改变数值轴的位置：比如将Y轴放置在图表的左边，右边，上下方，还是左右边都有。 对于柱形图和重叠柱形图，折线图和面积图，根据此类图表特点，可以选择将数值坐标轴放在左边右边或者两边都有。 对于散点图，可以选择在左边或者两边。 对于条形图和重叠条形图，可以选择在顶部，底部和两者兼有。 对于雷达图，则只有一个选择：在所有边。 以最常见的柱形图为例，简述一下如何更改数值轴的位置。 选择整个柱形图，双击图表工具图标，Value Axis下拉列表选项中可以选择On Left Sides(左边) On Right Sides（右边） On Both Sides（两边）。 按上述设置选择不同图表数值轴的合适位置后，可以作出不同效果的图表。七、更改图表数值轴的刻度 默认情况下，图表的两侧（如左右两侧）的刻度数值是一样的。那么能否设置成不同数值刻度呢？答案是肯定的。 请看具体操作： 1. 用组选择工具选择一组数据及其图例框（如果选择错误，后面的操作就无效啦）。 2. 从图表选项下拉列表中选择左边或者右边坐标轴，对柱状图，散点图，面积图和重叠柱形，可以选择在左侧或者右侧，对于条形图和重叠条形图，可选择在下方或上方。 3. 选中Override Calculated选项，对刻度指定适当地数据后单击OK 。 如图7是为柱形图设置两轴不同刻度后结果。 图 7 八、不同图表类型的混合使用 使用图表时，可在同一图表中组合应用不同的图表类型。比如用条形图表示一部的销售额，用折线图表示二部的销售额，用不同类型图表表示其他组的数据… 要注意的是，在所有的图表类型中，散点图表不能和其他的图表同时组合应用。 1. 用组选择工具选中一组数据及其图例，双击图表工具按钮，从对话框中选择适当图表类型，并设置好相关选项。 2. 用组选择工具选中其他一组或者多组数据及图例，用上述方法更改其图表类型。 3. 单击OK更新图表。 如图8为柱形图和折线图的组合使用。
高调照片的拍摄
高调照片的拍摄 雪·花：一场突如其来的大雪中，花儿还没来得及凋谢，白色与粉色形成了鲜明的对比。为了使花朵曝光正确，在白色的大环境下需要加曝光，而花朵本身颜色也较浅，而且占画面的比例较大，所以仅加了0.3挡曝光。 高调照片： 指的是以白色为基调的照片，画面的大部分为淡色调。 摄影教程 未加曝光补偿 未使用曝光补偿时，雪的色泽显得暗淡发灰。 曝光补偿+0.7
最新发布
HTML5中的新事件
HTML 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。HTML 5 中的新事件：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。不再支持的 HTML 4.01 属性：onreset。
HTML代码学习:DOCTYPE的缩写
写HTML代码的时候，第一行就要写DOCTYPE，而DOCTYPE一般都很长，大家也懒得去记，所以基本都是直接去复制以前写过的。不过今天了解到一种 DOCTYPE 的缩写，如果你的 DOCTYPE 是下面这样的话：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">可以用下面的缩写来代替：<!DOCTYPE HTML> 简单，好记，这样以后就不需要去复制了。BTW，我想举一反三试一下 <!DOCTYPE XHTML> ，结果失败，页面成了“混杂模式”，大家有什么其他的技巧欢迎提供。
网页设计潮流之2009:路在何方?
大图片、大标题、素描/涂鸦、大自然和滑动。当然也有一些其它的“潮流”，不过我认为这些元素在现在的网页设计中使用的最多，并且在明年也会同样被推崇。本文中，我整理了一些前面提到的5种类型的网站。
制作商业HTML邮件的建议
通过基于许可的电子邮件营销，不仅可以大大的降低营销和推广的成本，更能够直接地、准确地把信息传递到客户手中。今天我研究的问题是，如何从技术方面入手，制作一个优秀，且同时兼容用户视觉和邮件客户端的电子邮件。1.选择HTML还是文本(Plain Text)有人喜欢简单的文本，有人喜欢看丰富的HTML，我们怎么选择？对于营销型的邮件，建议使用HTML格式来制作(图)；而对于确认/提醒/告知型邮件，建议使用文本或者简单的HTML来制作(图)。为什么针对这两种不同类型的邮件，采用不同的制作方式，这基于这些原因：营销型邮件的内容丰富性、多样性；确认型邮件的内容单一性，独特性；在营销型邮件中，客户会更注重内容的丰富性和视觉效果的美观性；在确认型邮件中，我们要让客户非常直接的看到确认信息，复杂的内容和视觉效果只会让客户忽略了邮件的主要内容——即确认信息；(下文将对营销型邮件的HTML制作做重点讨论)2.基于表格布局+CSS的HTML基本功功夫分两种，一种至阳至刚，另一种则至阴至柔，张三丰之所以登峰造极，因为其武功底子好，少林基本功扎实，才悟出这道即能至阴，又能至阳的太极拳。HTML的邮件也是如此，我们知道，当今邮件阅读客户端有很多种，传统的Outlook，Thunderbird，Lotus Notes，以及在线的Mac Mail，Gmail，Hotmail等，对邮件的解释都会不同，大多数在线邮件系统会屏蔽掉<head></head>标签之 间的代码。要让所有用不同客户端的用户看到的邮件相同，这就要非常好的掌握好HTML的基本功。有人说DIV+CSS，有人说是SEO标签语义化，不可否认作 为一个网页开发人员，能有这两种时下流行的HTML开发思想会很吃香，但是，这并不适用于邮件制作。我们的目的是让客户在不同邮件客户端下看到相同的信息 内容，这就用到一个最原始的排版方式：表格布局+CSS。让我们看下时下邮件客户端对HTML和CSS的支持(图)：*Hotmail能解析<body></body>间的<style>，但同样屏蔽<head></head>间的<style>3.做HTML邮件时，就要着重注意以下几点： 4.邮件的宽度，650px?还是600px?我们都知道，时下网页的宽度标准是950/960px，这取决于我们的显示器分辨率；而电子邮件经常是通过两种途径打开，软件客户端和在线客户端，这两种邮件客户端(图)。*Microsoft Outlook 2003*网易163邮箱
连续滚动的超级链接文字网页代码
向上滚动<div id=”marquees”><a href=”#”>破洛洛一</a><br><br><a href=”#”>破洛洛二</a><br><br><a href=”#”>破洛洛三</a><br><br><a href=”#”>破洛洛四</a><br></div><script language=”JavaScript”>marqueesHeight=200;stopscroll=false;with(marquees){style.width=0;style.height=marqueesHeight;style.overflowX=”visible”;style.overflowY=”hidden”;noWrap=true;onmouseover=new Function(”stopscroll=true”);onmouseout=new Function(”stopscroll=false”);}document.write(’<div id=”templayer” style=”position:absolute;z-index:1;visibility:hidden”></div>’);preTop=0; currentTop=0; function init(){templayer.innerHTML=””;while(templayer.offsetHeight<marqueesHeight){templayer.innerHTML+=marquees.innerHTML;}marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;setInterval(”scrollUp()”,10);}document.body.onload=init;function scrollUp(){if(stopscroll==true) return;preTop=marquees.scrollTop;marquees.scrollTop+=1;if(preTop==marquees.scrollTop){marquees.scrollTop=templayer.offsetHeight-marqueesHeight;marquees.scrollTop+=1;}}</script>向下滚动<div id=”marquees”> <a href=”#”>破洛洛一</a><br><br><a href=”#”>破洛洛二</a><br><br><a href=”#”>破洛洛三</a><br><br><a href=”#”>破洛洛四</a><br><br></div><script language=”JavaScript”>
网站建设过程中常见的5个HTML错误
网站建设过程中常见的5个HTML错误 1.网页背景色的设置 犯错机率：很大 普遍性：较广 犯错可能性：懒/不知道 约2年前我曾发现21cn上出现过一次没有设置背景色的情况，当时我用Email通知了他们，自此之后这个问题我从没犯过。 绝大部分人的窗口背景颜色都是白色，但如果象我这样个性的人，就会把windows窗口的背景颜色改成灰色或其他色，这样一来，如果你没有设置网页的背景颜色的话，你以为正常的网页在我的电脑上看起来会是一团糟。 2.Align center（自动居中）的滥用 犯错机率：非常大 普遍性：非常广 犯错可能性：以为方便/以为好用 工作中，修改、维护别人的网页是家常便饭，发现不少人有一个陋习： 在表格中的文字或图片，你是这样来令它居中、靠左或靠右过？ 〈div align="center">大家好啊！！〈/div> 〈div align="center">〈img src="/xx.gif">〈/div> 当有些表格很多、文字很多、内容分得很细的时候，爱用这种方法（它在DW里的快捷键是Ctrl+Alt+C，FP不知道是什么）的人往往会狂用，惨了，我一碰到这样的网页就头痛，为什么要用那么多〈div>来居中呢？tell me why？难道表格没有居中属性吗？为什么要加入这些垃圾代码？特别修改的时候也不能把文字或图片删除了就能自动清除 建议使用〈td align="center">来居中，当需要多重定位的时候，才考虑〈div align="center">，因为这个代码并不好处理，所以能用表格代替就用表格替代。 3.重复使用实现相同功能的代码、或杂七杂八的乱套代码 犯错机率：非常普遍 普遍性：非常普遍 犯错可能性：复杂多样 大家先来看一看下面的代码： 〈center>〈p>〈font >〈font >〈font color="#CCCCCC">〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题〈/font>〈/font>〈/font> 〈/center>你觉得这样的代码看起来感觉怎么样呢？〈/font>〈/p> 我不知道读者有什么感觉，压根我一看到这样的代码就会先自我麻木十来秒，这十来秒目的是为了找一个能表达我的思想感情的词（我？你想反问我吗？sorry~~，我一般不犯，因为我做网页至少有一半以上的时间在浏览代码，代码中多了不该多的东西我一眼就能看出来。）。 看看上面的代码，使用了2个class，4个font来定义2个文本，其实这样的问题很多时候是在大家不断的修改中产生的，对代码不熟、或懒查看代码、又或不喜欢查看代码的人犯这些问题特别严重，当然，事实上别人浏览这个网页的时候，是没有任何问题的，但维护的人就…………。 这些多余的垃圾代码完全是可以省略掉的，其实上面的例子不够严重，更恐怖的我都见过。 另外还有一个问题也要提提的，就是〈p>...〈/p>和〈center>...〈/center>，为什么要用它们呢？tell me why~~，有甚者是这样的： 〈td>〈div align="center" > 〈center> 〈p align="center">〈/p> 〈p align="center">〈font >〈font >〈font color="#CCCCCC">〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标 题〈/font>〈/font>〈/font> 〈/center>〈/td>你觉得这样的代码看起来感觉怎么样呢？〈/font>〈/p>〈/center>〈/div>〈/td> 看到这样的代码我是会很无奈的（更无奈的是我经常看到，而且必须看），我来简化一下： 〈td align="center" > 〈font color="#FFA76C" style="font-size:14px;font-family:隶书">标题〈/font> 你觉得这样的代码看起来感觉怎么样呢？〈/td> 是不是看起来觉得这个世界安静了很多？"标题"后面的文字完成可以定义在〈td>的class里，就算不用css，再用多一个〈.font>也没问题，一样很清爽。 4.表格不正确嵌套 犯错机率：一般 普遍性：普遍 犯错可能性：对这个不了解 其实这是一个街知巷闻的问题了，但还是不断有人犯，不正确的嵌套表格，可能会令到你被老总叫到办公室里臭骂一顿，会令到你以为正常的网页用ADSL开2、3分钟都开不了。 先讲第一个问题，就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。 第二个问题就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，嘻嘻，你猜有可能出现什么情况呢？其实也没什么大不了的，最严重的就是你的IE象死机了一样，什么都没显示。解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。 5.写代码缩进的时候，不是使用Tab而是使用空格 犯错机率：一般 普遍性：较少 犯错可能性：不知道Tab更好用 这一个问题针对js、vbs、asp、php之类，html不能使用Tab会写一点程序的都知道什么叫缩进，怎么样缩进？有人使用空格，有人使用Tab，如果你是使用空格的，那么从现在起，改用Tab吧。
图片IMG标记的alt属性和title属性
正确的使用alt text属性和title属性不仅可以提高图片的搜索能力，对用户体验上也是很有帮助。替换文字（alt text）是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。所以替换文字是用来替代图像而不是提供额外说明文字的。Alt text在IE浏览器中还起到了title的作用——鼠标经过时的文字提示。IE浏览器给了大家一个误导，在IE中ALT会变成文字提示是因为IE不标准。这一点Firefox做的就比较好。title是对图片的说明和额外补充，如果需要在鼠标经过图片时出现文字提示应该用属性title。title属性的优先级高于alt text。但由于错误的引导，很多初学者就在img标签内只加了alt属性。下面看个例子，我们可以更清楚的看清alt text和 title之间的区别： //*图片不显示<img src="poluoluo.jpg" width="400" height="104"alt="破洛洛"> <img src="poluoluo.jpg" width="239" height="104" title="破洛洛" />//*图片显示<img src="poluoluo.png" title="破洛洛" /><img src="poluoluo.png" alt="破洛洛" /> 在IE浏览器中，这四句代码，鼠标经过图片时，都会出现文字提示。而在Firefox浏览器中，前三句代码，鼠标经过图片时，都会出现文字提示，最后一句代码，鼠标经过图片不会显示文字提示（如下图所示）。也就是说当图片不能显示时，鼠标经过图片时会显示替换文字的内容，而当图片可以显示时，鼠标经过图片时，替换文字就不会显示出来了。现在我们已经知道alt text和title有什么不同了，那么我们怎样才能正确使用它们呢？1. alt text和title对访问者都很重要（alt text对搜索引擎会更重要一些），所以在定义img对象时，最好将alt text和title属性都写全，保证在各种浏览器中都能正常使用。
介绍几个不常用的HTML标签
介绍几个不常用的HTML标签 在HTML王国里，这里有很多子民，通常我们看到的是一些熟悉的面孔，而对于那些不熟悉的面孔你又了解多少呢，你知道它们的用法吗？0、<!DOCTYPE> 标签<!DOCTYPE> 标签出现在HTML文档第一行上的信息，说明该文档的类型，是一个“标准概括化置标语言（SGML）”声明，不是元素。语法：<!DOCTYPE>例子：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.0//EN"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">1、<abbr>标签一个词或短语的简称（如“HTML”）。通常同时使用title属性来指出原词或原短语。简称不一定是缩写，但缩写同时也是简称。注：Internet Explorer还不支持abbr。<abbr>标记是用来标注一个缩写的，例子：<abbr title="Hyper Text Marked Language">HTML</abbr><abbr title="Cascading Style Sheets">CSS</abbr><abbr title="Document Object Model">DOM</abbr>对于单纯浏览没什么用，但是如果想要文本能被搜索，就可以用到。注意：此元素只能放置在body中，而且使用在文字的行内。2、<acronym>标签<acronym>元素允许作者清楚地标识一个组成缩略语的字符序列(如: "WWW", "FNAC", "IRS", 等等). 标识缩略语的能力对于拼写检查, 语音系统, 其它的用户代理器工具来说是有用的。语法：<ACRONYMTITLE=text LANG=language LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS CLASS=Style Sheet class nameSTYLE=stylingID=valueevent = script>例子：<ACRONYM TITLE="Federal Bureau of Investigation">FBI</ACRONYM>3、BASE 元素BASE 元素指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。当使用时，BASE 元素必须出现在文档的 HEAD 内，在任何对外部源的引用之前。此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。此元素不会被渲染。此元素不需要关闭标签。4、<APPLET>标签描述：引入一个JAVA APPLET。语法：<APPLETALIGN=alignmentALT=alternate TextARCHIVE=compressed file CLASS=Style Sheet class nameCODE=appletFileCODEBASE=urlDATAFLD=colnameDATASRC=Data SourceHEIGHT=n pixelsHSPACE=n pixelsID=valueNAME=nameSRC=urlSTYLE=stylingTITLE=textVSPACE=n pixelsWIDTH=n pixelsevent = script>例子：<applet code="coolnav.class" align="baseline" width="168" height="313"><param name="Notice" value="CoolMenu2.5,CopyRight (c) 1999 SourceTec Software Co. Ltd, Registered"><param name="ApStyle" value="004080,ff8c8c,,1,0,0,,13,5,004080,1,Loading image ...">...</applet> 5、<CAPTION>标签<CAPTION>标签用于显示表格标题，作用是为表格标示一个标题列，有如在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。
HTML结构化：DIV＋CSS网页布局入门指南
当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。 结构化HTML 我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。 如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。 外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。 HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。 开始思考 首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。 如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块： 标志和站点名称 主页面内容 站点导航(主菜单) 子菜单 搜索框 功能区(例如购物车、收银台) 页脚(版权和有关法律声明) 我们通常采用DIV元素来将这些结构定义出来，类似这样： ＜div id="header"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="globalnav"＞＜/div＞ ＜div id="subnav"＞＜/div＞ ＜div id="search"＞＜/div＞ ＜div id="shop"＞＜/div＞ ＜div id="footer"＞＜/div＞ 这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。 根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。 使用选择器是件美妙的事 id的名称是控制某一内容块的手段,通过给这个内容块套上DIV并加上唯一的id,你就可以用CSS选择器来精确定义每一个页面元素的外观表现,包括标 题、列表、图片、链接或者段落等等。例如你为#header写一个CSS规则，就可以完全不同于#content里的图片规则。 另外一个例子是：你可以通过不同规则来定义不同内容块里的链接样式。类似这样：#globalnav a:link或者 #subnav a:link或者#content a:link。你也可以定义不同内容块中相同元素的样式不一样。例如，通过#content p和#footer p分别定义#content和#footer中p的样式。从结构上讲，你的页面是由图片、链接、列表、段落等组成的，这些元素本身并不会对显示在什么网络 设备中(PDA还是手机或者网络电视)有影响，它们可以被定义为任何的表现外观。 一个仔细结构化的HTML页面非常简单，每一个元素都被用于结构目的。当你想缩进一个段落，不需要使用blockquote标签，只要使用p标签，并对p 加一个CSS的margin规则就可以实现缩进目的。p是结构化标签，margin是表现属性，前者属于HTML，后者属于CSS。(这就是结构于表现的 相分离.) 良好结构的HTML页面内几乎没有表现属性的标签。代码非常干净简洁。例如，原先的代码＜table width="80%" cellpadding="3" border="2" align="left"＞，现在可以只在HTML中写＜table＞，所有控制表现的东西都写到CSS中去，在结构化的HTML中， table就是表格，而不是其他什么(比如被用来布局和定位)。亲自实践一下结构化 上面说的只是最基本的结构，实际应用中，你可以根据需要来调整内容块。常常会出现DIV嵌套的情况，你会看到"container"层中又有其它层，结构类似这样： ＜div id="navcontainer"＞ ＜div id="globalnav"＞ ＜ul＞a list＜/ul＞ ＜/div＞ ＜div id="subnav"＞ ＜ul＞another list＜/ul＞ ＜/div＞ ＜/div＞ 嵌套的div元素允许你定义更多的CSS规则来控制表现，例如：你可以给#navcontainer一个规则让列表居右，再给#globalnav一个规则让列表居左，而给#subnav的list另一个完全不同的表现。
HTML初级指南〉标签属性和元素
尽管HTML的基础是纯文本，但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。 标签 HTML基本的构成包含标签，标签围绕着内容，赋予内容某些意义。 按照下面改进你的文件： 保存文件，回到浏览器界面和选择“刷新”（这会重新装载网页）。 网页的外观没有任何改变，HTML的目的是表达内容，而不是表达表现，这个例子现在已经定义了网页一定的基本元素。 第一行以<!DOCTYPE..开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么，但接受它很重要。如果你不这样做，浏览器将用“quirks”（奇怪的）模式来表现你的网页。现在还不必担心，当然你需要了解或者学习的话可以看看 HTML高级教成的 进一步学习“文档类型”。当前，只需要记住把这一行放在文件的顶端就可以了。 言归正传，<html>是隔开其他内容的起始标签，它告诉浏览器，位于自己与闭合标签</html>之间的就是是HTML文档。在<body>和</body>之间的是这个文档展示在浏览器上的主要内容。 闭合标签 </body>和</html>关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭，但最新的标准要求所有的标签都要关闭。无论如何，闭合标签是一个好习惯。