设计、网站、推广
始于2004年
当前位置:首页 > 网站制作

加深对HTML和CSS标签语义化的理解

发表日期:2009-1-13 作者来源:派谷网络 浏览次数:0

    前两天参加了公司组织的一个WD培训,有一节课讲了标签语义化,听了之后感觉特别有用,更正了我以前对 HTML 和 CSS 的错误看法。

    首先说明的一点是,人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。 以前我真的没有怎么重视过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。

    以前以我对web开发的粗浅理解,觉得写一个好的符合标准的页面只需要把结构和表现分离,然后不要使用table,font等标签就行了,至于通篇都是div我也不会觉得有什么问题,因为CSS很强大。但是,所有的标签都是有自己的语义的,下面给出一部分标签的语义:

    div 语义:Division(分隔)

    span 语义:Span(范围)

    ol 语义:Ordered List(排序列表)

    ul 语义:Unordered List(不排序列表)

    li 语义:List Item(列表项目)

    …………

    如果无视标签语义和默认样式,所有标签都用div,其实也是可以写出来视觉效果很好的页面,只要你灵活运用CSS。但是那样的话虽然视觉上达到了要求,但是整个页面一点语义都没有,搜索引擎还是看不懂。所以,要记住:

    结构(html)才是重点,样式(css)是用来修饰结构的。所以,要先确定html,确定标签,再来选用合适的css。

    一般来说,所有的标签都会有一个默认的样式,所以一个简单的判断网页标签语义是否良好的方法就是:去掉样式,看网页结构是否组织良好有序,是否仍然有很好的可读性。

    另外,值得重点提及的是h标签,h标签的语意是标题,搜索引擎对这个标签比较敏感,特别是h1,和h2。一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

    以上这些东西都是WD的工程师阿当讲的,我受益匪浅,加深了对html的理解。HTML 虽然很简单,但是要用好也是很不容易的。

本文章系本站编辑转载,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与本站联系,我们将在第一时间删除内容!

相关网站设计案例

相关推荐新闻

缃戠珯鏈嶅姟鍣ㄧ殑缁存姢绠$悊...

缃戠珯鏈嶅姟鍣ㄧ殑缁存姢绠$悊鏄‘淇濈綉绔欑ǔ瀹氥€佸畨鍏ㄣ€侀珮鏁堣繍琛岀殑鍏抽敭宸ヤ綔...

鏃ユ湡锛�2025-4-3

缃戠珯鏁版嵁搴撳畨鍏ㄧ殑甯歌濞�...

缃戠珯鏁版嵁搴撳畨鍏ㄩ潰涓寸潃澶氱甯歌濞佽儊锛岃繖浜涘▉鑳佸彲鑳藉鑷存暟鎹硠闇层€�...

鏃ユ湡锛�2025-4-3

缃戠珯鏁版嵁搴撶殑瀹夊叏璁捐闂�...

缃戠珯鏁版嵁搴撳瓨鍌ㄧ潃澶ч噺閲嶈鐨勬暟鎹紝濡傜敤鎴蜂俊鎭€佷氦鏄撹褰曘€佷笟鍔℃暟...

鏃ユ湡锛�2025-4-3

缃戦〉鍒朵綔甯哥敤宸ュ叿鍜屾妧鏈�...

缃戦〉鍒朵綔娑夊強鍒板涓幆鑺傦紝浠ヤ笅涓轰綘浠嬬粛甯哥敤鐨勫伐鍏峰拰鎶€鏈細甯哥敤宸�...

鏃ユ湡锛�2025-4-2

缃戠珯璁捐鑹插僵鎼厤鍘熺悊...

缃戠珯璁捐涓殑鑹插僵鎼厤鍘熺悊娑夊強澶氫釜鏂归潰锛屽悎鐞嗚繍鐢ㄨ繖浜涘師鐞嗗彲浠ュ垱...

鏃ユ湡锛�2025-4-2

网站建设解决方案
缃戠珯缁存姢瑙e喅鏂规 浼佷笟闂ㄦ埛缃戠珯闆嗙害鍖栬В鍐虫柟妗� 钀ラ攢鍨嬬綉绔欒В鍐虫柟妗� 鍏昏€侀櫌琛屼笟缃戠珯寤鸿瑙e喅鏂规 鍖婚櫌璇婃墍缃戠珯寤鸿瑙e喅鏂规 鎵嬫満鏁扮爜琛屼笟缃戠珯寤鸿鏂规 澶栬锤鍏徃缃戠珯寤鸿瑙e喅鏂规 閲戣瀺缃戠珯寤鸿瑙e喅鏂规 琛屼笟鍗忎細绫荤綉绔欏缓璁捐В鍐虫柟妗� 鍝佺墝瀹樼綉缃戠珯寤鸿鏂规