Home > Developer > Web Develop
According to the standard, IMG tag to write ALT attribute, if not write an empty. But generally write a content, according to the image to express the meaning, because Alt is the picture can not be loaded when the text displayed
The following is a less-than-good notation:
<src= "Company-logo.svg" alt= "ABC company logo">
Better notation:
<src= "Chime-logo.svg" alt= "ABC Company">
There is no need to tell the user it is a logo, just tell it is ABC Compay is good. Again such as:
<src= "user-head.jpg" alt= "User Portrait">
Can be changed into:
<src= "user-head.jpg" alt= "Bolynga Team">
If the picture does not appear, the user's name is displayed directly.
Some people lazy just write an empty alt that also can, but in some important places still want to write, after all, it is conducive to SEO.
2. Single label do not write closed tagsWhy? Because it is useless to write, and it seems that you do not understand the HTML specification, we do not write XHTML. Common single labels are img, link, input, HR, BR,
If the following is not a good wording:
<src= "test.jpg"></img><BR /> < type= "Email" value= ""/>
Should be changed to:
3. Custom attributes to start with data-<src= "test.jpg"><br>< type= "Email" value= "">
You add non-standard properties to start with data-, otherwise the validator will be considered nonstandard, such as the following bad wording:
<count= "5"></div>
Should be changed to:
4. TD to be inside TR, Li to be inside the Ul/ol<data-count= "5"></div>
If the following is not a good wording:
< Div > < Li ></ Li > < Li ></ Li > </ Div >
More commonly, TD is not written in tr:
< Table > < TD ></ TD > < TD ></ TD > </ Table >
Some browsers will fix you if you don't write a standard, but some may not be so lucky. Because the standard does not say if the writing is not standardized how to deal with, each browser may have their own way of processing.
5. The direct child element of the Ul/ol can only be Li<ol> <span>123</span> <Li>A</Li> <Li>B</Li></ol>
This writing is also not standardized, can not be directly in the ol write Span,ol is a list, its child elements should be display:list-item, suddenly come out a span, you let the browser how to self-place. Therefore, the non-standard writing will result in different browsers will have different performance.
Similarly, the direct sub-element of TR should be TD, you write TR in the TD that is messy.
6. Section should have a title tag if you use the Section/aside/article/nav label, you need to write a H1/H2/H3 title tag in it, because these four tags can be divided into chapters, they are separate chapters, need to have a title, What if the UI doesn't have a title at all? Then you can write a hidden title tag, if for the purpose of SEO, you can not directly display:none, and to use some special treatment, the following set of a Hidden-text class:<style>. Hidden-text{position:Absolute; Left:-9999px; Right:-9999px}</style>< Section> <H1class= "Hidden-text">Listing Detail</H1></ Section>7. Enhance your SEO with section tags
The advantage of using section is that you can divide the chapters by the following code:
<Body><H1>Listing Detail</H1>< Section> <H1>House infomation</H1> < Section> <H1>Location</H1> <P></P> </ Section> < Section> <H1>BUILDING</H1> <P></P> </ Section></ Section>< Section> <H1>Listing picture</H1></ Section></Body>
will be outline into such an outline:
8. Block-level elements cannot be used inside inline elementsFor example, the following wording is not legal:
<href= "/listing?id=123"> <Div> </div></a>
A tag is an inline element with a div tag inside the inline element, which may cause the a tag to not be clicked properly. or span inside a div, in this case the inline element needs to be explicitly set to display block, the following code:
9. Write <! on each page DOCType html> Settings page render mode is Standard mode, what happens if you forget to write? Forget to write will become weird mode, a lot of things in weird mode rendering will be different, strange mode input/textarea default box model will become Border-box, the document height will become the height of the visual window, the height of the window is not the desired height of the document. There is also a difference between the parent container row height in weird mode will not affect child elements<href= "/listing?id=123" style= "Display:block"> <Div></div></a >
< Div >< src= "test.jpg" style= "height:100px"></Div >
In standard mode, a bit of space is left below the Div, and in weird mode. This reminds us that we need to add <! to the top when we write the email template. DOCType Html>, because when you develop a mail template locally, you write HTML fragments, and without this it becomes a weird pattern.
10. Writing script and style in HTML in special cases usually, it is a bad practice to write script and style directly in HTML, so that the style, structure and logic are mixed together. But sometimes in order to avoid the splash screen problem, may be directly behind the corresponding HTML to follow the adjustment script, this script looks a bit ugly, but very practical, there is no way to do. 11. Style to be written in the head tagStyle can not be written in the body, written in the body will result in rendering two times, especially written in the case of a flash screen may appear, such as the above has been rendered, and suddenly encountered a style tag, causing it to re-render, so that a flash, whether it is from the pursuit of the code farm or the user's experience, Writing a style inside the body is ultimately a way to do it.
The same script is not written in the head tag, which prevents the page from loading.
CSS is also recommended to write a style tag directly embedded in the page, because if the outside chain, the browser needs to do domain name resolution, and then establish a connection, then the download, this set down may have been over the 0.5s/1s, even 2-3 seconds. The CSS that is written on the page cannot be cached, but itself it will not be very large, plus gzip compression, basically within 50k.
HTML to add the properties of LangAs below, if the page is in English, it should be written like this:
<lang= "en"><lang= " en-US" >
The first means that it is a Web page in English, the second means that it is a U.S. English page, plus this benefit is conducive to SEO and screen reader users, he can quickly know what the language of this page, if it is Chinese can write:
13. To write the charset meta tag in front of the head tag<lang= "ZH-CN">
As below, the general CharSet META tag is written in the first label after the head tag:
< Head > < charset= "Utf-8"></head>
One reason is to avoid garbled pages when displaying Unicode symbols, which are written in the first 1024 bytes of the HTML document because of the rules of the web. If you do not write in the old browser will have utf-7 attack the hidden danger, specifically can consult the data, but now the browser basically removed the support for utf-7 encoding.
CharSet's label is written HTML5 this relatively concise wording, do not need to write HTML4 this long:
14. Use HTML entities for special symbols<http-equiv= "Content-type" Content= "text/html; Charset=utf-8" >
Do not directly copy the Unicode special symbol directly into the HTML document, to use its corresponding entity
In particular, like this symbol, do not directly copy a Unicode character from the UI in the past, if the direct copy of the past will be more ugly, it is used in the font of the symbol.
The issue of IMG empty srcSometimes you may need to write an empty IMG tag, and then dynamically assign it src to JS, so you might write:
But this will be problematic, if you write an empty SRC, will cause the browser to think that SRC is the current page link, and then once again request the current page, as you write a tag href is empty similar. If it is background-image, there will be similar problems. What about this time? If you write a URL that doesn't exist, the browser will report a 404 error. I know there are two solutions, the first of which is to write Src as About:blank, as follows:<src= "" alt>
<src= "About:blank" alt>
So it will load a blank page, this is not a compatibility problem, will not load the current page, and will not error
The second way is to write a 1px transparent pixel base64, as shown in the following code
<src= "data:image/gif;base64,r0lgodlhaqabaiaaaaaaap/// Yh5baeaaaaalaaaaaabaaeaaaibraa7 ">
The second may be more compliant, but the first is simpler and there is no compatibility issue.
16. About the effect of element spaces and line breaks in rowsSometimes a newline may introduce a space, as in the following code:
< form > < label > </ label > < type= "email"></form>
In the middle of the label and input there will be a space, which may cause the width of the set lable and input width of the sum of the two and equal to the time of the form will lead to input line, sometimes you check for half a day did not find out why, and finally may find that the original is more than a space, And this space is caused by a newline.
Why does the line break between <form> and <label> and <input> and </form> not introduce spaces
This is because blank text that starts with block-level elements will be ignored, and a blank text node behind a block-level element will not participate in rendering
< Div ></ Div > < Div ></ Div >
There are textnode text nodes between the two Div, but will not participate in rendering.
17. Class names are concatenated with lowercase letters and dashesUse the following-connect, do not use camel type:
<class= "Hello-world"></div>
Front End (HTML/CSS/JS)-html Coding specification
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
