语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。
语义化的意图主要在于能让人和机器快熟的理解内容或者代码的含义,用中国的一句俗语来理解就是"见人说人话,见鬼说鬼话"。 例如我们在页面寻找一个标题
// 非语义化标签查找
if(this == '这可能是一个内容是标题的标签'){
if(this == '这个标签里面是标题') {
console.log('找到了')
}
}
// 语义化
if(this == '这是一个标题标签'){
console.log('找到了')
}
标签 | 含义 |
---|---|
<header> | 用于规定文档或节的页眉 |
<nav> | 定义导航链接 |
<main> | 规定文档的主内容 |
<footer> | 定义文档或节的页脚 |
<section> | 定义文档中的节 |
<article> | 定义文章 |
<aside> | 定义页面内容以外的内容 |
<details> | 定义用户能够查看或隐藏的额外细节 |
<summary> | 定义 <details> 元素的可见标题 |
<figcaption> | 定义 <figure> 元素的标题 |
<time> | 定义日期/时间 |
<figure> | 规定自包含内容,比如图示、图表、照片、代码清单等 |
<mark> | 定义重要的或强调的文本 |
标签语义化有助于构架良好的html结构,有利于搜索引擎的建立索引、抓取。简单来说,试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
有利于不同设备的解析(屏幕阅读器,盲人阅读器等)满是div的页面这些设备如何区分那些是主要内容优先阅读
有利于构建清晰的结构,有利于团队的开发、维护
网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。所以W3C对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等
为了在软件版本号中包含更多意义,反映代码所做的修改,产生了语义化版本,软件的使用者能从版本号中推测软件做的修改。npm 包使用语义化版控制,我们可安装一定版本范围的依赖,npm 会选择和你指定的版本相匹配的最新版本安装。
什么是表现与数据分离?一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数据。二是前端页面展现与数据处理分离
通俗的来讲就是从代码上来展示页面的结构,而不是从最终视觉上来展示结构。单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!