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:








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