相关文章
做个自己站内搜索引擎
网站建设用Dreamweaver实现Real与网页结合
网页设计解决Dreamweaver不支持中文文件名方法
网站设计网页文字界面设计与穿衣搭配经验
北京网站建设HTML元素语义的分类
北京网站制作Photoshop简单几步为张靓颖减轻笑纹
北京网站建设HTML在IE网页浏览器中的专有条件注释
网站建设网页中的小三角用DIV+CSS的做法与使用
企通互联Web开发时碰到的问题以及心得经验
www.qitongnet.com字符串MD5加密
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 网站制作网页制作基础：HTML标签和属性的语义化
网站制作网页制作基础：HTML标签和属性的语义化
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题。 Www^Chinaz^com
首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
具体的语义和用途在，XHTML1.0 TAG 参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。 Chinaz^com
<Hx> Chinaz@com
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。 中国.站.长站
例如： Www^Chinaz^com
<h1> 网站设计文档标题</h1> 中国站长.站
<h2>次级标题</h2>
Chinaz
而不要使用 Chinaz.com
<div class="title">文档标题</div>，或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。
<p>
Www^Chinaz^com
段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。 中.国站长站
例如：
Chinaz
<p>在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。</p> 中国站长_站,为中文网站提供动力
<ul>、<ol>、<li>
<ul>无序列表，很常见的到了大家广泛的使用，<ol>有序列表也挺常用。在web标准化过程中，<ul>还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。 中.国.站长站
例如：
中.国.站长站
| 以下为引用的内容：北京网页设计 <ul>北京网站建设 <li>项目一</li>北京网站建设 <li>项目二</li> 北京网站建设网站制作 <li>项目三</li>北京网站设计 </ul>企通互联 <ol>网站制作 <li>第一章</li>企通互联 <li>第二章</li>网站制作 <li>第三章</li>北京网站建设 </ol> |
中国.站.长站
<dl>、<dt>、<dd> Www~Chinaz~com
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
站.长站
例如： Chinaz_com
| 以下为引用的内容：网页设计 <dl>北京网站建设 <dt>Dog</dt>网站设计 <dd>A carnivorous mammal of the family Canidae.</dd>北京网站制作 </dl> 网站设计 <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来给引用设计样式了，但是这个没有语义上的意义。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在<blockquote>中的，引用的内容还必须包含在一个元素中，通常是<p>。属性cite既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。
例如： 中国.站长站
| 以下为引用的内容：网页设计 <cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.北京网站设计 <p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>北京网站建设 <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 www.qitongnet.com网站建设 depends on the user agent.</q>.</p>北京网站制作 <blockquote cite="http://www.w3cn.org/">网页设计 <p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时， Www_Chinaz_com 北京网站制作我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，北京网站建设 为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，北京网站设计 每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，网站建设 例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；网站制作 针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。北京网页设计 这是一种恶性循环，是一种巨大的浪费。”</p>北京网站建设 </blockquote> |
<em>、 <strong>
<em> 是用作强调的，<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。 Www@Chinaz@com
例如：
Chinaz.com
| 以下为引用的内容：北京网站建设 <p><em>强调</em> 的文本通常用斜体显示，北京网站建设 然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>企通互联 <table>、<td>、<th>、< caption >、 summary |
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
中国站.长站
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下： 中.国站长站
row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
站.长站
col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。 Www^Chinaz^com
rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。 Www_Chinaz_com
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如： 中国站.长站
| 以下为引用的内容：网站建设 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">北京网页设计 <p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>网站建设 站.长.站
|
网页设计知道 网站建设del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。 Chinaz^com
例如： Chinaz.com
| 以下为引用的内容：北京网站设计 <p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>企通互联 <code> |
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。 Www@Chinaz@com
例如： Chinaz_com
| 以下为引用的内容：网站设计 <code>p{margin:2px 0;}</code>网站制作 中国.站长站
<abbr>标签是表示web页面上的简称，<acronym>标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用<acronym>标签）Windows的IE6.0以下的浏览器暂不支持<abbr>标签。 在IE里，你可以应用CSS给<acronym>但是不能应用给<abbr>标签，IE会为<acronym>标签的title属性显示提示，但是会忽略<abbr>标签。 中国站长.站 |
例如：
| 以下为引用的内容：网站设计 <abbr title="Cascading Style Sheets">CSS</abbr>网站建设 <acronym title="Cascading Style Sheets">CSS</acronym> |
alt属性和title属性 Www~Chinaz~com
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。 中国站长_ 企通互联站,为中文网站提供动力
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
| 以下为引用的内容：企通互联 <img src="/images/logo.gif" width="90" height="27" alt="webjx.com"/>北京网站设计 |