-
web语义化的理解
2020-04-23 15:44:50Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而...Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容。
语义化的好处:第一,有利于SE0搜索引擎搜索。
第二,团队开发中,良好的语义化标签,可以减少很多差异化,减少成员间沟通成本,方便开发和后期维护,利于实现模块化开发。
第三,利于屏幕阅读器进行无障碍阅读页面内容。 -
Web语义化的理解
2016-04-14 21:25:051.Web语义化的含义 Web语义化,其实是伴随着Web前端的不断发展和完善,进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化,对Web语义化也提出了更高的要求。 何为Web语义化?个人认为,Web...1.Web语义化的含义
Web语义化,其实是伴随着Web前端的不断发展和完善,进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化,对Web语义化也提出了更高的要求。
何为Web语义化?个人认为,Web语义化是指在进行HTML结构、表现、行为设计时,尽量使用语义化的标签,使程序代码简介明了,易于进行Web操作和网站SEO,方便团队协作的一种标准,以图实现一种“无障碍”的Web开发。
比如下面的一段代码:<header> <h1>标题</h1> </header> <main></main> <footer></footer>
我们很直观地就能知道网页由三部分构成:header、main、footer。代码能直观地告诉搜索引擎和人:这段代码是由头部、主体部分和尾部组成。并且在进行SEO时,这三部分的内容是能够被搜索引擎识别的,这正是我们所希望实现的。
而对于下面的代码:<div> <span>标题</span> </div> <div></div> <div></div>
你能知道这表示的是header、main、footer三部分?显然不能。并且这种问题不是简单通过加
class = "header"
来实现,因为SEO是通过网页的DOM结构来搜索的,并且一个网页中的class是很多的,不要增加没必要的class。
当然在使用CSS和JavaScript时,也要尽量使class、id及函数名等实现见文知意。
而在团队协作中,践行Web语义化使得各前端工程师有一个统一的参照标准,防止了参差不齐的代码使得团队协作效率的低下和代码bug的增多。2.Web语义化的作用
可以归纳为以下3点:
- 语义化的Web结构利于机器识别,方便SEO;
- 语义化的Web结构代码简洁明了,利于人阅读和维护,方便以后扩展;
- 语义化的Web结构利于团队协作,减少出错几率,使工作有个统一标准;3.如何实现代码语义化
其实项目在不同的要求下可能会在Web语义化方面会有不同的方式,但是个人认为,培养自己写代码时遵循Web语义化的方法是相同的。具体可以是如下步骤:
1. 首先要知道Web中的常用标签有哪些,知道每个标签的具体含义和应用场合。这些知识网上有很多资料,比如 菜鸟教程 和 w3cSchool 。这里补充一下, Code Guide 上有很全面的代码书写规范,建议大家也去看看
2. 其次,自己多实践。在敲代码的时候,多想想每个地方的结构是否都符合Web语义化。在练习中不断加深对Web语义化的理解和应用。
3. 最后,多去模仿一些网站的代码,看看别人设计的代码是如何做到Web语义化的,多吸取别人的经验和方法。 -
Web语义化的理解(H5语义化的作用)
2018-06-18 15:23:01Web语义化,简而言之,就是用正确的标签做正确的事。 HTML语义化让页面内容更加结构化,结构更清晰,便于浏览器,搜索引擎解析。语义化让文档更易读,搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重...Web语义化,简而言之,就是用正确的标签做正确的事。
HTML语义化让页面内容更加结构化,结构更清晰,便于浏览器,搜索引擎解析。语义化让文档更易读,搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重,利于SEO;另一方面,使屏幕阅读器能更好的为残疾认识服务,便于阅读和理解。
参考:https://www.zhihu.com/question/20455165
https://www.cnblogs.com/freeyiyi1993/p/3615179.html
-
谈谈你对web语义化的理解
2016-03-11 13:30:22学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够“理解”和处理的网页。...简言之,web语义化的目的是提高计算机和人对web代码的可读性。 网上的解释很多,个人总结分三个阶段比学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够“理解”和处理的网页。 核心思想是标注网页对象使其对应本体中的实体,并通过逻辑等手段进行自动推理。 作用在于更好整合网络上的资源,使计算机能够处理分布于不同位置的信息,自动产生问题的解决方案简言之,web语义化的目的是提高计算机和人对web代码的可读性。网上的解释很多,个人总结分三个阶段比较容易理解。1、原始的一些有实际含义的标签定义。浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签,用于在Web页面中组织对应的内容,如网页标题、表头、无序、有序列表,以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容,又鉴于搜索引擎的巨大流量推荐,Web前端不得不考虑SEO,从而两者实现有益的循环,共同推进着语义化标签的使用。
2、前端开发人员自定义的标签。但Web的发展超乎想象,起初定义的HTML语义化标签,不足以实现对Web页面各个部分的功能或位置描述,所以Web前端人员利用HTML标签的id和class属性,进一步对HTML标签进行描述,如对页脚HTML标签添加如id="footer"或者class="footer"的属性(值),以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。
3、在第二步的推动下结合新技术出现的一些标签。W3C组织意识到了之前HTML版本的不足,推出的HTML5进一步推进了Web语义化发展,采用了诸如footer、section等语义化标签,弥补了采用id="footer"或者class="footer"形式的不足,以更好的推动Web的发展。 正所谓:世上本没有路,走的人多了,也便成了路。参考链接:https://www.zhihu.com/question/20455165/answer/15183794
链接:https://www.zhihu.com/question/20455165/answer/15183203
-
表现与数据分离、web语义化的理解
2019-04-22 22:10:00web语义化是指使用恰当语义的html标签、class类名等,让页面具有良好的结构和含义,使得人和机器都能快速理解网页内容。 web语义化有什么意义 去掉或者丢失样式时可以让页面呈现清晰的结构; 有利于SEO,... -
web语义化理解
2018-03-24 17:35:00Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。 为什么要web语义化?如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而... -
Web 语义化
2021-01-20 14:23:21Web 语义化 = Web的意义。 什么是 Web 语义化? 什么是语义化?其实简单说来就是让机器可以读懂内容。 甲壳虫乐队是一个来自利物浦受欢迎的乐队。 约翰列侬是披头士乐队的成员。 “Hey Jude”是由披头士的代表... -
快速理解web语义化
2019-10-06 15:42:51Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而... -
理解web语义化
2014-01-10 14:23:25后来随着学习的深入,web语义化这个名词不断地被提及。于是乎开始网上搜索这个关键字,很遗憾,可能是自己的功力不够,很难理解网友所说的语义化是什么东西。因为网友所说的东西很凌乱,不够具体,不够全面。都是... -
理解Web语义化
2019-07-04 10:51:33简单的说,就是让机器读懂内容 可以趋向于内容和样式分离 ...所谓语义本身就是对符号的一种共识,被认可的程度越高、范围越广,人们就越可以依赖它实现各种各样的功能。 这是我在知乎上看的一个回答,记录一下... -
浅谈web语义化
2017-05-19 11:15:00关于web语义化的理解 每次在投简历的时候都可以看到这句话:‘对web语义化有深刻的理解’。 个人认为,web语义化是指根据内容的结构(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的... -
理解HTML语义化(WEB语义化)
2017-11-14 17:16:50根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好... -
深入浅出的web语义化理解
2020-11-05 11:54:37从今天起,拒绝使用div设计所有页面格式的布局! -
如何理解Web语义化
2019-01-09 22:25:00HTML是内容的载体。 css样式只是定义表现,人可以直观的感受到,而机器无法理解。...HTML5中,将一些语义化仅是表明样式的元素(比如big、center)都进行了修改或者删除,这些完全可以通过设置... -
web语义化
2017-11-22 15:25:11为什么使用web语义化的HTML结构? web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素的含义,能够让人和搜索引擎都容易理解。如果可以合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰... -
Web语义化
2017-02-13 16:22:00Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。 二、为什么要Web语义化? 去掉样式后页面呈现清晰的结构 盲人使用读屏器更好地阅读 搜索引擎更好地理解... -
【HTML】web语义化理解以及示例
2019-05-21 16:51:12web语义化: html标签语义化,内容和标签尽量贴合,标题用<h1>,页脚用<footer>,而不是统一用<div> 优点: 有助于构架良好的html结构; 有利于搜索引擎的建立索引、抓取; 有利于页面在不同... -
Web语义化标准解读
2020-11-25 23:26:16主要原因在于我们对于Web语义化的理解度不够以及非正确的工作流。 以表现为中心(面向UI) VS 以信息为中心(面向语义) 以表现为中心的工作流: 需求原型 --> UI设计稿 --> 以HTML/CSS实现设计稿 以... -
web前端及HTML语义化的理解
2016-10-29 22:23:001、什么是web前端? WEB前端是由网页设计与制作发展而来的,随着工作的细化,需要有人完成美工图到网页的制作,从而出现了WEB前端开发这个词。...2、什么是HTML语义化? 1.)基本上都是围绕... -
WEB语义化
2016-07-31 11:04:51web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构。css命名的语义化是指:为html标签添加有...