Cross-browser development experience summary (1) HTML markup_HTML/Xhtml_Web page production

为页面添加DOCTYPE
由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。

!DOCTYPE 声明指定文档遵从的 DTD，如：






标准HTML标签的正确使用
尽量使用div+css布局,不用table做布局。
使用table做布局容易造成代码冗余，相对

编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。

应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。

注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。
有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如：

Use the tbody element when defining the table to ensure that all browsers, including IE, can use it correctly
Even if the table does not display the defined tbody element, the browser will consider it tr The parent node of the node is an automatically added default tbody node. In order to avoid possible misunderstandings when using javascript to manipulate the tr node, it is better to add one manually, such as:






tbody>


Pay attention to the capitalization of tags and attributes
Sometimes, some events bound to elements respond in IE browsers , but it does not respond in safari or other browsers. At this time, you need to check the correctness of the event binding method. For advanced event binding, you need to write two sets of javascript to distinguish between IE and other browsers. For simple event models, you need to pay attention to the case of the bound event name. For example:



You should use lowercase onfocus here, and add the label closing symbol displayed. This is the standard way of writing.





Pay attention to the attribute value setting of the label
The language and type attributes of the <script> tag <br /> 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> to tell the browser The browser (mainly IE) uses version 1.2 of JavaScript syntax to interpret; the type attribute is used to define the script type, which is a standard attribute of w3c, and using lowercase attributes is a standard practice. If there are no special circumstances where you need to tell the browser to interpret according to a lower version of the JavaScript language (the JavaScript version currently supported by most browsers is 1.5), generally there is no need to define the language attribute, but the type attribute needs to be defined. So you should change the <br /><br /><strong><SCRIPT Language="JavaScript"> in the code to the alt of the <script> <br /><br /><strong><a> tag and title attribute <br />Although the values ​​of the two attributes alt and title will be displayed in the form of tool tip when the mouse is hovered under IE, there is still a difference between the two. alt is the alternative display when the picture is not displayed, and title is the prompt when the mouse is placed on it. <br /><br /><strong><input> The checked and readonly attributes of the tag <br />In early versions of HTML, it was not mandatory that all attributes should be assigned values. When indicating a selected check box, <input checked> is accepted. However, according to the XHTML standard, such a grammar is not a strict XML format. Attention should be paid to the assignment of attributes and the closure of tags to comply with the development trend of HTML standards. It is written like this: <br /><br /><strong>< input checked="checked" /> <br /><br /><strong><input readonly="readonly" /> <br /><br /><strong><option> tag selected ed attribute <br /><br />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: <br /><br />< option selected="selected " /> <br /><br /><strong><img alt="Cross-browser development experience summary (1) HTML markup_HTML/Xhtml_Web page production" > tag's align="absmiddle" attribute <br />According to XHTML standards, HTML tags should focus on the presentation of content rather than the control of style , 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 cause the Chinese text of the tag content to be displayed in italics, but the <i> tag, which is simply named after a style, is obsolete. Standard, replaced by the <em> tag that expresses emphasis. In the same way, the align="absmiddle" attribute of the <img alt="Cross-browser development experience summary (1) HTML markup_HTML/Xhtml_Web page production" > tag indicates that the image and adjacent text are vertically aligned in the center. This is also an attribute indicating style. CSS should be used instead of this attribute to control the alignment style of the image to avoid two Interaction of style controls. <br /><br /><strong><iframe> The frameborder attribute of the tag <br />When using iframe, you may just set border="0" in IE to not display the iframe border, but the standard The attribute that controls the frame window border is frameborder. You should set frameborder="0" to hide the frame's border in browsers other than IE: <br /><br /><iframe frameborder="0" /> <br /><br /><strong><table> cellpadding attribute of tag <br />This attribute, like the align attribute of the <img alt="Cross-browser development experience summary (1) HTML markup_HTML/Xhtml_Web page production" > tag, is also an attribute that overrides the responsibility of HTML itself to represent content and controls the style. It specifies the space between units. From a practical point of view, it is better not to specify cellpadding, but to use CSS to control the padding of cells. <br /><br /><strong><td>The nowrap attribute of the tag <br /><br />nowrap is an attribute that indicates that the content will not wrap automatically, but like the above attribute, this is an attribute that controls the style . In HTML 4.01, the "bgcolor", "height", "width" and "nowrap" tags of the <td> tag are deprecated. In XHTML 1.0 Strict DTD, "bgcolor", "height", "width" and "nowrap" of the <td> tag are not supported. </script>