• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 换个角度看页面重构中的语义化

换个角度看页面重构中的语义化

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含页面重构,语义化等相关知识,佚名 希望在学习及工作中可以帮助到您

在“表格布局”1 的时代,大家所使用的布局方式都是表格,没有其它的方式可以选择, Dreamweaver的可视化操作大大的简化了页面制作的过程,而且当时虽然网络情况比现在差得多,但并没有多少人会去关注页面性能这块。搜索引擎对于表格布局也无能为力,只能过复杂的算法去把内容抓取出来,而且很难知道哪些内容是重点,因为会正确使用标签的页面太少了。那搜索引擎如何得知页面的重点呢?没错,就是页面头部的信息,在这个区域,标签是有语义的,明确的指出页面的标题、主要内容、作者、版权等等信息。

接着,WEB标准进入了国人的视野,它带来了颠覆性的改变,从页面制作方式到思维方式的种种改变。推荐使用“CSS布局”2 代替原先的“表格布局”,让原先让人遗忘的许许多多HTML标签重新被认识,并以较严格的方式使用,在一定程度上规范了页面书写的形式,像“标签闭合”、“标签、属性使用小写”、“使用DTD”等等。搜索引擎也很支持这种方式制作的页面,因为算法不用像以前那么复杂了,可以很简便的得到内容的主次,提高抓取的质量。这也是为什么WEB标准会更利于 SEO 。

那么,如果标签足够表达内容的语义,页面内容的语义就能以标签的方式被传递给更多的用户。因此, 所谓语义化,就是尽可能的理解要表达的内容,选择适合的标签,将内容转换成浏览器认识的语言,通过浏览器传达给用户。 可以理解为将内容的语义通过标签的方式表现。

写过 XML 的同学可能体会会深些,在XML中,标签是可以自定义的,但这些标签的定义都是为了让读取更容易,或许可以看下常见的RSS,它就是一个标准化的XML格式,但RSS里使用的标签都是有语义的,你可以通过标签很清楚的看出哪部分是代表什么的。虽然(X)HTML看起来比RSS复杂得多,但在搜索引擎看来,好的页面不就是一个XML?

做为对《 页面重构中的语义化 》的一个补充,欢迎讨论。

1 使用表格单元格的划分来进行页面布局的方式。

2 使用样式的定位属性进行布局的方式。

您可能想查找下面的文章:

  • 换个角度看页面重构中的语义化

相关文章

  • 2017-08-06CSS 文字加阴影变3D效果演示
  • 2017-08-06根据已知高和宽绝对垂直居中div示例代码
  • 2017-08-06CSS 嵌套DIV布局(position属性)
  • 2017-08-06IE6下图片下方有空间距的多种解决方法
  • 2017-08-06CSS属性简写和选择器的优先级问题
  • 2017-08-06浅析CSS等高布局的6种方式
  • 2017-08-06css3中背景尺寸background-size详解
  • 2017-08-0610个必备的CSS技巧总结
  • 2017-08-06如何在class内写xsl标记注意事项
  • 2017-08-06IE7中绝对定位元素之间的遮盖问题示例探讨

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS3实现文字波浪线效果示例代码
    • 在IE下,当margin:0 auto;无法使得块级元素水平居中时
    • CSS3属性使网站设计增强同时不消弱可用性
    • 纯CSS3实现自定义Tooltip边框涂鸦风格的教程
    • 经常使用的两个清爽的table样式
    • css实现div水平、垂直居中兼容chrome、ie8
    • 使用CSS来扩展增强Input Range的示例
    • CSS清除浮动 clearfix:after 使用技巧及兼容Firefox等符合W3C标准的浏览器
    • css 圆角边框
    • 创建超链接及css 样式设置

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有