Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > HTML Code Writing Standard Guide_HTML/Xhtml_Web Page Production

HTML Code Writing Standard Guide_HTML/Xhtml_Web Page Production

WBOY
Release： 2016-05-16 16:36:07
Original
1801 people have browsed it

General Conventions
Tag

Self-closing tag, no need to close (for example: img input br hr, etc.);
Optional closing tag (closing tag), need to close (for example: or < /body>);
Reduce the number of tags as much as possible;

XML/HTML CodeCopy content to clipboard
  1. <img src="images/google.png " alt="Google">
  2. <input type="text" name="title">
  4. <ul>
  5. <li>Styleli> 
  6. <li>Guideli> 
  7. ul>
  10. <span class="avatar" >
  11. <img src=".. ."> 
  12. span>
  15. <img class="avatar" src="...">

Class and ID

class should be named after function or content, not expression;
class and id should be in lowercase letters, and when composed of multiple words, use dash-separation;
use a unique id as a Javascript hook , and avoid creating classes without style information;

XML/HTML CodeCopy content to clipboard
  2. <div class="j- hook left contentWrapper">div>
  5. <div id="j- hook" class="sidebar content-wrapper">< /div>

Attribute order

HTML attributes should appear in a specific order to ensure readability.

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

XML/HTML CodeCopy content to clipboard
  1. <a id="..." class="..." data-modal="toggle" href="###"> a>
  3. <input class="form- control" type="text">
  5. <img src=".. ." alt="...">

Quotation marks

Uniformly use double quotes for the definition of attributes.

XML/HTML CodeCopy content to clipboard
  2. <span id='j- hook' class=text>Google span>
  5. <span id="j- hook" class="text">Googlespan> 

b Nested

a does not allow nesting of divs. This constraint is a semantic nesting constraint. Different constraints include strict nesting constraints. For example, a does not allow nesting of a.

Strict nesting constraints are not allowed in all browsers; as for semantic nesting constraints, most browsers will handle fault tolerance, and the generated document trees may be different from each other.

Semantic Nesting Constraints

  • used under