|
Add a DOCTYPE to the page
Since different browsers interpret tags and style sheets differently, it is necessary to define a standard document type for HTML files so that different browsers can parse and render pages according to a unified HTML standard.
The !DOCTYPE declaration specifies the DTD that the 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">
Correct use of standard HTML tags: Try to use div+css layout instead of table for layout.
Using tables for layout can easily lead to code redundancy, and the code is more complex than writing with <div></div>. In addition, the table needs to download all elements before displaying them, and the corresponding web page opens more slowly.
A standardized page structure should be used: DIV+CSS. This layout method has concise code, fast page browsing speed, and flexible page layout. When revising the page, you only need to change the CSS style to re-layout the page without changing the program, thus reducing the cost of website revision.
Pay attention to the closing relationship of the tags, especially when nesting other tags such as div in the form tag.
Sometimes there will be extra white space on the page, which cannot be avoided even if the margin is reset. This may be because the closing tags of page elements are not matched, 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 a table to ensure that all browsers, including IE, can use it correctly . Even if the table does not explicitly define a tbody element, the browser will assume that the parent node of the tr node is an automatically added default tbody node. In order to avoid 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 capitalization of tags and attributes <br />Sometimes, 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 requires writing two sets of javascript to distinguish IE and other browsers, while the simple event model requires attention to the case of the bound event name. like:
<input type=”text” name=”keywordSearch” onFocus=”clearValue()” >
The lowercase onfocus should be used here, and the tag closing symbol should be added explicitly to be the standard way of writing.
<input type=”text” name=”keywordSearch” onfocus=”clearValue()” />
Note the attribute value setting of the tag
The language and type attributes of the <script> tag
The language attribute of the <script> tag is used to define the script language version. The correct assignment should be in the form of <script>, which is used to tell the browser (mainly IE) to use the 1.2 version of JavaScript syntax to interpret it. The type attribute is used to define the script type. It is a standard attribute of W3C, and using lowercase attributes is in line with the standard. If there is no special situation where you need to tell the browser to interpret according to a lower version of the JavaScript language (most browsers currently support JavaScript version 1.5), you generally do not need to define the language attribute, but the type attribute does need to be defined. So you should put the code
<SCRIPT Language="JavaScript">Change to <script>
<a> tag's alt and title attributes <br />Although the values of the alt and title attributes will be displayed as a tool tip when the mouse hovers over the element 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 attributes of the <input> tag <br />In early versions of HTML, there was no mandatory requirement for all attributes to be assigned values. When representing a selected checkbox, <input checked > was recognized. However, according to the XHTML standard, such grammar is not a strict XML format. Attention should be paid to the assignment of attributes and the closing of tags to conform to the development trend of HTML standards and write it like this:
<input checked="checked" />
<input readonly="readonly" />
The selected attribute of the <option> tag
For the same reason as the previous one, the selected attribute of the <option> tag in the <select> option should also be assigned a value:
<option selected="selected" />
The align="absmiddle" attribute of the <img> tag <br />According to the XHTML standard, HTML tags should focus on the presentation of content rather than the control of style, and the style should be adjusted by CSS. Therefore, some old tags and attributes have been abandoned. For example, the <em> tag and the <i> tag will make the text in the tag content appear in italics. However, the <i> tag, which is simply named after the style, has become an abandoned standard. It has been replaced by the <em> tag that means emphasis. Similarly, the align="absmiddle" attribute of the <img> tag indicates that the image and the adjacent text are vertically aligned in the center. 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 mutual influence of the two style controls.
<iframe> tag frameborder attribute <br />When using iframe, you may only need to set border="0" in IE to hide the iframe border, but the standard attribute that controls the frame window border is frameborder. You should set frameborder="0" to hide the frame border in browsers other than IE:
<iframe frameborder="0" />
cellpadding attribute of the <table> tag <br />This attribute, like the align attribute of the <img> tag, is an attribute that goes beyond HTML's own responsibility of representing content and controls style. It specifies the space between cells. From a practical point of view, it is better not to specify cellpadding, but to use CSS to control the padding of the cell.
The nowrap attribute of the <td> tag
Nowrap is an attribute that indicates that the content does not wrap automatically, but like the above attributes, this is an attribute that controls the style. In HTML 4.01, the "bgcolor", "height", "width" and "nowrap" of the <td> tag are deprecated. In XHTML 1.0 Strict DTD, "bgcolor", "height", "width" and "nowrap" of the <td> tag are not supported.
|
