重学基础和原理 1 - 如何理解 HTML 语义化

2020-03-17 17:11:12 浏览数 (1)

返璞归真,重学基础和原理 - 第1篇

每日一记,重新梳理下对前端基础知识的理解

做业务开发时间久了,很多基础的知识慢慢被遗忘,但往往这些基础和原理性的知识才是最重要的,丢不得。

其实这个问题在我们开发的时候根本不会遇到,只会出现在面试中。

那如果是你,你怎么回答呢?

语义化可以这样理解,对比下我们生活中人和人沟通交流,要想更高效的将信息传达出去或者解决问题,就需要想办法表达清楚,要语义明确,有逻辑性。

同样 html 语义化也是为了让计算机和人能更好的读懂和理解。

语义化可以大大的提高代码的可读性,我们平时写的js css 代码肯定不是随意定义变量,而是会取一些有意义的名称,让自己和其他人能更快的读懂,比如 num,size,width,height等。

另外对于搜索引擎也是有好处的,有利于搜索引擎更好的分析网页的内容给你,通过读取内容,分析这些特殊标签,可以判断这段内容的类型和重要性,比如 h1表示的就是页面标题,p 就是段落内容。

当然你可以只使用 div 一个标签来实现整个页面的布局,但是不推荐这样做,这样就完全失去了语义化的意义。另外使用语义化的标签后,即便网页没有样式,依然能保持页面呈现清晰的主次结构,使你的页面可读性较高,如果全用 div,这是完全做不到的。

html 也属于 xml,符合 xml 标准,但html不能自定义标签,而是提供了一些固定的标签,这些固定标签都是有特殊意义的,目的就是为了语义化。

xml

代码语言:javascript复制
<list>
    <item></item>
<list>

html

代码语言:javascript复制
<title> 页面标题
<h1> 标题
<p> 段落
<a> 链接
<ul> 无序列表
<ol> 有序列表

到了html5,又增加了很多新标签,语义化更强。

代码语言:javascript复制
<article>文章
<header>页头
<footer>页脚
<address>	地址
<code>	代码
<menu>	菜单
<nav>	导航
<canvas> 画布
...

比如 b和strong, b 就是表示这段内容加粗,无语义化,一个样式上的处理,,而 strong 虽然也是表示加粗,但它用于强调被包裹的内容在整个html页面的重要性,更具语义化和人性化。

无论从何种角度来说,违背语义化的标签,都应该让它消失在历史的长河之中。

W3C 给我们制定了很好的标准,如果在团队开发中大家都遵循这个标准,就可以大大减少差异化内容,从而方便开发和维护,提高开发效率。

读者必看:既然读到了这里,就别这么快离开,奔着学习和交流的目的,可以思考下我说的对不对,有没有问题,和你的理解有什么不同。所以请思考片刻,留下你的足迹,交流是进步最快的途径。

0 人点赞