标签语义化 Semantic tags
09月5th, 2008 — Dreamer September 5th, 2008 - Dreamer前两天参加了公司组织的一个WD培训，有一节课讲了标签语义化，听了之后感觉特别有用，更正了我以前对HTML 和CSS 的错误看法。 Two days before the company took part in a training WD, there is a lesson made a semantic labels, particularly after listening to feel useful, I have a correction of an error CSS and HTML view.
首先说明的一点是， 人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。 First of all, note that the people can judge the visual division of the semantic content, search engines see only the code. 搜索引擎只能通过标签来判断内容的语义。 Search engines can only be adopted by the label to determine the semantic content. 以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。 I really do not have too great importance to how a search engine, compared with the beginning of care, because the page is a large part of the traffic from search engines, for as much as possible on the page search engine friendly, so it is necessary to as much as possible so that the label Semantic.
以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，font等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为CSS很强大。 In the past I have superficial understanding of the development of the web, wrote that a good standard of the page should only structure and performance of the separation, and then do not use table, font and so on the label on the line, as are full of div I would not be there What is the problem, because the CSS very strong. 但是， 所有的标签都是有自己的语义的 ，下面给出一部分标签的语义： However, all the labels have their own semantic, the following are given as part of the semantic labels:
div 语义：Division（分隔） div semantics: Division (separated)
span 语义：Span（范围） span semantics: Span (range)
ol 语义：Ordered List（排序列表） ol semantics: Ordered List (ranking list)
ul 语义：Unordered List（不排序列表） ul semantics: Unordered List (do not sort the list)
li 语义：List Item（列表项目） li semantics: List Item (a list of items)
………… ... ... ... ...
如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用CSS。 If you ignore the semantic tags and style default, all labels are div, in fact it is written in a very good visual effects page, if you flexibility in the use of CSS. 但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂。 In that case, but although the visual met the requirements, but the entire page that did not semantic, or search engines can not read. 所以，要记住： Therefore, it is necessary to keep in mind:
结构(html)才是重点，样式(css)是用来修饰结构的。 Structure (html) is the focus of the style (css) is a modification to the structure. 所以，要先确定html，确定标签，再来选用合适的css。 So, first determine html, determine the label, then the appropriate choice of css.
一般来说，所有的标签都会有一个默认的样式，所以一个简单的判断网页标签语义是否良好的方法就是： 去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。 In general, all the labels will have a default style, so a simple web page to determine whether the semantic tags is a good way: remove the style to see whether the page organized and orderly structure, do you still have a very good readability .
另外，值得重点提及的是h标签，h标签的语意是标题，搜索引擎对这个标签比较敏感，特别是h1,和h2。 In addition, the focus should be mentioned in the label h is, h is the meaning of the label title, the search engine on the labels more sensitive, in particular, h1, and h2. 一个语义良好的页面，h标签应该是完整有序没有断层的。 Semantic a good page, h tags should be complete in an orderly manner without fault. 也就是说，要h1,h2,h3,h4这样推下来，不要h1,h3,h4，漏掉h2。 In other words, to h1, h2, h3, h4 push this down, do not h1, h3, h4, left h2. 一个结构良好的网页，h标签可以组织起一个网页的大纲。 A well-structured page, h tags can organize a page outline.
以上这些东西都是WD的工程师阿当讲的，我受益匪浅，加深了对html的理解。 These things are WD's Adam Engineer said, I benefited greatly deepened the understanding of html. HTML 虽然很简单，但是要用好也是很不容易的。 While HTML is very simple, but it is also good to use not at all easy.
本文链接: http://www.zhuoqun.net/html/y2008/1096.html 转载请注明出处，谢谢。 This article link: http://www.zhuoqun.net/html/y2008/1096.html reprint requests reference, thank you.
TrackBack引用地址： http://www.zhuoqun.net/html/y2008/1096.html/trackback TrackBack quoted address: http://www.zhuoqun.net/html/y2008/1096.html/trackback
其实当html和css早期刚出来时，就已经明确了目的，html是内容，css是样子。 In fact, when html and css just come out early, had a clear purpose, html is the content, css is like.
但不知为什么，早期的web开发，特别是由于dreamweaver的应用过多，html就成了布局结构的代名词，css也没有了原先的意义，只是以html标签的属性style体现它微弱的意义，但更恶劣的是到处充斥着table布局，使代码极其难懂，更可怕的是，一但确定写完，后期是很难更改的，更不用说换皮了。 But I do not know why, in the early development of the web, in particular due to the application of dreamweaver too, html layout of the structure has become a synonym, css nor the original meaning, only to html tags style embodies the attributes of its weak sense, but it is more Is the worst place full of table layout, so that the code is extremely difficult, even more terrifying is that a determined but finished, the latter is very difficult to change, not to mention the skin-for.
后来人们为了方便改变样貌，而使数据和样式尽量分分，即div布局 css.这也是目前所提倡的方式。 It was easy to change the look and style as much as possible because the data points, that is, div layout css. This is currently advocated. 但又出现了极端的情况就是，一个页面很难再找到div之外的标签。 But there have been an extreme case is that a page is difficult to find outside the div tag.
所以现在又提出了回归html的本来意义，每个标签都有自己的语义。 So now it is made of html return to the original meaning of each tab has its own semantics. 并不是只有div可以接受样式。 Div is not the only acceptable form. 一个合格的web前端应该是一个结构清晰的html文件加上一个结构清晰的Css文件。 A qualified web front-end should be a clear structure of the html file with a clear structure of the document Css.
但在中国有点可悲，大多数web开发人员，或者称为做着web开发这部分的人，在这方面是有所不足的，更可悲的是还有部分人对此不屑一顾（他们更愿意做java的增删改查）。 However, in China a little bit sad that most web developers, web development or the known doing this part of the people in this area is inadequate and more sad is that there are some people ignore this (they are more willing to Java to do the additions and deletions to check). 孰不知要掌握好css，html，这三方面不是很容易，但他们还认为掌握好了，也行是因为入门简单了，只要看一下就能写点东西。 Which is not to have a good css, html, these three areas is not easy, but they also believe that the master, but also because the line is a simple entry, as long as you will be able to write something to see.
如果对css有了了解，可以看看这个网站http://www.csszengarden.com/,禅意花园。 If you have to understand css, you can look at this site http://www.csszengarden.com/, Zen Garden. 简单来说这是一个推广正确使用css的组织，它提供了一个简单的语义丰富的html文档，这个文档是不允许修改的，你可以针对这个文档编写css，让它呈现出不同的风格。 To put it simply, this is a css promote the proper use of the organization, which provides a simple semantics rich html documents, is not allowed to amend this document, you can prepare a document for the css, it shows a different style. 你可以向他提供你的作品（必须原创），现在大概收录了两百多幅作品，我曾经一口气把这些作品看完，当然只是简单看了一下，帮助还是不小的。 You can provide him with your work (must be original), a collection of about 200 pieces of works, I have to go after reading these works, of course, simply look to help small or not. 他们还出了一本《禅意花园》的书，我看过，没有太多技术内容，大多是讲设计理念的，如果有兴趣，也可以看一下，全彩的。 They also had a "Zen Garden", I have read, not too many technologies, most of the talk is of design, if interested, you can look at, full-color.
最后，再说一句，羡慕！ Finally, add, envy! 还有这样的讲座，可以少走很多弯路！ There are such talks could take a lot of little detour! 所以一个好的环境是可以帮助一个人更好的成长的！ Therefore, a good environment can help a person better growth! 但现在大多数的公司（中小型）的开发人员都是自己的在摸索，更可悲的是有些公司的开发人员根本没时间，只是一天到头的加班！ However, the majority of companies (SMEs), developers are trying to feel out of their own, but also sad that some of the company's developers do not have the time, only to the end of overtime a day! （注：有些公司的老板是不能看到自己的员工在公司学习的） (Note: Some of the company's boss can not see their employees in the company's study)
我也是好不容易盼到了一次比较正规的培训，有培训一般我都是会积极参与的：） I am also a hard-won Pandao a more formal training, training in general, I will actively participate in all:)
我认为培训是很好的，特别是公司自己的培训。 I think training is very good, especially the company's own training. 现在学习知识无非是书本和网上，但书本上的总慢了一拍，网上的太杂，要淘。 Knowledge Learning is now nothing but books and online, but the book has been a slow beat of the total, the on-line too miscellaneous, it is necessary to Amoy. 很难系统化。 Difficult to systematize. 而公司自己同事的经验，往往就是最前战线的经验，很实用，应该说都是精华！ The company's own experience of colleagues, often before the front is the most experience, very practical, it should be said is the best!
浏览器也是一个用户，只是它通过不同的角度去查看我们的网页，不过它可比一般的用户细致多了。 Browser is also a user, it is only through the different points of view to see our web page, but it is comparable in general more careful users. 我最近也准备总结一下所有语意化的html标签。 I recently prepared to sum up all of the semantic html tags.
能不能教教我!每次看你的文章都收益匪浅。 Can I teach! Every time you look at the article proceeds are simple bandits.
[...] 文章来自：http://www.zhuoqun.net/html/y2008/1096.html 人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。 [...] From the article: http://www.zhuoqun.net/html/y2008/1096.html people can judge the visual division of the semantic content, search engines see only the code. 搜索引擎只能通过标签来判断内容的语义。 Search engines can only be adopted by the label to determine the semantic content. [...]