Web Front end Development specification

Last Update:2016-06-20 Source: Internet

Author: User

Tags border color html comment jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<body> tags do not belong to the head area, it is emphasized that in order to ensure browser compatibility, you must set the page background <body bgcolor= "#FFFFFF" >2. Web page Authoring details----fonts 1. You must use a CSS style sheet for text font style and line spacing when setting font Styles. Suppresses the tag from appearing on the Page. 2. in the Web page Chinese should be preferred to use the song Body. English and digital preferred to use Verdana and Arial two Fonts. Generally use the Chinese song Body 9pt and 11pt or 12px and 14.7px This is the optimized font size, bold or italicized word bold, the general selection of 11pt and 14.7px font size is more Appropriate. 3. in order to maximize the function of browser automatic typesetting, in a complete text please try not to use to manually intervene in Segments. 4. There should be a half-width space between the words in different languages, except for the signs before and after the avoidance of the head, and punctuation between the Chinese characters with Full-width punctuation, and the brackets around the letters and numbers should use Half-width Brackets. 5. Please do not appear in the Web page more than one and try to use less full-width space (the English character set, The full-width space will be garbled), white space should try to use text-indent, padding, margin, hspace, vspace and transparent GIF images to Implement. 6. The line spacing is defined as a percentage, and the value of the two leading lines commonly used is line-height:120%/150%. 7. In typesetting we often encounter the need to do the first line indentation, do not use or full-width space to achieve the effect, the standard practice is to define p {text-indent:2em in the style sheet;} then add tags to each paragraph, note that In general, do not omit the end Tag.3. Web page making details----links 1. The link path in the Web site is all relative paths, and the link path to the default file that is generally linked to a directory does not have to write the full name, as we do not have to: <a href= "aboutus/index.htm" > instead: <a href = "aboutus/"; all the links in the page to the homepage are written <a href= "/" > 2. in the browser, when we click on the empty link, it will automatically reset the current page to the first end, thus affecting the User's normal reading content, We use the code "javascript:void (null)" instead of the original "#" tag4.Web page Making Details----form 1px table style= "border-collapse:collapse" Examples are as Follows: <table border= "1" cellspacing= "0" width= "+" height= "+" style= "border-collapse:collapse" bordercolor= "#000000" cellpadding= "0" > <tr> <td></td> </tr> </table> Set bright, Dark border color Table with bright border (bordercolorlight) and Dark border (bordercolordark) two properties can be set on a table Style. <table border= "1" width= "bordercolorlight=" #000000 "bordercolordark=" #FFFFFF "> When writing <table> nesting each other, strictly according to the specification, for a single <table> for the,<table><tr> alignment,<td> indent two half-width spaces,<td> If there are nested table,<table> also indent two half-width spaces, if <td> does not have any nested table,</td> end tag should be in the same line as <td>, do not wrap, As we note, there should be no such code in the source code: <td>". /images/sample.gif "> </td> And that should be the case: <td>". /images/sample.gif "></td> This is because the browser thinks that the line is equivalent to a half-width space, the above is not the canonical way to inadvertently add a half-width space, if it is necessary to add a half-width space, you should also write: <td>”.. /images/sample.gif "> </td> A Web page to try to avoid using the entire table, all the content is nested in this large table, because the browser in the interpretation of the elements of the page is displayed in a table, if a page is nested in a large table, then it is likely that the result is when the viewer typed the url, He had to face a blank for a long time before all the Web content appeared at the same time. If you have to do this, use the <tbody> tag so that you can make this large table chunk display5. Web page authoring details----download speed Home Flash page size should be limited to 200K below, as far as possible using vector graphics and Action to reduce the size of the Animation. Non-homepage static page with picture size should be limited to about 70K, as far as possible to use the background color to replace large pieces of the same color picture.6. Web Authoring details----include ASP standard notation , '--' can only be in the beginning and ending position of the comment, cannot be placed in the annotation text area;2. CSS comments: Note format/* Here is the comment */;3. JavaScript comments, single-line comments using '//here is a single-line comment ', multiline comments using/* There are multiple lines of comments */;2.8 browser compatibility CSS hack first, the identification difference: Distinguish ie6,ie7,ie8,ff. 1. IE can recognize *; Standard browsers (such as Ff) do not recognize *;2. IE6 can recognize *, but does not recognize!important; IE6 in front of the style _3. IE7 can recognize *, can also identify!important;4. IE8 can identify \ 9 for example: background:red \9;5. Firefox does not recognize *, but can identify!important;1. The difference between IE6 and firefox: background:orange;*background:blue; It means that the background color of Firefox is orange, and the background color of IE is Blue.2. The difference between IE6 and IE7: background:green!important;background:blue; It means: the background color of IE7 is green, the background color of IE6 is blue3. The difference between IE7 and Ff: background:orange; *background:green; This means: the background color of Firefox is orange, and the background color of IE7 is green4. The difference between ff,ie7,ie6: background:orange; *background:green!important; *background:blue; It means that the background of the Firefox browser is orange, the background color of the IE7 browser is green, and the color of the IE6 browser is Blue.second, Practical Suggestions(1). Choice of development platformWrite CSS on Firefox and be compatible with other Browsers. This will certainly be more than in IE do well to other browser compatibility comes easy, because IE on the old standard support is very good, and some of the unique features of IE people do not support. So it is recommended to use Firefox combined with Firebug extension as a platform.(2). the order of CSS HackUsing Firefox as a platform, as long as the code to write enough standards, in fact, there is not a lot of Hack, IE browser is almost no problem, so you can temporarily ignore,The order is as Follows: IE6, IE7, Firefox--other(3). Methods of HackThere are two ways of doing this, one in different files and the other in the same file. In fact, the role is the same, but the starting point is not the Same.1. Processing in the same file. Such as: id= "bgcolor" control to show Blue in IE6, IE7 in green, Firefox and other browsers display Red.IE6 do not recognize!important, also do not recognize *+html. so IE6 can only be Blue. IE7 recognized!important, also recognized *+html, priority: (*+html +!important) >!important > +html. IE7 can be red, blue and green, but Green has the highest Priority. Firefox and other browsers all Recognize!important. !important priority, Firefox can be red and blue, but Red has a high priority. the above-mentioned priority symbols are allowed by the CSS3 standard, other browsers also have other hack methods, but I have not yet encountered Firefox normal, Browsers other than IE are not normal, so there is no sharing. as long as the code specification, it is believed that the occurrence of this situation should be very rare (except javascript).2. Processing in different Files. Why the same file can be processed and written in multiple files for different browsers? this is to deceive the web of the verification tool, in fact, only need two files, one for all browsers, and one for IE services only. write all of the code in one place, and some IE must, It cannot be put into another file by the code (E.G. cursor:hand;), and then imported in the following way.Web Front end Development specification

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More