资讯频道 → Web前端
阅读更多

16顶
2踩

Web前端

翻译新闻 Web开发者不可不知的15条编码原则

2012-05-11 17:04 by 正式编辑 nemohq 评论(14) 有10369人浏览
HTML CSS
HTML已经走过了近20的发展历程。从HTML4到XHTML，再到最近十分火热的HTML5，它几乎见证了整个互联网的发展。但是，即便到现在，有很多基础的概念和原则依然需要开发者高度注意。下面，向大家介绍这些应该遵循的开发原则。

1、善用DIV来布局

当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。 

<div id="header"></div>
<div id="body-container">
        <div id="content"> <!-- Content -- > </div> 
        <div id="right-side-bar"> <!-- Right Side Bar Content Area -- ></div>
</div> 
<div id="footer"></div>

2、将HTML标签和CSS样式表分割开来

好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而，直到今天，仍然有很多开发者没有严格遵循这一原则。

不要在HTML标签里内嵌样式表代码。开发者应该养成习惯，单独建立文件，用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时，能迅速完成工作。 

<p style="color: #CCC; font-size:16px; font-family: arial">An example to illustrate inline style in html</p>

3、优化CSS代码

现如今，为网站添加多个CSS文件的做法已经很普遍。但是，当网站包含的CSS文件过多时，会降低网站的响应速度。解决办法是：精简代码并对多个CSS文件进行优化，将其合并成一个文件。这个办法能显著提升网站的加载速度。此外，有很多工具可以用来优化CSS文件，例如CSS Optimizer、Clean CSS等。

4、优化Javascript文件，并将其放到页面底部

和CSS一样，为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此，开发者应该精简、优化这些Javascript文件。

但有一点和CSS不同，浏览器通常不支持并行加载。这也就是说，当浏览器加载Javascript文件时，将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。

一个好的解决办法是：将Javascript文件的加载顺序放在最后。为了实现这一目标，开发者可以把Javascript代码放在HTML文档的底部，而最好的位置是放在接近</body>标签的地方。

5、善用标题元素

<h1> 到 <h6>这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客，我（指本文作者）推荐使用<h1>标签来突出博客标题。因为，博客标题几乎是页面中最重要的部分。 

<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>
<h3>This is a sub-heading underneath the h2 heading.</h3>

6、在合适的地方使用合适的HTML标签

HTML标签是构造规范内容结构的关键。例如，<em>标签用来强调重点内容。<p>标签适用于突出文章段落。如果想要在段落间加空行，就不要使用<br />标签。 

<em>emphasized text</em>
<strong>strongly emphasized text</strong>

对于一组相关的元素，建议使用<ul>、<ol>或 <dl>标签。但是，不要错误的使用<blockquote>标签，因为它原本是用来定义块应用的。

7、避免滥用<div>标签

并不是所有块元素都应该用<div>标签来创建。例如，可以在内联元素的属性里添加display:block，将其以块元素的方式显示。

8、使用列表创建导航

使用<ul>列表标签，再配以相应的CSS样式，可以创建美观的导航菜单。

9、别忘了封闭标签

现在，每当我回忆起在大学里学到的关于Web开发的第一堂课时，教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准，标签应该被封闭。那是因为，在一些浏览器下，如果没有按照标准来将标签封闭，会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。

10、标签小写语法

标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果，但是，代码的可读性很差。下面这段代码可读性就非常差： 

<DIV>
<IMG SRC="images/demo_image.jpg" alt="demo image"/>
<A HREF="#" TITLE="click here">Click Here</A>
<P>some sample text</P>
</DIV>

11、为图片标签添加alt属性

在<img>标签里，alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是，如果开发者在alt属性里添加了图片的描述内容，将会方便搜索引擎的抓取。 

<!-- has an alt attribute, which will validate, but alt value is meaningless -- >
<img id="logo" src="images/bgr_logo.png" alt="brg_logo.png" />

<!-- The correct way -- > 
<img id="logo" src="images/bgr_logo.png" alt="Anson Cheung - Web Development" />

12、在表格里使用<label> 和 <fieldset>

为了提高代码质量，并让用户容易理解表格内容，我们应该用<label> 和 <fieldset>标签创建表格元素。 

<fieldset>
    <legend>Personal Particular</legend>
    <label for="name">Name</label><input type="text" id="name" name="name" />
    <label for="email">E-mail</label><input type="text" id="email" name="email" />
    <label for="subject">Subject</label><input type="text" id="subject" name="subject" />
    <label for="message" >Message Body</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>

13、将浏览器兼容代码标明信息并相互分开

对一名Web开发者来说，跨浏览器兼容是一个被重点关注的问题。通常，开发者会针对不同的浏览器来编码，也即是CSS hack。但是，如果开发者在编码时，能注明代码为哪一个版本的浏览器所写，会为以后的维护工作带来极大方便。下面就是一个很好的示例： 

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie-7.css" media="all">
<![endif]-->


<!--[if IE 6]>
<link rel="stylesheet" href="css/ie-6.css" media="all">
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
        DD_belatedPNG.fix('#logo');
</script>
<![endif]-->

14、避免过度注释

作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。

15、测试代码

推荐开发者使用W3C文本标记验证服务来测试代码。它是一个高效的测试工具，能帮助你发现页面中存在的错误。而且，它还能从页面错误出发，帮你定位到相应的代码。这一点通常在编码完成后很难做到。但开发者需要注意的是，验证通过的代码并非就是性能优异的代码。

英文原文：10+ HTML Best practices for Web Developer

16
顶
2
踩
评论 共 14 条 请登录后发表评论
14 楼 fallseir 2012-05-14 10:33
leelege 写道
surelei 写道
无论方到页首还是页尾，JS都应当在html全部加载完成后才去执行，由于现在jquery等JS框架运用已经很广泛了，已经没人会去考虑JS放到页首还是页尾。
所以即使这篇文章是法文版的还是意大利文的，它是古董文章的本质是不会改变的。

jianxia801 写道
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。

不是说你要在html写入源码 是让你加载js文件；不要浅尝辄止；有些耐心；你看看英文版的


麻烦再仔细看一遍文章，人家的意思是JS文件的加载并不是并行的，放在页面头部会导致html的渲染停止，哪一点告诉你是执行了？没看清楚就喷，神马玩意儿啊

JS放在开始会影响速度的原因是浏览器没有办法判断JS是否在加载的下一行开始就执行，所以只能先行加载。
这个和你用的什么框架无关，和年代无关。
另外如无必要执行应该放在底部或者onload里，这样可以保证页面呈现之后才执行一些渲染或辅助类的代码
13 楼 leelege 2012-05-14 10:14
surelei 写道
无论方到页首还是页尾，JS都应当在html全部加载完成后才去执行，由于现在jquery等JS框架运用已经很广泛了，已经没人会去考虑JS放到页首还是页尾。
所以即使这篇文章是法文版的还是意大利文的，它是古董文章的本质是不会改变的。

jianxia801 写道
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。

不是说你要在html写入源码 是让你加载js文件；不要浅尝辄止；有些耐心；你看看英文版的


麻烦再仔细看一遍文章，人家的意思是JS文件的加载并不是并行的，放在页面头部会导致html的渲染停止，哪一点告诉你是执行了？没看清楚就喷，神马玩意儿啊
12 楼 bastengao 2012-05-14 08:39
surelei 写道
无论方到页首还是页尾，JS都应当在html全部加载完成后才去执行，由于现在jquery等JS框架运用已经很广泛了，已经没人会去考虑JS放到页首还是页尾。
所以即使这篇文章是法文版的还是意大利文的，它是古董文章的本质是不会改变的。

jianxia801 写道
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。

不是说你要在html写入源码 是让你加载js文件；不要浅尝辄止；有些耐心；你看看英文版的


也跟 js 和 html 的加载顺序有关系， js 放在 html 前面 会先加载 js，html 后加载，这样就会影响页面的渲染速度。
11 楼 surelei 2012-05-13 18:01
无论方到页首还是页尾，JS都应当在html全部加载完成后才去执行，由于现在jquery等JS框架运用已经很广泛了，已经没人会去考虑JS放到页首还是页尾。
所以即使这篇文章是法文版的还是意大利文的，它是古董文章的本质是不会改变的。

jianxia801 写道
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。

不是说你要在html写入源码 是让你加载js文件；不要浅尝辄止；有些耐心；你看看英文版的

10 楼 wzs379349094 2012-05-13 11:38
是的  很有价值！
9 楼 如若_晴 2012-05-13 10:43
还行吧，学下来
8 楼 黑色联想 2012-05-12 19:59
貌似HTML5去了很多的标签！
7 楼 qingshuixigua 2012-05-12 19:23
老实说，里面有几个落伍了吧。。。。。
6 楼 墨子宇 2012-05-12 13:34
话说很少用<fieldset></fieldset>
5 楼 caizi12 2012-05-12 11:25
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。


我看到每个页面都有一个对应的js文件，我就看不下去了。
4 楼 jianxia801 2012-05-12 07:11
surelei 写道
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。

不是说你要在html写入源码 是让你加载js文件；不要浅尝辄止；有些耐心；你看看英文版的
3 楼 surelei 2012-05-12 03:38
我看到JS放到HTML底部就看不下去了。
JS现在都是和HTML分离的。
2 楼 lyongjn 2012-05-12 00:54
还是有价值的
1 楼 twincle 2012-05-11 20:29
什么年代的文章了。。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 常见的Web开发者15条编码原则

    但是，即便到现在，有很多基础的概念和原则依然需要开发者高度注意。下面，向大家介绍这些应该遵循的开发原则。 　1、善用DIV来布局 　当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV...

  • 微信Web开发者工具详解

    一、微信小程序web开发工具下载地址 &nbsp; 1.1&nbsp;在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了： 二、创建项目 &nbsp; 2.1&nbsp;微信小程序web开发工具需要扫码登陆，...

  • 【转载】独家：开发者不可不知的PHP框架深度解析

    但通常只用PHP或者其他语言编码就会显得单调、重复，这时候就需要一个PHP框架来代替程序员完成 【Csdn 8月3日报道】PHP成为世界上最流行的脚本语言有许多原因：灵活性，易用性等等。但通常只用PHP或者其他语言...

  • 15款c语言编译器,C/C++开发者必不可少的15款编译器+IDE

    编译器c++web开发开发工具编程语言开发者摘要：C/...Web开发者可选择的编程语言有很多比如，Java、.Net、PHP、Ruby、Perl、Python等等，但是今天我们要讨论的是两个古老且非常流行的语言，即C/C++。正是由于其迷人的...

  • 一个web开发者不可或缺的Eclipse插件

    一个web开发者不可或缺的Eclipse插件 &lt;br /&gt;我是一个java web开发者，也写一些PHP代码，我觉得对我来说，最不能缺少以下Eclipse插件，没了它们我不能活！对你来说，最不可或缺的Eclipse插件 是什么呢？ 1....

  • 每个 Web 开发者都应该知道的关于 URL 编码的知识

    说明： 转载本文仅为方便自己学习查看，请...原文出处： http://blog.lunatech.com/2009/02/03/what-every-web-developer-must-know-about-url-encoding 译文出处： http://www.oschina.net/translate/what-every-w

  • 先进的c语言编辑器,C/C 开发者必不可少的15款编译器 IDE

    Web开发者可选择的编程语言有很多比如，Java、.Net、PHP、Ruby、Perl、Python等等，但是今天我们要讨论的是两个古老且非常流行的语言，即C/C++。正是由于其迷人的特性，赋予了它们更加有效的功能，并且也获得了各大...

  • 为什么开发者关系对 Web3 的成功至关重要？

    为什么开发者关系对 Web3 的成功至关重要？

  • 开发者不可不知的PHP框架深度解析

    开发者不可不知的PHP框架深度解析  PHP成为世界上最流行的脚本语言有许多原因：灵活性，易用性等等。但通常只用PHP或者其他语言编码就会显得单调、重复，这时候就需要一个PHP框架来代替程序员完成那些重复不变...

  • 独家：开发者不可不知的PHP框架深度解析

    但通常只用PHP或者其他语言编码就会显得单调、重复，这时候就需要一个PHP框架来代替程序员完成那些重复不变的部分。本文通过回答What, When, Why 以及 Which这些问题，将对PHP框架进行全面解析。PHP框架是什么？PHP...

  • 每个开发人员都应该知道的 10 大安全编码实践

    这是每个开发人员都应该知道的十种安全编码实践。它们一起可以减少错误并保护你的系统免受恶意活动的侵害。通过遵循这些约定，你可以帮助确保代码安全、保护你的公司并减少被攻击者利用的机会。

  • Web1.1 利用浏览器内置开发者工具进行抓包分析

    通过Burp或者Chome的开发者工具可以抓取数据包 请求报文 左边请求报文内容为 GET /weathernew/pc?query=%E9%99%95%E8%A5%BF%E8%A5%BF%E5%AE%89%E5%A4%A9%E6%B0%94&amp;srcid=4982&amp;city_name=%E8%A5%BF%E5%AE%89&...

  • 开发者硬核：Web3 DApp 最佳编程实践指南

    说些题外话，由于大部分合约使用 NPM 来进行包管理，并使用 hardhat 来做编译和测试工作流，使用 JavaScript 已经成为智能合约编码中必不可少的一个环节。既然如此，在服务端同时使用 JavaScript 语言有助于我们复用...

  • OFDM、OOK、PPM、QAM 的误码率模拟【绘制不同调制方案的误码率曲线】附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82.png

    8c71b76fb2ec10cf50fc6b0308d3dcfc_9545878e2b97a84b2e089ece58da9e82

  • Android SO逆向-对象的拷贝构造函数.pdf

    Android逆向过程学习

  • 基于S7-200 PLC的糖果包装控制系统设计与实现

    内容概要：本文详细介绍了基于西门子S7-200 PLC的糖果包装控制系统的设计与实现。首先阐述了PLC在工业自动化领域的优势及其在糖果包装生产线中的重要性。接着深入探讨了系统的硬件连接方式，包括传感器、执行机构与PLC的具体接口配置。随后展示了关键的编程实现部分，如糖果计数、包装执行、送膜控制、称重判断以及热封温度控制等具体梯形图代码片段。此外，还分享了一些实用的经验技巧，如防止信号抖动、PID参数优化、故障诊断方法等。最后总结了该系统的优势，强调其对提高生产效率和产品质量的重要作用。 适合人群：从事工业自动化控制、PLC编程的技术人员，尤其是对小型PLC系统感兴趣的工程师。 使用场景及目标：适用于糖果制造企业，旨在提升包装生产线的自动化程度，确保高效稳定的生产过程，同时降低维护成本并提高产品一致性。 其他说明：文中不仅提供了详细的理论讲解和技术指导，还结合实际案例进行了经验分享，有助于读者更好地理解和掌握相关知识。

  • PLC与WinCC实现三部十层电梯协同控制及优化技巧

    内容概要：本文详细介绍了参与西门子杯比赛中关于三部十层电梯系统的博图V15.1程序设计及其WinCC画面展示的内容。文中不仅展示了电梯系统的基本架构，如抢单逻辑、方向决策、状态机管理等核心算法（采用SCL语言编写），还分享了许多实际调试过程中遇到的问题及解决方案，例如未初始化变量导致的异常行为、状态机遗漏空闲状态、WinCC画面动态显示的挑战以及通信配置中的ASCII码解析错误等问题。此外，作者还特别提到一些创意性的设计，如电梯同时到达同一层时楼层显示器变为闪烁爱心的效果，以及节能模式下电梯自动停靠中间楼层的功能。 适合人群：对PLC编程、工业自动化控制、电梯调度算法感兴趣的工程技术人员，尤其是准备参加类似竞赛的学生和技术爱好者。 使用场景及目标：适用于希望深入了解PLC编程实践、掌握电梯群控系统的设计思路和技术要点的人士。通过学习本文可以更好地理解如何利用PLC进行复杂的机电一体化项目的开发，提高解决实际问题的能力。 其他说明：文章风格幽默诙谐，将严肃的技术话题融入轻松的生活化比喻之中，使得原本枯燥的专业知识变得生动有趣。同时，文中提供的经验教训对于从事相关领域的工作者来说非常宝贵，能够帮助他们少走弯路并激发更多创新思维。

  • 慧荣量产工具合集.zip

    慧荣量产工具合集.zip

Global site tag (gtag.js) - Google Analytics