HTML coding specification
3.3 introduction of CSS and JavaScript
1 Preface
As a hypertext markup language to describe the structure of web pages, HTML has been widely used in Baidu. The goal of this document is to make the HTML code style consistent, easy to understand and maintain.
2 code style
2.1 indent and line feed
[mandatory] use 4 spaces as an indent level, and 2 spaces or tab characters are not allowed.
Explanation:
Indents between non HTML tags, such as script or style tag content indents, are at the same level as the indents of script or style tags.
Example:
<style>
/* The first indent of the style content is aligned with the style label to which it belongs */
ul {
padding: 0;
}
</style>
<ul>
<li>first</li>
<li>second</li>
</ul>
<script>
// The first indent of the script code is aligned with the script tag to which it belongs
require(['app'], function (app) {
app.init();
});
</script>
[recommended] no more than 120 characters per line.
Explanation:
Long code is not easy to read and maintain. However, considering the particularity of HTML, there are no rigid requirements.
2.2 naming
[mandatory] class must be lowercase and separated by -.
[mandatory] class must represent the content or function of the corresponding module or component, and shall not be named with style information.
Example:
<!-- good --> <div class="sidebar"></div> <!-- bad --> <div class="left"></div>
[mandatory] the element id must ensure that the page is unique.
Explanation:
In the same page, different elements contain the same id, which does not conform to the attribute meaning of id. And use document Getelementbyid may cause problems that are difficult to trace.
[suggestion] id suggests that all words should be lowercase and separated by -. The style of the same project must be consistent.
[suggestion] id and class naming should be as short as possible on the premise of avoiding conflict and clear description.
Example:
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>
[mandatory] it is forbidden to create class es without style information for hook scripts.
Explanation:
class is not allowed to be used only for JavaScript to select certain elements. class should have clear semantics and style. Otherwise, it will easily lead to the proliferation of CSS class es.
Using id and attribute selection as hook is a better way.
[mandatory] for the same page, avoid using the same name and id.
Explanation:
IE browser will confuse the id and name attributes of elements, document Getelementbyid may get an unexpected element. Therefore, you need to be very careful in naming the id and name attributes of elements.
A good practice is to use different nomenclature for id and name.
Example:
<input name="foo">
<div id="foo"></div>
<script>
// IE6 will display INPUT
alert(document.getElementById('foo').tagName);
</script>
2.3 labels
[mandatory] tag names must use lowercase letters.
Example:
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P>
[mandatory] for labels that do not need self closing, self closing is not allowed.
Explanation:
Common labels without self closing include input, br, img, hr, etc.
Example:
<!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title" />
[mandatory] for the closed label allowed to be omitted in HTML5, it is not allowed to omit the closed label.
Explanation:
Exceptions can be made for scenarios that require very strict code volume. For example: the delivery system used by the third-party page.
Example:
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad -->
<ul>
<li>first
<li>second
</ul>
[mandatory] label use must comply with label nesting rules.
Explanation:
For example, div cannot be placed in p, and tbody must be placed in table.
For detailed label nesting rules, see HTML DTD The Elements definition section in.
[suggestion] the use of HTML tags should follow the semantics of tags.
Explanation:
Here are the common tag semantics
- p - paragraph
- h1,h2,h3,h4,h5,h6 - hierarchy title
- strong,em - emphasize
- ins - insert
- del - delete
- abbr - abbreviation
- Code - code identification
- cite - quote the title of the source work
- q - Reference
- blockquote - a paragraph or long quote
- ul - unordered list
- ol - ordered list
- dl,dt,dd - definition list
Example:
<!-- good --> <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p> <!-- bad --> <div>Esprima serves as an important <span class="strong">building block</span> for some JavaScript language tools.</div>
[suggestion] tables should not be used for layout when CSS can meet the same requirements.
Explanation:
If compatibility permits, semantic correctness should be maintained as far as possible. Exceptions are allowed for scenarios that have strict requirements on grid alignment and stretch, such as multi column complex forms.
[suggestion] the use of labels should be as concise as possible to reduce unnecessary labels.
Example:
<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>
2.4 properties
[mandatory] attribute names must be lowercase.
Example:
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
[mandatory] attribute values must be enclosed in double quotes.
Explanation:
Single quotation marks and quotation marks are not allowed.
Example:
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
[mandatory] there must be no space between the attribute name and the attribute value.
Explanation:
According to the HTML specification = there can be spaces on both sides, but for consistency, spaces are not allowed to be added.
Example:
<!-- good --> <input type="text"> <!-- bad --> <input type = "text">
[suggestion] attribute of boolean type. It is recommended not to add attribute value.
Example:
<input type="text" disabled> <input type="checkbox" value="1" checked>
[suggestion] it is recommended to prefix the custom attribute with xxx -, and it is recommended to use data -.
Explanation:
Using prefixes helps distinguish between custom attributes and standard defined attributes.
Example:
<ol data-ui-type="Select"></ol>
3 general
3.1 DOCTYPE
[mandatory] use HTML5's DOCTYPE to enable the standard mode. It is recommended to use uppercase DOCTYPE.
Example:
<!DOCTYPE html>
[recommendation] enable IE Edge mode.
Example:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
[suggestion] set the correct lang attribute on the html tag.
Explanation:
It helps to improve the accessibility of the page, for example, let the speech synthesis tool determine the pronunciation it should adopt, and let the translation tool determine its translation language.
Example:
<html lang="zh-CN">
3.2 coding
[mandatory] the page must be in a reduced form and clearly specify the character encoding. The meta of the specified character encoding must be the first direct child element of the head.
Explanation:
see Can HTML5 Charset work A penny.
Example:
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html>
[suggestion] HTML files are encoded in UTF-8 without BOM.
Explanation:
UTF-8 coding has wider adaptability. BOM may cause unnecessary interference when using programs or tools to process files.
3.3 introduction of CSS and JavaScript
[mandatory] when importing CSS, rel="stylesheet" must be specified.
Example:
<link rel="stylesheet" href="page.css">
[suggestion] when introducing CSS and JavaScript, there is no need to specify the type attribute.
Explanation:
text/css and text/javascript are the default values for type.
[suggestion] the presentation definition is placed in the external CSS, and the behavior definition is placed in the external JavaScript.
Explanation:
The code separation of structure style behavior is good for improving the readability and maintainability of the code.
[suggestion] introduce all CSS resources required by the page in the head.
Explanation:
In the process of page rendering, the new CSS may cause the style of elements to be recalculated and drawn, and the page flickers.
[suggestion] JavaScript should be placed at the end of the page or loaded asynchronously.
Explanation:
Placing script in the middle of the page will block the rendering of the page. For performance reasons, please follow this recommendation if not necessary.
Example:
<body>
<!-- a lot of elements -->
<script src="init-behavior.js"></script>
</body>
[suggestion] for mobile environment or Web application designed only for modern browsers, if the URL protocol part of external resources is the same as the page, it is recommended to omit the protocol prefix.
Explanation:
Use the protocol relative URL to introduce CSS. Under IE7/8, two requests will be sent. Whether to use protocol related URLs should fully consider the environment for which the page is targeted.
Example:
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
4 head
4.1 title
[mandatory] the page must contain a title tag declaration title.
[mandatory] the title must be the direct child element of the head and immediately after the charset declaration.
Explanation:
If the title contains characters other than ASCII, the browser needs to know the character encoding type before decoding, otherwise it may cause garbled code.
Example:
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
4.2 favicon
[mandatory] make favicon accessible.
Explanation:
When favicon is not specified, most browsers will request favicon in the root directory of the Web Server ico . In order to ensure that favicon is accessible and avoid 404, one of the following two methods must be followed:
- Place favicon. In the Web Server root directory ICO file.
- Use link to specify favicon.
Example:
<link rel="shortcut icon" href="path/to/favicon.ico">
4.3 viewport
[suggestion] if the page wants to be mobile device friendly, you need to specify the viewport of the page.
Explanation:
The viewport meta tag can set the width and initial zoom size of the visual area to avoid abnormal page display on the mobile device.
For example, if you need iOS device friendliness when the page width is less than 980px, you should set the width value of the viewport to adapt to your page width. At the same time, because different mobile devices have different resolutions, device width and device height variables should be used when setting.
In addition, in order to make the viewport work normally, corresponding adjustments should be made in the page content style layout design, such as avoiding absolute positioning. For more information about the viewport, see Introduction to Safari Web Content Guide
5 pictures
[mandatory] the src value of forbidden img is null. The default src should also be added for delayed loading pictures.
Explanation:
If src value is empty, some browsers will reload the current page. Refer to: https://developer.yahoo.com/performance/rules.html#emptysrc
[suggestion] avoid adding unnecessary title attribute to img.
Explanation:
Redundant title s affect the drawing experience and increase the page size.
[alt] suggest adding important attributes to pictures.
Explanation:
It can improve the user experience when the picture fails to load.
[suggestion] add width and height attributes to avoid page jitter.
[suggestion] img tags are used for images with download requirements, and CSS background images are used for images without download requirements.
Explanation:
- Product logo, user avatar, user generated pictures and other pictures with potential download needs are realized in the form of img, which can facilitate users to download.
- Pictures without download requirements, such as icon, background, pictures used by code, etc., shall be realized by CSS background as far as possible.
6 form
6.1 control title
[mandatory] a control with a text title must be associated with its title using a label label.
Explanation:
There are two ways:
- Place the control inside the label.
- The for property of label points to the id of the control.
The first one is recommended to reduce unnecessary IDs. If the DOM structure does not allow direct nesting, the second one should be used.
Example:
<label><input type="checkbox" name="confirm" value="on"> I have confirmed the above terms</label> <label for="username">user name:</label> <input type="textbox" name="username" id="username">
6.2 buttons
[mandatory] when using a button element, the value of the type attribute must be specified.
Explanation:
The default type of the button element is submit. If it is placed in the form element, clicking it will cause the form to be submitted. In order to display and distinguish its functions and facilitate understanding, the type attribute must be given.
Example:
<button type="submit">Submit</button> <button type="button">cancel</button>
[suggestion] try not to use the name attribute of button class elements.
Explanation:
Due to browser compatibility problems, using the name attribute of the button will bring many problems that are difficult to find. For details, please refer to This article.
6.3 accessibility (A11Y)
[suggestion] the buttons responsible for the main functions should be in the top order in the DOM.
Explanation:
The buttons responsible for the main functions should be relatively front to improve accessibility. If float: right is specified in CSS, it may lead to the situation that the main button is visually in front and the main button in DOM is behind.
Example:
<!-- good -->
<style>
.buttons .button-group {
float: right;
}
</style>
<div class="buttons">
<div class="button-group">
<button type="submit">Submit</button>
<button type="button">cancel</button>
</div>
</div>
<!-- bad -->
<style>
.buttons button {
float: right;
}
</style>
<div class="buttons">
<button type="button">cancel</button>
<button type="submit">Submit</button>
</div>
[suggestion] when using JavaScript for form submission, if conditions permit, make the native submission function work normally.
Explanation:
When the browser JS runs incorrectly or closes JS, the submission function will not work. If the action attribute of the form element and the name attribute of the form control are correctly specified, the submission can still continue.
Example:
<form action="/login" method="post">
<p><input name="username" type="text" placeholder="user name"></p>
<p><input name="password" type="password" placeholder="password"></p>
</form>
[suggestion] when developing pages for mobile devices, specify the type attribute of the input box according to the content type.
Explanation:
Specifying the input box type according to the content type can obtain a friendly input experience.
Example:
<input type="date">
7 multimedia
[suggestion] when using audio and video tags to play audio and video in modern browsers, we should pay attention to the format.
Explanation:
The audio shall cover the following formats as much as possible:
- MP3
- WAV
- Ogg
The video shall cover the following formats as much as possible:
- MP4
- WebM
- Ogg
[suggestion] in browsers that support HTML5, audio and video tags are preferred to define audio and video elements.
[suggestion] support multiple browsers by degenerating to plug-ins.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<object width="100" height="50" data="audio.mp3">
<embed width="100" height="50" src="audio.swf">
</object>
</audio>
<video width="100" height="50" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="100" height="50" data="video.mp4">
<embed width="100" height="50" src="video.swf">
</object>
</video>
[suggestion] turn on the automatic playback of audio and video only when necessary.
[suggestion] provide a description inside the object tag indicating that the browser does not support the tag.
Example:
<object width="100" height="50" data="something.swf">DO NOT SUPPORT THIS TAG</object>
8 HTML in template
[suggestion] the indentation of template code takes priority to ensure the indentation rules of HTML code.
Example:
<!-- good -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
<!-- bad -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
[suggestion] the basic principle of template code should be to ensure the correctness of HTML single tag syntax.
Example:
<!-- good -->
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>
<!-- bad -->
<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>
[suggestion] when constructing a table by cyclic processing template data, if a fixed number of data is required to be output per row, it is recommended to group the data first and then recycle the output.
Example:
<!-- good -->
<table>
{foreach $item_list as $item_group}
<tr>
{foreach $item_group as $item}
<td>{ $item.name }</td>
{/foreach}
<tr>
{/foreach}
</table>
<!-- bad -->
<table>
<tr>
{foreach $item_list as $item}
<td>{ $item.name }</td>
{if $item@iteration is div by 5}
</tr>
<tr>
{/if}
{/foreach}
</tr>
</table>
[suggestion] the link opened in the new window / tab needs to add the security related rel attribute value noopener according to the business needs.
Explanation:
New windows / tabs open web pages through window When opener accesses the context of the original web page, it will introduce security problems. For example, a web page opened from a search results page can be accessed through window Opener tampers the result page into a phishing web page, and the user will visit the malicious web page content when returning. See details 4.8.6.8. Link type "noopener" - HTML 5.2.
Example:
<!-- good --> <a href="//external. website/" target="_ Blank "rel =" nopower "> external links</a> <!-- bad --> <a href="//external. website/" target="_ Blank "> external links</a>