HTML代码的美感

来源:互联网
更新时间:2018/2/9 2:59:30
责任编辑:王嘉善
字体:

站长交易(http://jy.Xue163.com)帮站长赚钱 虚拟主机评测+IDC导航=net188.cn

每当我访问精美的网站,我都情不自禁地会去查看源代码。这就好比你拥有一副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 验证。注意标签闭合,保证必要属性,避免废弃方法,等等。

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

翻译:http://horans.cn/what-beautiful-html-code-looks-like/

根据您访问的内容,您可能还对以下内容感兴趣,希望对您有帮助:

如何让HTML代码充满美感

答:缩进弄好,css和js代码都另开一个文件引入,这样你的html代码看起来就很整洁,充满美感

求一种很有美感的字体

答:汉仪秀英体 http://font.knowsky.com/down/6191.html 下载完毕记得采纳

学习html5前端技术需要美术功底吗?感觉那些精美的...

答:那不是html5的内容,而是设计的内容,完全不相干的两个领域

怎样让淘宝客推广的商品HTML代码转变成图片插入QQ...

答:装扮空间--找到增删模块--自定义模块--新建模块--选择大图模块或图文模块--加上图片的地址和链接的地址就ok啦

用mvc做项目时老感觉页面不那么美观,如果把精美的...

答:可以用前端框架做页面啊

我是Javaee方向马上毕业了 但是前台的页面做的很差...

答:现在大学生找工作对专业性的工作差点了,主要是要做 有前景的,能挣到钱的工作!

http://www.youku.com/v_show/id_XNTk1MDQzNg==.ht...

答:严正花(严贞花) - 다가라 都走吧 很老的歌手了 1집-눈동자 瞳孔 Release Date: 1993/4 Record Label: 삼성나이세스 Genre: 댄스(국내)...

怎样练才能打球有像科比那样的美感

答:从基础练起! 科比的动作那么优美,靠的是整体的协调性~~~~不是一下子就可以搞定的 身体素质训练、力量训练、控球训练、投篮训练、跳投、过人、防守、弹跳等等 一个个点地去练习~ 先看几篇球技的文章吧: http://www.whosland.cn/train/ski...

谁介绍几首欧美的DJ 节奏感很强的 像这种调调的:h...

答:你可以去听一下justin bieber 的 boyfriend 还有one time 都好听的!

唯美伤感句子

答:1一个是华丽短暂的梦,一个是残酷漫长的现实。 2.逝去的岁月,怎么找得回来?你曾经的微笑,在回忆里却散不开。 3. 从前的我没学会哭泣,现在的我时常...

怎么在html代码中画虚线

css里的线用的是border的边框 实线 虚线 都可以,文字可以使用下划线 其他的线可以用js做到 类似斜线 弧线等

横向排列html代码

代码如下: <table ><tr><td width="400" > <ul style="list-style-type:none;width:100%;clear:left;margin:0"> <li style="display:block...

打开网页全都是html代码

打开网站全是html代码,原因: 1、浏览器故障; 2、网站本身出现问题。 解决办法: 1、重新安装浏览器,或者更换其他品牌浏览器,重新进行浏览网站; 2、打电话给网站运营商,可...

怎样规范书写HTML代码

基本上SEOER都懂得一些HTML代码。但是我们今天就是要谈HTML代码如何更加规范的SEO书写。本文分为以下几个部分:足下 一、HTML的文本选择;二、CSS的设置;三、J...

html代码调用js变量

#yue").html(month);     $("#ri").html(data);     }); </script>   <!--这里是html代码--&...

HTML代码中什么是锚点?怎么设置锚点?

设置锚点也是很简单的,例如一个文章分了三段,每段有个标题,标题的代码是这样的 ... 做一个索引,点击相应的索引标题就跳转到相应的段落,那么就只要在标题所在的html标签...

html代码中宽度的自适应

自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } 自适应高度 table { table-layou...

html代码中宽度的自适应

这样就不怕了;div标签里的宽度不超过分辨率可以设置max-width:100%宽度自适应吧.不要设置成1300px,width,不过兼容性不是很好;margin:0 auto,ie6不认识:100%

如何学习制作图片?和html代码

制作图片就学PHOTOSHOP吧,如果会设计图片,那么纲页布局及美感就能把握好,图片的设计理解它的灵魂. HTML就掌握标签是如何应用就可了.其实看多了,就OK了.

html代码中,如何注释

<!--注释的内容-->


www.xue163.net true http://www.xue163.net/exploit/21/216125.html report 17733 HTML代码的美感,站长交易(http://jy.Xue163.com)帮站长赚钱虚拟主机评测+IDC导航=net188.cn每当我访问精美的网站,我都情不自禁地会去查看源代码。这就好比你拥有一副X光眼镜,能够看到任何人——甚至透视他们的遮羞布。...
网友评论
最新添加资讯
24小时热门资讯
娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2018 xue163.net All Rights Reserved. 学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
教育考试: 学历财经建筑 医药公考资格外语电脑作文招聘中小学留学 文档 移民 文库专栏23问答中心问答图书馆知识IT编程数码信息解决方案信息中心IT科技topzttophottopsctopnew问答新闻中心软件教室设计大全网络相关英语学习开发编程考试中心参考范文管理文库营销中心站长之家IT信息中心商学院数码大全硬件DIY企业服务网吧在线百科硬件知识手机平板汽车游戏家电精彩摄影现代家居IT女人经验健康养生猎奇创业攻略教育学习历史时尚潮流最近更新涨知识