Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > HTML5:web语义化与SEO_html/css_WEB-ITnose

HTML5:web语义化与SEO_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-21 08:49:26
Original
1164 Leute haben es durchsucht

标签的语义认知是HTML5中的一个内容，下图就算HTML5中的元素。

按照元素的默认表现形式还可以分为：块、行内（内联）、内联块3类元素。

  • 块元素：
    、

    、

    ...

    、
      、
      、
      、、
      、
      、
      其样式为： { display: block ; } 。每个块元素从新的一行开始，其后元素也另起一行。元素高度、宽度、行高以及顶和底边距都可设置。宽度默认为100%
    • 行内元素： 、、
    • 内联块： HTML5:web语义化与SEO_html/css_WEB-ITnose、 其样式为： { display: inline-block; } 。内联块元素和其他元素在一行上。但是元素高度、宽度、行高以及顶和底边距都可设置。

      • 使用HTML5风格编写html文件时通过DOCTYPE告知客户端应该怎样解析文档，而HTML直接为 'html', 比如下列例子。

      <!DOCTYPE html>    <html>    <head>        <title></title>    </head>    <body>    </body></html>
      Nach dem Login kopieren

      html5有许多基于结构的元素是来替代div功能或者部分替代功能。所以使用html5时应该遵守的原则：自圆其说，不勉强。

      依据html5规范，一个经典的页面设计如上图。

      先从header说起：header一般包含标题和副标题等。当有多个标题时需要使用hgroup将元素包裹。

      而nav主要的内容为本站的导航信息和介绍性内容。通过使用ol、ul组成路径集合。其他介绍性元素还可以使用有hgroup、h包裹。

      article元素描述页面实际内容，可以使用hgroup、h,或者section、h、p进一步结构化内容,。当然添加header、footer都是可以的。

      section元素描述分组内容信息。在正文需要分组时可以使用。而内容信息还宽裕通过媒体元素（audio、video）描述。embed经常被用来描述flash内嵌内容。当内容需要被描述时，可以使用figure描述与内容有关的信息。

      aside描述与正文不相干的附属信息，一些文章的注意信息或者网站小工具可以通过aside来描述。footer就是页脚信息。

      这一部分更详细的内容可以看 shyleoking 、 IBMDW

      html5为了语义化增补这么多内容，那么语义化到底是什么呢？

      Web语义化简单来说就是为了让机器可以理解数据内容，从而提升人类使用网络获取信息的体验。除了web语义化外，还可以通过人工智能AI来增强机器对于数据的理解。随着email发展的文档模型（BOM、DOM）是方便人类阅读的，要使机器能够理解，从数据到表述的本体的映射，就要使用web语义化。（Hypertext是在文本协议上扩展文档关系的能力）

      HTML规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解HTML文档。就像上文描述，HTML5更是在之前规范的基础上，将所有表现层（presentational）的语义描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。

      更多理解可以看知乎 问答

      搜索引擎就算通过网络爬虫来抓取网站信息并建立索引。比如google的robot和百度的baiduspider。而搜索引擎优化（SEO）是网站相关工作人员用来提高搜索引擎的爬取水平、提高网站排名。这有分为白帽方法和黑帽方法。白帽方法企图发现并纠正使得排名不好的错误，使得对搜索引擎和用户更加友好。比如优化图形内容、包括ALT属性和增加文本说明。

      搜索引擎一般都会发布相关指南，文档内包含遵循搜索引擎哪些可接受哪些不能接受的指导方针。

      比如百度的 百度搜索引擎优化指南 ：

      • 使用文字而不是flash、图片、Javascript等来显示重要的内容或链接
      • 如果必须使用Flash制作网页，建议同时制作一个供搜索引擎收录的文字版，并在首页使用文本链接指向文字版
      • Ajax等搜索引擎不能识别的技术，只用在需要用户交互的地方，不把希望搜索引擎“看”到的导航及正文内容放到Ajax中
      • 不使用frame和iframe框架结构，通过iframe显示的内容可能会被百度丢弃
      • 为每个页面都加上导航栏，让用户可以方便的返回频道、网站首页，也可以让搜索引擎方便的定位网页在网结构中的层次。
      • 通过面包屑导航，用户可以很清楚的知道自己所在页面在整个网站中的位置，可以方便的返回上一级频道或者首页也很方便。
      • 内容较多的网站，建议使用面包屑式的导航，这更容易让用户理解当前所处的位置：网站首页 > 频道 > 当前浏览页面
      • 导航中使用文字链接，不使用复杂的js或者flash
      • 使用图片做导航时，可以使用Alt注释，用Alt告诉搜索引擎所指向的网页内容是什么
      • 如果网站中同一网页，只对应一个url
      • 如果站点临时关闭，当网页不能打开时，不要立即返回404，建议使用503状态。503可以告知百度spider该页面临时不可访问，请过段时间再重试。
      • 如果百度spider对您的站点抓取压力过大，请尽量不要使用404，同样建议返回503。这样百度spider会过段时间再来尝试抓取这个链接，如果那个时间站点空闲，那它就会被成功抓取了。
      • 有一些网站希望百度只收录部分内容，例如审核后的内容，累积一段时间的新用户页等等。在这种情况，建议新发内容暂时返回403，等审核或做好处理之后，再返回正常状态的返回码。
      • 站点迁移，或域名更换时，请使用301返回。
      • 善用Meta description

      google也发布了 谷歌搜索引擎优化初学者指南 ：

      • 创建独特、准确的页面标题
      • 更好地使用描述元标签
      • 优化URL的结构
      • 让您的网站更易于检索和浏览
      • 提供高质量的内容和服务
      • 写好链接锚文本
      • 优化图片的使用
      • 正确使用heading标签
      • 更加有效地使用robots.txt文件
      • 谨慎使用rel=“nofollow”

      上述都属于白帽方法，而黑帽方法利用和放大搜索引擎的策略缺陷（实际上完美的系统是不存在的）获取更多用户访问量。这也是web开发不提倡的。

      总之白帽、黑帽的判断方法，就是你做这个东西是否对用户有价值。

      上述还说道搜索引擎对于AJAX的信息抓取。百度好像是不支持抓取，而google已经支持抓取了。而我们可以通过html的history API来让搜索引擎获取单页网页更新内容。具体可以看ruanyifeng的 文章

Verwandte Etiketten：
HTML5:web语义化与SEO
Quelle：php.cn
Vorheriger Artikel：用simple choker制作融合效果的菜单_html/css_WEB-ITnose Nächster Artikel：网页设计下一步学习？_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2324
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2459
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
2074
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1959
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
2029
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage