每当我访问精美的网站,我都情不自禁地会去查看源代码。这就好比你拥有一副X光眼镜,能够看到任何人——甚至透视他们的遮羞布。这简直是天经地义的事情嘛!我迫不及待地想了解,这个精美的网站,是不是由同样具有美感的代码所写成,而或者只是金玉其外败絮其中。代码?美感?当然!归根结蒂,代码如诗。(译注:“Code
is poetry”为著名博客系统 Wordpress
的宣传语。)这仅仅是最基础的 HTML 而已,自然不如其它动态语言般复杂而优雅,但它依旧保持了它的创造者所赋予的艺术笔触。

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

图片有足够大(译注:2000x2000),你大可以把它打印出来并贴在你的个人储物箱中,并让你的朋友留下深刻印象。话说回来,这的确是个令人纠结的大小。我会放出
PSD 原图方便大家修改。

  • HTML5 - HTML5 及其新元素带来了前所未有的美感。
  • DOCTYPE - HTML5 拥有最佳的文档类型
  • Indentation -
    制表符与空格用于缩进代码,以正确显示标签之间的父子关系,强调层级结构。
  • Charset - 在所有内容之前,必须在头部进行字符集声明。
  • Title -
    网站标题简单而清晰。首先表述该页面的功能,在分隔符之后,用网站标题结尾。
  • CSS -
    只用了一个简单的样式表(媒体类型已在样式表中声明),并且仅面向于优良的浏览器。IE6
    及更低版本将获取通用的样式表。
  • Body - 为主体赋予
    ID,便能在无需更多标记的情况下,给不同页面设定独有的样式。
  • JavaScript - 从 Google (谷歌)调用了 jQuery(最具美感的
    JavaScript 脚本库)。仅加载了单个 JavaScript
    文件。各脚本都在页面底端进行引用。
  • File Path -
    为提高效率,站点资源使用相对路径。从适应转载的角度考虑,内容性文件(如图片)则采用绝对路径。
  • Image Attributes -
    图片包含替换文字,主要是为图片缺失情况而服务的,但同时也可用于验证。为了提高渲染效率,图片的宽度与高度最好也要说明。
  • Main Content First –
    页面的主要内容应在,基本的标示及导航之后,而在任何辅助内容(如:边栏)之前。
  • Appropriate Descriptive Block-Level Elements –
    HEADER、NAV、SECTION、ARTICLE、ASIDE
    ……这些新出现的“描述区段”,都将比从前的 DIV 更好地描述内容。
  • Hierarchy – 大写标题标签将起到实效,并跟随着清晰的“层级结构”。
  • Appropriate Descriptive Tags –
    根据不同的需要,列表被标记为:未排序、已排序,以及并不常用的自定义列表。
  • Common Content Included –
    在不同页面所出现的相同内容,最好能从服务器端包含到页面中。(无论通过任何对你行之有效的方式、语言、CMS,等等。)
  • Semantic Classes – 不仅需要设立正确的元素名称,还更应做到类和 ID
    的命名符合语意:即使没有特定说明,它们也能起到描述的作用。(如“col”比“left”更好)
  • Classes –
    当多个元素需要用到类似样式的时候,尽量为它们定义相同的。(重用性)
  • IDs – 当页面中该元素仅出现一次的时候,尽量为它们定义 ID,而请勿为不同元素定义相同
    ID。
  • Dynamic Elements – 动态效果仅在确实所需的时候加入。
  • Characters Encoded – 当出现特殊字符的时候,请注意字符编码
  • Free From Styling -
    页面上的一切无关样式,甚至无需指明需要怎样的样式。页面上的一切仅限以下三项:所需的站点资源、内容、描述。
  • Comments -
    在查看代码的时候,那些并不需要特别强调,或者不是格外明显的内容,将会被包括在评论之中。
  • Valid - 全站的标记符合 W3C
    验证。注意标签闭合,保证必要属性,避免废弃方法,等等。
  • 【相关资料】 1、原文
    2、
    PNG
    3、
    PSD
    4、
    HTML

    原文:http://css-tricks.com/what-beautiful-html-code-looks-like/
    翻译:http://horans.cn/what-beautiful-html-code-looks-like/

    译者:虽然不算新文,但是图文结合的方式相当不错。亦根据更新后的文章增补及汉化了附图。

    =====================
    早在两年之前,我便写过这个话题。说来话长,何况正在到来的 HTML5 甚至比当年的 XTML 1.1 更加让 HTML
    充满美感。所以,我更新了此文!

HTML代码的美感的更多相关文章

  1. 我的代码观——关于ACM编程风格与librazy网友的对话

    序 在拙文 <高手看了,感觉惨不忍睹——关于“[ACM]杭电ACM题一直WA求高手看看代码”>中,我对ACMer们的一些代码“惯例”发表了我的看法, librazy网友在评论中给出了他的一 ...

  2. 关于C#中程序功能实现,对代码选择的思考

    body { background-color: rgb(60,60,60) } 接触C#语言只有短短几天时间,想要写出什么高大上的深入性研究文章,估计也是满篇的猜想和一些没有逻辑的推断.截至目前而言 ...

  3. Java代码格式化规范实践总结

    目标说明 统一良好的代码格式规范可以有效提升开发团队之间的「协作效率」,如果不同的开发团队或者开发人员采用不同的代码格式规范,那么每次Format代码都会导致大量的变化,在Code Review及Me ...

  4. Golang之chan/goroutine(转)

    原文地址:http://tchen.me/posts/2014-01-27-golang-chatroom.html?utm_source=tuicool&utm_medium=referra ...

  5. 从抽象谈起(三):AOP编程和ASP.NET MVC

    AOP(Aspect oriented programming)面向切面编程.说成切面不容易理解,代码哪里有切面?又不是三维物体.概念不管,我们从其思想来理解这个名词吧. AOP的主要思想是把相同.相 ...

  6. 转载:做Java开发这一年 (火龙果软件)

    转载:http://www.uml.org.cn/success/201410205.asp 从去年到现在,从.NET转向Java开发(只是因为项目原因,绝对与平台好坏没有关系)差不多有一年的时间了. ...

  7. AOP编程和ASP.NET MVC

    AOP编程和ASP.NET MVC AOP(Aspect oriented programming)面向切面编程.说成切面不容易理解,代码哪里有切面?又不是三维物体.概念不管,我们从其思想来理解这个名 ...

  8. 记录JavaFx中非常重要的细节,入门了也未必知道

    title: 记录JavaFx中非常重要的细节 JavaFx中有一些疑难杂症,或许你以为你掌握了JavaFx,但是也未必知道我所说的这些问题和解决方案,如果有帮助到你的,可以加群最大最活跃的JavaF ...

  9. Alpha冲刺报告(8/12)(麻瓜制造者)

    今日已完成 邓弘立: 完成了对主页UI控件的更新 符天愉: 没有完成留言模块,只是完成了留言的查询并且将留言多级回复格式化,同时和队友一起部署了商品发布的接口 江郑: 经过了这几天的编码,需求方面的数 ...

随机推荐

  1. AR路由器web界面每IP限速配置方法

    一.做下载方向的限速:在 QOS>接口限速,选择“新建”“接口名称”选择内网接口“限速类型”选择IP限速(目的)“方向”选择流出“起始/目的ip”写内网的ip“类型”选择独占“承诺速率”为限速的 ...

  2. Spring事务的传播行为 @Transactional

    Spring事务的传播行为http://blog.csdn.net/cuker919/article/details/5957209 在service类前加上@Transactional,声明这个se ...

  3. Windows外壳名字空间的浏览

    Windows95/98对Dos/Win3.x作了许多重大改进,在文件系统方面,它除了采用长文件名替代Dos中的8.3文件名以外,引入外壳名字空间(Shell Name Space)来代Dos文件系统 ...

  4. C++ 内存泄漏

    1. 内存泄漏: 在计算机科学中,内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况. 内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前 ...

  5. 整理了一下浅墨大神的Visual C++/DirectX 9.0c的游戏开发手记

    还是非常棒的博客,只是没有一个文件夹.所以自己做了一个山寨文件夹在这里.便于随时查找. 前面31期从略. [Visual C++]游戏开发笔记三十二 浅墨DirectX提高班之中的一个 DirectX ...

  6. html-解决乱码问题

    1.创建HTML时,需将文件编码设置为UTF-8: 2.需要在<head>元素下,借用<meta>元素设置内容的编码: 1)文件的编码:在webstorm中设置文件编码的问题: ...

  7. eclipse + MinGW调试程序printf输出被buffer的问题

    比如说一个 1. int x = 1;2. printf("xxx")3. int y = 2;调试的时候,运行第二行,但是控制台没有输出.必须调试到整个程序都结束的时候才会把所有 ...

  8. 基于windows的resin配置

    Resin 与 Eclipse for JavaEE 的整合方法: 1.新建一个项目,将web application配置到resin.conf中 附上resin_struts2-111.conf文件 ...

  9. mybatis like用法

    针对不同的数据库,like的用法是不一样的,现在具体来说一下 1,SQL SERVER SELECT * FROM user WHERE name like '%'+#{name}+'%' 2,Ora ...

  10. 集合映射Set(使用xml文件)

    如果持久类具有Set对象,可以在映射文件中使用set元素映射Set集合. set元素不需要索引元素. List和Set之间的区别是: Set只存储唯一的值. 我们来看看我们如何在映射文件中实现集合: ...