符合语意的网页结构

1,117 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,117
On SlideShare
0
From Embeds
0
Number of Embeds
190
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

符合语意的网页结构

  1. 1. 符合语意的网页结构
  2. 2. <ul><li>怎么会有这一讲 </li></ul><ul><li>自从 CSS 被业界重视,人们对前端的重视就开始逐渐集中到 CSS 上,却往往忘记了 CSS 是建立在 HTML 的基础上的。加上国内的网页基本上只是在 PC 浏览器上浏览,所以对网页结构标签的语意化要求基本上没有,以至于到今日,仍然有很多网页还是有很多不符合语意的结构标签。 </li></ul><ul><li>很多人认为语意化的标签意义不大,其实并不是这样的。不合语意的标签也往往是兼容性问题的开始,并且不利于搜索引擎对关键词的抓取。一旦缺少 CSS 的支持,页面将会面目全非。 </li></ul><ul><li>对程序的完美追求应该是每个程序员的追求! </li></ul>
  3. 3. <ul><li>什么是符合语意 </li></ul><ul><li>说到符合语意,就是指符合上下文的 HTML 标签。由于国内 IE6 的盛行,有一些标签还不能肆无忌惮的用,而现在说的 HTML 标签,严格地说是 XHTML ,而大多数程序员也只是知道闭合标签,再多也就不了解了,那么除了闭合标签还有什么呢? </li></ul><ul><li>元素必须被正确地嵌套。 </li></ul><ul><li>用 Id 属性代替 name 属性。 </li></ul><ul><li>标签名用小写字母,属性值加引号 。 </li></ul><ul><li>文档必须拥有根元素。 </li></ul>
  4. 4. <ul><li>元素必须被正确地嵌套。 </li></ul><ul><li>错误: <h3><span> 一些内容 </h3></span> </li></ul><ul><li>正确: <h3><span> 一些内容 </span></h3> </li></ul><ul><li>标签名用小写字母,属性值加引号 。 </li></ul><ul><li>错误: <TABLE WIDTH=100%> </li></ul><ul><li>正确: <table width=&quot;100%&quot;> </li></ul><ul><li>文档必须拥有根元素。 </li></ul><ul><li><html> </li></ul><ul><li><head> ... </head> </li></ul><ul><li><body> ... </body> </li></ul><ul><li></html> </li></ul>
  5. 5. <ul><li>如何符合语意 </li></ul><ul><li>1 、 为表达语义而标记文档,而不是为了样式。 </li></ul><ul><li>记住:请最大限度地使用 CSS 来进行布局。在 web 标准的世界里, XHTML 标记与表现无关,它只与文档结构有关。 </li></ul><ul><li>1 )避免使用已被废弃的 HTML 元素 </li></ul><ul><li>错误: </li></ul><ul><li><font size=&quot;7&quot;> 我的主题 </font><br /> </li></ul><ul><li>介绍性文字 <br /><br /> </li></ul><ul><li><font size=&quot;6&quot;> 补充性的观点 </font><br /> </li></ul><ul><li>相关文字 <br /> </li></ul>
  6. 6. <ul><li>正确: </li></ul><ul><li><h1> 我的主题 </h1> </li></ul><ul><li><p> 介绍性文字 </p> </li></ul><ul><li><h2> 补充性的观点 </h2> </li></ul><ul><li><p> 相关文字 </p> </li></ul><ul><li>通过两个部分的对比,可以很明显的看到正确的部分看起来结构更清晰,更容易知道各部分的意义。 </li></ul><ul><li><font> 、 <br /> 、 &nbsp; 标签最好不要用 </li></ul><ul><li>而 <b> 用 <strong> 替换, <i> 用 <em> 替换, <b> 和 <i> 已经是早期 CSS 还没有被广泛应用的时候的标签,并没有实际意义,而 <strong> 和 <em> 有强调的意思。 </li></ul>
  7. 7. <ul><li>2 ) 根据它们的意义使用元素,而不是根据它们的外观 </li></ul><ul><li>错误: </li></ul><ul><li><h3> 这是主标题,在我将文本按照提纲格式组织的情况下。 </h3> </li></ul><ul><li><h3> 这是副标题,但是我希望它与上面的标题使用一样的字体,但是我不知该如何使用 CSS 。 </h3> </li></ul><ul><li><h3> 这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体,以达到我希望的, 如果我了解 CSS ,就可以在不打乱文档结构的情况下达到这个设计。 </h3> </li></ul>
  8. 8. <ul><li>正确: </li></ul><ul><li><h3> 这是主标题,在我将文本按照提纲格式组织的情况下。 </h3> </li></ul><ul><li><h4> 这副标题,但是我希望它与上面的标题使用一样的字体,但是我不知该如何使用 CSS 。 </h4> </li></ul><ul><li><p> 这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体,以达到我希望的, 如果我了解 CSS ,就可以在不打乱文档结构的情况下达到这个设计。 </p> </li></ul><ul><li>通过对比能够发现即使我们不看页面,也能明显的知道各部分代表的意思以及他们的公用。 </li></ul>
  9. 9. <ul><li>3 ) 使用结构化元素,而不是无意义的垃圾 </li></ul><ul><li>错误: </li></ul><ul><li>项目一 <br /> </li></ul><ul><li>项目二 <br /> </li></ul><ul><li>项目三 <br /> </li></ul><ul><li>正确: </li></ul><ul><li><ul> </li></ul><ul><li><li> 项目一 </li> </li></ul><ul><li><li> 项目二 </li> </li></ul><ul><li><li> 项目三 </li> </li></ul><ul><li></ul> </li></ul>
  10. 10. <ul><li>通过上面的几点我们可以看到,标签语意化是体现在页面的每一个细节处的,而页面也正是由这些细节构成的,只有处理好我们页面每一个细节处,页面才会更好的按照我们想要表达的意思去显示,希望大家通过这一讲,能在今后的工作中更注意页面标签的语意化,使我们的页面显示更友好, </li></ul><ul><li>谢谢! </li></ul>

×