在页面中应用文本层语义元素

发布日期:2015-08-06 17:38:20
来看看网站首页主要内容部分的标签,看它能不能给用户代理提供更好地语义。当前的
标签结构如下:
<!-- the content -->
<div id="content">
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
<h1>北京网站建设梦创义科技</span></h1>
<p>that films like King Kong, Moulin Rouge and Munich get the statue whilst
the real cinematic heroes lose out. Not very Hollywood is it?</p>
<p>We're here to put things right. </p>
<a href="#">these should have won &raquo;</a>

</div>

在页面中应用文本层语义元素

确实可以对这些代码做些改善。首先, <h1> 标签中的 <span> 标签在上下文中毫无语义,而我们想要在样式中为其设置强调效果,所以在 HTML代码中也应该如此:
<h1>Every year <em>when I watch the Oscars I'm annoyed...</em></h1>还需要给电影名称设置不同的样式,但它们不需要带有不同的语气或语态。看来在此处
使用 <b> 标签很合适:
<p>that films like <b>King Kong</b>, <b>Moulin Rouge</b> and <b>Munich</b> get the

statue whilst the real cinematic heroes lose out. Not very Hollywood is it?</p>

最后,当我说“‘we’re here to put things right”时,我的意思是我不是瞎胡闹的,而且我
想让用户代理(浏览器)知道这点。所以最后,我们将这句话使用 <i> 标签包裹。你可
能会争论说此处应该使用 <em> 标签, <em> 其实也可以,但我准备使用 <i> 。修改后的代
码如下:
<p><i>北京网页设计</i></p>

和 <b> 元素一样,浏览器默认会将 <i> 中的文本渲染为斜体,如果需要,就重定义其默认
样式吧。
现在我们给网页主要内容中添加了一些文本级语义元素。 HTML5还有大量文本级语义标
签,想要全面了解,请查看 HTML5标准中的相关章节其实,再付出一点点努力,使用辅助技术为用户提供额外的语义,可以使我们的语义化工作更上一层楼。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计