前端语义化

更新日期: 2019-04-22 阅读: 2.3k 标签: 语义化

一、什么是语义化?

语义化是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。


二、如何理解语义化?

语义化的意图主要在于能让人和机器快熟的理解内容或者代码的含义,用中国的一句俗语来理解就是"见人说人话,见鬼说鬼话"。 例如我们在页面寻找一个标题

// 非语义化标签查找
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的页面这些设备如何区分那些是主要内容优先阅读

有利于构建清晰的结构,有利于团队的开发、维护



本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!

链接: https://fly63.com/article/detial/4341

对W3C标准,对表现与数据分离、Web语义化等有深刻理解

网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。所以W3C对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等

npm 语义化版本控制

为了在软件版本号中包含更多意义,反映代码所做的修改,产生了语义化版本,软件的使用者能从版本号中推测软件做的修改。npm 包使用语义化版控制,我们可安装一定版本范围的依赖,npm 会选择和你指定的版本相匹配的最新版本安装。

表现与数据分离、web语义化的理解

什么是表现与数据分离?一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数据。二是前端页面展现与数据处理分离

对HTML语义化的一些理解和记录

通俗的来讲就是从代码上来展示页面的结构,而不是从最终视觉上来展示结构。单纯的HTML代码是不带任何样式的只是用来标记这一段是标题、这一块是代码、那一个是要强调的内容等等

正确使用这7个HTML5语义标签,提升网站可用性

HTML5语义化标签不是装饰品,而是为网站提供清晰结构的工具。很多开发者随意使用这些标签,导致屏幕阅读器无法正确识别、搜索引擎难以理解页面结构、CSS样式变得脆弱。问题不在于使用div标签,而在于错误地使用了语义化元素。

语义化HTML在React开发中的正确使用

语义化HTML指的是使用具有明确含义和角色的HTML元素,而不是仅仅关注外观表现。简单来说,就是用对的标签做对的事。使用div或span并没有错,关键是要明确意图。如果元素添加了结构或含义,就用语义化标签。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!