正确闭合HTML标签

HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性。元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元素对应的HTML标签也称之为自闭合标签,下面列出了HTML中所有的自闭合标签:

area、base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

W3C制定了多个版本的HTML规范,目前流行的HTML规范有XHTML1.0、HTML4.01和HTML5。规范中规定了所有HTML标签的语法,其中规定非自闭和标签必须有开始标签和结束标签,而自闭合标签没有闭合标签。示例代码如下:

<!-- 非自闭合标签必须有开始和结束标签 -->
<a href="demo.html" title="demo">simple</a>
<!-- 自闭合标签必须没有结束标签 -->
<img src="demo.png" alt="demo" />

有关自闭合标签中是否应该添加符号“/”,在XHTML1.0、HTML4.01和HTML5的规范中稍有不同。XHTML的规范最严格,必须在自闭合标签中添加“/”来表明标签的结束。在HTML4.01的规范中,不推荐在自闭合标签中添加“/”。而HTML5最宽松,自闭合标签添加“/”和不添加“/”都符合规范,在自闭合标签中添加符号“/”是可选的。示例代码如下:

<!-- 如下写法符合XHTML1.0、HTML4.01和HTML5的规范,但在HTML4中不推荐 -->
<img src="demo.png" alt="demo" />
<!-- 如下写法不符合XHTML1.0规范,但符合HTML4.01和HTML5的规范 -->
<img src="demo.png" alt="demo">

如下的这几种写法不符合规范,应该严格禁止:

<!-- 错误:非自闭合标签没有结束标签 -->
<a href="demo.html" title="demo">simple
<!-- 错误:非自闭合标签使用自闭合标签的语法 -->
<a href="demo.html" title="demo" />
<!-- 错误:自闭合标签使用非自闭合标签的语法 -->
<img src="demo.png" alt="demo"></img>

当元素的起始标签和结束标签不在同一个元素的内容中时,则会出现交叉嵌套。应该严格禁止标签之间的交叉嵌套。

下面的例子中起始标签“<span>”在元素div的内容中,而结束标签“</span>”则在div元素的内容之外:

<!-- 错误: 起始标签“<span>”在元素div的内容中,结束标签“</span>”则在div元素的内容之外 -->
<div>foo <span>bar</div> baz</span>

一般通过编写层次缩进良好的HTML代码能够最大化避免出现这样交叉嵌套的错误代码。

停止使用不标准的标签和属性

W3C在制定的HTML4和HTML5标准中有添加独立的章节来说明那些是不被推荐的标签和属性,这些标签和属性是Web互联网发展早期HTML标准混乱和浏览器各自为政的产物,有些标签甚至使用率颇高,比如marquee滚动效果标签,尽管在现在看来其效果丑陋无比,但在当时几乎所有的网站都会使用这样的效果,风靡一时。但是随着Web互联网的飞速发展,人们对Web的认识也逐渐提高,也开始关注如何让网页HTML代码更统一、更简洁、更易理解等等,不在局限于单纯的外观。在此过程中,一些标签和属性逐渐被更好的方案代替,这些标签也不被标准所推荐,甚至是从标准规范中移除,有些特性在浏览器中也不被继续支持。从这些标签和属性的作用来看,导致不被推荐的原因主要有如下几个:

1. 标签没有实际的语义,仅仅是用于设置样式

不推荐使用单纯设置样式的标签,如:basefont、big、center、font等。应该通过CSS设置样式,让HTML标签功能更单一。不推荐的示例如下:

<!--不推荐代码:不推荐使用单纯设置样式的标签,应该通过CSS设置样式-->
<font color=blue>don't use it!</font>
<big>don't use it!</big>
<center>don't use it!</center>

不推荐在HTML标签中添加样式属性,如:iframeimginputdiv等标签中的align属性,body标签上的background属性,tdtr标签上的heightwidthnowrapbgcolorvalign等属性,iframe标签中的framebordermarginheightscrolling等属性。此类属性应该废弃,并通过添加CSS样式来实现相同的效果。不推荐的示例如下:

<!—不推荐代码:标签中添加border、width、height等样式属性-->
<img src=”#” alt=”demo” border=”1” width="194" height="37" />
<div id="focusViwer" align=center> </div>

不推荐使用 <blink><marquee> (闪动,滚动)。这两个标签的职能已经超出了HTML本身,并且也存在浏览器的兼容问题。以如今的审美来说,这两个标签实现的效果丑陋无比,如果一定要这样的效果,可以通过JavaScript代码来实现,并且效果会更好,如:可以使用jQuery Marquee插件 。不推荐的示例如下:

<!--不推荐代码:效果丑陋,并且存在浏览器兼容问题,不推荐使用,如果需要实现这样的效果,可以通过JavaScript代码来实现,并且效果会更好-->
<blink>don't use it!</blink>
<marquee scrollamount=3 scrolldelay=100 >don't use it</marquee>

2. 让HTML标签具有更好的语义

不推荐使用<b><i>显示黑体字和斜体,推荐使用更具有语义的如 <strong><em>,如果单纯是为了样式,推荐用CSS样式定义font-weightfont-style,让页面更简洁。类似的不推荐标签还有<S><strike>,这两个标签是给文字添加删除线的,可以用 <del><ins>来代替。

不推荐示例:

<!--不推荐代码:误语义的标签,单纯设置样式-->
<b>don't use it!</b>
<i>don't use it!</i>
<s> don't use it!</s>
<strike> don't use it!</strike>

推荐示例:

<!--推荐代码:使用具有语义的标签,如果单纯为了样式,则应该通过CSS来设置-->
<strong>important</strong>
<em>emphasize</em>
<del>deleted</del>
<ins>insert</ins>

3. 移除不常用的HTML标签

此类标签包括acronymappletdir等,废弃的原因是使用率极低或者是语义有歧义,并且有其他更好代替方案可以使用。如:表达缩写的标签<acronym>,其语义模糊,开发者更常用<abbr>来代替;开发者更喜欢使用<ul>而不是<dir>

附录

Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性的更多相关文章

  1. Web前端开发最佳实践系列文章汇总

    Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...

  2. Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码

    前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...

  3. Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些

    前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...

  4. Web前端开发最佳实践(7):使用合理的技术方案来构建小图标

    大家都对网站上使用的小图标肯定都不陌生,这些小图标作为网站内容的点缀,增加了网站的美观度,提高了用户体验,可是你有没有看过在这些网站中使用的图标都是用什么技术实现的?虽然大部分网站还是使用普通的图片实 ...

  5. Web前端开发最佳实践(1):前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  6. Web前端开发最佳实践(2):前端代码重构

    前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...

  7. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  8. Web前端开发最佳实践(6):过时的块状元素和行内元素

    前言 前端程序员在学习HTML的过程中,肯定接触过页面元素的两个基本类型:块状元素和行内元素,也有大量的技术文章或者教程在介绍这两个概念.但这两个HTML元素相关的概念从字面上却和CSS样式有着很深的 ...

  9. Web前端开发最佳实践(3):前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

随机推荐

  1. (二)SMO算法

    11 SMO优化算法(Sequential minimal optimization) SMO算法由Microsoft Research的John C. Platt在1998年提出,并成为最快的二次规 ...

  2. windows环境libevent搭建和demo分析

    libevent框架之前有做过分析,这次是谈谈如何将libevent搭建在vs工作环境下, 并且编写一个demo进行测试.测试过程中会再一次带大家分析消息是怎么传递 的. 我的libevent版本li ...

  3. Qt ------ 判断运行在何种系统下

    #ifdef Q_OS_WIN // Windows上的代码 #endif #ifdef Q_OS_LINUX // Linux上的代码 #endif #ifdef Q_OS_MAC // Mac上的 ...

  4. fisher's exact test

    sklearn实战-乳腺癌细胞数据挖掘(博主亲自录视频) https://study.163.com/course/introduction.htm?courseId=1005269003&u ...

  5. centos7 samba匿名访问设置

    [global] workgroup = WORKGROUP server string = Samba Server %v netbios name = centos security = user ...

  6. JS-DOM-随时更新

    DOM里有三种节点:元素节点.文本节点和属性节点 getElmentById(); //id选择器  在JS中用此方法来查找获取  建议大小写 以免不兼容 有时候查找不到  DOM操作必须等到HTML ...

  7. ZOJ 3776 A - Pokemon Master 签到水题

    link 求和比大小... /** @Date : 2017-03-23-21.26 * @Author : Lweleth (SoungEarlf@gmail.com) * @Link : http ...

  8. MySQL主键和索引的联系及区别

    转载自:http://www.nowamagic.net/librarys/veda/detail/1954 关系数据库依赖于主键,它是数据库物理模式的基石.主键在物理层面上只有两个用途: 惟一地标识 ...

  9. JavaScript计时器

    计时器 基本格式: setInterval(function(){代码},1000): /* 说明:1.setInterval 会返回一个计时器ID值 可以这样接收.var setId = setIn ...

  10. python学习笔记(十二)之函数

    牛刀小试: 定义一个无参函数 >>> def myFirstFunc(): ... print("Hello python") ... print("h ...