Rumah  >  Artikel  >  hujung hadapan web  >  html标签编程兼容性注意事项

html标签编程兼容性注意事项

伊谢尔伦
伊谢尔伦asal
2017-06-16 10:09:551227semak imbas

页面布局灵活,改版时只需改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,而简单事件模型需要注意一下绑定事件名的大小写。如:

b5405acd5d4abf6fbfd512dba6dd6b9a

这里应该用小写的onfocus,并且显示的添加标签闭合符号才是规范的写法。

12d4d0645fb89f86a4be499df5ba66c7 

注意标签的属性值设置

3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的language和type属性

3f1c4e4b6b16bbbd69b2ee476dc4f83a标签的language属性是用来定义脚本语言版本的,正确的赋值应该形如3f1c4e4b6b16bbbd69b2ee476dc4f83a用来告诉浏览器(主要是IE)使用1.2版本的javascript语法来解释;而type属性才是用来定义脚本类型的,是w3c的标准属性,并且使用小写属性才是符合标准的做法。如果不是特别情况下需要告诉浏览器按照较低版本的javascrip语言进行解释的话(目前大多数浏览器支持的javascript版本是1.5),一般不需要定义language属性,但是type属性是需要定义的。所以应该把代码中的

ca59691adfd8042ff4f15bfca379851e改为3f1c4e4b6b16bbbd69b2ee476dc4f83a

3499910bf9dac5ae3c52d5ede7383485标签的alt和title属性

虽然alt和title这两个属性的值在IE下都会以tool tip的方式在鼠标悬停时显示,但是二者还是有区别的。alt是图片没有显示出来的时候的替代显示,而title才是鼠标放到上面时的提示。

d5fd7aea971a85678ba271703566ebfd标签的checked、readonly属性

在早期版本的HTML中,并没有强制规定所有的属性都应该赋值,在表示一个选中的复选框时,12a738289f0faa85f887515226a2d4b6 这样的写法是被认可的。但是根据XHTML的标准,这样的文法并不是一个严格的XML格式,应该注意对属性的赋值和标签的闭合,以顺应HTML标准发展的趋势,写成这样:

54888d500739bdda8a250dbb905b1c04

7587a6692c5d9eda331df57995ab8ea3

5a07473c87748fb1bf73f23d45547ab8标签的select ed属性

与上一条相同的理由,221f08282418e2996498697df914ce4e选项中5a07473c87748fb1bf73f23d45547ab8标签的selected属性也应该赋值:

03e3b4d0a75ea401a4136cbd2ab75199

a1f02c36ba31691bcfe87b2722de723b标签的 align="absmiddle" 属性

根据XHTML的标准,HTML标签应该专注于内容的表示,而不是样式的控制,样式应该交给CSS调整。所以废弃了一些旧的标签和属性,比如907fae80ddef53131f3292ee4f81644b标签和5a8028ccc7a7e27417bff9f05adf5932标签都会让标签内容中文字以斜体显示,但是5a8028ccc7a7e27417bff9f05adf5932标签这种单纯以样式命名的标签已经属于废弃的标准了,取而代之的是表示emphasis(强调)含义的907fae80ddef53131f3292ee4f81644b标签。同理,a1f02c36ba31691bcfe87b2722de723b标签的和align="absmiddle" 属性表示该图片和相邻文字垂直居中对齐,这也是表示样式的属性,应该使用CSS而不是这个属性来控制图片的对齐样式,避免两处样式控制的相互影响。

d5ba1642137c3f32f4f4493ae923989c标签的frameborder属性

在使用iframe时,IE中或许只要设置border=“0”就可以不显示iframe的边框了,但是标准的控制frame窗口边框的属性是frameborder,应该设置frameborder=“0”才能在IE之外的其他浏览器中同样隐藏frame的边框:

31a4f70c7bfdacffe317ff97306b631e

f5d188ed2c074f8b944552db028f98a1标签的cellpadding属性

这个属性同a1f02c36ba31691bcfe87b2722de723b标签的 align属性一样,也是一个僭越了HTML自身表示内容的职责而控制样式的一个属性,它规定的是单元之间的空间。从实用角度出发,最好不要规定 cellpadding,而是使用 CSS 来控制单元格的内边距。

b6c5a531a458a2e790c1fd6421739d1c标签的nowrap属性

nowrap是表示内容不自动换行的属性,但是同上面的属性一样,这是一个控制样式的属性。在 HTML 4.01 中,b6c5a531a458a2e790c1fd6421739d1c标签的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被赞成使用的。在 XHTML 1.0 Strict DTD 中,b6c5a531a458a2e790c1fd6421739d1c标签的 "bgcolor"、"height"、"width" 以及 "nowrap" 是不被支持的。

Atas ialah kandungan terperinci html标签编程兼容性注意事项. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn