Preface
As a front-end engineer, we may have to write html, css, and javascript every day. The code written by everyone contains their own personal style and has their own coding habits and guidelines. The following is Let me share with you my habits and rules.
html
First of all, we need to standardize the document, so we need to add to standardize the document. There are corresponding instructions about w3c.
The encoding adopts utf-8 uniformly, that is.
When citing css style or js in the page, there is no need to add a type declaration. For example:
<link rel="stylesheet" href="..."> <style>...</style> <script src="..."></script> <script></script>
Omit the protocol portion (http:, https:) of the URL of images, styles, scripts, and other media files, unless the file is not available under both protocols. This scheme is called protocol-relative URL, relative protocol URL. The advantage is that whether you access the page using HTTPS or HTTP, the browser will request the resources in the page using the same protocol, while saving some bytes. When the browser encounters a relative URL, it will automatically add the same protocol in front of // according to the current web page protocol. If the current web page is accessed via http, all relative references // will become http://. Same goes for https. If you view it locally, the protocol becomes file://. This usage is supported by almost all browsers. There is only a small problem under IE7/8, that is, CSS files referenced through relative URLs (regardless of or @import ) will be downloaded twice. So it has a little impact on performance.
<!-- 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");
}Tags, attributes, and attribute names are all lowercase, and attribute values are enclosed in "" (double quotes). Each double tag must be added with the corresponding end tag (single tags do not follow this standard, and still use the original html standard, that is, it does not need to end with "/>"). Reminder: Many page deformations under IE are related to unclosed tags or nested errors.
Tags should be nested reasonably in order. For example:
<p><b></p></b> 需修改为： <p><b></b></p>
, but
ri is not allowed to contain blocks such as
| , | tags, and any tag can exist inside the | tag. For example, the following situations are wrong: <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>Copy after login
|
|---|