• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    跨浏览器开发经验总结(一) HTML标记

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

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    标准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属性才是用来定义脚本类型的,是w3c的标准属性,并且使用小写属性才是符合标准的做法。如果不是特别情况下需要告诉浏览器按照较低版本的javascrip语言进行解释的话(目前大多数浏览器支持的javascript版本是1.5),一般不需要定义language属性,但是type属性是需要定义的。所以应该把代码中的

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

    <td>标签的nowrap属性

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

    上一篇:用网页显示txt书的内容的代码
    下一篇:网页常用代码 比较基础的东西
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    跨浏览器开发经验总结(一) HTML标记 跨,浏览器,开发,经验总结,