|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
历经多年来的停滞不前，如今全球信息网联盟(WorldWideWebConsortium，W3C)重拾HTML标准化。网页制造poluoluo文章简介：让我们来看一些写得其实不友爱的HTML标志,并针对这些成绩举行会商，从而进修怎样誊写整齐标准的HTML标志。
优秀的HTML代码是一个大度网站的基本。当我教他人CSS的时分,我老是起首告知他们:优秀的CSS只存在于优秀的HTML标志基本上。这就仿佛一间屋子必要一个坚实的地基一样，对不？整齐、语义化的HTML标志具有良多的上风，但却仍是有良多网站利用着其实不友爱的标志写法。
让我们来看一些写得其实不友爱的HTML标志,并针对这些成绩举行会商，从而进修怎样誊写整齐标准的HTML标志。
破洛洛注:ChrisCyier在这里利用了两个文档来举行本文的代码申明:badcode和goodcode。人人进修的时分请参考着这两个文件。
1.严厉的DOCTYPE
我们要做到这一点，只必要按准确的步骤来做便可.没需要往会商是不是利用HTML4.01或XHTML1.0，二者都对我们誊写准确的代码提出了严厉的请求。
但不管怎样我们的代码不该该利用任何Tables表格来举行结构，以是也就没需要利用TransitionalDOCTYPE.
相干资本:
- W3C保举的DTDs(文件范例声明)
- FixYourSiteWiththeRightDOCTYPE!
- NomoreTransitionalDOCTYPEs,please
破洛洛注:所谓的DTD就是文档范例声明，复杂来讲，就是对特定文档所界说的一些划定规矩，这些划定规矩包含一系列的元素和实体的声明。XHTML文档范例有三种:STRICT（严厉范例）,TRANSITIONAL（过渡范例）和FRAMESET（框架范例）。今朝，我们利用最多的是TRANSITIONAL，好比本站今朝也是利用XHTML1.0TRANSITIONAL。假如你的HTML代码誊写的还算优秀，那把现有的TRANSITIONAL转为STRICT仍是对照便利的。反之，也不必太急着转，团体以为，STRICT更松散，但用TRANSITIONAL也并没有太年夜影响。
2.Characterset&encodingcharacters
在我们的<head>部分,第一件事变就是声明字符集.我们利用了UTF-8,可是把它放到了<title>前面.让我们把字符集声明挪动到最下面，由于我们要让扫瞄器在浏览任何内容之前就应当晓得以何种字符集来举行处置。
除字符集声明的地位外，<title>中呈现的奇异字符也是必要注重的成绩，好比最经常使用的”&“字符，我们应当利用字符实体”&“来交换它。
相干资本:
- Wikipedia:UTF-8
- Atutorialoncharactercodeissues
- TheExtendedASCIItable
3.得当的缩进
在誊写代码的时分，缩进其实不会影响网页的表面，但利用得当的缩进能使代码更具可读性，尺度的缩进办法是当你入手下手一个新的元素时缩进一个Tab位（或几个空格）。别的，记得，封闭元素的标签与入手下手标签对齐。
破洛洛注:一些伴侣会嫌誊写代码的时分缩进对照贫苦，假如仅仅是你一团体浏览这份代码，那大概没甚么成绩，你本人以为OK就好。但假如是合作或你的作品是公然公布分享的，那誊写大度的可读化性更高的代码就很有需要了。
相干资本:
- CleanupyourWebpageswithHTMLTIDY
4.利用内部CSS和JavaScript
我们有一些CSS代码已延长到我们的<head>部分。这是一个严峻的犯规，由于它它只能合用于单一的HTML网页。坚持自力的CSS文件意味着将来的网页能够链接到它们，并利用不异的代码。Javascript也是一样的事理。
破洛洛注:固然，这个成绩也许也并非那末严峻。好比作为WordPress主题来讲，写在<head>内里的代码也就感化于一切WordPress页面。但把CSS写在<head>内里仍旧是个十分欠好的习气。
5.准确的标签嵌套
在我们的网站题目内里，我们利用<h1>作为网站题目标签，这是完善的。而且增加了一个到首页的链接，但毛病就出在把链接放到了<h1>表面，<a>链接包抄了<h1>。这类复杂的嵌套毛病，年夜多半扫瞄器都能优秀的处置，但从手艺下去说，这是不可的。
锚链接是一个内联元素，而<h1>题目是一个区块元素，区块元素不该该被放在内联元素中。
6.往除不用要的DIV
我不晓得谁起首创造，但我喜好“divitis”这个词，它指的是在HTML标志中过分的利用divs。在进修网页计划的某个阶段，人人进修怎样利用一个DIV来包裹诸多别的元从来完成便利的结构和款式化。这就招致了DIV元素的滥用，必要的中央我们用了，完整不用要的中央我们也用了。
在上图的例子中，我们利用了一个div(”topNav”)来包括了UL列表(”bigBarNavigation”).但DIV和UL都是区块元素，以是没有需要利用DIV来包裹UL元素。
相干资本:
- Divitis:whatitis,andhowtocureit.
7.利用更好的定名常规
如今恰好谈一下定名办理,在上一条所说的示例中，我们的UL利用了ID称号“bigBarNavigation.”个中“Navigation”很好的申明了该区块的内容，但“big”和“Bar”形貌的倒是计划而不是内容.它多是在说这个菜单是一个很年夜的工具条，但假如这个菜单的计划酿成垂直的，那这个称号就会显得凌乱和不相干。
友爱的class和id称号比方“mainNav,”“subNav,”“sidebar,”“footer,”“metaData,”，它们形貌了所包括的内容.欠好的class和id称号则形貌计划,好比“bigBoldHeader,”“leftSidebar,”and“roundedBox.”
破洛洛注:Chris所夸大的是按内容仍是按计划来举行定名。团体增补一点:ID和Class称号利用年夜写仍是小写，或单词首字母年夜写。起首，完整的年夜写单词是倒霉于浏览的，扫除。至于完整利用小写仍是单词首字母年夜写，就看团体的习气了。主要的一点是，不论利用哪一种划定规矩，应当坚持分歧。不要一会儿纯小写，一会儿又首字母年夜写，会很凌乱。
别的，我团体对照含混的是，对照较长的称号，是加下划线“_”,仍是连字符”-”，亦或不必。大概是我想的太庞大了吧。用哪一种都好，坚持分歧就OK。
网页制造poluoluo文章简介：让我们来看一些写得其实不友爱的HTML标志,并针对这些成绩举行会商，从而进修怎样誊写整齐标准的HTML标志。
8.把字型排版留给CSS
在菜单的计划中，我们一样平常都利用年夜写字母。这很复杂啊，把菜单项写成年夜写的不就好了？但为了未来的可扩大性，我们不该该这么做。在代码中，我们应当仍旧利用尺度的单词巨细写写法，或完整写成小写。
而以后，我们能够经由过程CSS来改动笔墨的字型，好比经由过程text-transform:uppercase;把字母转换为年夜写，经由过程text-transform:capitalize;把转换为单词首字母年夜写。
9.给<body>指定Class或id
有的时分，网页中的统一个区块，但在分歧页面的时分，我们会对其举行分歧的款式化。良多时分，我们会为这个不异的区块取一个新的称号，好比为新款式的DIV区块增加一个“mainContent-500.”的ID属性，为对照窄的侧边栏增加为<class=”narrowSidebar”>。
这并非一个优秀的临时办理计划。正如我们第7条指出的，我们必要友爱且坚持分歧的定名常规。而不是增添一些花俏的新ID或CLASS称号。
为必要款式化某个区块的分歧页面指定一个自力的bodyID或CLASS将会十分有效。由于页面的一切内容都包括在body标签当中。指定Body称号后，你能够经由过程CSSHook来完整从头界说某一个元素的款式。举个例子，本来的页面中，我们对sidebar举行了背景界说.sidebar{background:#FF0;”}而在新的<bodyclass=”aboutpage”>中，我们要把sidebar的背景弄成玄色，那很复杂，利用boy.aboutpage.sidebar{background:#000;}便可。
相干资本:
- IDYourBodyForGreaterCSSControlandSpecificity
- Casestudy:Re-usingstyleswithabodyclass
10.考证
一些小的HTML代码毛病大概其实不会对网页内容有多年夜影响，但经由过程W3C考证的代码将更有益于网页内容展现。好比下图示例中的图像，短少自封闭标志和ALT属性。
就算没有别的缘故原由，经由过程W3C考证时看到绿色的经由过程提醒也是件让人恬逸的事变。
相干文章:
- TheW3CMarkupValidationService
- XHTML-CSSValidator
- FreeSiteValidator(checksentiresite,notjustonepage)
11.逻辑按次
假如有大概的话，只管坚持你的网页部分代码以逻辑按次来分列是最好的.好比下图中，footer放在了sidebar下面，这多是计划上的必要，内容上面恰好是Footer底部，然后才是侧边栏。但假如能经由过程手艺办理，好比Position定位，那你应当把footer放到最上面。
12.Justdowhatyoucan
我们已总结了良多让HTML代码誊写的加倍简便的准绳在这里，这将是一个很好的入手下手，但另有更多。当你试图修复你现的代码，大概会发明很坚苦，而假如你完整当作重新入手下手进修，却大概会简单的多。不论怎样，主要的是，你应当进修怎样撰写优秀的HTML而且保持下往。
当你下次誊写一个HTML代码项目时，服膺这些简便准绳，Justdowhatyoucan,You’lldobetter!
</p>
在W3C的HTML工作小组电子邮件论坛上频频冒出这样的情绪化批判字眼：“幼稚”、“令人无法忍受”、“荒谬”、“使诈”等。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
窥视卡
雷达卡
发表于 2015-1-15 23:19:37
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 2015-3-24 08:58:40