DIV+CSS

简介:

DIV是层叠样式表中的定位技术,全称DIVision,即为划分,有时可以称其为图层。 DIV元素是用来为HTML(超文本标记语言)文档内大块(block-level)的内容提供结构和背景的元素。

一、定义

可定义文档中的分区或节(division/section)。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用 id 或 class 来标记
,那么该标签的作用会变得更加有效。

注:

是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

二、标签

内容

内容

内容

三、用法

是一个块级元素,且必须成对使用。实际上,换行是
固有的特定的格式表现。可以通过
的 class 或 id 应用额外的样式。可以对同一个
元素同时应用 class 和 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的特定的元素。

四、属性

标准属性:如颜色、字体、大小、对齐等;

事件属性:如单击、双击、鼠标按下、鼠标抬起、鼠标移动、键盘按下、键盘抬起等(是不是很熟悉);

全局属性:id、class、style等;

可选属性:align。

五、DIV+CSS优势

1.代码精简,减少重构难度

网站使用DIV+CSS布局使代码很是精简,相信大家也都略有所闻,css文件可以在网站的任意一个页面进行调用,而若是使用table表格修改部分页面却是显得很麻烦。如果不使用DIV+CSS,比如一个大型门户网站(百度、谷歌、新浪等),就需手动改很多页面,而且看着那些表格也会感觉很乱也很浪费时间,但是使用css+div布局只需修改css文件中的一个代码即可。

2.提高网页访问速度

使用了DIV+CSS布局的网页与Table布局比较,精简了许多页面代码,那么其浏览访问速度自然得以提升,也从而提升了网站的用户体验度。

3.SEO优化

采用div-css布局的网站对于SEO(搜索引擎优化)很是友好,因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题,而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。

4.浏览器兼容性

若使用table布局网页,在使用不同浏览器情况下会发生错位,而div+css则不会,无论什么浏览器,网页都不会出现变形情况。

最后,需要注意的是,蜘蛛(网络爬虫)也不喜欢一个页面有太多的css代码,否则同样会影响蜘蛛的爬行,影响搜索引擎的收录,所以采用外部调用的方式调用CSS是非常不错的方法。

你可能感兴趣的:(#,css与div)