编程学习

下面我先了解一下几种格式de比较正式de解释(注:以下内容源自百度知道):
GIF 意为Graphics Interchange format(图形交换格式),GIF图片de扩展名是gif.现在所有de图形浏览器都支持GIF格式,而且有de图形浏览器只认识GIF格式.GIF是一种索引颜色格式,在颜色数很少de情况下,产生de文件极小,它de优点主要有:
GIF格式支持背景透明.GIF图片如果背景色设置为透明,它将与浏览器背景相结合,生成非矩形de图片.
GIF格式支持动画.在Flash动画出现之前,GIF动画可以说是网页中唯一de动画形式.GIF格式可以将单帧de图象组合起来,然后轮流播放每一帧而成为动画.虽然并不是所有de图形浏览器都支持GIF动画,但是最新de图形浏览器都已经支持GIF动画.
GIF格式支持图形渐进.渐进是指图片渐渐显示在屏幕上,渐进图片将比非渐进图片更快地出现在屏幕上,可以让访问者更快地知道图片de概貌.
GIF格式支持无损压缩.无损压缩是不损失图片细节而压缩图片de有效方法,由于GIF格式采用无损压缩,所以它更适合于线条、图标和图纸.
GIF格式de缺点同样相当明显.索引颜色是历史遗留de产物,在DOS下de老游戏几乎无一例外de采用索引颜色,这种格式本来早就应该淘汰了.但是由于带宽de限制,GIF从DOS时代红到了Internet时代.GIF这种索引颜色格式最大de缺点就是它只有256种颜色,这对于照片质量de图片是显然不够de.
JPEG 代表Joint Photograhic Experts Group(联合图像专家组),这种格式经常写成JPG,JPG图片de扩展名为jpg.
JPG最主要de优点是能支持上百万种颜色,从而可以用来表现照片.此外,由于JPG图片使用更有效de有损压缩算法,从而使文件长度更小,下载时间更短.有损压缩会放弃图像中de某些细节,以减少文件长度.它de压缩比相当高,使用专门deJPG压缩工具其压缩比可达180:1,而且图像质量从浏览角度来讲质量受损不会太大,这样就大大方便了网络传输和磁盘交换文件.JPG较GIF更适合于照片,因为在照片中损失一些细节不像对艺术线条那么明显.另外,JPG对照片de压缩比例更大,而最后de质量也更好.
但是从长远来看,JPG随着带宽de不断提高和存储介质de发展,它也应该是一种被淘汰de图片格式,因为有损压缩对图像会产生不可恢复de损失.所以经过压缩deJPGde图片一般不适合打印,在备份重要图片时也最好不要使用JPG.还有,JPG也不如GIF图像那么灵活,它不支持图形渐进、背景透明,更不支持动画.
PNG 是20世纪90年代中期开始开发de图像文件存储格式,其目de是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备de特性.流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方de“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”.PNG用来存储灰度图像时,灰度图像de深度可多到16位,存储彩色图像时,彩色图像de深度可多到48位,并且还可存储多到16位deα通道数据.PNG使用从LZ77派生de无损数据压缩算法.
PNG文件格式保留GIF文件格式de下列特性:
使用彩色查找表或者叫做调色板可支持256种颜色de彩色图像.
流式读/写性能(streamability):图像文件格式允许连续读出和写入图像数据
这个特性很适合于在通信过程中生成和显示图像.
逐次逼近显示(progressive display):这种特性可使在通信链路上传输图像文件de同时就在终端上显示图像,把整个轮廓显示出来之后逐步显示图像de细节,也就是先用低分辨率显示图像,然后逐步提高它de分辨率.
透明性(transparency):这个性能可使图像中某些部分不显示出来,用来创建一些有特色de图像.
辅助信息(ancillary information):这个特性可用来在图像文件中存储一些文本注释信息.
独立于计算机软硬件环境.
使用无损压缩.
PNG文件格式中要增加下列GIF文件格式所没有de特性:
每个像素为48位de真彩色图像.
每个像素为16位de灰度图像.
可为灰度图和真彩色图添加α通道.
添加图像deγ信息.
使用循环冗余码(cyclic redundancy code,CRC)检测损害de文件.
加快图像显示de逐次逼近显示方式.
标准de读/写工具包.
可在一个文件中存储多幅图像.
文件结构

target=”_blank”是否de存在是否有必要我想目前还有很多正处在一种盲区.我查阅了相关de文献,发现其实情况并非是我所想de那样,事实上target=”_blank”并非是不符合标准de,而用rel与JSde解决方案也是没有必要de,因为这是个误区,只要我了解了rel与targetde真正含义我就清楚了其实这里本不应存在争议.下面我将我通过查阅文献所得到de知识与大家分享,我先来了解一下target与relde含义:
target ,允许指定在什么位置显示已经选择de超链接内容.也就是说链接de内容将在什么样de窗口被显示.target de属性值有四个保留de名称,分别是:_blank,_self,_parent,_top.其中_blankde意思是浏览器总在一个新打开de、未命名de窗口中载入target＝”_blank”链接de文档.这里大家也许会很不理解“未命名”是什么意思.事实上target 是可以给新打开de窗口赋一个ID,例如:target=”name” 这就表明通过target=”name”链接载入de文档将会在一个叫”name”de窗口显示.如果没有ID为”name”de窗口,那么浏览器就会新建一个名为”name”de窗口来显示链接文档.如果当前窗口deID就是”name”那么这个链接文档就会在当前de窗口中替换原有de内容显示出来.而_selfde意思其实就是当前文档,<a>de默认目标就是_self,这个属性值一般来说是用不到de._parent是使链接文档在父级窗口显示,这个属性值只在框架结构中使用,如果身本就是顶级框架,那么其作用与_self相同._top同样是应用在框架中de,但是他de效果是清除框架来显示目标文档.这对于从框架结构转向无框架结构是很有作用de.
现在我知道了,target 是一目标显示de属性与浏览器密切相关de.那么rel又是什么呢, 为什么很多人把他当作是target de替代属性呢？下面我就来认识一下rel.其实不只有一个rel还有一个与之对应de属性叫rev,这两个属性de意思分别是:从源文档到目标文档de关系；从目标文档到源文档de关系.这里de源文档可以理解为链接所处在de当前文档,而目标文档也就是这个链接将要打开de文档.这下我应该清楚了,其实rel与rev是一种文档之前de链接关系,而并非是与浏览器相关de如何显示目标文档de属性.
那么rel与rev有哪些关系呢？下面将一一列取并解释其中de含义:
next,链接到下一个文档；
prev,链接到前一个文档；
head,链接到集合中de顶级文档；
toc,链接到集合de目录；
parent,链接到源上面de文档；
Child,链接到源下面de文档；
index,链接到此文档de索引；
glossary,链接到此文档de术语表；
其中next与prev是一组.表明了当前文档与目标文档之前de关系是同级de关系,可以写成这样<a href=”movie_002.htm” rel=next rev=prev>.head与toc可以形成一个组合,表示者是由目录链接到最终de文档,或是由文档链接到目录.parent与child是一组,表示着由当前de文档链接到父级文档或是子级文档.而index与glossary可以与head分别组合,形成由文档到索引,或是由索引到文档；文档到术语表或是术语表到文档.
也许这样讲可能还是不很清楚,下面举个例子:我这里整理了一个电影文档资源,那么我需要对这些资源进行分类,我把电影分成:武侠片、战争片、爱情片、恐怖片、纪录片.那么我在电影根目录需要链接到下面de子类de时候那么链接de关系应该是:rel=child rev=parent ,而如果当前是武侠片de频道页,我需要转爱情片频道或是其它频道时,那么链接关系就应该是:rel=next rev=prev,当我由一个武侠片链接到“卧虎藏龙”这部电影de文档时链接de关系应该是:rel=head rev=toc,当由“卧虎藏龙”链接到索引de时候链接关系又变成了:rel=index rev=head.
由于目前deCSS还不能抓取rel与revde属性值,所以没有办法给不同关系de链接提供不同de样式,所以现在rel与rev只是用来使得网页de语义性更为完善.

其实建议用css控制超出隐藏显示
也就是标题因为设计de宽度问题所以没有显示全,看样子是使用程序来截字de.我想很多网站都遇到这样de情况.为了视觉效果不得不进行截字显示以满足网站de整体视觉效果.通常我采用截字de方法是两种,一种是通过后台输出时来事先设定一定de字符数量.另一种是通过CSS或是JS来对已经输出de完整de内容进行视觉剪截.
在网页标准没有兴起de时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着.这种方式de好处就是可以准确de剪截字数,而不足可能就是因为剪截de工作在后台已经完成,所以输出de内容是残缺de.而第二种是通过CSS或是JS做出de一种障眼法.把一定长度以外de内容隐藏掉.以达到需要de视觉效果,好处就是他可以保留完整de数据内容,不足之处可能是非IE浏览器截de字并不完美.比如Firefox常常会有截半个字de尴尬现象.
我想提出de问题是:”标题de不完整是否会影响用户de点击动机？”我斗胆提出这样de论断:标题de不完整将在很大层度上影响用户是否会点击该条信息de动机.我这里就用优艾网中de一条新闻标题来作分析.网站中有这样一条新闻标题”美国发明用户界面新技术 对着吹”,这是一句被机械性截掉de标题.面对这样de标题我de好奇心是否被勾引起来,当然有可能.但是我de理解可能是这样de:”美国发明了用户界面de新技术,对着吹……这是个打假新闻.可能是两家公司在吹牛.”如果是这样那么这种八卦de新闻我就没兴趣了.然而这个完整de标题应该是:”美国发明用户界面新技术 对着吹气就能操作计算机”对于这样de标题我就比较有兴趣,我想知道这个吹气为什么就能操作计算机呢,这是我从来没想到过de事.这样我就会有极大de兴趣去点击查看这条新闻.我可以比较发现,其实最容易勾起我好奇心de其实是”吹气操作”.这是新技术de核心.也是这个新闻de核心内容.
当然有时候截字是必需de,否则整个网站就会显得很杂乱.那么现在一般de解决方法就是在链接上加入”title”属性.遇到这种语义不清楚de标题时我通常是鼠标悬停查看提示区中de文字以获得比较完整de标题信息.从而完成我是否点击该新闻de判断.但是可惜de是优艾网标题链接中detitle属性与标题内容是一样de,如此一来title属性de意义大减.
我在设计de时候当然是尽可能de把标题显示完整,如果因为特需原因没办法显示完整de时候要尽可能de使title属性是完整de.还有虽然CSSde截字在Firefox中是有缺陷de,但是我还是觉得截字de事应该由CSS来完成.至少这样我可以得到一个完整deHTML信息文档.当无CSSde时候至少我同样可以看得到完整de信息内容.

上篇已经说了在第五篇会开始讲CSS,刚开始讲不能讲得复杂,我还是由浅入深,一步步来.还是那句话:先用起来,然后再去研究.即然我第一篇讲de是段落,那我这篇初讲CSS当然也还是要从段落开始,让我de段落先漂亮起来.

在没有讲CSS之前我先去想一下什么样de段落才看起来才是最舒服de？如果大家一时还没有什么想法或是还不清楚如何去分析这个问题不妨先看一下《网页设计技巧系列之一 浅谈文本排版》.不论如何至少我de小学老师告诉我每一段de第一行应该空两个字.这可能是我接受到de第一个关于如何划分段落de方法.并且可能更多人已经产生了思维定式,认为段落必需要首行空两格.而我则认为区分段落de首要素同段距,其次才能是段落首行de处理.而首行de处理是否只有缩进两字呢？我个人认为不是,因为我还可以用“首字下沉”、“首行突出两字”等来表现.有人会说:“首字下沉我就见过,比如作者de博客就用了这个效果,但是首行突出两字似乎有点奇怪.”然而事实上首行突出两字必不是作者发明de,在中国古代de奏本上就常采用这种格式,不同de是因为他们常需要在行首写上一些颂语,而要表达这种颂语就需要抬高其地位,比如“君”“圣上”等字眼,所以才会突出两字,久之则形成了一种特别de排版形式,这种形式现在de文体是用得少了,不过大家可以多多了解一下,方便以后表达不同de文体时可以用得着.

即然段距是段落区分de第一要素,那么我就先来解决这个段距dede样式问题.即然是一段一段de那么我每一段都是由一组<p></p>组合而成de,而我deCSS只要通过对这个段落标签de描述就可以实现我所需要de效果了.那么基本形式是:

p {这里是样式描述内容}

我注意到了,在CSS中这个段落标签是不需要加尖括号de,只需要一个”p”即可以了.所有de标签都是如此处理.那么我需要给每个段落设个段距,这里我有两个描述属性,一个是padding,另一个是margin,这两个表现de效果看起来有点像,但是却有着本质上de区别,如果我把段落表示成盒子,在这个盒子里装着一些东西,padding就是这些东西与盒子内侧边de距离,而margin则是盒子与盒子之间de距离.这里很显然,我里应该是使用margin.写法是:margin:1em 0;这是一种简写de方法,如果写全了应该是:margin-top:1em; margin-right:0; margin-bottom:1em; margin-left:0; 这很明显太冗余了,所以一般我通常是写成:margin:1em 0 1em 0; 这里de顺序是上右下左,由于上下de数值是一样de,左右de数值是一样de,那么就可以再缩写成:margin:1em 0; 这里deem是指相对长度单位,相对于当前对象内文本de字体尺寸.有关于单位de知识请查阅沈苏小雨编制de《CSS2.0中文手册》.那为什么要用em而不用px或是pt呢,这是因为我现在de流览器大多都有字体放大de功能,这也是方便读者de能看得更清楚文字内容,那么如果我用px来设定段距那么当字体放大时段距却不会变动,那么当放大到一定数值时这个段距de特性也就不存在了.所以我使用em这个单位,也就是希望当字体变大时段距也跟着相应变大,方便识别.

这里值得注意de是,当我使用marginde时候两个段落之间demargin会有重叠,那么看上图中右侧de图我可以发现在两段之间demargin是被重叠了原本应该是两个高度相加de结果还是一个高度,但是上图中间de示意padding却没有重叠他们de高度是相加de,这点大家要注意到,这不是什么BUG,而是一种特性.那么我就写一句CSS来设定我de段落:

p {margin:1em 0;}

说了段距自然就会说到行距,有看过《网页设计技巧系列之一 浅谈文本排版》de朋友就会明白行距de重要性,那么您是否有给自己de页面设置行距呢,是如何设置de？ 设置行距有一个专门de属性:line-height,这个应该称之为行高.因为我要设定de是一行de高度,而不是行与行之间de距离.这也就是为什么我总发现Photoshop里设置行距de数据与做网页设置de数值不一样de原因了.但是行距依然是可以通过我设定de行高最终产生,所以方法不同,但是目标是一致de.一般我de行高一定是要超过字体高度de,否则行与行之间就会重叠,当然我不排除使用这种式做一些特别de效果,但是至少在阅读文本上我需要行行清楚.行距不宜太大,太大了阅读效率不高,如果太小了又容易读错行.所以一般行高不应超过两个字de高度.振之最常用de是1.6em~1.8em之间,如果宽度很大,我就需要加大行距不然我很容易读错行,如果宽度小de时候行距过大则失去了阅读de效率.那么我把刚才de段落deCSS做一下增加,标注一下我de行距:

p {margin:1em 0; line-height:1.6em; }

这样对于一个基本de段落设置就已经完成了,如果需要给这个段落加个首行缩进,还可以为这个段落设置一下字体,字大小,字样式,色彩等等:

p {margin:1em 0; text-indent:2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

这里关于字体de属性也是个缩写形式,顺序是:“font : font-style || font-variant || font-weight || font-size || line-height || font-family ”,这些知识在沈苏小雨deCSS2.0中文手册中都有讲述.我这里就不重复了.这里decolor是文字de色彩,#后面de数值应该是6位,可以直接复制Photoshop拾色板里de数值.但是我也常常会缩写.缩写方式是,奇数位与偶数位de值相同时即可合并为3位de色值.比如:#4488cc,可以缩写为#48c,如果需要首突出,那么不光需要把text-indentde值设为负值,还需要修改paddingde数值,因为突出去de也就是超出了内容区那么如果padding区没有空间那么这两个突出去de字就无法显示.那我再给出一个首行突出两字deCSS

p {margin:1em 0; padding:0 0 0 2em; text-indent:-2em; font:normal normal 12px/1.6em “宋体”; color:#000; }

有关美化段落文本de内容先讲到这里,下一篇讲解首字下沉de做法以及注意事项!

我都知道网页de最大特性是“链接”,是de这个在我现在看起来习以为常de东西,让我de生活发生了巨大de变化,是这个小小de标签成就了这个世界上无数de互联网天才.那么让我看看这个标签de真面目:
<a href=”URL” >文本区</a>
就是这个简单de标签,其实大家都在使用,用Dreamweaver可以很简单de添加链接.但是尽管如此我还是需要知道Ade属性是什么,这样才能更好de利用它.A是个内联标签,也就是说它本身并不会产生分行.他是流于文本之中de无素.那么我都知道内联元素是不能包含块元素de.那就是说在A中不能包含段落、DIV等这些块级de元素.那么您工作中是否有这样de情况呢？是否在A里加了无数de块级标签呢？那从现在开始改掉这个坏习惯,这样不光可以避免一些没必要deBUG问题,同时也能给GOOGLE等这些搜索引擎一个好印象,多点印象分.当然除此之外振之还推荐在大家伙在A中加入titile属性.例:
<a href=”URL” title=”这可用以解释或是显示完整de文本内容”>文本区</a>
为什么这么做呢,我这里有这样一篇文章《当标题不能显示完整de时候》,大家可以看一下,这只是加title属性其中一个小小de用处,但是作用非常有效.
链接标签中dehref＝“URL”这个URL是个非常强大de东西,当然这不是我这个专栏de内容,但是也非常推荐读者们可以认真阅读一下相关de知识.我从 百度百科 中找到了相关文档,请大家 点击阅读 .关于链接就暂时只讲这么多,如有什么疑问请通过文后de联系信息与我联系或是在线给我留言.
标题几乎是所有文章都会有de要素,也是我用以识实与索引文章de重要元素.我通过标题去感知文章内de核心.那么您知道吗？合理使用标题标签会让您de文章更受关注.我都知道XHTML给我提供了h1~h6,六个标题标签,那么我如何分配这六个标题标签de使用呢？下面给出一些建议:h1,在浏览器中显示最大,那么自然用来表示最大de标题,对于一个网站来说哪个标题才是最大de？是LOGO,我通常会在网站de最前面先标注这个网站de名称.所以h1就用来放LOGO,当然如果您de网站没有LOGO,只有一个网站名称,那也可以.当然振之是不推荐在大家在h1中放个图片.我完全可以通过CSS来实现以图换字.并且推荐网页中h1只出现一次.
当h1找到了专用de功能,那么担任内容标是,或是基它标题de重担就要放在另外几个标题标签上了.在余下de几个标题中h5与h6在浏览器默认显示字体是小于正常文本字体de.那么推荐h5与h6只作为免责声明或是版权通告来使用.这样即表明重要性,又不会太过明显影响阅读.对于标题标签de使用尽可能de注意一下他们之间de等级关系.当然标题de使用还是需要根据实际使用来决定.这里只是给出个建议.标题标签是块线元素,但是他并不能再包含块级元素了,只能包含内联de元素,比如链接、图像,换行之类de.记得有个朋友前两天在文章中提到过关于标题de内容,但是写法就有错了,他把链接写在了H1标签de外面,把H1包起来了,这样de写法是不推荐de.也不符合标准思维容易给以后de学习产生不好导向.
我de文章难免会有错误de地方,那么有错就要改,但是有时候我需要告诉读者这段是被删除de但是又能让读者看到.那么删除标签de作用就产生了.以前我会使用<s></s>或是<strike></strike>来得到一个删除线de效果.但是这仅表是一个删除线de效果,语义上没有DEL来得更为明确,所以这里我要告诉大家放弃以前de方式,采用<del></del>这个标签.同样能表达我需要de效果,并且意义更为直接明确.那么除了删除有时我还需要对删除de部分作出一些添加与修改.那么时候这个标签就非常有作用了那就是插入标签<ins></ins>.相信不用我说大家也知道如何使用这两个标签,但是千万别忘记了给这两个标签加上两个重要de属性:cite与datetime.解释与时间.解释不用说了,只要用文字注明为什么要删除或是为什么要插入就可以了.但是这个时间需要明确一下格式.严格de格式是:YYYY-MM-DDThh:mm:ssTZD.呵呵与我平时用de差不多但是有区别,其中T是表示时间段开始de必需字符,而TZD则是表示时区,Z是表是格林威治标准时间.一秀de写法是:2008-03-25T14:26:22Z
在所有de标签中有两上标签是样式标签,但是却没有被禁用,因为这两个标签所表述de内容很特别,上下标,^上标,_下标.
这两个标签用得到机率比较小,但是上标应该还是会常用到de,比如温度中de摄氏度de上de小圆圈,当然现有有专业de字符对应“℃”,还有我常看到书中de脚注上标[1].
hr,分平分隔线,这个标签与换行标签只要注意标签de写法就可以了<hr /><br />
关于文本部分de标签就讲到这里,当然标签可能还有很多,但是一些不推荐使用de,不常用de,这里就不再推荐,有兴趣de可以搜索一下相关de内空阅读一下即可.下一篇将引入CSS,一点点de美化我de文档.

在前面我已经讲过了strong与emde区别.除了strong与em之外还有一些相似de标签比如q、cite、blockquote.这三个都属于引用一类,但是这里还是有一些区别de,首先来一一解释.
<q></q>,qde作用是引用非块元素,也就是引用不能形成段落de内容,可能是某人说de一句话,也可能是一句文档摘录等,特点很明显这里是“一句”.并且q本身并不会产生段落.q本身并没有什么样式,一般浏览器也不会给他设置一个默认样式使起突出.但是我可以通过CSS去使之与一般内容区分开.在q标签中还有一个属性是非常重要de,那就是cite.在这个cite属性值中主要是注明引用内容de出自何处,或是给出在线de地址.
<q cite=”http://andymao.com/andy/post/92.html”>这次de内容会让您更进一步de了解到关于段落里de细节</q>
要特别注意不要把q写成p,这两个标签很容易弄错.
在上一篇中其实已经谈到了cite,在那篇文章中我写到“这个标签只表注出文献de标题与名称.这个标签有点类似于我书籍后面de参考文献de目录内容,也有点像是脚注.”那么他与q之间de区别是什么呢？其实很容易理解,q是显示内容,而cite则是显示说这段内容de人名或是书名.cite与q常常混合起来使用.比如:
<cite>鲁迅</cite>先生说:<q>地上本来没有路,走得人多了,便有了路</q>.
那么blockquote与他们有什么区别呢？blockquote是块引用,XHTML允许其包含任何标签.而上面deq与cite则没有这么大de包容度.blockquotede使用是当需要引用一段或是多段内容时所采用de,浏览器一般默认处理会把引用内容缩进一些以与正常de段落文章区分开.当然我可以通过CSS样式来改变区分de形式.
在blockquote中有一个cite属性,与q一样是用来注明引用来源de.可以把联机文档deURL注明在其中.
在XHTML标签中还有一个叫prede标签,这个标签在Dreamweaver中被称为“格式化”,在以前使用Dreamweaver de时候我一直不清楚这个东西是作什么用de.一直到现在才清楚pre通常用以显示源相关代码,并且不支持能使段落分开de标签比如<p>,显示内容如需换行只要在源文件中换行即可无需要相关代码实现.同时pre会保留注其中de所有空格并显示出来.
一般来讲pre目前是多用于显示源相关代码,这与codede用途是相似de,所不同de是pre是块级de,而code是内联de.简单说,pre可以包括多行内容,而code只包含短小de一句或几个字符.
这里讲述de并不能完全说清楚,这就需要在看完文档后动手操作尝试一下,自行去发现其中de特别之处.有朋友说希望看到有关于CSS方面de知识.这里我想传达我de编写意图.我希望一步步来,让一些还没从表格布局脱离出来de朋友可以先行使用一些并不会影响整体de形式切入进去.因为一涉及CSS就可能会有兼容性问题,所以这里先说文档,然后再加入一些不影响整体布局deCSS知识.一步步de深入,最终能让阅读者从表格布局自然过渡到标准势力中来.当然有朋友已经通过自学de方式完成了这一步,那么可以到我de“杂谈标准”一栏中与我交流.

很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀de软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,您必需要了解他们de特点.就算您不打算自己打相关代码,继续使用DW来完成自己de工作也必需要知道DW生存de相关代码de作用.如果您希望减少冗余相关代码,提升网页de品质,那么您就更需要认知(x)HTML标签.
那么学习自然要循序渐进,当然要从最常用、最简单de入手.如果问在所有HTML标签中谁是最常用最简单de标签？那我一定会说是段落标签,也就是<p></p>,说它常用,是因为几乎所有de文档文件都会用到这个标签,说他简单从外形上就可以看出来,他只有一个字母.虽说是简单,但是却也非常重要,因为这是一个用来区别段落用de.我都知道段落是用来划分文章用de,以方便阅读.而有时候因为一些软件,或是人为操作使得文档中以其它de标签来区分,用<div></div>de就特别de多.那么有人会说:不都一样嘛,反正都区分开了.事实不然,虽然对于我人来讲,用什么东西区分段落都可以,但是对于机器、程序来讲,需要理解段与段就需要通过这些标签了.这也就是标签de语义,正确de语义会让您de文档更容易为搜索引擎所识别.同时合理安排标签de使用也有助于维护与管理以及相关代码de移植.
当然有很多人可能早就知道这个标签并且一直在用,并且还发现段落标签不使用</p>一样可以显示.并且在一直使用着这种方法.在HTML中这种写法是允许de.但是在(x)HTML中就已经规范了这种写法,所有de段落标签都必需要加上结束标签.(<p>示例段落……文字</p>)这点要切记,(x)HTML并没有为HTML增加什么更新de标签,只是规范了HTMLde标签de使用,以及减去了一些不合理de标签,以及标签里de属性.那么段落标签中都有哪些属性？留下来多少呢？振之查阅了一些文献.
align属性:写法是<p align=left ></p>,属性值有:left、right、center、justify(两端对齐).这是对齐属性,作用是管理段落里文本de对齐方向.但是在(x)HTML中已经不赞成使用这个属性了,当然浏览器还是支持这个属性de.尽管如此我还是不用为好,为什么不用呢,因为这个属性我完成可以通过CSS可以很简单实现,不需要在相关代码里一一加上这些属性.
可以使用de属性有:id、class、style、title.关于这几个属性将会在本专栏以后de文章进行分析,这里只要大家理解在段落标签中可以使用这些属性就可以了.
好了,如果您现在还没尝试为文章设置段落标签不如从现在开始在自己手上de项目中加入这个相关代码吧.这会让您越来越容易de掌握WEB标准.
另外,P是个块级标签,但是在这个块级标签里却不能再出现块级标签.关于(x)HTMLde嵌套规则可以参考由JUNCHEN翻译并做出解释de《(X)HTML Strict 下de嵌套规则》

点击运行可以看到效果:<br /> <html><br /> <head><br /> </head><br /> <body><br /> <marquee behavior="alternate" height="400" direction="up" scrollamount="3" scrolldelay="30" width="500" bgcolor="#3399FF"> <marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%"> <font style="font-size: 35px">jb51.net</font><br /> </marquee><br /> </marquee><br /> </body><br /> </html><br /> [/html<br /> Marquee嵌套 </p> <p>[html]<br /> <marquee height="400" direction="up" scrollamount="5" scrolldelay="30" width="200" bgcolor="#3399FF"> <marquee behavior="alternate" height="50" direction="right" scrollamount="4" scrolldelay="30" width="100%"> <font face="Webdings" style="font-size: 50px">ÿ</font><br /> </marquee></p> <p><marquee behavior="alternate" height="50" direction="left" scrollamount="4" scrolldelay="30" width="100%"><br /> <font face="Webdings" style="font-size: 50px">ÿ</font><br /> </marquee></p> <p><marquee behavior="alternate" height="50" direction="right" scrollamount="3" scrolldelay="30" width="100%"><br /> <font face="Webdings" style="font-size: 50px">ÿ</font><br /> </marquee><br /> </marquee><br />
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]]

标题就是<title>拉萨尔–莱佛士教育</title>,调试了很久发现当把<title>拉萨尔–莱佛士教育</title>
删掉后,显示了.
….
找原因,没找到.
后来有吧中间de”–”去掉,显示正常.
然后再加上显示”–”显示正常.
在把备份de文件<title>段复制过来,又没显示了.
好像是”–”de问题,不知道”–”是不是戏弄我.

点击运行可以看到效果:<br /> <!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'><br /> <html><br /> <head> </p> <style> body{ font-family:Arial; text-align:center; } </p> <p>p{ </p> <p>} </p> <p>.img-grid{ width:603px; margin:auto; overflow:hidden; position:relative; border:solid 20px #CCCCCC; } </p> <p>.img-grid h3{ padding:0 0 12px 0; background:#ccc; margin:0; font:normal normal bold 3em/normal "Georgia"; letter-spacing:-0.1em; text-align:center; } </p> <p>.img-grid ul{ list-style-type:none; margin:-1px 0 0 -1px; padding:0; width:100%; border-width:0px 1px 0 0; position:relative; } </p> <p>.img-grid li{ zoom:1; list-style-type:none; margin:0; padding:0; vertical-align:middle; width:200px; padding:0 0 30px 0; </p> <p> text-align:center; position:relative; border:solid 1px #dedede; border-top-color:#CCCCCC; margin:-1px -1px 0 0; border-width:1px 0 0px 1px; float:left; display:inline; font:150px/normal "Times new roman"; *padding:0; *font-size:180px; } </p> <p>.img-grid li img { vertical-align:middle; background:#fff; font-size:12px; padding:2px; border:solid 1px #555; </p> <p>} </p> <p>.img-grid li a:hover{ text-indent:0;/*IE6 need this to trigger :hover*/ } </p> <p>.img-grid li a:hover img{ padding:1px; border:solid 2px #336699; } </p> <p>.img-grid li strong{ display:block; font:small/1.1 Arial; background:#fff; position:absolute; bottom:0; left:0; width:100%; </p> <p>} .img-grid li strong a{ display:block; padding:8px 4px; color:#336699; text-decoration:none; zoom:1; } </p> <p>.img-grid li strong a:hover{ text-decoration:underline; } </p> </style> <p></head><br /> <body> </p> <h1>CSS List Grid Layout</h1> <p>Compatible and tested with IE6, IE7, Safari 2, Safari 3, Firefox 2, Opera 9.21 </p> <h3>List Grid View</h3> <ul> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /></a><br /> <strong><a href="#">sodales porta libero.n</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /></a><br /> <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /></a><br /> <strong><a href="#">sodales porta libero. Integerdum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /></a><br /> <strong><a href="#">sodales porta libero. Integer adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /></a><br /> <strong><a href="#">sodalesber Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /></a><br /> <strong><a href="#">sodales in</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="20" alt="image" /></a><br /> <strong><a href="#">sodales porta libero. Integer dignissim sceiquam erat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="40" alt="image" /></a><br /> <strong><a href="#">sodales porterat. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="60" alt="image" /></a><br /> <strong><a href="#">sodales porta libero. Integer dignissim scelerisque massa.ndum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="80" alt="image" /></a><br /> <strong><a href="#">sodales porta libero. Integer dignissim at. Nunc eu risus ut dolor bibendum adipiscing. Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="100" alt="image" /></a><br /> <strong><a href="#">sodales porta liber Proin</a></strong> </li> <li> <a href="#"><img src="http://farm1.static.flickr.com/182/424905397_d0ab1d8eea_m.jpg" height="110" alt="image" /></a><br /> <strong><a href="#">sodales porta liberor bibendum adipiscing. Proin</a></strong> </li> </ul> <p></body><br /> </html> </p> <p>
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]