重学基础和原理 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 给我们制定了很好的标准,如果在团队开发中大家都遵循这个标准,就可以大大减少差异化内容,从而方便开发和维护,提高开发效率。

目录
相关文章
|
11天前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
21 9
|
10天前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
14 4
|
1月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
69 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
2月前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
22 1
|
2月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
22 0
前端基础学习(一)HTML入门
|
2月前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
23 0
|
3月前
|
存储 移动开发 缓存
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
31 2
|
3月前
|
移动开发 搜索推荐 UED
HTML标签的语义化:为何重要及其实践
HTML标签的语义化:为何重要及其实践
35 0
|
3月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
132 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)