Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der browserübergreifenden Entwicklungserfahrung (1) HTML-Markup_HTML/Xhtml_Webseitenproduktion

Zusammenfassung der browserübergreifenden Entwicklungserfahrung (1) HTML-Markup_HTML/Xhtml_Webseitenproduktion

WBOY
WBOYOriginal
2016-05-16 16:41:581275Durchsuche

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

!DOCTYPE 声明指定文档遵从的 DTD,如:






标准HTML标签的正确使用
尽量使用div+css布局,不用table做布局。

使用table做布局容易造成代码冗余,相对

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

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

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









Verwenden Sie das tbody-Element beim Definieren der Tabelle, um sicherzustellen, dass alle Browser, einschließlich IE, es korrekt verwenden können
Auch wenn die Tabelle das definierte tbody-Element nicht anzeigt Der Browser betrachtet es als tr. Der übergeordnete Knoten des Knotens ist ein automatisch hinzugefügter Standard-Tbody-Knoten. Um mögliche Missverständnisse bei der Verwendung von Javascript zum Bearbeiten des tr-Knotens zu vermeiden, ist es besser, einen manuell hinzuzufügen, z. B.:

;/tr>



Achten Sie auf die Großschreibung von Tags und Attributen

Manchmal sind bestimmte Ereignisse gebunden Elemente reagieren in IE-Browsern, jedoch nicht in Safari oder anderen Browsern. Zu diesem Zeitpunkt müssen Sie die Richtigkeit der Ereignisbindungsmethode überprüfen. Für die erweiterte Ereignisbindung müssen Sie zwei Sätze Javascript schreiben, um zwischen IE und anderen Browsern zu unterscheiden. Bei einfachen Ereignismodellen müssen Sie auf die Groß- und Kleinschreibung achten des gebundenen Ereignisnamens. Zum Beispiel:


Sie sollten hier onfocus in Kleinbuchstaben verwenden und das Symbol zum Schließen der Beschriftung hinzufügen angezeigt Dies ist die Standardschreibweise.





Achten Sie auf den Attributwert Einstellung des Labels

Die Sprach- und Typattribute des