HTML Code Writing Standard Guide_HTML/Xhtml_Web Page Production

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 );
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

or

;

,
used under

;
, , , , are used under ;


Strict nesting constraints

inline-Level elements can only contain text or other inline-Level elements; interactive elements , , , etc. cannot be nested in
;


cannot nest block-level elements

,

~

,

,

/

/
1. ,

   /

   /

   ,

   , etc.

   Boolean attribute

   In HTML5 specifications, attributes such as disabled, checked, and selected do not need to set values.

   XML/HTML CodeCopy content to clipboard

   1. input type="text" disabled>
   3. input type="checkbox" value="1" checked>
   5. select>
   6. option value="1" selected>1option>
   7. select>

   Semantic
   HTML without CSS is a semantic system rather than a UI system.

   Normally, each tag has semantic meaning. The so-called semantic meaning is that your clothes are divided into jackets, pants, skirts, underwear, etc., each with corresponding functions and meanings. So you can't put underwear around your neck. -- A trace of

   In addition, the semantic HTML structure helps machines (search engines) understand. On the other hand, when multiple people collaborate, they can quickly understand the developer's intentions.

   Common tag semantics
   

标签	语义
	段落
...	标题
	无序列表
	有序列表
	大段引用
	一般引用
	为样式加粗而加粗
	为强调内容而加粗
	为样式倾斜而倾斜
	为强调内容而倾斜
code	代码标识
abbr	缩写

Tag

Semantics

Paragraph

...

Title

Unordered list

Ordered list

Long quote

General quotations

Bold for style bold

Bold to emphasize content

Tilt for style tilt

Tilt to emphasize content

code

Code identification

abbr

Abbreviation


Example

Treat the page you build as a book, and map the semantics of tags to their functions and meanings;

Name of the book:


Title of each chapter of the book:


Title of the article within the chapter:


Subtitle/Subtitle:


Chapter paragraph:

HEAD
Document Type

Add a standard mode declaration to the first line of each HTML page to ensure consistent performance in each browser.

XML/HTML CodeCopy content to clipboard

1. /span>>
2. Language attribute
5. html lang="zh- Hans"> 
8. html lang="zh- cmn-Hans">
11. html lang="zh- cmn-Hant">
14. html lang="en" >

Character encoding

Using BOM-free utf-8 encoding as the file format;
The meta specifying the character encoding must be the first direct child element of head


XML/HTML CodeCopy content to clipboard

1. html>
2. head>
3.  meta charset="utf- 8"> 
4.  … 
5. head>
6. body>
7.  … 
8. body>
9. html>

IE Compatibility Mode

Prioritize using the latest versions of IE and Chrome kernels.

XML/HTML CodeCopy content to clipboard

1. meta http-equiv="X-UA -Compatible" content="IE=edge,chrome=1">

SEO Optimization

XML/HTML CodeCopy content to clipboard

1. head>
2.  meta charset="utf- 8"> 
" " 🎜>
3.  title>Style Guidetitle>
4.  
5. meta name="keywords" content="your keywords">
6.  meta name="description" content="your description">
7.  meta name="author" content="author,email address">
8. head> viewport viewport: generally refers to the size of the content area of ​​the browser window, excluding toolbars, tabs, etc.; width: browser width, the width of the visible area of ​​the page in the output device; device- width: device resolution width, visible width of the screen of the output device; initial-scale: initial scaling ratio; maximum-scale: maximum scaling ratio;
optimized for mobile devices, set the width of the visible area and initial scaling.
9. XML/HTML CodeCopy content to clipboard
   1. meta name="viewport" content="width=device-width, initial-scale=1.0">

iOS icon

apple-touch-icon pictures are automatically processed into rounded corners and highlights;
apple-touch-icon-precomposed prohibits the system from automatically adding effects and directly displays the original design;


XML/HTML CodeCopy content to clipboard

2. link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
5. link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
8. link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
11. link rel="apple- touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">

favicon

When favicon is not specified, most browsers will request favicon.ico in the root directory of the Web Server. In order to ensure that the favicon is accessible and avoid 404, one of the following two methods must be followed:

Place the favicon.ico file in the root directory of the Web Server;
Use link to specify the favicon;


XML/HTML CodeCopy content to clipboard

1. link rel="shortcut icon" href="path/to/favicon.ico">

HEAD Template

XML/HTML CodeCopy content to clipboard

1. html>  
2. html lang="zh-cmn-Hans">  
3. head>  
4.     meta charset="utf-8">  
5.     meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
6.     title>Style Guidetitle>  
7.     meta name="description" content="不超过150个字符">  
8.     meta name="keywords" content="">  
9.     meta name="author" content="name, email@gmail.com">  
10.   
11.       
12.     meta name="viewport" content="width=device-width, initial-scale=1.0">  
13.   
14.       
15.     link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  
16.   
17.  링크 rel="대체" 유형="application/rss xml" 제목="RSS" href="/rss.xml" /> 
18.  링크 rel="바로가기 아이콘 " href="path/to/favicon.ico">
19. 머리>

HTML 주석

모듈 설명


XML/HTML 코드클립보드에 콘텐츠 복사

2. div class="article- 목록"> 
3. ...
4. div>
5. 댓글 차단