跨浏览器开发经验总结(一) —— HTML标记
|
副标题[/!--empirenews.page--]
为页面添加DOCTYPE 由于不同浏览器对标签,样式表的解释不尽相同,所以需要为html文件定义一个标准的文档类型,使不同浏览器尽量按照一个统一的html标准来解析渲染页面。 !DOCTYPE 声明指定文档遵从的 DTD，如： <!DOCTYPE HTML PUBLIC "-//W <!DOCTYPE html PUBLIC "-//W 标准HTML标签的正确使用 尽量使用div+css布局,不用table做布局。 使用table做布局容易造成代码冗余，相对<div></div>编写来说，代码繁多。并且，table需要将元素都下载后进行显示，相应的网页打开速度也较慢。 应该使用标准化的页面结构：DIV+CSS。这种布局方式代码简洁，页面浏览速度较快，页面布局灵活，改版时只需改CSS样式即可实现页面重新布局，而不用改动程序，从而降低了网站改版的成本。 注意标签的闭合关系,尤其是在form标签中嵌套div等其他标签时。 有的时候页面上会出现多余的空白，即使重新设置了margin也无法避免，这个时候有可能是页面元素标签闭合出现了不配对的情况，如： <div class=”outer”> <form name=”testForm”> <div class=”inner”> <input name=”title” type=”text” /> </form> </div> </div> 定义table时使用tbody元素，以保证包括IE在内的所有浏览器可正确使用 即使table没有显示定义tbody元素,浏览器也会认为tr节点的父节点是一个自动添加的默认tbody节点.为了避免使用javascript操纵tr节点时可能产生的误会, 还是手动添加一个比较好，如： <table id=”myTable”> <tbody id=”myTableBody”> <tr> <td> </td> </tr> </tbody> </table> 注意标签及属性的大小写 有的时候，有些绑定在元素上的事件在IE浏览器下响应，在safari或其他浏览器下却不响应。这时候需要检查事件绑定方式的正确性，高级事件的绑定需要区别IE和其他浏览器写两套javascript，而简单事件模型需要注意一下绑定事件名的大小写。如： <input type=”text” name=”keywordSearch” onFocus=”clearValue()” > 这里应该用小写的onfocus，并且显示的添加标签闭合符号才是规范的写法。 <input type=”text” name=”keywordSearch” onfocus=”clearValue()” /> 注意标签的属性值设置 <script>标签的language和type属性 <script>标签的language属性是用来定义脚本语言版本的，正确的赋值应该形如<script>用来告诉浏览器（主要是IE）使用1.2版本的javascript语法来解释；而type属性才是用来定义脚本类型的，是w <SCRIPT Language="JavaScript">改为<script> <a>标签的alt和title属性 虽然alt和title这两个属性的值在IE下都会以tool tip的方式在鼠标悬停时显示，但是二者还是有区别的。alt是图片没有显示出来的时候的替代显示，而title才是鼠标放到上面时的提示。 <input>标签的checked、readonly属性 在早期版本的HTML中，并没有强制规定所有的属性都应该赋值，在表示一个选中的复选框时，<input checked > 这样的写法是被认可的。但是根据XHTML的标准，这样的文法并不是一个严格的XML格式，应该注意对属性的赋值和标签的闭合，以顺应HTML标准发展的趋势，写成这样： <input checked="checked" /> <input readonly="readonly" /> <option>标签的select ed属性 与上一条相同的理由，<select>选项中<option>标签的selected属性也应该赋值： < option selected="selected" /> <img>标签的 align="absmiddle" 属性 根据XHTML的标准，HTML标签应该专注于内容的表示，而不是样式的控制，样式应该交给CSS调整。所以废弃了一些旧的标签和属性，比如<em>标签和<i>标签都会让标签内容中文字以斜体显示，但是<i>标签这种单纯以样式命名的标签已经属于废弃的标准了，取而代之的是表示emphasis（强调）含义的<em>标签。同理，<img>标签的和align="absmiddle" 属性表示该图片和相邻文字垂直居中对齐，这也是表示样式的属性，应该使用CSS而不是这个属性来控制图片的对齐样式，避免两处样式控制的相互影响。 <iframe>标签的frameborder属性 在使用iframe时，IE中或许只要设置border=“0”就可以不显示iframe的边框了，但是标准的控制frame窗口边框的属性是frameborder，应该设置frameborder=“0”才能在IE之外的其他浏览器中同样隐藏frame的边框： <iframe frameborder="0" /> <table>标签的cellpadding属性 （编辑：济宁站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
