Home > Developer > JavaScript
Front-end HTML specification and HTML Specification
HTML specification-Overall Structure
<! DOCTYPE html> The structural order is basically the same as the visual order.
Structure, performance, and behavior are separated to avoid inline
Maintain a simple tree structure
<Body> <! -- Sidebar content area --> <div class = "m-side"> <div class = "side"> <div class = "sidein"> <! -- Hot label --> <div class = "sideblk"> <div class = "m-hd3">
In addition, do the following:
If the structure can be written in parallel, do not nest it. If you can write<div></div><div></div>Do not write<div><div></div></div>
If the structure already meets the visual and semantic requirements, there should be no additional redundant structure. For example<div>If the requirements are met, do not write them again.<div><div>
The className referenced on a tag should not be too many. The smaller the number, the better. For example, do not:<div class="class1 class2 class3 class4"></div>
Avoid className for a semantic internal tag. For example, in such a list, itm in the li tag should be removed:<ul class="m-help"><li class="itm"></li><li class="itm"></li></ul>
HTML specifications-code format Description Method
It adopts a format similar to tag closure, which is in the same format as HTML; two spaces are added to the annotation text, which is in the same format as CSS annotations.
- Start note:
<! -- Comment text -->(There are two spaces in the text ).
- End note:
<! --/Comment the text -->(Add the "/" symbol before the text, similar to the closure of tags ).
- Only start comments are allowed!
<! -- Header --> <div class = "g-hd"> <! -- LOGO -->
Code comments
The comments of a single line of code are also kept in the same direction, with spaces at both ends. The comments of multiple lines start and end with another line and align with the left indentation.
<!--
Strict nesting
- Use the strictest xhtml strict standard as much as possible. For example, inline elements cannot contain block-level elements.
- The tag is properly closed and must be closed.
Strict attributes
- All attributes and values are in lowercase. Each attribute must have a value. Each value must be enclosed in double quotation marks.
- Attributes without values must use their own names as values (checked, disabled, readonly, selected, and so on ).
- The type attribute of the style label and script label can be omitted.
Common labels
Common label tables
Tag
Tag
Semantics
Common nested errors
Common attributes (bold ones are indispensable or recommended)
<A> </a>
Hyperlink/anchor
A cannot be nested
Href, name, title, rel, target
<Br/>
Line feed
<Button> </button>
Button
Form elements cannot be nested
Type, disabled
<Dd> </dd>
Definition (description) in the definition list)
It can only use dl as the parent container, corresponding to a dt
<Del> </del>
Text Deletion
<Div> </div>
Block-level container
<Dl> </dl>
Definition list
Only dt and dd can be nested.
<Dt> </dt>
Definition terms in the definition list
It can only use dl as the parent container, corresponding to multiple dd
<Em> </em>
Emphasize text
<Form> </form>
Form
Action, Target, method, name
<H1>
Title
From h1 to h6, block-level elements cannot be nested.
<Iframe> </iframe>
Embed a webpage
Frameborder, width, height, src, scrolling, name
Image
Alt, Src, width, height
<Input/>
Various Form Controls
Type, Name, value, checked, disabled, maxlength, readonly, accesskey
<Label> </label>
Tags define tags for input Elements
For
<Li> </li>
LIST ITEMS
You can only use ul or ol as the parent container
<Link/>
Reference style or icon
No element can be nested.
Type, rel, Href
<Meta/>
Document Information
For head only
Content, http-equiv, name
<Ol> </ol>
Ordered list
Only li can be nested
<Option> </option>
An option in select
For select only
Value, Selected, disabled
<P> </p>
Section
Block-level elements cannot be nested.
<Script> </script>
Reference script
No element can be nested.
Type, Src
<Select> </select>
List box or drop-down box
Only option or optgroup can be nested
Name, disabled, multiple
<Span> </span>
Inline container
<Strong> </strong>
Emphasize text
<Style> </style>
Reference Style
No element can be nested.
Type, Media
<Sub> </sub>
Subscript
<Sup> </sup>
Superscript
<Table> </table>
Table
Only table elements can be nested.
Width, align, background, cellpadding, cellspacing, summary, border
<Tbody> </tbody>
Table subject
Used only for table
<Td> </td>
Cells in the table
For tr only
Colspan, rowspan
<Textarea> </textarea>
Multi-line text input control
Name, accesskey, disabled, readonly, rows, cols
<Tfoot> </tfoot>
End of table
Used only for table
<Th> </th>
Title cells in the table
For tr only
Colspan, rowspan
<Thead> </thead>
Table Header
Used only for table
<Title> </title>
Document title
For head only
<Tr> </tr>
Table row
Nested in table or thead, tbody, tfoot
<Ul> </ul>
Unordered list
Only li can be nested
HTML specifications-content Semantics Enhance the accessibility and availability of "resource-based" content
Add description text to resource-based content, such as adding the alt attribute to img and adding text and links to audio.
Enhance the accessibility of "invisible" content
The text on the background image should be written in html at the same time, and css should be used to make it invisible. This will help the search engine capture your content, or you can see the content when css fails.
Use entities as appropriate
Common HTML character entities (entity is recommended ):
Character
Name
Entity name
Entity count
"
Double quotation marks
& Quot;
& Amp; #34;
&
& Operator
& Amp;
& #38;
<
Left angle brackets (less than signs)
& Lt;
& #60;
>
Right Angle brackets (greater than the number)
& Gt;
& #62;
Space
& Nbsp;
& #160;
Chinese fullwidth Space
& #12288;
Common special character entities (entity is not recommended ):
Character
Name
Entity name
Entity count
¥
RMB
& Yen;
& #165;
Bytes
Broken vertical line
& Brvbar;
& #166;
©
Copyright
& Copy;
& #169;
®
Registered Trademark R
& Reg;
& #174;
™
Trademark TM
& Trade;
& #8482;
·
Delimiter
& Middot;
& #183;
«
Left Double angle brackets
& Laquo;
& #171;
»
Angle brackets
& Raquo;
& #187;
°
Degrees
& Deg;
& #176;
×
Multiplication
& Times;
& #215;
Bytes
Division
& Divide;
& #247;
‰
Kilobytes
& Permil;
& #8240;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
