《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 >。

相关文章
|
6月前
精美按钮式广告代码HTML分享
精美按钮式广告代码HTML分享
118 4
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
350 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
203 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
9月前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
130 30
|
9月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
129 29
|
10月前
|
数据采集 数据处理
将html_table2结果转化为tibble的最佳实践
本文介绍了如何使用 `html_table2` 和 `tibble` 进行网页表格数据的采集和处理。通过结合代理 IP 技术,展示了如何高效地从汽车之家网站(https://www.autohome.com.cn/)抓取汽车品牌和价格信息,并将其转化为适合分析的 `tibble` 格式。文章详细讲解了数据清洗和转换的最佳实践,提供了完整的代码示例。
165 11
将html_table2结果转化为tibble的最佳实践
|
11月前
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
293 49
|
11月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
214 6
|
11月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
285 5
|
11月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
135 5