HTML(5) code specifications
HTML coding conventions
Many web developers know little about HTML coding conventions.
Between 2000 and 2010, many web developers converted from HTML to XHTML.
Using XHTML developers have gradually developed better HTML writing standards.
For HTML5, we should form better code standards. The following provides several standard suggestions.
Use the correct document type
The document type declaration is located on the first line of the HTML document:
If you want to use lowercase like other tags, you can use the following code:
##Use lowercase elements NameHTML5 element names can use uppercase and lowercase letters. Recommended to use lowercase letters:
- Mixing upper and lower case style is very bad.
- Developers usually use lowercase (similar to XHTML).
- The lowercase style looks more refreshing.
- Lowercase letters are easy to write.
p>This is a paragraph. </p><
/SECTION>
p>This is a paragraph. </p><
/SECTION>
p>This is a paragraph. </p><
/section>
Close all HTML elements
In HTML5, you do not have to close all elements (such as <p> elements), but we recommend adding a closing tag to each element.
Not recommended:
<p>This is a paragraph.
<p>This is a paragraph.
</section>
<p>This is a paragraph . </p>
<p> This is a paragraph. </p>
</section>
Close empty HTML elementsIn HTML5, empty HTML elements do not have to be closed: We can write like this:
The slash (/) is required in XHTML and XML.
It's good to use this style if you expect XML software to use your page.
Use lowercase attribute names
HTML5 attribute names allow the use of uppercase and lowercase letters.
We recommend using lowercase letters for attribute names:
It is a very bad habit to use uppercase letters at the same time.
Developers usually use lowercase (similar to XHTML).
The lowercase style looks more refreshing.
Lowercase letters are easy to write.
Not recommended:
Recommended:
##Attribute valueHTML5 attribute value can be omitted quotation marks. We recommend using quotation marks for attribute values:
- If the attribute value contains spaces, you need to use quotation marks.
- Mixing styles is not recommended, it is recommended to unify the style.
- Use quotation marks for attribute values to make them easier to read.
Pictures are usually used
altattributes. When the picture cannot be displayed, it can replace the picture display.
Define the size of the image and reserve designated space when loading to reduce flickering.
##Spaces and equal signsSpaces can be used before and after the equal sign.
Avoid a line of code that is too long
When using the HTML editor, it is inconvenient to scroll the code left and right.
Try to keep each line of code to less than 80 characters.
Blank lines and indentation
Don’t add blank lines for no reason.
Add blank lines to each logical function block to make it easier to read.
Use two spaces for indentation, and TAB is not recommended.
Do not use unnecessary blank lines or indentation between shorter codes.
Unnecessary blank lines and indentation:
<h1>php中文网</h1>
<h2>HTML</h2>
<p>
php Chinese website, you can learn not only technology, but also It's a dream.
php Chinese website, what you learn is not only technology, but also dreams.
php Chinese website, what you learn is not only technology, but also a dream,
php Chinese website, what you learn is not only technology, but also dreams.
</p>
##</body>
<h1>php中文网</h1>
<h2></h2>
<p>php Chinese website, what you learn is not only technology, but also dreams. php中文网, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also dreams.
php中文网, what you learn is not only technology, but also dreams.
</p>
##<
/body> ;
表格实例:
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
List example:
<li>London</li>
< li>Paris</li>
<li>Tokyo</li>
</ol>
##Omit <html> and <body>?In standard HTML5, the <html> and <body> tags can be omitted. The following HTML5 document is correct:
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <h1>这是一个标题</h1> <p>这是一个段落。</p>
Run Example»Click" Run instance" button to view the online instance
It is not recommended to omit the <html> and <body> tags. The
<html> element is the root element of the document and is used to describe the language of the page:<html lang="zh">
Omit <head>?In standard HTML5, the <head> tag can be omitted. By default, the browser will add the content before <body> to a default <head> on the elements.
<!DOCTYPE html> <html> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO。"; </script> </body> </html>
Run Instance»Click the "Run Instance" button to view the online instance
Metadata
The <title> element is required in HTML5. The title name describes the theme of the page:
Title and language allow search engines to quickly understand the topic of your page:
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>php中文网</title>
</head>
HTML Comments
Comments can be written in <!-- and --> in:
is relatively long Comments can be written in separate lines between <!-- and -->:
This is a longer comment. This is A longer comment. This is a longer review.
This is A longer comment This is a longer comment. This is A longer comment.
-->
The first character of long comments is indented by two spaces to make it easier to read.
Style sheet
The style sheet uses a concise syntax format (the type attribute is not required):
Short rules can be written in one line:
Long rules can be written in multiple lines:
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Put the left curly brace on the same line as the selector
The left curly brace is on the same line as the selector. Add spaces between
- ##Use two spaces to indent ##Add spaces between colons and attribute values.
- #Use a space after the comma and the symbol.
##Use the symbol at the end of each attribute and value.
Use quotation marks only if the attribute value contains spaces.##The closing curly brace is placed on a new line.
- ##Maximum 80 per line. characters.
A common rule is to add spaces after commas and semicolons.
Loading JavaScript in HTML
Use concise syntax to load external script files (the type attribute is not required):
Accessing HTML elements using JavaScriptA poorly formatted HTML may cause JavaScript execution errors. The following two JavaScript statements will output different results:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="Demo">段落 1。</p> <p id="demo">段落 2。</p> <script> // 只有段落 2 会被替换 document.getElementById("demo").innerHTML = "HELLO."; </script> </body> </html>
Run Example»Click the "Run Example" button to view the online example
Use lowercase file namesMost web servers (Apache, Unix) are case-sensitive: london.jpg is not accessible through London.jpg. Other web servers (Microsoft, IIS) are not case sensitive: london.jpg can be accessed via London.jpg or london.jpg. You must maintain a consistent style. We recommend using lowercase file names uniformly.
File extensionHTML file suffix can be
.html (or r .htm).
CSS file suffix is .css.
JavaScript file suffix is .js.
The difference between .htm and .html There is essentially no difference between the extension files of .htm and .html. Both browsers and web servers treat them as HTML files. The difference is: .htm was used in early DOS systems, and the system now only has three characters. There are no special restrictions on the suffix in Unix systems, generally .html is used. Technical differenceIf a URL does not specify a file name (such as http://www.php.cn/css/), The server will return the default file name. Usually the default file name is index.html, index.htm, default.html, and default.htm. If the server is configured with only "index.html" as the default file, you must name the file "index.html", not "index.htm". However, usually the server can set multiple default files, can you set the default file as needed. Anyway, the complete suffix of HTML is ".html".