仓酷云

标题: 给大家带来语义化的网页:XHTML语义化标志 [打印本页]

作者: 金色的骷髅 时间: 2015-1-15 23:17
标题: 给大家带来语义化的网页:XHTML语义化标志
HTML5开发的网页文档类型极其简单，就够了，记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.网页制造poluoluo文章简介：分别布局与体现的另外一个主要方面是利用语义化的标志来机关文档内容。
分别布局与体现的另外一个主要方面是利用语义化的标志来机关文档内容。一个XHTML元素的存在就意味被标志内容的那部分有响应的布局化的意义，没有来由利用其他的标志。换句话说，不要让CSS使一个HTML元素看起来就像另外一个HTML元素，好比用<div>来取代<p>标志题目。

起首是关于语义（Semantics）和默许款式的区分，默许款式是扫瞄器设定的一些经常使用tag的体现情势，团体以为他的次要目标就是让人人直不雅的熟悉标签(markup)和属性(attribute)的用处和感化，很分明Hx系列看起来很像题目，由于具有粗体和较年夜的字号。<strong>,<em>用来区分于其他笔墨，起到了夸大的感化。至于列表和表格很分明的告知你他们是做甚么的。

其次，语义化的网页的优点，最次要的就是对搜刮引擎友爱，又了优秀的布局和语义你的网页内容天然简单被搜刮引擎抓取，你网站的推行即可以省下很多的工夫。

详细的语义和用处在，XHTML1.0TAG参考中都已申明，这里将一些简单忘记大概搅浑的TAGS和属性予以增补。

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为题目利用，而且根据主要性递加。<h1>是最高的品级。
比方:
复制内容到剪贴板代码:

<h1>文档题目</h1>
<h2>次级题目</h2>而不要利用
<divclass="title">文档题目</div>，大概<spanclass="title">文档题目</span>.很分明搜刮引擎关于后者是不会以为他是题目的。

<p>

段落标志，晓得了<p>作为段落，你就不会再利用<br/>来换行了，并且不必要<br/><br/>来辨别段落与段落。<p></p>中的笔墨会主动换行，并且换行的效果优于<br>。段落与段落之间的清闲也能够使用CSS来把持，很简单并且明晰的辨别出段落与段落。在使用行高(line-height)很简单的界说出行间距，再界说首字下沉等效果，那就挺完善了。
比方：复制内容到剪贴板代码:

<p>蓝色幻想www.blueidea.com出生于1999年的10月。从建立之初，蓝色幻想就以建立网站计划与开辟职员之家为主旨，以先容收集开辟手艺与网站创作计划交换为次要内容。其网站内容制造优良，天天城市有会员经心制造的教程公布，忘我地对网友举行匡助，并且还举行过很多计划竞赛并开辟了良多今朝仍被很多网站使用的相干程序。而所公布的作品与点评遭到了多家媒体存眷及内行的好评，同时也从中建立了本人的社会位置，因而一批又一批的收集同仁加盟了蓝色幻想，成为国际最年夜的计划类站点之一。
</p>
<p>多年来，蓝色幻想的内容不休充分，前后被国际一些出名网站、传统媒体重点推介过，并连续被Google、百度、雅虎、搜狐、新浪、Excite等各年夜搜刮站点保藏，并在Google、百度、Yahoo三年夜搜刮引擎中以简体汉字关头词"网站计划与开辟”搜刮排名均为第一，如今蓝色幻想已开展成为国际影响最年夜的网站计划、开辟的专业网站之一。</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>

dl就是“界说列表”。好比说辞书内里的词的注释、界说就能够用这类列表。
比方：复制内容到剪贴板代码:

<dl>
<dt>Dog</dt>
<dd>AcarnivorousmammalofthefamilyCanidae.</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来给援用计划款式了，可是这个没有语义上的意义。您能够读读MarkPilgrim写的TheQtag(http://diveintomark.org/archives/2002/05/04/the_q_tag)关于处置<q>相干成绩的意见。
关于那些一段大概好几段的长篇援用，就应该利用<blockquote>了。CSS能够用来界说援用的款式。注重，一段文章是不成以间接放在<blockquote>中的，援用的内容还必需包括在一个元素中，一般是<p>。属性cite既能够与<q>一同用，也能够与<blockquote>一同用，用来供应援用内容的来历地点。必要注重的是，假如你利用<span>来取代<q>标志援用内容,那末你就不克不及利用cite属性了。

比方:复制内容到剪贴板代码:

<cite>DesigningwithWebStandards</cite>isanexcellentbookbyJeffreyZeldman.复制内容到剪贴板代码:

<p><cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>复制内容到剪贴板代码:

<p>TheW3Csaysthat<qcite="http://www.w3.org/TR/REC-html40/
struct/text.html#h-9.2.1">Thepresentationofphraseelements
dependsontheuseragent.</q>.</p>复制内容到剪贴板代码:

<blockquotecite="http://www.w3cn.org/">
<p>“我们年夜部分人都有深入体验，每当支流扫瞄器版本的晋级，我们刚创建的网站便可能变得过期，
我们就必要晋级大概从头制作一遍网站。比方1996-1999年典范的"扫瞄器年夜战"，
为了兼容Netscape和IE，网站不能不为这两种扫瞄器写分歧的代码。一样的，
每当新的收集手艺和交互设备的呈现，我们也必要制造一个新版原本撑持这类新手艺或新设备，
比方撑持手机上彀的WAP手艺。相似的成绩不胜枚举：网站代码痴肥、冗杂华侈了我们大批的带宽；
针对某种扫瞄器的DHTML殊效，屏障了部分潜伏的客户；不容易用的代码，残障人士没法扫瞄网站等等。
这是一种恶性轮回，是一种伟大的华侈。”</p>
</blockquote><em>、<strong>

<em>是用作夸大的，<strong>是用作重点夸大的。年夜部分扫瞄器用斜体显现夸大的内容，用粗体来显现重点夸大的内容，但是，这是没有需要的，假如是为了断定夸大内容的显现体例，最好的办法就是利用CSS来界说他们的体现。当你想要的只是视觉上的效果时，就不要利用夸大了。并且假如你想要夸大可是还以为粗体大概斜体不视觉效果没那末好，出格是斜体关于中文来讲，那末你完整能够界说一些其他的对照夺目的款式到达夸大的效果。
比方:复制内容到剪贴板代码:

<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用于界说表头单位格中的缩写名，假如没有界说该属性，则将默许单位格内容为节略情势。
比方:复制内容到剪贴板代码:

<tableid="mytable"cellspacing="0"summary="ThetechnicalspecificationsoftheApplePowerMacG5series">
<caption>Table1:PowerMacG5techspecs</caption>
<tr>
<thscope="col"abbr="Configurations"class="nobg">Configurations</th>
<thscope="col"abbr="Dual1.8">Dual1.8GHz</th>
<thscope="col"abbr="Dual2">Dual2GHz</th>
<thscope="col"abbr="Dual2.5">Dual2.5GHz</th>
</tr>
<tr>
<thscope="row"abbr="Model"class="spec">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<thscope="row"abbr="G5Processor"class="specalt">G5Processor</th>
<tdclass="alt">Dual1.8GHzPowerPCG5</td>
<tdclass="alt">Dual2GHzPowerPCG5</td>
<tdclass="alt">Dual2.5GHzPowerPCG5</td>
</tr>
<tr>
<thscope="row"abbr="Frontsidebus"class="spec">Frontsidebus</th>
<td>900MHzperprocessor</td>
<td>1GHzperprocessor</td>
<td>1.25GHzperprocessor</td>
</tr>
<tr>
<thscope="row"abbr="L2Cache"class="specalt">Level2Cache</th>
<tdclass="alt">512Kperprocessor</td>
<tdclass="alt">512Kperprocessor</td>
<tdclass="alt">512Kperprocessor</td>
</tr>
</table>效果观察：http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

<dfn>复制内容到剪贴板代码:

<p><dfntitle="Microsoftwebbrowser">InternetExplorer</dfn>isthemostpopularbrowserusedunderwater.</p><ins>,<del>

晓得del，就不要再用<s>做删除线了，用del明显更具有语义化。并且del还带有cite和datetime来标明删除的缘故原由和删除的工夫。ins是暗示拔出，也有如许的属性。
比方：复制内容到剪贴板代码:

<p>Itreallywas<inscite="rarara.html"datetime="20031024">very</ins>good.</p><code>

暗示是盘算机代码。而默许款式为打字体。手艺论坛和blog中常常碰到。
比方：复制内容到剪贴板代码:

<code>p{margin:2px0;}</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
比方:复制内容到剪贴板代码:

<abbrtitle="CascadingStyleSheets">CSS</abbr>复制内容到剪贴板代码:

<acronymtitle="CascadingStyleSheets">CSS</acronym>alt属性和title属性

title属性用来为元素供应分外申明信息title属性能够用在除base，basefont，head，html，meta，param，script和title以外的一切标签。可是并非必需的。
alt属性为不克不及显现图象、窗体或applets的用户代办署理（UA），指定交换笔墨。交换笔墨的言语由lang属性指定。复制内容到剪贴板代码:

<imgsrc="/img/common/logo.gif"width="90"height="27"alt="bluediea.com">复制内容到剪贴板代码:

<ahref="http://www.jluvip.com/blog/article.asp?id=260"title="js猎取单选按钮的数据">js猎取单选按钮的数据</a>参考材料:
默许款式：
http://www.w3cn.org/article/tips/2005/116.html
http://www.w3.org/TR/CSS21/sample.html
语义化:
http://www.456bereastreet.com/lab/developing_with_web_standards/zh
http://www.456bereastreet.com/lab/developing_with_web_standards
http://www.w3cn.org/article/translate/2005/114.html
http://www.w3cn.org/article/translate/2005/114.html
http://www.junchenwu.com/2005/11/html_tags.html
http://brainstormsandraves.com/articles/semantics/structure/
http://www.w3.org/TR/html401/struct/text.htm
http://www.simplebits.com/bits/simplequiz/

资本链接：
BadTags：
http://www.htmldog.com/guides/htmlintermediate/badtags/
TheQtag
http://diveintomark.org/archives/2002/05/04/the_q_tag
HTML,XHTML,semanticsandthefutureoftheweb
http://www.westciv.com/style_master/house/good_oil/xhtml/index.html</p>
最近群里面很多人在问html5应该怎么学，这个问题其实没有标准答案。我开这个帖子，目的是为了收集大家每天的学习心得，欢迎大家来回复。

作者: 第二个灵魂 时间: 2015-1-25 13:09
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 简单生活 时间: 2015-2-2 22:15
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 乐观 时间: 2015-2-8 14:11
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 冷月葬花魂 时间: 2015-2-25 19:04
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 爱飞 时间: 2015-3-8 02:42
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

作者: 飘飘悠悠 时间: 2015-3-15 21:58
可以使用 CSS 检查工具进行设计。

作者: 仓酷云 时间: 2015-3-22 16:46
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)