在上一篇文章主要学习了怎么使用语义类标签和正确使用的一些场景,那么具体在哪些场景适合用到,又该怎么运用呢?
这里通过一个例子来做一个语义类标签的学习,找一篇 wiki 文章,通过文章的结构用语义类标签来进行学习,例如:
html语义,div和span不是够用了吗
在前面的学习过程中,总体了解了语义是什么意思,那这里的学习主要是说说在 div 和 span 标签明显可以满足使用条件的情况下为什么还非要使用具有明确语义的标签来处理。
语义类标签是什么,使用它的好处
语义类标签是前端工程师在工作中经常用到的一类标签,它们的特点是视觉表现上互相差不多,主要的区别在于它们表达了不同的语义,比如常见的 section、nav、p 标签等,这些都是语义标签。
语义是我们说话表达的意思,多数的语义都是由文字来承载;而语义类标签则是纯文字的补充,比如标题,自然段,章节,列表等,这些内容仅仅纯文字是无法表达的,所以就需要用语义标签来代为表达。
而我们在开发的工作中,经常都很少用到语义化的标签,而是直接用 div 和 span 全部搞定;那这样做到底行不行呢?毫无疑问,这样肯定是可以的。那这样做到底好不好呢?呵呵,套路说法就是不好,但是在很多情况下,答案其实是好。
整理知识架构
整理一份属于自己的知识架构不仅仅是将 MDN 这样的参考手册和一些其他的语言标准进行总结,而是知识架构有属于自己的特点,它的目标一个是把无法通过查阅解决的原理和背景讲清楚,另一个是把不方便查阅和记忆的内容进行整理。主要就是通过整理一份前端知识架构,再把知识做一个遍历,如果让我做一个划分,前端的知识在总体上分为基础部分和实践部分,基础部分包含了 JavaScript 部分(模块一)、CSS 和 HTML(模块二) 以及浏览器的实现原理和 API(模块三),这几个模块基本上包含了前端需要掌握的所有知识;实践部分(模块四)的重点主要就是在工作中遇到的问题和解决方案。
明确前端学习路线与方法
目前,前端工程师岗位在工作中的重要性越来越明显,可以与之相对的是,能够在大学期间真正的系统性的学习前端知识的同学确实不多,也没有系统性的教学方案出现;大部分的前端工程师的知识都是通过自学或者其它论坛和视频进行的零散学习过程组成的,这样的现状就会导致一些问题:
首先是前端的基础知识,一些前端开发工程师包括我自己,在有时候看见大佬认为很基础的 JavaScript 语法的时候会产生“还能这样”的疑问;这里,基础知识的欠缺就会让我们束手束脚,更加限制了解决问题的思路。
其次,技术上存在的短板就会成为上升通道的阻碍,技术短板只会让你陷入重复性劳动的陷阱,最终耽误自己的职业发展。
除此之外,前端工程师也会面临技术发展问题带来的挑战,前端社区高度活跃,前端技术也在快速更新,这样蓬勃发展的技术无疑来说是一个好事,但是问题也是显而易见的,它使得前端工程师的学习压力变得特别大。
就拿 JavaScript 标准来说, ES6 中引入的新特性是过去十年的总和,新特性带来的实践就更多了,仅仅一个 Proxy 的引入,就让 Vuejs2.0 到 Vuejs3.0 的内核原理得到了完全的升级;在技术不断革新的大背景下,前端工程师保持自我学习的能力就非常重要了。
重新认识前端
前端发展史:从青铜到黄金时代
在零几年的时候,前端技术还非常羞涩,那会儿的前端基本处于“青铜时代”,甚至网页的交互都还是依靠切换链接来进行处理。
- 前端的“青铜时代” (记忆)
在这个时候(零几年),谷歌刚刚基于 Ajax
发布的 Gmail 也没不久,虽然这项伟大的技术标志着 Web1.0(静态网页) 到 Web2.0(动态网页) 的迈进,但是国内很少有人懂,要是能够对当时的 Ajax
技术侃侃而谈,那肯定会被当做大牛对待。
当时,不仅国内的技术潮流跟不上,连国内专业讲解前端技术的书籍都不是很多很全,这个时候要是有认知进入前端领域的人一定是有预知自己发展道路的眼光;这在当时肯定是一个不可思议的想法,因为当时的前端不管是在岗位收入还是职责上都不及其他岗位。