首页 > 代码库 > HTML编码建议

HTML编码建议

1、<!DOCTYPE HTML>      让浏览器自己选择渲染页面的标准,同时为了拥抱未来
2、<meta charset="utf-8" />      定义页面字符编码,精简的代码,同样的效果
3、样式文件放头部,且尽量减少引入的文件数量

  1. <head>
  2.         <!--CSS样式-->
  3.         <link rel="stylesheet" href="http://www.mamicode.com/xxx.min.css" />
  4. </head>

4、脚本文件放底部,当发布项目的时候尽量压缩合并

  1. <body>
  2.      <!--JS代码-->
  3.      <script src="http://www.mamicode.com/xxx.min.js"></script>
  4. </body>

5、为页面添加注释

  1. <!--头部header-->
  2. <header></header>
  3. <!--头部header-->    
  4. <div class="content"></content>
  5. <!--底部Footer-->
  6. <footer></footer>

6、缩进和换行 使用4个空格作为一个缩进层级,大多数时候,开发工具帮助我们完成了此项内容。

  1. // 不建议
  2. <ul><li><a href="http://www.mamicode.com/#"></a></li><li><a href="http://www.mamicode.com/#"></a></li></ul>
  3. // 建议
  4. <ul>
  5.         <li><a href="http://www.mamicode.com/#"></a></li>
  6.         <li><a href="http://www.mamicode.com/#"></a></li>
  7. </ul>

7、标签闭合

  1. // 不建议
  2. <br >
  3. <p> xxxx
  4. <p>xxxx
  5.     
  6. // 建议
  7. <br />
  8. <p>xxx</p>
  9. <p>xxx</p>

8、标签名小写,标签属性值添加双引号

  1. // 不建议
  2. <P data-id=p1></P>
  3.     
  4. // 建议
  5. <p data-id="p1"></p>

9、使用CSS为页面添加图片 当然页面上的动态内容还是必须使用<img src="http://www.mamicode.com/#" />标签的
10、为图片标签添加alt和title属性,图片的src属性不能为空

  1. <img title="" src="http://www.mamicode.com/#" />

11、为页面当中的块结构底部添加空白行

  1. <header>
  2.         <h1>w3cfuns</h1>
  3. </header>
  4. <div class="content">
  5.         // something
  6. </div>
  7. <footer>
  8.         <p class="copyRight"></p>
  9. </footer>

12、去除样式引用和脚本引用当中的type属性
13、标签语义化

  • 结构性元素:       

 p:表示段落,只能包含内联元素,不能包含块级元素        

div:本身舞特殊含义,可用于布局,几乎可以包含任何元素      

 br:表示换行符        

hr:表示水平分隔符        

h1-h6:表示标题。其中h1用于表示当前页面最重要内容的标题,建议每个页面只有一个H1标签        

blockquote:表示引用,可以包含多个段落。请勿纯粹为了缩进而使用blockquote,大部分浏览器默认将blockquote渲染为带有左右缩进       

  pre:表示一段格式化好的文本

  • 头部元素:        

title:每个页面必须有且仅有一个title元素        

base:可用场景——首页,频道等大部分链接为新窗口打开的页面        

link:用于引入CSS资源时,可省去media和type属性        

style:type默认为text/css,可以省去        

script:type属性可以省去;不赞成使用lang属性;

不要使用古老的<!-//-->这种hack脚本,它用于阻止第一代浏览器将脚本显示成文字;

  • 列表元素:        

ul:表示无须列表        

ol:表示有序列表,可用于排行榜等;        

li:表示列表项,必须是ol/ul的子元素        

dl:表示关联列表,dd是对dt的解释;dt和dd的对应关系比较随意:一个dt对应多个dd、多个dt对应一个dd、多个dt对应多个dd,都合法;可用于名称单词解释、日程列表、站点目录;

  • 文本元素:        

a:存在href属性时表示链接,无href属性但有name属性表示锚点        

em,strong,i,b:表示句意强调,加与不加会引起语义变化,可用于表示不同的心情或语调;strong表示重要性强调,可用于局部或全局,strong强调的是重要性,不会改变句意;        

abbr:表示缩写        

sub,sup:主要用于数学和化学公式,sup还可用于脚注        

span:本身无特殊含义        

ins,del:分别表示从文档中增加(插入)和删除

  • 表单元素:        

推荐使用button代替input,但必须声明type属性        

推荐使用fieldset,legend组织表单        

表单的name不能设定为action,enctype,method,novalidate,target,submit会导致表单提交混乱

HTML编码建议