关闭顶部展开顶部

初学网页标准应该注意:有害的标签_Web标准教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

这篇文章注重以前完美童话中的html标签,有害的,糟糕的,明显丑陋的,应该被排除在标准html之外的标签,要想只有一半工作量要么颠覆浏览器要么使用更加简单推荐的新标签。

尽管前面的基础教程已经提出了符合标准的建议,但初学者基础不同或者练习不对,这里进行总结。

html正尝试从表现转向语意,进而分离语意(HTML)和表现(CSS)。这个已经大范围运用于网页,因为这样一个单一的表现指令(CSS文件)可以使用在许多的页面。这样,网站更利于治理,想改变全站只需改变一个简单的代码。

一些有害的标签其实是简单的表现标签(比如small),它们可以用CSS里面相同意思的代码取代。其他一些不是表现的标签,但却没必要(比如font标签)或者对可用性不利(比如blink)。

标签 Tags
下面列举的标签可以用更好的选择:

b标签的是加粗的意思,这里可以用strong代替,或在在css里面添加font-weight:bold。

i表示斜体字元素,可以使用em代替,或是在css里面添加font-style:italic。

big用来表现大文字,标题上可以使用h1,h2等等代替,其他可以在cssfont-size里具体控制。

small用来表现小文字,可以在cssfont-size里控制。

hr表示水平线,可以在CSS里用border-top或border-bottom代替,也可用图片表现。

上面提及的标签都适应最近的HTML标准,但是它们没有赋予语意给内容。它们也许有更多用处但它们没有显著的害处,当站在下面糟糠的标签上可能非常轻易犯错。

u表示下划线元素。它让文本像连接一样保持下划线,这也许就是这个标签消失的原因,人们真的不喜欢没有连接的文本有下划线。

center可以让元素居中。CSS属性text-align不仅可以居中center还有left,right和justify。 menu用来制作一个菜单列表,它比ul干的漂亮,但是无序列表更加普遍,ul取代menu。

layer和div元素很像,但只工作在老版本netscape浏览器,用处不大。

blink或marquee。对它们果断说不。

font,可以用来定义字体的名称、大小、颜色。旧的网站(甚至现在的)在整个页面连续不断的使用font标签,就像白蚁灾祸。一些来自网页创建软件,布置font标签环绕在每个元素控制文字颜色或大小。用font标签应用到每一个元素,用CSS表示的话只需简单的一句即可,而且可以全站实现更改。使用这个方法,不仅可以减轻网页体积,改变简单的一句css语句就可改变font所表示的内容。这样保持了网站风格的一致。font标签和滥用表格是网页体积臃肿的主要原因。

属性 Attributes

现在你可能正确使用标签,但它们有一些令人烦恼的寄生属性,可能导致变味。

name分配一个name给元素,在form元素比如input中表现完美,但在别处,name的工作被id属性代替。

text和bgcolor用来指定基础的文字颜色和拥有开放body标签的背景颜色。css中color和background-color属性可以很好的应用在body选择器。

background可以为body标签指定背景图片。css可以提供更好的背景图片属性,比如background-image。

link,alink,vlink可以为body标签指定链接颜色。CSS属性::link,:active,:visited同样作用。 align可以控制元素排列,比如<div align="center">Stuff</div>,但是像center标签,可以在css里用text-align属性。

target链接以不同状态打开,比如开新窗口 <a href="wherever.html" target="_blank">Help me</a>。听起来不错,但对网站没有亲切感。用户不会期望这些(如新开窗口)如魔术一样的出现方式,大部分用户喜欢使用“后退”按钮,打开新窗口意味着这个功能失效。标签的表现属性比如图片的width和height表格的cellpadding和cellspacing决定了不同的属性应用在不同的元素。它们不是完美的解决方案,但假如你的页面有很多图片或表格,你可能没有其他可行的选择。

大部分莫名其妙的表现属性属于textarea标签,它不仅只有cols和rows有效属性,最新的HTML标准需要它们。

好的标签,坏的应用。

进入你的房子,你可能跪下钻狗洞,但是等下,有一个专门为人设计的门装饰——把手,呵呵,看看,门才拥有让人通过的正确大小。

HTML标签正是为细节设计,信任或不信任,当你正确使用它们,你能取得最佳结果。

当html是语意的,网页对残障用户带来更多的易用性,比如屏幕读者经常强调列表它使用到ul标签或一个标题它使用到h1或h2标签。

html最严重的滥用就是表格,表格被用来布局,但它们仅仅只是用来表示表格数据。不用表格布局的想法不是像佛教徒一样寻求启迪,它有真正的益处,不仅减轻网页体积,同时可以轻易的维护和重新设计网页。

有时一些设计者使用一些标签和属性完成过渡性的设计(非凡是表格布局),一是可以支持老版本浏览器(Netscape 4)。在Netscape 4表格比CSS的表现好,但它的用户非常少而且正在减少,现在移动用户正在增多,表格布局就显的非常糟糕。上面提到的表格优点远超缺点,原因在于在尽量少的风格下页面需要考虑所有浏览器的功能。

框架 Frames
金发姑娘认为这是一个非常不错的主意为一碗稀饭帮助她,但是随后三个大型食肉动物出现把她扔出了窗户。框架就像是属于熊的一碗稀饭。它们看起来不错,但是危险时刻存在。

大部分网站都不用框架,大部分网站用户只使用单一的页面。

但是假如,由于一些原因,你需要防止用户添加一个指定的页面到它们的书签,或者你想防止经由email或即时信息介绍的指定页面,或者你想添加另外一个级别的整体复杂性给使用屏幕阅读器的残疾用户,他们需要在框架间导航,或者你想进入搜索引擎地狱,就用框架吧。

基本上,框架什么也不做,只增加了复杂性和失去可用性。

最后假如你跟循下面的规则,不会错的太离谱。

1)假如标签或属性的名称比较生僻,建议注释下,或不用它。这样使用css的效率会提高。

2)让标签做符合它名称的工作。表格就用在表格数据。标题就用标题,等等。

3)当你有明确的内容,使用适当的标签。列表用列表,标题用标题,等等。

来源:模板无忧//所属分类:Web标准教程/更新时间:2007-05-31
相关Web标准教程
闂備焦鐪归崺鍕垂闁秵鍋ら柡鍥舵緛缂嶆牠鏌涢埄鍐姇闁抽攱甯楅妵鍕即濡も偓娴滄儳顪冮妶蹇曠Ф闁瑰嚖鎷�
婵犵數鍋涢顓熸叏椤撱垹纾婚柟鐐灱濡插牓鏌¢崒婵囩《濠⒀勭⊕娣囧﹪鎳犻澶嗗亾濠靛鐓熼柕蹇婃櫅閻忔煡鏌熼崙銈嗗
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勭€n亝顓鹃柣搴f嚀鐎氼厽绔熼崱娆愬床濞戞柧绶氶弻锝夊閳轰胶浼堥梺鐟板殩閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕靛悑闂備浇顕栭崹搴ㄥ礋椤撗勑氶梻浣筋嚙闁帮絽岣胯铻炴繛鎴欏灪閸嬪鏌ㄩ悤鍌涘
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗笒閸婂摜鏁崼鏇炵閻庢稒岣块惌鎺斺偓瑙勬礃缁诲牓寮幘缁樻櫢闁跨噦鎷�
闂傚倷鑳舵灙缂佺粯鍔欓獮濠冩償閵娿儳鍔﹀銈嗗坊閸嬫捇鏌涘顒夊剳缂侇喖锕弫鍌炲礈瑜忛悡鎾绘煟鎼搭垳宀涢柡鍛箞閹苯鈻庨幋鐘碉紳婵炴挻鑹鹃敃銉р偓姘炬嫹
闂傚倷娴囬妴鈧柛瀣尰閵囧嫰寮介妸褉妲堥梺浼欏瘜閸o綁寮诲☉妯锋斀闁归偊浜為懗铏圭磽娴i潧濡芥俊鐐舵椤曪綁濡搁埡濠冩櫖濠电偛妫欓崹鐢电箔閿熺姵鈷戦柛婵嗗閳ь剙顭烽獮濠囧箻閼告娼熼梺璺ㄥ櫐閹凤拷
闂傚倷绀侀幖顐﹀疮閻楀牊鍙忓瀣捣缁€濠傤熆閼搁潧濮堥柣鎿勭秮閹娼幏宀婂妳濠电偛鐪伴崐鏇㈡箒闂佹寧绻傚Λ娆戠矆閳ь剟姊洪崨濞氭垿鎮ч悩鑼殾闁规壆澧楅弲鎼佹煥閻曞倹瀚�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙淇婇姘倯閻庢氨绮妵鍕箻鐎靛摜鐣洪柣搴㈢啲閹凤拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳ジ宕堕妸銉紩婵$偑鍊栭幐鑽ゆ崲閸愵亖鍋撳铏彧濞e洤锕、娑樜旈埀顒佹櫠閸欏绡€妞ゎ偒鍠楃€氾拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲﹂崜鐔笺€佸▎鎾崇闁绘挸绨堕崑鎾绘偨閸涘﹦鍘搁梺鍓插亝缁诲嫬鐡┑鐘愁問閸n垶骞忛敓锟�
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕闂佸搫鑻幊姗€宕洪埀顒併亜閹哄棗浜鹃梺瀹狀嚙闁帮綁鐛幋锕€绠涢梻鍫熺⊕椤斿棝姊绘担鍛婃儓閻庢碍鎮傞獮蹇涙晸閿燂拷
濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庤娲╃紞渚€鐛€n亖鏀介柛顐亗缁憋拷
婵犵數濮烽。浠嬪焵椤掆偓閸熷潡鍩€椤掑嫷妫戠紒杈╁仜椤撳吋寰勬繝鍕幀闂備胶鎳撻悺銊ф崲閸曨垼鏁傞悗娑櫭肩换鍡樸亜閺嶎煈娈斿褍寮剁换婵嬶綖椤旇棄顏�
闂備浇顕ф鎼佸储濠婂牆绀堟繝闈涱儐閸嬪鏌熼幆鐗堫棄闁活厽顨呴埞鎴︽偐閹绘帗娈梺濂告涧缂嶅﹪寮婚妶澶嬪殟闁靛鍎遍~宥夋⒑缂佹ḿ澹勭紓宥勭閻e嘲鈻庨幘瀛樻闂佽法鍣﹂幏锟�
UB闂傚倷绀佸﹢杈╁垝椤栫偛绀夋俊銈呮噽瀹撲線鏌涢妷銏℃珕閻庢碍宀搁幃妤€鈽夊▍铏灴閿濈偤鏁撻敓锟�
闂傚倷娴囨竟鍫熴仈缁嬫娼栧┑鐘崇閻掗箖鎮楅悽鐢点€婇柛瀣崌閻涱噣宕归鍙ョ棯婵犵數濮崑鎾绘煥閻曞倹瀚�
闂備浇顕ф鍝ョ不瀹ュ鍨傞柛婵嗗閼板潡鏌涢姀銏犳
闂傚倷绀侀幉鈥愁潖缂佹ɑ鍙忓瀣捣缁€濠傤熆鐠鸿櫣鐏遍柛妤佺缁绘盯宕卞Δ鈧銏ゆ煕閻愬樊妲圭紒缁樼〒缁辨瑩鎮╅崫鍕腐闂備胶枪妤犲繘骞忛敓锟�
缂傚倸鍊搁崐鐑芥倿閿曞倹鍋¢柨鏇炲€搁崹鍌涚節婵犲倸顏い鈺呮敱閵囧嫰骞掑鍥舵М缂備焦褰冨﹢閬嶅焵椤掑倸浠柛濠冪箘缁辨挸顫濇0婵囨櫓闂佽法鍣﹂幏锟�
©2017 www.mb5u.com濠电姷顣藉Σ鍛村垂椤忓牆绀堟繝闈涙-閻斿棙鎱ㄥ璇蹭壕閻庢鍣崳锝夊箖閳哄懎绠甸柟鐑樻尭閻︼拷
闂傚倷娴囬妴鈧柛瀣崌閺岀喖顢涘⿰鍐炬毉濡炪們鍎婚幏锟�&闂傚倷绀侀幉锛勬暜閹烘嚦娑㈠籍閸噥妫呴梺璺ㄥ櫐閹凤拷