注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

粉红荷花的温馨家园

相识是缘,以诚为友!

 
 
 

日志

 
 

【引用】代码学习(1): HTML元素DIV,SPAN,P【由克拉贝编写】  

2011-07-31 15:18:52|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

前言:本文系笔者学习html的心得体会,讲解代码的含义及其在博客留言和日志中的使用技巧,供初学的朋友参考。有不准确之处,请指正。以后,也许还会写一点其他代码的使用技巧。

一.   DIV元素在日志和留言中使用的效果演示

<DIV>元素由此开始,
我的实验开始了。
插入一行,不在子DIV中,会有蓝色背景吧?
DIV是块级元素,什么是块级?
如何理解和应用?
这里是<DIV>块内的最后一行。
以上四行是四个子DIV,本行是在父DIV中,应为蓝背景。
我已经被关在DIV块级元素大门之外,那我的表现,是否和前面的、在DIV块内的一样呢?(看到的是:不一样。)

代码

<DIV align=center><FONT style="BACKGROUND-COLOR: #00ccff" color=#ff0000 size=4><STRONG>&lt;DIV&gt;元素由此开始,
<DIV>我的实验开始了。</DIV>插入一行,不在子DIV中,会有蓝色背景吧?
<DIV>DIV是块级元素,什么是块级?</DIV>
<DIV>如何理解和应用?</DIV>
<DIV>这里是&lt;DIV&gt;块内的最后一行。</DIV>以上四行是四个子DIV,本行是在父DIV中,应为蓝背景。</STRONG></FONT></DIV>我已经被关在DIV块级元素大门之外,那我的表现,是否和前面的、在DIV块内的一样呢?

讲解DIV

1.  W3C(万维网联盟)给出的定义和用法:

在HTML4.0.1 规范中(HTML4.0.1 Specification):
The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

在W3C培训网站(W3School)给出DIV元素的解释:
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。

2   DIV元素定义一个区间(还有人称:节,分区,容器,盒子等),由<DIV>开始,</DIV>结束。区间内实体具有相同属性,体现块级特性。

3.  DIV可用的属性有id, class, title, style, dir, lang, xml:lang以及ALIGN。 

4.  自动换行

5.  DIV可以嵌套。子DIV块内实体继承父块的属性。(留言中如此,日志中不继承)

6.  在有背景颜色时,两行之间没有空白(留言里和网页上如此),日志里有空白。

注1:讲解1.是最权威的。考虑到我们不是从事网页设计和制作,比较难于理解专业术语,才有下面的通俗讲解。

注2:讲解5.和6. 为笔者根据实验所做的解释。

DIV用于留言的实例

*********

父<DIV> class="fs2 fc06 fw1 btn-ct-0" align="center"
第一个子<DIV>,无属性设置
第二个子<DIV>只设置bgc1背景。
三子<DIV>DIV是块级元素,
这几个字不在子DIV中
四子及孙<DIV>块中新设顶图背景及鼠标加亮,
鼠标加亮代码在孙块中。
以及不加粗,字颜色。
五子<DIV>如何理解和应用?(设字号)
父<DIV>这里是父DIV块内的最后一行。
我已经被关在DIV块级元素大门之外,那我的表现,是否和前面的、在DIV块内的一样呢??(看到的是:不一样。)
本留言用于说明DIV嵌套中,子块继承父块属性,子块也可重设或新设属性。
 
********

上面留言代码:

<DIV class="fs2 fc06 fw1 btn-ct-0" align="center"> 父&lt;DIV&gt; class="fs2 fc06 fw1 btn-ct-0" align="center" <div>第一个子&lt;DIV&gt,无属性设置</DIV><DIV class="bgc1">第二个子&lt;DIV&gt只设置bgc1背景。</DIV><div>三子&lt;DIV&gt;DIV是块级元素,</div>这几个字不在子DIV中<div class="nb-fot fc08 bds0" align="right"><div class="bgc9">四子及孙&lt;DIV&gt块中新设顶图背景及鼠标加亮,<br>鼠标加亮代码在孙块中。<br>以及不加粗,字颜色。</div></div><div class="fs4">五子&lt;DIV&gt;如何理解和应用?(设字号)</div>父&lt;DIV&gt;这里是父DIV块内的最后一行。</div>我已经被关在DIV块级元素大门之外,那我的表现,是否和前面的、在DIV块内的一样呢??(看到的是:不一样。) <div class="ntxt">本留言用于说明DIV嵌套中,子块继承父块属性,子块也可重设或新设属性。</div>

说明:这段留言及其代码,是为帮助加深理解前面的关于DIV的讲解,对照代码看留言。

-------------------------------

SPAN元素在日志演示(省略)。

二.  SPAN元素在留言的实例

$$$$$$

父<SPAN> class="fs2 fc06 fw1 btn-ct-0" align="center" 第一个子<SPAN>,无属性设置第二个子<SPAN>只设置bgc1背景。三子<SPAN>SPAN是行内元素,这几个字不在子SPAN中四子及孙<SPAN>中新设顶图背景及鼠标加亮,
(有BR换行)鼠标加亮代码在孙块中。
(BR)以及不加粗,字颜色。
五子<SPAN>如何理解和应用?(设字号)父<SPAN>这里是父SPAN内的最后一行。
我已经被关在SPAN行级元素大门之外,那我的表现,是否和前面的、在SPAN内的一样呢?本留言用于说明SPAN嵌套中,子区继承父区属性,区块也可重设或新设属性。
 $$$$$$
 
SPAN留言代码:

<SPAN class="fs2 fc06 fw1 btn-ct-0" align="center"> 父&lt;SPAN&gt; class="fs2 fc06 fw1 btn-ct-0" align="center" <span>第一个子&lt;SPAN&gt,无属性设置</SPAN><SPAN class="bgc1">第二个子&lt;SPAN&gt只设置bgc1背景。</span><span>三子&lt;SPAN&gt;SPAN是行内元素,</span>这几个字不在子SPAN中<span class="nb-fot fc08 bds0" align="right"><span class="bgc9">四子及孙&lt;SPAN&gt中新设顶图背景及鼠标加亮,<br>(有BR换行)鼠标加亮代码在孙块中。<br>(BR)以及不加粗,字颜色。</span></span><span class="fs4">五子&lt;SPAN&gt;如何理解和应用?(设字号)</span>父&lt;SPAN&gt;这里是父SPAN内的最后一行。</span>我已经被关在SPAN行级元素大门之外,那我的表现,是否和前面的、在SPAN内的一样呢?<span class="ntxt">本留言用于说明SPAN嵌套中,子区继承父区属性,区块也可重设或新设属性。</span>

讲解SPAN

<span> 标签被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。span元素不产生换行操作。span可用的属性有id, class, title, style, dir, lang, xml:lang。不能使用Align(对齐方式)。在留言中,经常使用class属性,不适于风格中图片做背景使用。

 

三.   P元素特性

P元素是段落标签,其前后各留有一空行。但是,留言中的P元素并不产生空行。

P元素可用的属性与DIV相同,在留言里不允许P元素带属性ALIGN和CLASS,以及STYLE。
因此,留言中不必使用P元素。
只用DIV和SPAN即可。
<BR>用于空一行。
---------------------

代码学习(1): HTML元素DIV,SPAN,P【由克拉贝编写】 - 由克拉贝 - 由克拉贝

 

代码学习(1): DIV,SPAN,P - 由克拉贝 - 由克拉贝

 

代码学习(1): DIV,SPAN,P - 由克拉贝 - 由克拉贝

 

代码学习(1): DIV,SPAN,P - 由克拉贝 - 由克拉贝

 

代码学习(1): DIV,SPAN,P - 由克拉贝 - 由克拉贝
  评论这张
 
阅读(230)| 评论(3)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017