Rumah > Artikel > hujung hadapan web > 前端编码习惯 —— html篇
前端编码习惯 —— html篇
- 高洛峰asal
- 2017-02-14 16:05:441081semak imbas
前言
作为一个前端工程师，我们可能每天都要写html、css、javascript，每个人写出来的代码都饱含着自己的个人的style也有自己的编码习惯和准则，下面和大家分享一下我的习惯和准则。
html
首先我们要对文档进行规范，就要添加8b05045a5be5764f313ed5b9168a17e6来对文档进行规范。关于8b05045a5be5764f313ed5b9168a17e6 w3c有相应的说明。
编码统一采用utf-8,ff94e7be1619a095952b0217c283b66c即可
页中引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 文件（无论 2cdf5bf648cf2f33323966d7f58a7f3f 或 @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>
dc6dce4a544fdca2df29d5ac0ea9906b⾥可以包含e388a4556c0f65e1904146cc1a846bee ，但是e388a4556c0f65e1904146cc1a846bee⾥不允许包含dc6dce4a544fdca2df29d5ac0ea9906b等块级元素；ff6d136ddc5fdfeffaf53ff6ee95f185和c34106e0b4e09414b63b2ea253ff83d6的⼦级不允许嵌套25edfb22a4f469ecb59f1190150159c6以外的标签，5c69336ffbc20d23018e48b396cdd57a的⼦级不允许出现73de882deff7a050a357292d0a1fca94和67bc4f89d416b0b8236eaa5f43dee742以外的标签；像div之类的标签只能放在li⾥⾯；f5d188ed2c074f8b944552db028f98a1的⼦级只允许嵌套63bd76834ec05ac1f4c0ebbeaafb0994, ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a以及a34de1251f0d9fe1e645927f19a896e8标签，a34de1251f0d9fe1e645927f19a896e8的⼦级只允许嵌套b6c5a531a458a2e790c1fd6421739d1c，b4d429308760b6c2d20d6300079ed38e标签，b6c5a531a458a2e790c1fd6421739d1c标签⾥可以有任意标签存在。如以下⼏种情况都是错误的：
<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>25edfb22a4f469ecb59f1190150159c6标签必须被 ff6d136ddc5fdfeffaf53ff6ee95f185或 c34106e0b4e09414b63b2ea253ff83d6包裹，73de882deff7a050a357292d0a1fca94和67bc4f89d416b0b8236eaa5f43dee742必须被5c69336ffbc20d23018e48b396cdd57a包裹，类似的，ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a等表格类标签也不允许单独出现。
d5fd7aea971a85678ba271703566ebfd和bb9345e55eb71822850ff156dfde57c8必须指明默认的type，ff9c23ada1bcecdd1a0fb5d5a0f18437必须有默认的 method，这样可避免在不同浏览器下产⽣⾏为上的差异。
为了⽅便，建议ff9c23ada1bcecdd1a0fb5d5a0f18437需加action属性，d5fd7aea971a85678ba271703566ebfd需加 name和id属性，并且最好有对应的2e1cf0710519d5598b1f0f14c36ba674标签，5a07473c87748fb1bf73f23d45547ab8需加value属性，a标签需加href属性。
为增强语义化，按钮⽤ bb9345e55eb71822850ff156dfde57c8 ⽽不⽤ d5fd7aea971a85678ba271703566ebfd。
页⾯不⽤ table 做布局，也不要在本该⽤表格的地⽅⽤ ff6d136ddc5fdfeffaf53ff6ee95f185 或其它标签代替，table 的⽬的是⽤来显⽰表格状的数据。 (a) ⼀般内联元素，包括但不限于
<a>, <abbr>, <b>, <cite>, <code>, <del>, <dfn>, <em>, <i>,<img>,<input>,<ins>,<kbd>,<label>,<mark>,<q>, <samp>,<span>,<strong>, <sub>, <sup> 前后⽆需换⾏; 在块元素或⼀些内联块元素，包括但不限于 <address>, <area>,<article>,<aside>,<audio>,<bdo>,<blockquote>,<body>,<button>,<canvas>, <caption>,<col>,<colgroup>,<command>,<datalist>,<dd>,<details>,<div>,<dl>, <dt>, <embed>, <filedset>, <figcaption>, <figure>, <footer>, <form>, <frame>, <frameset>,<h1>-<h6>,<head>,<header>,<hgroup>,<hr>,<html>,<iframe>,<legend>, <li>,<link>,<meta>,<meter>,<nav>,<object>,<ol>,<optgroup>,<options>,<output>, <p>, <param>, <pre class="brush:php;toolbar:false">, <progress>, <ruby>, <script>, <section>, <select>, <source>, <style>, <summary>, <table>, <tbody>, <tfoot>, <thead>, <ul>, <video>, <tr>, <th>, <td>, <textarea>, <time> 前后需换⾏，中间可以不换⾏; 在 <br>, <wbr> 前⾯不换⾏， 后⾯换⾏。
(b) html 代码采⽤4个空格缩进，不要⽤tab缩进，以保持在各个编辑器中显⽰⼀致。 (c) 连续的多空格请使⽤ ，去除代码⾏尾空格。
合理使用换行、缩进、空格，使代码整洁。
html 功能块之间写明注释，以便于此功能块的功能说明或嵌套提⽰，注释亦精不亦多。
<!-- START header --> <div id="header"> ... </div> <!-- END header -->
视情况为链接添加 title，图⽚要添加 alt 及 title。
把css调⽤写在head头部，不需预先执⾏的JS尽量写在页⾯尾部，不要在 html 代码中间插入script代码块，script代码块应与html之间留⼀个空⾏，script代码块开头⽆需缩进，如：
<div class="mod">
<ul class="list">
<li>
<a href="">list 1</a>
<a href="">list 2</a>
<a href="">list 3</a>
</li>
</ul>
</div>
<script>
// all javascript code
function abc() { // function's code }
</script>不在html中混合JS及event事件。
明确指定图⽚的width和 height。不仅对seo有⽤，对因各种原因⽆法显⽰图⽚的情况下，也能保持布局样式基本不变。
通过给元素设置⾃定义属性来存放与JS交互的数据，属性名格式为 data-xx(-xx)，中间⽤中 划线连接，例如：data-lazyload-url。
禁⽌单独⽤ dc6dce4a544fdca2df29d5ac0ea9906b 标签做容器，使⽤ dc6dce4a544fdca2df29d5ac0ea9906b 时必须⾄少带有⼀个类名。更不要它代替e388a4556c0f65e1904146cc1a846bee标签，因为 dc6dce4a544fdca2df29d5ac0ea9906b 标签没有明确的含义，应该根据各标签的语义，做到该⽤什么标签就⽤什么标签。
更多前端编码习惯 —— html篇相关文章请关注PHP中文网！