1、DOCTYPE
说明:告诉浏览器要使用哪种规范来解释该文档
内容:
<!DOCTYPE html PUBLIC "-W3//DTD//XHTML 1.0 Transitional//EN" "http://www.w3.org/1999/xhmlt">
解释:-W3:w3标准;DTD:文档类型定义; XHTML 1.0:XHTML 1.0版本;Transitional:过渡模式(Strict:严格模式);EN:语言为英语; “http://www.w3.org/1999/xhtml” :w3官网标准文档所在地址;
以前刚开始的时候还会copy然后粘贴一下,现在连编辑器都没有了这个,直接来就是<!DOCTYPE html>完了,所以兼容性就会出现一些意想不到的东西,又很难找到,为了向下兼容还是明确的指出文档类型,文档解析规范,已将版本等。这是一个很好的习惯,更多的时候把注意力都放在了要用什么标签,哪个标签或者属性是什么意思,而很少去关注这些细节的东西。实在不是很可取呀。
2、 <meta http-equiv ="Content-Type" content="text/html;charset=utf-8" >
meta是对该文档的一个附加信息说明,可以使用meta来说明作者,网页的关键词,等很多的信息;现在都已经很少写这个了,还是建议写写这个,这个对搜索引擎的SEO优化是比较有用的。
3、标记名称、属性名称小写
有时候看的页面,实现的效果还是很不错的,但是打开源代码一看,惨不忍睹,很多的DIV TABLE,看上去很是不习惯,根据W3C的建议,还是统一使用小写比较好,这样可以很大程度上提高代码的可读性,对维护,重构都是有很大的好处的。不用再浪费时间在寻找标签上了。
4、标记严格嵌套
严格嵌套,使得HTML的文档结构性更强,<div><p></div></p>这样的代码是很容易让人不知所措的。
5、标记必须封闭(包括空元素)
标签是成对出现的,当然也有单个的(空元素),<p>开头,</p>结尾,这就是一堆封闭的标签对,<br><hr>这些就是空元素,但是建议空元素也要封闭,<br/>,<hr/>。
6、属性用引号括起
<img src=img/img1.jpg/> 这样是不建议使用的,<img src="img/img1.jpg" alt="您好"/>这样,用引号将属性值包裹起来,而且在使用引号时,建议保持一致性,属性值统一采用单引号或者双引号。
7、属性值使用完整形式
<input disabled> <input disabled="true">
8、区分内容标记与结构标记
<p>是内容标记,<table>是结构标记,不可将<table>置于<p>内部;
9、样式、行为与结构分离
将css样式单独写在一个文件里,使用<link rel="stylesheet" type="text/css" href="css/style.css"/>来引用。将js脚本单独放在一个文件里,使用<script tpye="texy/javascript" src="js/common.js"></script>来引用。而且将样式尽可能的放在一个文件中,放在文档的<head>部分引入,将js脚本也放在一个文件中,然后放在文档的底部,<body>之后引入。这样一方面能够减少对服务器的http请求次数,加快文档的下载速度。2.可以在文档的可视区域<body></body>之间的内容加载完了再加载js脚本,这样提升了体验的效果。