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

2016-02-20 00:07 5 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的合理利用HTML标记优化网页布局,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

  我们一直在讲CSS网页布局代码的优化,在webjx.com以往的文章中,也一直强调语义和文档的结构。随着国外对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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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. "

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  注意您的样式表
  当我们的网页内容做得很多的时候,样式表文件的代码也随着庞大和臃肿起来。
  我们也慢慢感觉到,有些地方不合理或重复定义。
  这就是你对CSS选择符应用上出现问题了,灵活使用这些CSS选择符是使用CSS控制网页的基础,CSS选择符也是CSS学习的重点和难点。
  我们是否应在设计的开始应该合理应用这些CSS选择符那?
  关于CSS选择符的分类,使用,定义,由于内容之大我就不说了,需要的可以在webjx.com找到答案,一些关于CSS样式表的优化技巧的文章学习一下。

来源:http://www.tulaoshi.com/n/20160220/1631319.html

延伸阅读
标签: Web开发
p、h1、或div等元素常常称为块级元素,这些元素显示为一块内容;Strong,span等元素称为行内元素,它们的内容显示在行中,即行内框。(可以使用display=block将行内元素转换成块元素,display=none表示生成的元素根本没有框,也既不显示元素,不占用文档中的空间) 《CSS权威指南》中文中:任何不是块级元素的可见元素都是内联元素。...
标签: Web开发
总类(所有HTML文件都有的) 文件类型 HTML/HTML (放在档案的开头与结尾) 文件主题 TITLE/TITLE (必须放在「文头」区块内) 文头 HEAD/HEAD (描述性资料,像是「主题」) 文体 BODY/BODY (文件本体) 结构性定义(由浏览器控制的显示风格) 标题 H?/H? (从1到6,有六层选择) 3.0 标题的对齐 H? ALIGN=LEFT|CENTER|RIGHT/H? 3.0 ...
标签: Web开发
点击这里返回脚本之家 HTML教程 栏目.想浏览CSS教程请点这里。 上文: 标记语言打印样式 。Chapter 12 CSS布局 本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其他表格以便达成恰巧正确的间隔,视觉效果.这些庞大的排版内容不仅下载很慢,维护起来也很费心力,...
标签: Web开发
其实css也是将HTML从数据和表现分离的有力工具。石头的CSS Oriented Design:COD非常合我的口味,摒弃TOD(Table Oriented Design)还真不是意见容易的事情,但是一旦实现,系统本身就实现了分工和协作:就能像Winamp一样换皮肤了,从而发挥用户最大的能动性。最直接的例子就是本网站使用的MT系统,所有的STYLE都来自MovableStyle,。 ...
  ■ 排版标记 <!--注解-- ; <P ; <BR ; <HR ; <CENTER ; <PRE ; <DIV ; <NOBR ; <WBR ; 欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。 也请先明白围堵标记与空标记的分别,请看 【HTML概念】。 ■<!--注解--: ▲Top 像很多电脑语言一样,HTML 也提供注解...

经验教程

131

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部