首页 > 代码库 > 对编写html代码的几点儿小建议

对编写html代码的几点儿小建议

2024-07-07 22:42:13   226人阅读

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=http://www.mamicode.com/img/img1.jpg/> 这样是不建议使用的，您好

7、属性值使用完整形式

     <input disabled>   <input  disabled="true">

8、区分内容标记与结构标记

     <p>是内容标记，<table>是结构标记，不可将<table>置于<p>内部；

9、样式、行为与结构分离

    将css样式单独写在一个文件里，使用<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/style.css"/>来引用。将js脚本单独放在一个文件里，使用<script tpye="texy/javascript" src="http://www.mamicode.com/js/common.js"></script>来引用。而且将样式尽可能的放在一个文件中，放在文档的<head>部分引入，将js脚本也放在一个文件中，然后放在文档的底部，<body>之后引入。这样一方面能够减少对服务器的http请求次数，加快文档的下载速度。2.可以在文档的可视区域<body></body>之间的内容加载完了再加载js脚本，这样提升了体验的效果。


联系
我们