随着web技术的发展, 从1990年11月13日伯纳斯－李和罗伯特·卡里奥在一台NeXT工作站上写了第一个网页以实现他文中的想法开始. 从web1.0, web2.0,到web3.0 都在飞速的发展着. 从HTML1, 出来开始到现在迎来的HTML5的高潮, 都将是新的学习风潮, 但是在这飞速的发展同事, 也要注意做web前端开发的规范, 一个好的web前端开发的好习惯, 可以让你在以后维护和扩展现有的东西更给力.
对于外行人来说,web开发是一个高深的技术, 但是对于内行人来说, 其实很简单, 会html就可以做出来自己的网页. 虽然只是一个静态的页面. 在做网页开发过程中, 不仅仅是为了完成自己心里想要的功能, 而做出来, 而是, 做出来一个既有可维护性和扩展性的网站, 还要做到有会好的可读性. 如果能把你的代码拿出去, 不去和别人讲解任何的东西, 别人能直接看懂你的代码, 而且还能很快的维护起来, 那么你就有很好的功底了.
首先你先想想一下你的之前在做写代码时, 有没有遇到过下面的情况.
1.把html中的标签大小写随意写, 一会小写, 一会大写, 更甚者一个标签, 有大写, 还有小写.
2.在书写html中, 过度使用div, table, 等标签, 完全没有布局的概念.
3.在写代码时, 没有闭合的标签, 没有加上双引号的属性.
4.代码中出现了大量的已经被废弃的标签.
5.CSS样式使用混乱，<style>标签定义样式、<link>标签外链、标签内style属性直接定义这三种定义方式随处都有；
6.javascript代码随处都有, <script>定义中, html内容内, 到处可见这些代码.
7.javascript和css代码随处交叉可见.
8.Javascript和css代码中没有一行代码注释, 简直让人无法直视.
9.代码风格不一, 缩进随意而写, 很少使用tab. 原生javascript和javascript插件代码等各种各样的风格在代码中出现,
如果你出现了以上的问题, 恭喜你, 你要进步的空间还有很大…… 还有就是你会遇到很多你不敢想, 却又会发生的事情, 你发现, 你看你一周前写的javascript和css, 发现, 好陌生的感觉, 那么再次恭喜你, 你有中招了, 赶紧做好, 写代码就注释的习惯吧. 要不然, 后悔, 也没有啊. 这样你代码的维护量, 就是几何倍增加. 如何你正赶上你要赶工期, 只能说一句, 自求多福吧.
正是因为有这些不规范的写法, 才出现了一些基本的标准, 当然这些标准大部分还都是w3c制定. 于是乎: 网页的表形(html), 样式(css), 和行为(js)分离的写法出现了,
基本的一些标准.
一个符合基本Web标准的网页前端代码，HTML标签中的标签名应该全部都是小写的，属性的定义需要加上引号，CSS样式和Javascript代码不要夹杂在HTML标签中，而是应该分别单独存放在CSS样式文件和Javascript脚本文件中。一般情况下，一个网页的前端代码应该由.html文件、.css文件、.js文件这基本的三部分组成
示例代码:
xymiao.html代码:
<link rel=”stylesheet” type=”text/css” href=”xymiao.css” />
<script type=”text/javascript” src=”xymiao.js” />
<div class=”mainDiv”>
<span class=”mainFont”>Hello world！</span>
<input type=”text” value="Welcome to XyMiao" name=“username” id=”username” maxlength=”20” />
</div>
xymiao.css
.mainDiv{
width: 100%;
height: 20px;
line-height: 20px;
text-align: center;
}
. mainFont{
font-size: 14px;
color: #cccccc;
}
xymiao.js
var inputObj = document.getElementById(“username”);
inputObj.onmouseover = function() {
this.focus();
}
inputObj.onfoucs = function() {
this.select();
}
这样就可以做到, html作为页面的显示, css控制如何的显示, js就是控制一些行为和动作.
最理想的状态下, 把html, css, 和js单独的写在各自的文件里, 但是呢, 因为一些原因, 经常的会在一个页面中也会嵌套css和js所以, 就需要有单独页面中尽量的把这三者分离出来.
示例代码：
xymiao.html
<style type=”text/css”>
/*样式的注释.*/
</style>
<script type=”text/javascript”>
//javascript的注释
</script>
<div>
<!-- html的注释 -->
</div>
这里只是说尽量的分离出来. 并不是说, 所有的都按照这个规则来弄, 在没有很好的方案时, 这就是一种方案.
