前端编码习惯 —— html篇-html教程-PHP中文网

前端编码习惯 —— html篇

高洛峰

发布： 2017-02-14 16:05:44

原创

1182人浏览过

前言

作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。

html

首先我们要对文档进行规范，就要添加来对文档进行规范。关于 w3c有相应的说明。

编码统一采用utf-8,即可

页中引css样式或js时，不需要加类型声明。如：

<link rel="stylesheet" href="..."> 
<style>...</style> 
<script src="..."></script>     
<script></script>

登录后复制

省略图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL，相对协议URL。好处是无论你是使用 HTTPS 还是 HTTP 访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。浏览器遇到相对 URL，会根据当前的网页协议，自动在 // 前面加上相同的协议。如当前网页是 http 访问，那么所有的相对引用 // 都会变成http://。https 同理。如果你在本地查看，协议就会变成 file://。这种用法几乎所有的浏览器都能支持，只有在 IE7/8 下会有一点小问题，就是通过相对 URL 引用的 CSS 文件（无论或 @import ）会被下载两遍。所以对性能有一点影响。

立即学习“前端免费学习笔记（深入）”；

<!-- Not recommended -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
/* Not recommended */
.example {
  background: url("https://www.google.com/images/example");
}
/* Recommended */
.example {
  background: url("//www.google.com/images/example");
}

登录后复制

标签、属性、属性名全部⼩写，属性值⽤"" (双引号) 引起来，每个双标签务必加对应的结束标签（单标签不遵循此标准，仍按原 html 标准，即不需要以"/>"结束）。提醒：IE 下的页⾯变形很多都与标签未闭合或嵌套错误有关系。

标签要按顺序合理嵌套.如：

<p><b></p></b>
需修改为：
<p><b></b></p>

登录后复制

⾥可以包含

，但是

⾥不允许包含

等块级元素；

和

以外的标签，

和

以外的标签；像div之类的标签只能放在li⾥⾯；的⼦级只允许嵌套, , 以及标签，的⼦级只允许嵌套, 等表格类标签也不允许单独出现。

和

为了⽅便，建议

需加action属性，需加 name和id属性，并且最好有对应的标签，

,
，	标签，	标签⾥可以有任意标签存在。如以下⼏种情况都是错误的： <table> <input type="hidden"> <tr> <td></td> <p></p> </tr> </table> <ul> <li></li> <div></div> </ul> 需改为： <table> <tr> <td><input type="hidden"> </td> <p></p> </tr> </table> <ul> <li><div></div></li> </ul> 登录后复制标签必须被或包裹，和必须被包裹，类似的，

，

标签，

标签⾥可以有任意标签存在。如以下⼏种情况都是错误的：

<table> 
    <input type="hidden"> 
    <tr>
        <td></td>
        <p></p>
    </tr> 
</table>
<ul> 
    <li></li> 
    <div></div> 
</ul>

需改为：
<table>         
    <tr>
        <td><input type="hidden"> </td>
        <p></p>
    </tr> 
</table>
<ul> 
    <li><div></div></li>          
</ul>

登录后复制

标签必须被

或

和

必须被

包裹，类似的，