惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cisco Talos Blog
Cisco Talos Blog
S
Securelist
C
Cisco Blogs
D
DataBreaches.Net
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
Vulnerabilities – Threatpost
Latest news
Latest news
T
The Exploit Database - CXSecurity.com
小众软件
小众软件
S
SegmentFault 最新的问题
罗磊的独立博客
I
Intezer
雷峰网
雷峰网
T
Threatpost
博客园 - 叶小钗
阮一峰的网络日志
阮一峰的网络日志
A
About on SuperTechFans
AWS News Blog
AWS News Blog
A
Arctic Wolf
P
Privacy International News Feed
The Register - Security
The Register - Security
Vercel News
Vercel News
L
LangChain Blog
S
Schneier on Security
D
Docker
J
Java Code Geeks
L
LINUX DO - 热门话题
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
M
MIT News - Artificial intelligence
Spread Privacy
Spread Privacy
MyScale Blog
MyScale Blog
量子位
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
K
Kaspersky official blog
C
CERT Recently Published Vulnerability Notes
Know Your Adversary
Know Your Adversary
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Recorded Future
Recorded Future
C
Cyber Attacks, Cyber Crime and Cyber Security
Scott Helme
Scott Helme
Security Latest
Security Latest
人人都是产品经理
人人都是产品经理
T
Threat Research - Cisco Blogs
Cyberwarzone
Cyberwarzone
F
Full Disclosure
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Jina AI
Jina AI
NISL@THU
NISL@THU
P
Proofpoint News Feed
T
The Blog of Author Tim Ferriss

博客园 - dangjian

站点的安全防范都是后端的职责?非也,Web前端安全同样不可忽视 【社区公益】送《Web前端开发最佳实践》给需要的人 Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码 Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据 Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯 Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量 Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码 Web前端开发最佳实践系列文章汇总 Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些 Web前端开发最佳实践(7):使用合理的技术方案来构建小图标 Web前端开发最佳实践(6):过时的块状元素和行内元素 Web前端开发最佳实践(4):在页面中添加必要的meta信息 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(1):前端开发概述 如何设计一个基于Node.js和Express的网站架构? 如何在ASP.NET中生成HTML5离线Web应用 Web程序员们,你准备好迎接HTML5了吗? 敏捷软件开发之何为敏捷开发
Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性
dangjian · 2015-01-21 · via 博客园 - dangjian

正确闭合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标签的语法,其中规定非自闭和标签必须有开始标签和结束标签,而自闭合标签没有闭合标签。示例代码如下:

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

demo

demo

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


simple

demo

当元素的起始标签和结束标签不在同一个元素的内容中时,则会出现交叉嵌套。应该严格禁止标签之间的交叉嵌套。
下面的例子中起始标签“<span>”在元素div的内容中,而结束标签“</span>”则在div元素的内容之外:

foo bar

baz

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

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

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

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

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


don't use it!
don't use it!

don't use it!

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

<!—不推荐代码:标签中添加border、width、height等样式属性-->
”demo”

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


don't use it!
don't use it

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

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

不推荐示例:


don't use it!
don't use it!
don't use it!
don't use it!

推荐示例:


important
emphasize
deleted
insert

3. 移除不常用的HTML标签

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

附录