HTML5 coding standards
Use the correct document type
The document type declaration is located on the first line of the HTML document:
<!DOCTYPE html>
If you want it to be the same as other tags To use lowercase, you can use the following code:
<!doctype html>
Use lowercase element names
HTML5 element names can be used Uppercase and lowercase letters.
Recommended to use lowercase letters:
Mixing upper and lower case style is very bad.
Developers typically use lowercase (similar to XHTML).
The lowercase style looks more refreshing.
Lowercase letters are easy to write.
<section>
<p>This is a paragraph. </p>
</section>
Close all HTML elements
In HTML5, you don’t have to close all elements ( such as the <p> element), but we recommend adding a closing tag to each element.
<section>
<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
</section>
Close empty HTML elements
In HTML5, empty HTML elements are not necessarily To close:
We can write like this:
<meta charset="utf-8">
We can also write like this:
< ;meta charset="utf-8" />
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 and lowercase letters at the same time.
Developers typically use lowercase (similar to XHTML).
The lowercase style looks more refreshing.
Lowercase letters are easy to write.
<div class="menu">
Attribute value
HTML5 attribute value does not need 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.
<table class="table striped">
Picture attributes
Pictures usually use the alt attribute. When the picture cannot be displayed, it can replace the picture display.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Define the size of the image and you can load it Reserve designated space to reduce flickering.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
space You can use spaces before and after the equal sign
.
<link rel = "stylesheet" href = "styles.css">
But we recommend using less spaces:
<link rel="stylesheet" href="styles.css">
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.
<body>
<h1>php Chinese website</h1>
<h2></h2>
<p>php Chinese website, what you learn is not only technology, but also dreams.
php中文網(wǎng), what you learn is not only technology, but also dreams.
php中文網(wǎng), what you learn is not only technology, but also dreams.
php中文網(wǎng), what you learn is not only technology, but also dreams. </p>
</body>
##Form example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
< ;tr>
; ;B</td>
; <td>Description of B</td>
</tr>
</table>
List instance:
<ol>
<li>Paris</li>
<li>Tokyo</li></ol>
In standard HTML5, < The html> and <body> tags can be omitted.
The following HTML5 document is correct:<!DOCTYPE html>
<head>
<title>Page title</title>
</head>
<h1>This is a title</h1>
<p>This is a paragraph. </p>
Omitting the <html> and <body> tags is not recommended.
Omitting the head tag is not recommended.
##Metadata
The <title> element in HTML5 is required Yes, the title name describes the theme of the page:
<title>php中文網(wǎng)</title>
The title and language can allow search engines to quickly understand the theme of your page:
<!DOCTYPE html>
<html lang="zh"><head>
<meta charset="UTF-8">
< ;title>php Chinese website</title>
</head>
##HTML comments
This is a long comment. This is a longer review. This is a longer review.
This is a longer comment This is a longer comment. This is a longer review.-->
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):
<link rel="stylesheet" href="styles.css">
Short rules can be written in one line:
p.into {font-family: Verdana; font-size: 16em;}
Long rules can be written in multiple lines:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans- serif;
font-size: 16em;
color: black;
}
Put the opening curly brace on the same line as the selector.
Add a space between the left curly brace and the selector.
Use two spaces for indentation.
Add a space between the colon and the attribute value.
Use a space after commas and symbols.
Use a symbol at the end of each attribute and value.
Use quotes only if the attribute value contains spaces.
The right curly brace is placed on a new line.
Maximum 80 characters per line.
A common rule is to add spaces after commas and semicolons.
Load JavaScript in HTML
Use concise syntax to load external Script file (type attribute is not required):
<script src="myscript.js">
Accessing HTML elements using JavaScript
A poorly formatted HTML may cause JavaScript execution errors.
The following two JavaScript statements will output different results:
Example
var obj = getElementById("Demo")
var obj = getElementById(" demo")
Try it out?
Try to use the same naming rules for JavaScript in HTML.
Use lowercase file names
Most web servers (Apache, Unix) are case-sensitive: london.jpg cannot be accessed through London.jpg.
Other web servers (Microsoft, IIS) are not case sensitive: london.jpg can be accessed as London.jpg or london.jpg.
You must maintain a consistent style. We recommend using lowercase file names uniformly.
File extension
HTML 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 difference
If a URL does not specify a file name (such as http://ipnx.cn/css/), the server will return the default file name. Typically the default file names are 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".
