Common habits of HTML development (II)

Common habits of HTML development:

Introducing CSS, JS

According to the HTML5 specification, it is usually not necessary to specify the type when introducing CSS and JS, because Text/css and text/javascript are their default values respectively.

HTML5 Canonical Links
? using link
? using style
? using script

<!--External CSS --<link rel="stylesheet" href="Code_guide.css"><!--in-document CSS --<style>    ...</style><!--External JS ---<script src="Code_guide.js"></script><!--in-document JS ---<script>    ...</script>

Attribute Order

Attributes should appear in a specific order to ensure legibility;
? class
? id
? name
? data-*
? src, for, type, href, value, Max-length, max, Min, pattern
? placeholder, title, alt
? aria-*, role
? required, ReadOnly, disabled

Class is designed for highly reusable components, so it should be in the first place;

The ID is more specific and should be used sparingly, so put it in second place.

<a  class  = "..."  id  = data-modal  = "Toggle"  href  = "#" ;  Example Link</a ;  <input  class  = " Form-control " type  =" text ";  <img  src  = alt  = "..."   

Boolean property

The Boolean property refers to a property that does not require a value to be declared, and XHTML requires a value for each property declaration, but HTML5 does not need it;

For more information, refer to WhatWG section on Boolean attributes:

The presence of a Boolean property represents a value of true, and a value of false is not present.

type="text"type="checkbox"value="1" checked><select>    <optionvalue="1" selected>1</option></select>

JS Generate tags

Creating tags in a JS file makes it harder to find, harder to edit, and less performance. This situation should be avoided as much as possible.

Reduce the number of labels

When you write HTML code, you need to avoid unnecessary parent nodes as much as possible;

Many times, you need to iterate and refactor to make the HTML less.

<!-- Not well --><span class="avatar">    <img src="..."></span><!-- Better --><img class="avatar" src="...">

Previous: Front-end development of common naming conventions '
Next: Common habits of HTML development (i)

This article I hope to beginner friends some help at the same time to retain their notes, thank you!
More Attention Fuyi Technology blog: Http://blog.csdn.net/fuyifang
or scan the QR code directly with your phone to see more Posts:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced, more attention Fuyi technology blog: Http://blog.csdn.net/fuyifang

Common habits of HTML development (II)