您的位置:首页网页设计HTML/CSS  → 合理利用HTML标记优化网页布局

合理利用HTML标记优化网页布局

时间:2010/2/11 11:57:00来源:本站整理作者:我要评论(0)

合理利用HTML标记优化网页布局:

  随着国外对WEB标准的推广,有些新手认为,web2.0就是把以前的table布局都改为DIV+CSS布局就是web2.0。其实不然, 我们要合理利用这些标签。 有一点值得引起注意,那就是在 web 开发人员圈子里通常被称为“div-itis”的对 div 元素的滥用现象。  
    通过大量的嵌套 div 或 span 元素来添加样式确实很方便,但还是应尽量避免这种诱惑。在多数情况下,为文档内现有元素附加样式或 JavaScript 功能是可以做到不必引入 div 或 span 元素的。作为通用容器的 div 或 span 元素应作为最后的手段使用——也就是说,最好是先尽量以语义化元素来编写网页,仅在确实需要时才加入通用容器元素。
  所以我们要:优化 优化 再优化 精简和优化CSS网页布局代码
  我要多用一些语义性标签,但是也要对号入座,标签语义要用对。 
  HTML元素的语义类别 
  结构 
  这些元素的语义定义了他们在文档中扮演着的结构的角色 

div
span
ol,ul,li,dl,dt,dd
del,ins
h1..h6
p

  内容 
  这些元素的语义定义了在文档中表示内容标记的语义 
a
abbr
acronym
address
blockquote
cite
code
dfn
kbd
q
samp
var

  修饰形容 
  这些元素起到对内容的修饰和形容 
strong
em

" Once you’ve completed your markup, go over it two more times and find ways to reduce the number of elements on the page. Does that UL really need its own wrapping div? I think not. "

 

  注意您的样式表
  当我们的网页内容做得很多的时候,样式表文件的代码也随着庞大和臃肿起来。
  我们也慢慢感觉到,有些地方不合理或重复定义。 
  这就是你对CSS选择符应用上出现问题了,灵活使用这些CSS选择符是使用CSS控制网页的基础,CSS选择符也是CSS学习的重点和难点。

相关视频

    没有数据

相关阅读 HTML怎么级联编号 HTML级联编号如何实现HTML5小游戏 HTML5在线游戏试玩地址 HTML5游戏大全Mac看HTML5视频教程Mac上优酷看HTML5视频教程Safari插件推荐:自动转Flash为Html5教您如何把flash转换为html5苹果产品获取优酷HTML5播放真实地址的方法html文件打开出错解决办法

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法