您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意:

  第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

  另一种原因是你对那些非常熟悉的表现层属性束手无策。例如:cellpadding,、hspace、align=”left”等等,不知道该转换成对应的什么CSS语句。当你解决了第一种问题,知道了如何结构化你的HTML,暴风彬彬再给出一个列表,详细列出原来的表现属性用什么CSS来代替。

结构化HTML

  我们在刚学习网页制作时,总是先考虑怎么设计,考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

  如果你希望你的HTML页面用CSS布局(是CSS-friendly的),你需要回头重来,先不考虑“外观”,要先思考你的页面内容的语义和结构。

  外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来,CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

  HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义,显示在任何地方,任何网络设备上。

开始思考

  首先要学习什么是“结构”,也称之为“语义”。这个术语的意思是你需要分析你的内容块,以及每块内容服务的目的,然后再根据这些内容目的建立起相应的HTML结构。

  如果你坐下来仔细分析和规划你的页面结构,你可能得到类似这样的几块:

标志和站点名称 
主页面内容 
站点导航(主菜单) 
子菜单 
搜索框 
功能区(例如购物车、收银台) 
页脚(版权和有关法律声明)

我们通常采用DIV元素来将这些结构定义出来,类似这样:

<div id=”header”></div>
<div id=”main”></div>
<div id=”content”></div>
<div id=”nav”></div>
<div id=”subnav”></div>
<div id=”search”></div>
<div id=”footer”></div>

  这不是布局,是结构。这是一个对内容块的语义说明。当你理解了你的结构,就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块,也可以嵌套另一个DIV。内容块可以包含任意的HTML元素—标题、段落、图片、表格、列表等等。

  根据上面讲述的,你已经知道如何结构化HTML,现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方,再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

实践一下结构化

  上面说的只是最基本的结构,实际应用中,你可以根据需要来调整内容块。常常会出现DIV嵌套的情况,你会看到”container”层中又有其它层,结构类似这样:

<div id=”header”>
    <div id=”logo”>
        <h3>http://www.52css.com/</h3>
        <ul>a list</ul>
    </div>
    <div id=”nav”>
        <ul>nav list</ul>
        <form>search</form>
    </div>
</div>

  嵌套的div元素允许你定义更多的CSS规则来控制表现,例如:你可以给#header一个规则让它们都居右,或者居中,再给#logo一个规则让它居左,而给#nav的list与form另一个完全不同的表现。

转载:http://blog.bingo929.com/web-standard-html-structured.html

网页布局WEB标准的HTML结构化的更多相关文章

  1. H5中使用Web Storage来存储结构化数据

    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...

  2. Play Framework Web开发教程(33): 结构化页面-组合使用模板

    和你编写代码相似,你编写的页面也能够由多个小的片段组合而成,这些小的片段本身也能够由更小的片段构成.这些小片段一般是能够在其他页面反复使用的:有些部分能够用在全部页面,而有些部分是某些页面特定的.本篇 ...

  3. WEB 面向开发者的结构化数据

    通常用于google搜索 See also: video 探索搜索库

  4. 深入理解Web标准(网站标准)

    深入理解Web标准(网站标准)   我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...

  5. 理解Web标准(网站标准)

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  6. HTML+CSS总结/有关于web标准的总结

    关于这一话题,我认为我们需要解决的问题有:什么是web标准?定义web标准的目的?遵循web标准的好处? 一.百度百科对web标准的解释: WEB标准不是某一个标准,而是一系列标准的集合. 网页的主要 ...

  7. 什么是web标准??

    web标准 不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior).对应的标准也分三方面:结构化标准语言主要 ...

  8. 前端开发-Web标准

    Web标准 1理解:结构 => html表现 => css行为 => js(dom + es) WEB标准(结构.表现.行为分离)有哪些优点呢? 易于维护:只需更改CSS文件,就可以 ...

  9. 【01】HTML_day01_01-前言&WEB标准

    typora-copy-images-to: media 第01阶段.前端基础.认识WEB 基础班学习目标 目标: 能根据psd文件,用HTML+CSS 布局出符合W3C规范的网页. 网站首页 列表页 ...

随机推荐

  1. MVC3中_ViewStart.cshtml的一些事

    MVC3中,使用Razor模板引擎的话,会自动生成一个_ViewStart.cshtml文件. 很多人把这个文件当成类似Webform中的Master模板文件,其实这个_ViewStart.cshtm ...

  2. jquery中的ajax方法参数的用法和他的含义

    jquery中的ajax方法参数的用法和他的含义: 1.url:  要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:  要求为String类型的参数,请求方式(pos ...

  3. 1.3 React 组件

    1.3.1 React 组件介绍 在 React 中组件是第一元素,是 React 的基础,一个 React 应用就是基于 React 组件的组合而成.前面的 JSX 练习过后,大家应该对 React ...

  4. struts基础

    六个基本包 struts2-core-2.1.6.jar :开发的核心类库 freemarker-2.3.13.jar :struts2的UI标签的模板使用freemarker编写 commons-l ...

  5. python3 使用int函数将浮点数转换成整数

    int函数将浮点数转换成整数需要注意的地方 >>> int(153)153>>> int(153.4)153>>> int(153.5)153&g ...

  6. JUC源码分析-线程池篇(二)FutureTask

    JUC源码分析-线程池篇(二)FutureTask JDK5 之后提供了 Callable 和 Future 接口,通过它们就可以在任务执行完毕之后得到任务的执行结果.本文从源代码角度分析下具体的实现 ...

  7. Centos光盘ISO安装过程再理解

    ISO启动时的基本流程 vmlinuz  -> 加载initrd.img -> 加载内核基本驱动 -> 挂载光盘至/run/install/repo -> 启动anaconda ...

  8. C# WinFrom 关于MDI

    dev是一个牛B 到没边的控件 我们正常用winform做个原始mdi窗体 一点都不好看 但 用的dev只需要一个控件 就可让显示舒服多了 建一个项目 上边放一个 xtraTabbedMdiManag ...

  9. java-day19

    获取Stream流方法 根据Collection获取流 根据Map获取流 根据数组获取流 常用方法分为两种:延迟方法和终结方法 逐一处理:forEach 过滤:filter 映射:map 统计个数:c ...

  10. python调用tushare获取A股周线行情

    接口:weekly 描述:获取A股周线行情 限量:单次最大3700,总量不限制 积分:用户需要至少300积分才可以调取,具体请参阅本文最下方积分获取办法 注:tushare模块下载和安装教程,请查阅我 ...