做前端开发的同学都知道,一个网页的基本组成部分是 HTML,JavaScript 和 CSS。开发人员通常更关注 JavaScript 和 CSS ,实践着各种语言规范和设计模式。对于 HTML 的关注度则明显偏少,只要能做出设计师画的界面就万事大吉了,不怎么去关心 HTML 是不是规范合理。于是下面的情况随处可见:
- 按钮用的是可点击的
<div>
而不是<button>
元素 - 标题用的是
<div>
而不是标题元素 (<h1>
,<h2>
等等) <input>
相应的文本标签用的是<div>
而不是<label>
- 输入框也用绑定了键盘事件的
<div>
,而不是<input>
看到没?一招 <div>
走天下!这样有没有问题?好像也没什么大问题,毕竟页面看起来符合设计,也能正常交互。但是你想过没有,如果<div>
能解决一切,为什么还需要其余几十上百种标签呢?这就要说到 HTML 的语义化了。