精华内容
下载资源
问答
  • Web 语义化

    2021-01-20 14:23:21
    Web 语义化 单词语义化表示了它的意义。 事物的语义化意味着事物。 Web 语义化 = Web的意义。 什么是 Web 语义化? 什么是语义化?其实简单说来就是让机器可以读懂内容。 甲壳虫乐队是一个来自利物浦受欢迎的...
  • web语义化

    2017-11-22 15:25:11
    很多招聘信息中提到web语义化,我将自己收集整理的资料总结与你们分享一下: 先提几个问题,为什么使用语义化的HTML?语义化的 HTML有什么好处? 为什么使用web语义化的HTML结构? web语义化是指使用语义恰当的...

    WEB 语义化 

    很多招聘信息中提到web语义化,我将自己收集整理的资料总结与你们分享一下:

    先提几个问题,为什么使用语义化的HTML?语义化的 HTML有什么好处?

    为什么使用web语义化的HTML结构?

    web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素的含义,能够让人和搜索引擎都容易理解。如果可以合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面内容,予以较高的重视。HTML5的一大改革就是语义化标签的改善。

    其实简单的来说就是让机器可以读懂内容。web页面的解析是由搜索引擎来进行搜索,机器来解析。所以语义化的标准是尽可能的让机器读懂。人可以通过视觉的划分判断内容的语义,搜索引擎看到的是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以尽可能地使用标签语义化。

    最初的HTML中如h1~h6、thead、ul、ol等标签,通过标签的语义,最初设计的想法,来达到语义化的要求。如标题、表头、无序、有序列表,搜索引擎很好的利用了这些语义化标签抓取内容

    后来,最初定义的HTML语义化标签,不足以实现对Web页面各个部分的功能或位置描述,所以Web前端人员利用HTML标签的id和class属性,进一步对HTML标签进行描述,如对页脚HTML标签添加如id="footer"或者class="footer"的属性(值),以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。

    制定HTML5的W3C组织采用了诸如header、footer、section等语义化标签,来进行页面布局的设计想法,弥补了采用id="header"或者class="section"等。

    语义化HTML结构到底有什么好处呢?

    1、去掉或样式丢失的时候能让页面呈现清晰的结构

    <h1>加粗,字体大小2em;<strong>是加粗的,这不是html的表现而是默认的css样式。浏览器都有默认的样式,默认样式的目的是为了更好的表达html语义。可以说浏览器的默认样式和语义化的html标签是不可分割的。(h1和div的样式对比

    2、屏幕阅读器会完全根据你的标记来“读”你的网页

    例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音。

    3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱)。

    4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.

    过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户。没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

    5、你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记.

    因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后。除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。
    SEO主要还是靠你网站的内容和外部链接的

    6、便于团队开发和维护

    W3C给我们定了一个很好的标准,在团队中大家都遵循这个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发

    参考:https://www.cnblogs.com/p2227/p/3586725.html    http://blog.csdn.net/li2274221/article/details/25188497      http://www.mamicode.com/info-detail-482090.html






    展开全文
  • WEB语义化

    2016-07-31 11:04:51
    web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构。css命名的语义化是指:为html标签添加有...

    web语义化是指通过HTML标记表示页面包含的信息,包含了HTML标签的语义化和css命名的语义化。


    HTML标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构。


    css命名的语义化是指:为html标签添加有意义的class,id补充未表达的语义。


    为什么需要语义化:

    去掉样式后页面呈现清晰的结构
    盲人使用读屏器更好地阅读
    搜索引擎更好地理解页面,有利于收录
    便团队项目的可持续运作及维护

    展开全文
  • Web语义化

    2018-09-19 14:47:06
    什么是Web语义化?  如今互联网已经到了web3.0时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作的网页也从当初的table表格嵌套发展到了div+css,这是进步的标志。然而我们似乎看到了一个不太好...

    什么是Web语义化?

        如今互联网已经到了web3.0时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作的网页也从当初的table表格嵌套发展到了div+css,这是进步的标志。然而我们似乎看到了一个不太好的想象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一种html标签存在,这种div滥用现象使得网页制作似乎就只剩下了div。时代是进化着的,所以,诞生了web语义化这个概念。包括两个方面:html语义化及css命名语义化

    web语义化可以简单的理解为:用便于理解的特定语言来定义特定的事物

    为什么要web语义化?

        首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能的对搜索引擎友好,所以就要尽可能地使标签语义化。

        以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,p等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为css很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

    div语义:division(分隔)

    span语义:span(范围)

    ol语义:ordered list(有序列表)

    ul语义:unordered list(无序列表)

    li语义:list item(列表项)

    …………

        如果无视标签语义和默认样式,所有标签都用div,其实也是可以写出来视觉效果很好的页面,只要你灵活运用css。但是那样的话虽然视觉上达到了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂,所以,要记住:

        结构html才是重点,样式css是用来修饰结构的,所以,要先确定html,确定标签,再来选用合适的css。

        其次,SEO的时候我们经常用h1来突出标题,用strong来突出关键字,这确实就是语义化的体现。就目前的搜索引擎来说并不能像访客那样很直观的去查看网页,它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题,我们或许会这样写:

    <div id="title">文章的标题</div>

    访客或许能理解我们的意思,但搜索引擎就要反复揣摩了,更好的讨好搜索引擎我们可以这样来写:

    <h1>这是标题</h1>

    注意:h1拥有最高的权值,在一个页面中最好只使用1个h1来突出你的内容,太多的h1会分散其整个页面的权重,对搜索引擎也是非常的不友好。

    语义化优势:

        正如上边的小例子,语义化的代码更小,下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。当然语义化代码也是我们能力的体现。

    怎样进行语义化?

    1、html语义化

        简而言之,就是在你看到内容的时候想想用什么标签能更好的的描述它,就用什么标签。很明显Hx系列看起来更像标题,因为拥有粗体和较大的字号,<strong>,<em>用来区别与其他文字,起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明细的告诉你他们是做什么的。如:

    <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减,<h1>是最高的等级。

    <p>段落标记,知道了<p>作为段落,我们就不会再使用<br/>来换行了,而且不要<br/><br/>来区分段落与段落。<p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用css来控制,很容易而且清晰的区分出段落与段落。再利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就更完美了。

    2、css命名语义化

        一般而言,css类名的语义化声明方式应当考虑你的页面中某个相对元素的“用意”,像left-bar,red-text,small-title……这些都属于结构化定义的例子。

    让我们看看下面的这个例子:

        而现在我们想把页面中的元素调换一下位置,如果你使用的事结构化方式(1),那么你就要把所有css类重新进行定义,因为他们的位置变了。在布局(3)中,我们看到元素都倒转了:right-bar现在成了“left-bar”,而left-content成了“right-content”,如果你使用语义化方式则避免了此类问题。

        换句话说,使用语义化方式的话,你在修改网站布局的时候可以仅仅修改相关css类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。

    参考链接:

    http://blog.bingo929.com/css-coding-semantic-naming.html  CSS代码命名惯例语义化的方法

    https://blog.csdn.net/yzy1840/article/details/4712166 HTML语义化

    https://blog.csdn.net/li2274221/article/details/25188497 关于web语义化

    展开全文
  • 关于Web语义化

    千次阅读 2014-05-07 10:14:35
    对于“web语义化”这个词语我相信只要是从事前端的人都不陌生,当然我对这个词语也是非常熟悉,我相信从事前端工作的同事在投简历时都会在招聘需求里面看到这句话:“对web语义化有深刻的理解”,当然我本人也是从某...

    对于“web语义化”这个词语我相信只要是从事前端的人都不陌生,当然我对这个词语也是非常熟悉,我相信从事前端工作的同事在投简历时都会在招聘需求里面看到这句话:“对web语义化有深刻的理解”,当然我本人也是从某公司的招聘需求里看到的这个词语,那么到底什么是web语义化?它有什么作用?现将我自己收集整理的资料与大家分享一下:

    • 什么是web语义化

    如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,这是进步的标志。然而,我们似乎看到了一个不太好的现象:整个网页大量的使用div标签进行分隔页面内容,有的甚至整个页面只有div一 种html标签存在。这种现象(使用习惯)非常的不好,滥用现象使得网页制作似乎就只剩下了div。刚才说了,时代是在进化着的,所以,诞生了web语义化 这个概念。而它又包含两个方面:html语义化及css命名语义化。

    首先抽象的说下语义(Semantic)的概念:“语义可以简单地看作是数据所对应的现实世界中的事物所代表的概念的含义,以及这些含义之间的关 系,是数据在某个领域上的解释和逻辑表示。”那么web语义化也可以简单的理解为:用特定的语言来定义特定的事物。

    • 为什么要web语义化?

    首先,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

    以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,p等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为CSS很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

    div 语义:Division(分隔)

    span 语义:Span(范围)

    ol 语义:Ordered List(排序列表)

    ul 语义:Unordered List(不排序列表)

    li 语义:List Item(列表项目)

    …………

    如果无视标签语义和默认样式,所有标签都用div,其实也是可以写出来视觉效果很好的页面,只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂。所以,要记住:

    结构(html)才是重点,样式(css)是用来修饰结构的。所以,要先确定html,确定标签,再来选用合适的css

     其次,SEO的时候我们经常用h1来突出标题,用strong来突出关键字,这确实就是语义化的体现。就目前的搜索引擎来说并不能想访客那样很直观的去查看网页,它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题, 我们或许会这样写:

    <div id=”title”>文章的标题</div>

    访客或许能理解我们的意思,但搜索引擎就要反复揣摩了,更好的讨好搜索引擎我们可以这样来写:

    <h1>这是标题</h1>

    小提示:h1拥有最高的权值,在一个页面中最好指使用1个h1来突出你的内容,太多的h1会分散其整个页面的权重,对搜索引擎也是非常的不友好。

    当然语义化还有其他优势:

    正如上面那个例子,语义化的代码更小,下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。语义化代码也更能帮助视障的人通过设备来理解我们的内容等等。当然语义化代码也是我们能力的体现。

    • 怎样进行web语义化?

    1、html语义化

    一个 html元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让css使一个html元素看起来就像另一个html元素,比如用<div>来代替<p>标记标题。简而言之,就是你在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong> ,<em> 用来区别于其他文字,起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明显的告诉你他们是做什么的。如:

    <Hx>

    <h1>、<h2> 、、<h5> 、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

    <p>

    段落标记,知道了<p> 作为段落,我们就不会再使用 <br/> 来换行了,而且不要 <br/> <br/> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br> 。段落与段落之间的空隙也可以利用css来控制,很容易而且清晰的区分出段落与段落。在利用行高 (line-height) 很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。

    2、css命名语义化

    一般而言,CSS类名的语义化声明方式应当考虑页面中某个相对元素的”用意”,独立于它的“定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

    让我们看看下面这个例子:

    01

    …而现在我们想把页面中的元素调换一下位置,如果我们使用的是结构化方式(1),那么我们就要把所有css类名重新进行定义,因为它们的位置变了。在布局(3)中,我们看到元素都倒转了: right-bar 现在成了 “left-bar”,而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

    02

    换句话说,使用语义化方式的话,我们在修改网站布局的时候可以仅仅修改相关CSS类的属性即可,而不用修改它们的类名了,如果网站的代码很庞大,这将节省大量的时间。

    参考网站:

    http://www.hunuo.com/zhuanti/web20/4086.html  加深对HTML和CSS标签语义化的理解

    http://wfb927.diandian.com/post/2010-03-31/40028523685  有关WEB前端中的语义化

    http://blog.csdn.net/yzy1840/article/details/4712166  HTML语义化

    http://blog.bingo929.com/css-coding-semantic-naming.html  CSS代码命名惯例语义化的方法


    作者:leejiru

    本文地址:http://studio.ewe.com.cn/?p=455

    转载请注明:EWE工作室 » 关于Web语义化—张振强


    展开全文
  • Web语义化详解

    2016-07-21 14:51:27
    [align=center]Web语义化详解[/align] [b]1.1概述[/b] Web语义化主要包括:HTTP语义化、HTML语义化和CSS命名语义话。 [b]1.2 HTTP语义化[/b] HTTP语义化是针对HTTP协议的。主要包括path路径语义话和...
  • Web语义化的理解

    千次阅读 2016-04-14 21:25:05
    1.Web语义化的含义 Web语义化,其实是伴随着Web前端的不断发展和完善,进而提出的概念。在如今随着Web前端“结构-表现-行为”的原则不断细化,对Web语义化也提出了更高的要求。  何为Web语义化?个人认为,Web...
  • web语义化及其好处

    千次阅读 2017-12-12 13:39:47
    Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面...
  • 什么是web语义化

    2019-12-23 17:11:29
    一、什么是web语义化web语义化是指,通过html标记表示页面包含的信息,包含了HTML标签的语义化和Css命名的语义化。 其中,html标签语义化是指,包含语义的标签恰当的表示文档结构,例如h1-h6 总结起来就是: ...
  • Apache Jena (web 语义化框架)简介 Apache Jena 3.1.1 发布了,Apache Jena 是用于构建 web 语义化和关联数据应用程序的 Java 框架。 Apache Jena (web 语义化框架)更新内容: 改进 JSON-LD 输出 完成 F&O ...
  • web语义化的理解

    2020-04-23 15:44:50
    Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而...
  • 浅谈web语义化

    千次阅读 2019-02-24 20:46:26
    浅谈web语义化 觉得很好的一篇文章,转载过来,原文链接https://www.cnblogs.com/p2227/p/3586725.html web语义化是什么 HTML5标准出来的时候,我曾经诧异为什么要定义这么多header footer nav article标准,DIV...
  • Web语义化,简而言之,就是用正确的标签做正确的事。 HTML语义化让页面内容更加结构化,结构更清晰,便于浏览器,搜索引擎解析。语义化让文档更易读,搜索引擎的爬虫也依赖HTML标记来确定上下文和各个关键字的权重...
  • 什么是 web 语义化,有什么好处

    千次阅读 多人点赞 2020-08-25 15:05:22
    web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签的语义化和 css 命名的语义化。 HTML 标签的语义化是指:通过使用包含语义的标签(如 h1-h6)恰当地表示文档结构
  • 何谓WEB语义化
  • 什么是 web 语义化web 语义化是指通过 HTML 标记表示页面包含的信息,包含了 HTML 标签的语义化和 CSS 命名的语义化。 HTML 标签的语义化是指:通过使用包含语义的标签(如h1-h6)恰当地表示文档结构 。CSS 命名的...
  • 理解web语义化

    2014-01-10 14:23:25
    后来随着学习的深入,web语义化这个名词不断地被提及。于是乎开始网上搜索这个关键字,很遗憾,可能是自己的功力不够,很难理解网友所说的语义化是什么东西。因为网友所说的东西很凌乱,不够具体,不够全面。都是...
  • 什么是web语义化 如今互联网都到了web2.0的时代了,HTML语言在不断的进化并发挥着越来越重要的地位;而我们制作网页也从当初的table表格嵌套发展到了 div+css,这是进步的标志。然而,我们似乎看到了一个不太好的...
  • web语义化 在广义方面 在代码编译方面 页面布局和架构 布局 架构 开发人员会有一些困惑: 开发经理也会有一些困惑: 用户会对这些事情感到烦恼: 架构的本质是什么?其实也是一种管理。 常见的前端产品形态包括: ...
  •  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 2、为什么要语义化? 为了在没有CSS的情况下,页面也能呈现出很好...
  • 谈谈你对web语义化的理解

    千次阅读 2016-03-11 13:30:22
    学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够“理解”和处理的网页。 核心思想是标注网页对象使其对应本体中的实体,并通过逻辑等手段进行自动推理。 作用在于更好整合网络上的资源,使...
  • Semantic Web 语义化web

    千次阅读 2014-04-19 00:06:34
    W3C又从Linked Data,Vocabularies,Query,Inference,Vertical Applications,五个方面来阐述语义化页面,主要是把semantic Web看成满是数据的网页,由于赋予数据更多额外的意义使得人 们能够对数据做更多的事情,...
  • 首先,在理解之前,我们需要先了解,什么是语义化。所谓语义化,简单来说,就是能够更清晰,更直观的理解语言所要表达的含义,所谓词必达意就是这个意思。那么在开发过程中的语义化指的是什么呢?就是能够让除了当事...
  • 表现与数据分离、Web语义化

    千次阅读 2017-08-30 10:04:16
    学术界将web语义化称为Web3.0的核心。 目标是:提高计算机和人对于web代码的可读性。 核心思想是:标注网页对象*使其对应本体中的实体,并通过逻辑等手段进行自动推理。 作用在于更好整合网络上的...
  • WEB语义化和W3C标准初探

    千次阅读 2017-12-22 18:34:18
    W3C标准包括定义 w3c(World Wide Web Consortium)标准:是一些列web标准的集合,在百度上面搜索也只是告诉你w3c标准主要对应几个...4.其他标准,包括字体,安全,语义化很多方面的内容。 W3C standards defin

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,752
精华内容 37,900
关键字:

web语义化