关注移民留学生活
当前位置:网站首页 > 移民项目 > 正文

-baijiahao,关于HTML语义化

作者:huaxiayeshi发布时间:2021-01-09分类:移民项目浏览:0评论:0


导读:-baijiahao一、什么是语义化?在解释这个概念之前,应该先解释下“结构-表现-行为”。如果说解耦合是代码的高境界,那么...

-baijiahao

一、什么是语义化?

在解释这个概念之前,应该先解释下“结构-表现-行为”。如果说解耦合是代码的高境界,那么“结构-表现-行为”的原则就是前台的标杆。随着前端代码的越来越庞大 ,各部分代码的作用就越来越重要了 。大家知道,前端代码是有 + + 来实现的。他们对应的就是负责“结构-表现-行为 ”。

HTML负责结构 。

结构是什么?结构就是HTML节点的层次 、嵌套关系等。如例:

 header 

h1 /h1 /header section /section footer /footer

上面的代码展示了该文档结构为 header、section、footer是同级的。然后h1是header的直接子节点,换句话说就是他们之间也就一层的嵌套 。

但是 ,有个问题,看下面的代码

 div 

span >

这段代码不也展现出了结构吗?而且显示效果而上面的没有区别(这里我假设H1默认是16px,bold的样式),那上面的代码和这段比起来的优势是什么呢?

优势,其实就在语义化。

二 、为什么要语义化?

总结三点:

1.方便机器理解代码,利于SEO:还拿上面两段代码举例子 ,第二段代码,别说机器了,就是人也看不出它表达的意思啊。而第一段代码无论是人还是机器 ,都是可以去理解的 。

2.代码更简洁,复用性更高。使用合适的标签,可以少些很多css或者js。

代码更简洁:这个显而易见了 。第二段代码多了样式的定义 ,而第一段没有 。

复用性更高:假如这段HTML结构有很多地方用 ,那么第一段的适用场景更多。比如第二段代码固定了16像素加粗,而第一段代码只是指明这是个h1,你不重写那么就用h1样式 ,你若重写了h1,那就用你的。

少写css:在代码简洁那里说了,就不重复了 。少写js。

3.访问性更好

这个主要就是针对读屏器或者其他一些对CSS理解不好的浏览器。语义化的HTML可以做到脱离CSS还能看 ,而非语义化的就难了 。

三、如何让自己代码语义化?

首先,需要掌握常用的标签,包括标签代表的含义。

其次 ,在你写html的时候,常常去想想,这么写是否满足了语义化的要求。

最后 ,经常看一些大公司的网站、开源项目代码,其实大家都会这么做,但当你看他们css如何写的 ,js如何写的时候 ,请抽出一点点时间,思考一下他们为什么这样写 。

这样,我相信慢慢的你的代码语义化会越来越好。

如何理解html语义化理解HTML语义化-fliu-博客园HTML语义化专题(一)—如何理解HTML语义化?火山君-博客...什么是语义化HTML?有何意义?为什么要做到语义化?...相关推荐其他人还搜了如何理解 html css 语义化html语义化是什么-简书html标签语义化_定义_优点-头条百科关于HTML语义化的问题?知乎关于HTML语义化-月潇潇-博客园关于HTML语义化的一些理解-简书10.好程序员Web前端教程:10 HTML语义化HTML5:语义化标签004html块-语义化的标签_recv如何理解HTML结构的语义化7.HTML表格元素及语义化HTML5:新增语义化结构标签HTML教程 pt01.上午03-语义化标签Java语言学习14._HTML标签_语义化标签02-HTML5提高-新增语义化标签【免费试听】一节课学会 HTML(文档结构+常见标签+语义化)

标签:-baijiahao


欢迎 发表评论:

移民项目排行
文章标签
类似推荐