·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设问答 >> 构建网站友好性基础 语义化网站的html标签

构建网站友好性基础 语义化网站的html标签

作者:佚名      网站建设问答编辑:admin      更新时间:2022-07-23

分离的结构和表现的一个作用就是可以用语义化的标签来标识文档的内容。在半结构化的xhtml代码里每个标签都有他代表的独特意义。在现实生活中人脑可以轻易的分辨出网页上文章标题和小节标题的区别,但是当下搜索引擎技术还不成。如果网页上所有文字都是用<p>做标签的话,搜索引擎可能真的很难分辨不出来文章真实的主题内容是那段文字。

关于标签的语义化的理解有方面。第一面是面向浏览者方便阅读的语义化,这个主要是在使用浏览器阅读网页的时候给予文字以特殊标识,使浏览者更容易分辨出那些是网页文字的重点内容,以便于更方便的阅读。第二方面是面向搜索引擎分析所用的语义化处理,友好的语义化标签能使搜索引擎更好的抓取和分析网页上的内容。如果说让网页能够跟搜索引擎尽可能深入交流的话,那么对网页标签进行语义化处理是再好不过了。

下面我们来讨论关于语义化的内容。
<Hx>

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

例如
<h1>主标题</h1>
<h2>次标题</h2>
而不要使用
<div class="title">主标题</div>
<div class="title">次标题</div>
搜索引擎是不能分清楚谁是主标题,谁是副标题的。

<p>

段落标记,知道了<p>作为段落,你就会放弃用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br/>。关于搜索引擎方面<p>代表定义主题文字,<p>内的文字会被搜索引擎认为是网页上的描述主要内容文字区。

例如
<p>HTML3.0规范是由当时刚成立的W3C于1995年3月提出,提供了很多新的特性,例如表格、文字绕排和复杂数学元素的显示。</p><p>虽然它是被设计用来兼容2.0版本的,但是实现这个标准的工作在当时过于复杂,在草案于1995年9月过期时,标准开发也因为缺乏浏览器支持而中止了。</p>


<ul>、<ol>、<li>

<ul>无序列表标签,<ol>有序列表标签也是经常使用到的。在web标准化过程中,<ul>还被更多的用于导航条,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很实用。另外还有一个好处是<ul><ol>的代码相对<table>而言比较少,对网页下载十分有利。在此并无其他含义。

例如
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>
例如
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</ol>


<dl>、<dt>、<dd>

dl就是“定义列表”。现在来对无序列表标签和有序列表标签语义化效果进行对比。例1的语义化后代表列表的标题是dog,描述的内容是A carnivorous mammal of the family Canidae.
例2的语义化后代表列表的标题是《大话西游》剧情点评,描述的内容是我面对的,是一部痛彻心肺的喜剧.寓言篇故事已然存在,已然不可避免。在深切的郁闷中来到了二十来岁,突然就看懂了《大话西游》的开头:一位才华横溢又无法无天的青年(孙悟空),根本不喜欢世人摊派给他的大事业(西天取经)。他尤其受不了师父(唐僧)的唠唠叨叨,可世俗条规(观音)又不放过他。为让他悔悟,心甘情愿地去取经,唐僧和观音达成妥协:让他五百年后重新做人。

例如1
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>

例如2
<dl>
 <dt>《大话西游》剧情点评</dt>
    <dd>我面对的,是一部痛彻心肺的喜剧.寓言篇故事已然存在,已然不可避免。 </dd>
    <dd>在深切的郁闷中来到了二十来岁,突然就看懂了《大话西游》的开头:一位才华横溢又无法无天的青年(孙悟空),根本不喜欢世人摊派给他的大事业(西天取经)。他尤其受不了师父(唐僧)的唠唠叨叨,可世俗条规(观音)又不放过他。为让他悔悟,心甘情愿地去取经,唐僧和观音达成妥协:让他五百年后重新做人。</dd>
</dl> 

<em>、 <strong>

<em> 是用作强调的,<strong>是用作重点强调的。大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。但是,要面对搜索引擎<em>和<strong>的标签就大有用处,适当使用<em>、<strong>标签可以突出网页内关键词是什么,是seo工作的首选标签。


例如
<em>强调</em> 的文本通常用斜体显示,
<strong>特别强调</strong> 的文本通常以粗体显示。