Since different browsers have different interpretations of tags and style sheets, it is necessary to define a standard document type for the html file, so that different browsers can parse and render pages according to a unified html standard.
!DOCTYPE declares the DTD that the specified document complies with, such as:
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
When using standard HTML tags correctly,try to use div+css layout, and do not use table layout.
Using tables for layout can easily cause code redundancy, and compared with <div></div> writing, there are many codes. Moreover, the table needs to download all elements and display them, and the corresponding web page is also slow to open.
A standardized page structure should be used: DIV+CSS. This layout method is simple in code, fast page browsing speed, and flexible page layout. When revisioning, you only need to change the CSS style to realize page relay without changing the program, thus reducing the cost of website revision.
Pay attention to the closure relationship of the tag, especially when nesting other tags such as divs in form tags.Sometimes there will be extra blanks on the page, which cannot be avoided even if margin is reset. At this time, it may be that the page element label is closed and there is no pairing, such as:
<div class=outer>
<form name=testForm>
<div class=inner>
<input name=title type=text />
</form>
</div>
</div>
Use the tbody element when defining tables to ensure that all browsers including IE can be used correctlyEven if the table does not display the defined tbody element, the browser will think that the parent node of the tr node is an automatically added default tbody node. In order to avoid the possible misunderstandings when manipulating the tr node using JavaScript, it is better to add one manually, such as:
<table id=myTable>
<tbody id=myTableBody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Pay attention to the case of labels and attributesSometimes, some events bound to elements respond in IE browser, but not in safari or other browsers. At this time, you need to check the correctness of the event binding method. The binding of advanced events needs to be different from IE and other browsers to write two sets of javascripts, while a simple event model needs to pay attention to the case of the binding event name. like:
<input type=text name=keywordSearch onFocus=clearValue() >
The lowercase onfocus should be used here, and the standard writing method is the added tag closure symbol displayed.
<input type=text name=keywordSearch onfocus=clearValue() />
Pay attention to the property value setting of the labelThe language and type properties of the <script> tag
The language attribute of the <script> tag is used to define the script language version. The correct assignment should be like <script> to tell the browser (mainly IE) to use the javascript syntax of version 1.2 to explain; the type attribute is used to define the script type, it is a standard attribute of w3c, and using lowercase attributes is a standard practice in line with the standards. If you don't need to tell the browser to explain it in the lower version of JavaScript language (the current JavaScript version supported by most browsers is 1.5), you generally do not need to define the language attribute, but the type attribute needs to be defined. So the code should be
<SCRIPT Language=JavaScript> Change to <script> The alt and title attributes of the <a> tagAlthough the values of the two attributes alt and title are displayed in the form of tool tip when hovering on the mouse in IE, there is still a difference between the two. alt is the alternative display when the image is not displayed, and title is the prompt when the mouse is placed on it.
Checked and readonly properties of <input> tagIn earlier versions of HTML, it was not mandatory that all attributes should be assigned values. When representing a checkbox, the writing method of <input checked> is recognized. However, according to the XHTML standard, such grammar is not a strict XML format. Pay attention to the assignment of attributes and the closure of tags to conform to the development trend of HTML standards. It is written as follows:
<input checked=checked /> <input readonly=readonly /> The select ed property of the <option> tagFor the same reason as the previous article, the selected property of the <option> tag in the <select> option should also be assigned a value:
< option selected=selected />
The align=absmiddle attribute of the <img> tagAccording to the XHTML standard, HTML tags should focus on content representation, rather than style control, and styles should be left to CSS to adjust. Therefore, some old tags and attributes were discarded, such as <em> tags and <i> tags that will make the Chinese characters in italics appear in italics, but <i> tags, simply named after style, are already an abandoned standard, and are replaced by <em> tags that represent the meaning of emphasis. Similarly, the align=absmiddle attribute of the <img> tag indicates that the image is vertically centered and aligned with adjacent text. This is also an attribute that represents style. CSS should be used instead of this attribute to control the alignment style of the image to avoid the mutual influence of the two style controls.
The frameborder property of the <iframe> tagWhen using an iframe, you may not display the border of the iframe by setting border=0 in IE, but the standard control frame window border attribute is frameborder. You should set frameborder=0 to hide the border of the frame in other browsers outside IE:
<iframe frameborder=0 />
The cellpadding property of the <table> tagThis attribute, like the align attribute of the <img> tag, is also an attribute that overcomes the responsibility of HTML to represent content and controls styles. It specifies the space between units. From a practical point of view, it is best not to specify cellpadding, but to use CSS to control the inner margins of cells.
The nowrap attribute of the <td> tagNowrap is an attribute that indicates that the content does not wrap automatically, but like the above attribute, this is an attribute that controls style. In HTML 4.01, the bgcolor, height, width, and nowrap of the <td> tag are not favored. In XHTML 1.0 Strict DTD, the bgcolor, height, width, and nowrap of the <td> tag are not supported.