1 DIV CSS对页面布局的优势

1 DIV CSS对页面布局的优势

采用DIV+CSS模式的网站具有以下优势:
表现和内容相分离
代码简洁,提高页面浏览速度
易于维护和改版
提高搜索引擎对网页的索引效率

“无意义”的HTML元素div和span
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用

它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的,用在一小块的内联HTML中。而div(division)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码,为HTML 文档内大块的内容提供结构和背景的元素,可以包含段落、标题、表格甚至其他部分,这使div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

dem.html

<!--这是一行字<br>
<h1>这是一行字</h1>
<b>这是一行字</b> <br>
<u>这是一行字</u> <br>
<div>这是一行字</div>
这是一行字<br>
-->
<style>
    div span {
        color:red;
        font-weight:bold;
    }
</style>
<div>这是一行字</div>
<div>这是一行字</div>
<div>这是一行字</div>
<span>这是一行字</span>
<span>这是一行字</span>
<span>这是一行字</span>
<br>
<div>
<span>名子</span>:高洛峰 <br>
<span>年龄</span>:28 <br>
<span>性别</span>:男 <br>
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,636评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,670评论 0 30
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,214评论 0 40
  • 昨天带女儿去北海公园玩,出来后继续在后海转。 看到卖棉花糖的,我知道她想吃,可是我的印象里棉花糖并不好吃。 看她期...
    沉默岛主阅读 594评论 6 11