来源:自学PHP网 时间:2014-12-15 15:59 作者: 阅读:次
[导读] 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。...
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记。换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题。 复制内容到剪贴板
而不要使用代码:<h1>文档标题</h1> <div class="title">文档标题</div>,或者<span class="title">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。 <p> 段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距,再定义首字下沉等效果,那就挺完美了。 例如: 复制内容到剪贴板
<ul>、<ol>、<li>代码:<p>蓝色理想 www.blueidea.com 诞生于1999年的10月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。 <ul>无序列表,很常见的到了大家广泛的使用,<ol>有序列表也挺常用。在web标准化过程中,<ul>还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持CSS的时候,导航链接仍然很好使,就是美观方面差了一点。 例如: 复制内容到剪贴板
代码:<ul> 复制内容到剪贴板
<dl>、<dt>、<dd>代码:<ol> dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。 例如: 复制内容到剪贴板
代码:<dl> 复制内容到剪贴板
<cite>、cite 、<q>、 <blockquote>代码:<dl> 论坛和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属性了。 例如: 复制内容到剪贴板
代码:<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/ 复制内容到剪贴板
<em>、 <strong>代码:<blockquote cite="http://www.w3cn.org/"> <em> 是用作强调的,<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容,用粗体来显示重点强调的内容,然而,这是没有必要的,如果是为了确定强调内容的显示方式,最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时,就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好,特别是斜体对于中文来说,那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。 例如: 复制内容到剪贴板
<table>、<td>、<th>、< caption >、 summary代码:<p><em>强调</em> 的文本通常用斜体显示, XHTML中的表格不应用来布局。然而如果是为了标记列表的数据,就应该使用表格了。<th>为表格标题,属性summar为摘要,<caption>标签为首部说明,<thead>标签为表格头部,<tbody>标签为表格主体内容,<tfoot>标签为表格尾部。 其中还可以使用scope 可用于取代headers属性,标记含有表头信息的单元格,其中各数值的内容如下: row 指示当前单元格,为包含当前单元格的行提供相关的表头信息。 col 指示当前单元格,为根据当前单元格指定的列提供相应的表头信息。 rowgroup 指示当前单元格,为包含当前单元格的其余行组提供相关的表头信息。 colgroup 指示当前单元格,为根据当前单元格指定的其余列组提供相应的表头信息。 abbr 用于定义表头单元格中的缩写名,如果没有定义该属性,则将默认单元格内容为节略形式。 例如: 复制内容到剪贴板
效果察看:http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm代码:<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <dfn> 复制内容到剪贴板
<ins>, <del>代码:<p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p> 知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。 例如: 复制内容到剪贴板
<code>代码:<p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p> 表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。 例如: 复制内容到剪贴板
<abbr>、<acronym>代码:<code>p{margin:2px 0;}</code> <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 例如: 复制内容到剪贴板
代码:<abbr title="Cascading Style Sheets">CSS</abbr> 复制内容到剪贴板
alt属性和title属性代码:<acronym title="Cascading Style Sheets">CSS</acronym > title属性用来为元素提供额外说明信息title属性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。但是并不是必须的。 alt属性为不能显示图像、窗体或applets的用户代理(UA),指定替换文字。替换文字的语言由lang属性指定。 复制内容到剪贴板
代码:<img src="/img/common/logo.gif" width="90" height="27" alt="bluediea.com"> 复制内容到剪贴板
参考资料: 代码:<a href="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/ 资源链接: Bad Tags: http://www.htmldog.com/guides/htmlintermediate/badtags/ The Q tag http://diveintomark.org/archives/2002/05/04/the_q_tag HTML, XHTML, semantics and the future of the web http://www.westciv.com/style_master/house/good_oil/xhtml/index.html |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com