Front-end coding habits - html article

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 8b05045a5be5764f313ed5b9168a17e6 to standardize the document. There are corresponding instructions about 8b05045a5be5764f313ed5b9168a17e6 w3c.

The encoding adopts utf-8 uniformly, 09477266eebbc8a01f42387ae29e71dd 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 2cdf5bf648cf2f33323966d7f58a7f3f 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>

dc6dce4a544fdca2df29d5ac0ea9906bri can contain e388a4556c0f65e1904146cc1a846bee, but e388a4556c0f65e1904146cc1a846beeri is not allowed to contain blocks such as dc6dce4a544fdca2df29d5ac0ea9906b Level elements; tags other than 25edfb22a4f469ecb59f1190150159c6 are not allowed to be nested in the sub-levels of ff6d136ddc5fdfeffaf53ff6ee95f185 and c34106e0b4e09414b63b2ea253ff83d6, and tags other than 73de882deff7a050a357292d0a1fca94 and 67bc4f89d416b0b8236eaa5f43dee742 are not allowed to appear in the sub-levels of 5c69336ffbc20d23018e48b396cdd57a; Tags like div can only be placed inside the li; sub-levels of f5d188ed2c074f8b944552db028f98a1 are only allowed to nest 63bd76834ec05ac1f4c0ebbeaafb0994, ae20bdd317918ca68efdc799512a9b39, 06669983c3badb677f993a8c29d18845, 92cee25da80fac49f6fb6eec5fd2c22a and a34de1251f0d9fe1e645927f19a896e8 tags , a34de1251f0d9fe1e645927f19a896e8's sub-levels are only allowed to nest b6c5a531a458a2e790c1fd6421739d1c, b4d429308760b6c2d20d6300079ed38e tags, and any tag can exist inside the b6c5a531a458a2e790c1fd6421739d1c 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>

25edfb22a4f469ecb59f1190150159c6 tag must be wrapped by ff6d136ddc5fdfeffaf53ff6ee95f185 or c34106e0b4e09414b63b2ea253ff83d6, 73de882deff7a050a357292d0a1fca94 and 67bc4f89d416b0b8236eaa5f43dee742 must be wrapped by 5c69336ffbc20d23018e48b396cdd57a Packages, similar tabular tags such as ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a are not allowed to appear alone.

d5fd7aea971a85678ba271703566ebfd and bb9345e55eb71822850ff156dfde57c8 must specify the default type, and ff9c23ada1bcecdd1a0fb5d5a0f18437 must have a default method, so as to avoid behavioral differences in different browsers.

For convenience, it is recommended that the ff9c23ada1bcecdd1a0fb5d5a0f18437 needs to add the action attribute, d5fd7aea971a85678ba271703566ebfd needs to add the name and id attributes, and it is best to have the corresponding 2e1cf0710519d5598b1f0f14c36ba674 label, 5a07473c87748fb1bf73f23d45547ab8 needs to add the value Attributes, the a tag needs to add the href attribute.

To enhance semantics, use bb9345e55eb71822850ff156dfde57c8 instead of d5fd7aea971a85678ba271703566ebfd for buttons.

Do not use table for page layout, and do not use ff6d136ddc5fdfeffaf53ff6ee95f185 or other tags where tables should be used. The purpose of table is to display tabular data. (a) General inline elements, including but not limited to

<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 code should be indented with 4 spaces instead of tabs to maintain consistent display in various editors . (c) For multiple consecutive spaces, please use to remove the spaces at the end of the code line.

Use newlines, indents, and spaces appropriately to make the code clean.

html Write comments between function blocks so that the function description or nesting prompts of this function block can be explained. The comments should be precise but not excessive.

<!-- START header --> 
<div id="header"> ... </div> 
<!-- END header -->

Add a title to the link as appropriate, and add alt and title to the image.

把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&#39;s code } 
</script>

不在html中混合JS及event事件。

明确指定图⽚的width和 height。不仅对seo有⽤，对因各种原因⽆法显⽰图⽚的情况下，也能保持布局样式基本不变。

通过给元素设置⾃定义属性来存放与JS交互的数据，属性名格式为 data-xx(-xx)，中间⽤中 划线连接，例如：data-lazyload-url。

禁⽌单独⽤ dc6dce4a544fdca2df29d5ac0ea9906b 标签做容器，使⽤ dc6dce4a544fdca2df29d5ac0ea9906b 时必须⾄少带有⼀个类名。更不要它代替e388a4556c0f65e1904146cc1a846bee标签，因为 dc6dce4a544fdca2df29d5ac0ea9906b 标签没有明确的含义，应该根据各标签的语义，做到该⽤什么标签就⽤什么标签。

更多前端编码习惯 —— html篇相关文章请关注PHP中文网！