javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 网站技术 > DivCss教程

HTML标签和属性怎样语义化

来源:IT技术网编辑:雨天发布于:2017-01-22人围观

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部门有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,好比用<div>来代替<p>标记标题。


首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人以为他的主要目的就是让大家直观的熟悉标签(markup)和属性(attribute)的用途和作用,很显著Hx系列看起来很像标题,由于拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了夸大的作用。至于列表和表格很显著的告诉你他们是做什么的。


其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容天然轻易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。


详细的语义和用途在,XHTML1.0 TAG 参考中都已经说明,这里将一些轻易遗忘或者搅浑的TAGS和属性予以增补。


<Hx>


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


CODE:
<h1>文档标题</h1>
<h2>次级标题</h2>


而不要使用
<div class="title">文档标题</div>,或者<span class="title">文档标题</span>.很显著搜索引擎对于后者是不会以为他是标题的。


<p>


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


CODE:
<p以建设网站设计与开发职员之家为宗旨,以先容网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,天天都会有会员精心制作的教程发布,无私地对网友进行匡助,而且还举办过不少设计比赛并开发了良多目前仍被很多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为海内最大的设计类站点之一。 
</p>
<p>多年来,蓝色理想的内容不断充实,先后被海内一些着名网站、传统媒体重点推介过,并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点珍藏,并在Google、百度、Yahoo三大搜索引擎中以简体汉字枢纽词"网站设计与开发”搜索排名均为第一,现在蓝色理想已发展成为海内影响最大的网站设计、开发的专业网站之一。<


<ul>、<ol>、<li>


<ul>无序列表,很常见的到了大家广泛的使用,<ol>有序列表也挺常用。在web尺度化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表,这样做是完全准确的,而且当你的浏览器不支持CSS的时候,导航链接仍旧很好使,就是美观方面差了一点。
例如:


CODE:
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>


CODE:
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</ol>


语义化你的HTML标签和属性


分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部门有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,好比用<div>来代替<p>标记标题。


首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人以为他的主要目的就是让大家直观的熟悉标签(markup)和属性(attribute)的用途和作用,很显著Hx系列看起来很像标题,由于拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了夸大的作用。至于列表和表格很显著的告诉你他们是做什么的。


其次,语义化的网页的好处,最主要的就是对搜索引擎友好,又了良好的结构和语义你的网页内容天然轻易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。


详细挠镆搴陀猛驹冢琗HTML1.0 TAG 参考中都已经说明,这里将一些轻易遗忘或者搅浑的TAGS和属性予以增补。


<Hx>


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


CODE:
<h1>文档标题</h1>
<h2>次级标题</h2>


而不要使用
<div class="title">文档标题</div>,或者<span class="title">文档标题</span>.很显著搜索引擎对于后者是不会以为他是标题的。


<p>


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


CODE:
<p以建设网站设计与开发职员之家为宗旨,以先容网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,天天都会有会员精心制作的教程发布,无私地对网友进行匡助,而且还举办过不少设计比赛并开发了良多目前仍被很多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为海内最大的设计类站点之一。 
</p>
<p>多年来,蓝色理想的内容不断充实,先后被海内一些着名网站、传统媒体重点推介过,并陆续被Google、百度、雅虎、搜狐、新浪、Excite等各大搜索站点珍藏,并在Google、百度、Yahoo三大搜索引擎中以简体汉字枢纽词"网站设计与开发”搜索排名均为第一,现在蓝色理想已发展成为海内影响最大的网站设计、开发的专业网站之一。<


<ul>、<ol>、<li>


<ul>无序列表,很常见的到了大家广泛的使用,<ol>有序列表也挺常用。在web尺度化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表,这样做是完全准确的,而且当你的浏览器不支持CSS的时候,导航链接仍旧很好使,就是美观方面差了一点。
例如:


CODE:
<ul>
    <li>项目一</li>
    <li>项目二</li>
    <li>项目三</li>
</ul>


CODE:
<ol>
    <li>第一章</li>
    <li>第二章</li>
    <li>第三章</li>
</ol>


<dl>、<dt>、<dd>


dl就是“定义列表”。好比说词典里面的词的解释、定义就可以用这种列表。
例如:


CODE:
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>


CODE:
<dl>
    <dt>上海滩</dt>
    <dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
    当年在香港播出以后,产生了巨大的轰动效应。</dd>
    <dt>周润发</dt>
    <dd>和所有伟大的影星一样,周润发印证了一个时代,一个香港片子的黄金时代。
风衣墨镜、冷血双枪、阳光微笑,都封存胶片之中,当我们回顾回头寻望的时候,发哥已被刻为一个时代的坐标。</dd>
</dl>


<cite>、cite 、<q>、 <blockquote>


论坛和blog常常会用到引用别人的话,用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是,IE不能识别,并且有些时候, <q>会引起一些可访问性(Accessibility)的题目。正由于如斯,一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容,那么就可以用CSS来给引用设计样式了,但是这个没有语义上的意义。 您可以读读Mark Pilgrim写的The Q tag  (http://diveintomark.org/archives/2002/05/04/the_q_tag )关于处理<q>相关题目的看法。
对于那些一段或者好几段的长篇引用,就应当使用 <blockquote>了。CSS可以用来定义引用的样式。留意,一段文章是不可以直接放在<blockquote>中的,引用的内容还必需包含在一个元素中,通常是<p>。属性cite既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。需要留意的是,假如你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。例如:


CODE:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.


CODE:
<p> <cite>孔子</cite>曰:<q>学而不思则罔,思而不学则殆</q>.</p>


CODE:
<p>The W3C says that <q cite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">The presentation of phrase elements
depends on the user agent.</q>.</p>


CODE:
<blockquote cite="http://www.w3cn.org/">
    <p>&#8220;我们大部门人都有深刻体验,每当主流浏览器版本的进级,我们刚建立的网站就可能变得过期,
我们就需要进级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",
为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,
每当新的网络技术和交互设备的泛起,我们也需要制作一个新版本来支持这种新技术或新设备,
例如支持手机上网的 WAP 技术。类似的题目举不胜举:网站代码臃肿、繁杂铺张了我们大量的带宽;
针对某种浏览器的 DHTML 殊效,屏蔽了部门潜伏的客户;不易用的代码,残障人士无法浏览网站等等。
这是一种恶性轮回,是一种巨大的铺张。&#8221;</p>
</blockquote>


<em>、 <strong>


<em> 是用作夸大的,<strong>是用作重点夸大的。 大部门浏览器用斜体显示夸大的内容,用粗体来显示重点夸大的内容,然而,这是没有必要的,假如是为了确定夸大内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用夸大了。而且假如你想要夸大但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到夸大的效果。
例如:


CODE:
<p><em>夸大</em> 的文本通常用斜体显示,
然而, <strong>特别夸大</strong> 的文本通常以粗体显示。</p>


<table>、<td>、<th>、< caption >、 summary


XHTML中的表格不应用来布局。然而假如是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下:
row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。
col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。
rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名,假如没有定义该属性,则将默认单元格内容为节略形式。
例如:


 

CODE:


<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
  <tr>
    <th scope="col" abbr="Configurations" class="nobg">Configurations</th>


    <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    <th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
  </tr>
  <tr>
    <th scope="row" abbr="Model" class="spec">Model</th>
    <td>M9454LL/A</td>


    <td>M9455LL/A</td>
    <td>M9457LL/A</td>
  </tr>
  <tr>
    <th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th>
    <td class="alt">Dual 1.8GHz PowerPC G5</td>
    <td class="alt">Dual 2GHz PowerPC G5</td>


    <td class="alt">Dual 2.5GHz PowerPC G5</td>
  </tr>
  <tr>
    <th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th>
    <td>900MHz per processor</td>
    <td>1GHz per processor</td>
    <td>1.25GHz per processor</td>


  </tr>
  <tr>
    <th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
    <td class="alt">512K per processor</td>
  </tr>


</table>


<dfn>


CODE:
<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>


<ins>, <del>


知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。
例如:


CODE:
<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
<code>


表示是计算机代码。而默认样式为打字体。技术论坛和blog中常常碰到。
例如:


CODE:
<code>p{margin:2px 0;}</code>


<abbr>、<acronym>


<abbr>标签是表示web页面上的简称,<acronym>标签为取首字母缩写。(注:这里把简称和缩写分开而论,简称范围比缩写大,取首字母的缩
写用<acronym>标签)Windows的IE6.0以下的浏览器暂不支持<abbr>标签。 在IE里,你可以应用CSS给<acronym>但是不能应用给<abbr>标签,
IE会为<acronym>标签的title属性显示提示,但是会忽略<abbr>标签。
解决方法见: http://www.w3cn.org/article/translate/2005/115.html
例如:


CODE:
<abbr title="Cascading Style Sheets">CSS</abbr>


CODE:
<acronym title="Cascading Style Sheets">CSS</acronym >


alt属性和title属性


title属性用来为元素提供额外说明信息title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必需的。
alt属性为不能显示图像、窗体或applets的用户代办代理(UA),指定替代文字。替代文字的语言由lang属性指定。


CODE:
<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com">


CODE:
<a href="http://www.jluvip.com/blog/article.asp?id=260" title="js获取单选按钮的数据">js获取单选按钮的数据</a>

与相关的文章
有时间的话来看看IT界的突发事件