高级课15:理解HTML代码的美感
来源: 互联网   发布时间: 2015-04-04 22:22   261 次浏览   大小:  16px  14px  12px
高级课15:理解HTML代码的美感

如何让代码具有美感?对于HTML而言,这一切都是手工活。让我们看看标记语言如何能达到具有美感的境界。

HTML5-HTML5及其新元素带来了前所未有的美感。

DOCTYPE-HTML5拥有最佳的文档类型。

Indentation-跳位字元与空格用于缩进代码,以正确显示标籤之间的父子关係,强调层级结构。

Charset-在所有内容之前,必须在头部进行字元集声明。

Title-网站标题简单而清晰。首先表述该页面的功能,在分隔符号之后,用网站标题结尾。

CSS-只用了一个简单的样式表(媒体类型已在样式表中声明),并且仅面向于优良的流览器。IE6及更低版本将获取通用的样式表。

Body-为主体赋予ID,便能在无需更多标记的情况下,给不同页面设定独有的样式。

JavaScript-从Google调用了jQuery(最具美感的JavaScript脚本库)。仅载入了单个JavaScript文件。各脚本都在页面底端进行引用。

FilePath-为提高效率,站点资源使用相对路径。从适应转载的角度考虑,内容性档(如图片)则採用绝对路径。

ImageAttributes-图片包含替换文字,主要是为图片缺失情况而服务的,但同时也可用于验证。为了提高渲染效率,图片的宽度与高度最好也要说明。

MainContentFirst–页面的主要内容应在,基本的标示及导航之后,而在任何辅助内容(如:边栏)之前。

AppropriateDescriptiveBlock-LevelElements–HEADER、NAV、SECTION、ARTICLE、ASIDE……这些新出现的“描述区段”,都将比从前的DIV更好地描述内容。

Hierarchy–大写标题标籤将起到实效,并跟随着清晰的“层级结构”。

AppropriateDescriptiveTags–根据不同的需要,列表被标记为:未排序、已排序,以及并不常用的自定义列表。

CommonContentIncluded–在不同页面所出现的相同内容,最好能从伺服器端包含到页面中。(无论通过任何对你行之有效的方式、语言、CMS,等等。)

SemanticClasses–不仅需要设立正确的元素名称,还更应做到类和ID的命名符合语意:即使没有特定说明,它们也能起到描述的作用。(如“col”比“left”更好)

Classes–当多个元素需要用到类似样式的时候,儘量为它们定义相同的类。(重用性)

IDs–当页面中该元素仅出现一次的时候,儘量为它们定义ID,而请勿为不同元素定义相同ID。

DynamicElements–动态效果仅在确实所需的时候加入。

CharactersEncoded–当出现特殊字元的时候,请注意字元编码。

FreeFromStyling-页面上的一切无关样式,甚至无需指明需要怎样的样式。页面上的一切仅限以下叁项:所需的站点资源、内容、描述。

Comments-在查看代码的时候,那些并不需要特别强调,或者不是格外明显的内容,将会被包括在评论之中。

Valid-全站的标记符合W3C验证。注意标籤闭合,保证必要属性,避免废弃方法,等等。


分享按钮
 
需要课程请咨询
 
QQ  在线客服
Power by 建站之星 | 美橙互联 版权所有