《Web前端开发最佳实践》——3.4 停止使用不标准的标签和属性,简化HTML代码

简介:

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章,第3.4节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.4 停止使用不标准的标签和属性,简化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标签中添加样式属性,如iframe、img、input、div等标签中的align属性,body标签上的background属性,td和tr标签上的height、width、nowrap、bgcolor、valign等属性,iframe标签中的frameborder、marginheight、scrolling等属性。此类属性应该废弃,并通过添加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-weight 和 font-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标签
此类标签包括acronym、applet、dir等,废弃的原因是使用率极低或者是语义有歧义,并且有其他更好代替方案可以使用。例如,表达缩写的标签< acronym >,其语义模糊,开发者更常用来代替;开发者更喜欢使用< ul >而不是 < dir >。

相关文章
|
15天前
|
编解码 前端开发 JavaScript
Web 前端开发中的最佳实践
本文将介绍 Web 前端开发中的最佳实践,包括代码组织、性能优化、响应式设计和用户体验等方面。通过遵循这些实践,开发人员可以提高开发效率,优化用户体验,并减少潜在的问题和错误。
|
6天前
|
前端开发
HTML代码示例
HTML代码示例
10 1
|
6天前
|
搜索推荐
当使用HTML代码时,一些常见的问题
当使用HTML代码时,一些常见的问题
7 0
|
7天前
错误或拦截页面的html代码
错误或拦截页面的html代码
10 0
错误或拦截页面的html代码
|
8天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
8天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
16天前
|
搜索推荐 前端开发 UED
html页面实现自动适应手机浏览器(一行代码搞定)
html页面实现自动适应手机浏览器(一行代码搞定)
17 0
|
21天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
26天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
41 3
Web前端全栈HTML5通向大神之路