媒介
作为一个前端工程师，我们能够天天都要写html、css、javascript，每一个人写出来的代码都饱含着本身的个人的style也有本身的编码习气和原则，下面和人人分享一下我的习气和原则。
html
起首我们要对文档举行范例，就要增加<!DOCTYPE html>来对文档举行范例。关于<!DOCTYPE html> w3c有响应的申明。 传送门
编码一致采纳utf-8,<meta charset=”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 文件（不管 <link> 或 @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>⾥能够包含<p> ，然则<p>⾥不允许包含<div>等块级元素；<ul>和<ol>的⼦级不允许嵌套<li>之外的标签，<dl>的⼦级不允许涌现<dt>和<dd>之外的标签；像div之类的标签只能放在li⾥⾯；<table>的⼦级只允许嵌套<caption>, <thead>, <tfoot>, <tbody>以及<tr>标签，<tr>的⼦级只允许嵌套<td>，<th>标签，<td>标签⾥能够有恣意标签存在。如以下⼏种状况都是毛病的：
<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><li>标签必需被 <ul>或 <ol>包裹，<dt>和<dd>必需被<dl>包裹，相似的，<thead>, <tbody>等表格类标签也不允许零丁涌现。
<input>和<button>必需指明默许的type，<form>必需有默许的 method，如许可防止在差别浏览器下产⽣⾏为上的差别。
为了⽅便，发起<form>需加action属性，<input>需加 name和id属性，而且最好有对应的<label>标签，<option>需加value属性，a标签需加href属性。
为加强语义化，按钮⽤ <button> ⽽不⽤ <input>。
页⾯不⽤ table 做规划，也不要在本该⽤表格的地⽅⽤ <ul> 或别的标签替代，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>, <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。
禁⽌零丁⽤ <div> 标签做容器，使⽤ <div> 时必需⾄少带有⼀个类名。更不要它替代<p>标签，由于 <div> 标签没有明白的寄义，应当依据各标签的语义，做到该⽤什么标签就⽤什么标签。
