一、什么是语义化? 在解释这个概念之前,应该先解释下“结构-表现-行为”。如果说解耦合是代码的高境界,那么“结构-表现-行为”的原则就是前台的标杆。随着前端代码的越来越庞大,各部分代码的作用就越来越重要了。大家知道,前端代码是有HTML + CSS + javascript来实现的。他们对应的就是负责“结构-表现-行为”。 HTML负责结构。 结构是什么?结构就是HTML节点的层次、嵌套关系等。如例: <header> 上面的代码展示了该文档结构为 header、section、footer是同级的。然后h1是header的直接子节点,换句话说就是他们之间也就一层的嵌套。 但是,有个问题,看下面的代码 <div> 这段代码不也展现出了结构吗?而且显示效果而上面的没有区别(这里我假设H1默认是16px,bold的样式),那上面的代码和这段比起来的优势是什么呢? 优势,其实就在语义化。 二、为什么要语义化? 总结三点: 1.方便机器理解代码,利于SEO:还拿上面两段代码举例子,第二段代码,别说机器了,就是人也看不出它表达的意思啊。而第一段代码无论是人还是机器,都是可以去理解的。 2.代码更简洁,复用性更高。使用合适的标签,可以少些很多css或者js。 代码更简洁:这个显而易见了。第二段代码多了样式的定义,而第一段没有。 复用性更高:假如这段HTML结构有很多地方用,那么第一段的适用场景更多。比如第二段代码固定了16像素加粗,而第一段代码只是指明这是个h1,你不重写那么就用h1样式,你若重写了h1,那就用你的。 少写css:在代码简洁那里说了,就不重复了。少写js。 3.访问性更好 这个主要就是针对读屏器或者其他一些对CSS理解不好的浏览器。语义化的HTML可以做到脱离CSS还能看,而非语义化的就难了。 三、如何让自己代码语义化? 首先,需要掌握常用的标签,包括标签代表的含义。 其次,在你写html的时候,常常去想想,这么写是否满足了语义化的要求。 最后,经常看一些大公司的网站、开源项目代码,其实大家都会这么做,但当你看他们css如何写的,js如何写的时候,请抽出一点点时间,思考一下他们为什么这样写。 这样,我相信慢慢的你的HTML代码语义化会越来越好。 |
|
来自: 新用户5967EJDR > 《html》