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

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

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

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

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

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

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

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

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

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

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

xml

<list>
    <item></item>
<list>

html

<title> 页面标题
<h1> 标题
<p> 段落
<a> 链接
<ul> 无序列表
<ol> 有序列表

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

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

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

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

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

目录
相关文章
|
15天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
22 1
|
6月前
|
移动开发 前端开发 搜索推荐
详解一下HTML的语义化标签
详解一下HTML的语义化标签
|
6月前
|
数据采集 搜索推荐 前端开发
HTML语义化 —— 定义网页的语义
HTML语义化 —— 定义网页的语义
24 0
|
15天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
1月前
|
移动开发 搜索推荐 HTML5
HTML语义化标签
HTML语义化标签
|
2月前
|
前端开发 JavaScript
html原理
html原理
96 2
|
3月前
|
存储 缓存 移动开发
详细介绍HTML5的离线储存(工作原理+使用场景+真实使用步骤)
详细介绍HTML5的离线储存(工作原理+使用场景+真实使用步骤)
|
3月前
|
搜索推荐 UED SEO
探索 HTML 语义化:让你的网页更有意义(下)
探索 HTML 语义化:让你的网页更有意义(下)
探索 HTML 语义化:让你的网页更有意义(下)
|
3月前
|
搜索推荐 UED 索引
探索 HTML 语义化:让你的网页更有意义(上)
探索 HTML 语义化:让你的网页更有意义(上)
探索 HTML 语义化:让你的网页更有意义(上)
|
3月前
|
数据采集 移动开发 前端开发
HTML语义化的理解
HTML语义化的理解
14 0