九乡新闻网:【引用】代码学习（1）: HTML元素DIV,SPAN,P【由克拉贝编写】
来源：百度文库 编辑：九乡新闻网 时间：2024/04/27 10:33:44
【引用】代码学习（1）: HTML元素DIV,SPAN,P【由克拉贝编写】
2011-07-31 15:18:52| 分类： 默认分类 | 标签： |字号大中小 订阅
本文引用自由克拉贝《代码学习（1）: HTML元素DIV,SPAN,P【由克拉贝编写】》前言：本文系笔者学习html的心得体会，讲解代码的含义及其在博客留言和日志中的使用技巧，供初学的朋友参考。有不准确之处，请指正。以后，也许还会写一点其他代码的使用技巧。
一. 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元素的解释：
如果用 id 或 class 来标记
2 DIV元素定义一个区间（还有人称：节，分区，容器，盒子等），由
3. DIV可用的属性有id, class, title, style, dir, lang, xml:lang以及ALIGN。
4. 自动换行
5. DIV可以嵌套。子DIV块内实体继承父块的属性。（留言中如此，日志中不继承）
6. 在有背景颜色时，两行之间没有空白（留言里和网页上如此），日志里有空白。
注1：讲解1.是最权威的。考虑到我们不是从事网页设计和制作，比较难于理解专业术语，才有下面的通俗讲解。
注2：讲解5.和6. 为笔者根据实验所做的解释。
DIV用于留言的实例：
*********
父鼠标加亮代码在孙块中。
以及不加粗，字颜色。五子
上面留言代码：
鼠标加亮代码在孙块中。
以及不加粗，字颜色。
说明：这段留言及其代码，是为帮助加深理解前面的关于DIV的讲解，对照代码看留言。
-------------------------------
SPAN元素在日志演示(省略）。
二. SPAN元素在留言的实例
$$$$$$
父 class="fs2 fc06 fw1 btn-ct-0" align="center" 第一个子，无属性设置第二个子只设置bgc1背景。三子SPAN是行内元素，这几个字不在子SPAN中四子及孙中新设顶图背景及鼠标加亮，（有BR换行）鼠标加亮代码在孙块中。
（BR）以及不加粗，字颜色。五子如何理解和应用？（设字号）父这里是父SPAN内的最后一行。我已经被关在SPAN行级元素大门之外，那我的表现，是否和前面的、在SPAN内的一样呢？本留言用于说明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 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。span元素不产生换行操作。span可用的属性有id, class, title, style, dir, lang, xml:lang。不能使用Align（对齐方式）。在留言中，经常使用class属性，不适于风格中图片做背景使用。
三. P元素特性：
P元素是段落标签，其前后各留有一空行。但是，留言中的P元素并不产生空行。
P元素可用的属性与DIV相同，在留言里不允许P元素带属性ALIGN和CLASS，以及STYLE。
因此，留言中不必使用P元素。
只用DIV和SPAN即可。
用于空一行。
---------------------
评论这张 
转发至微博 转发至微博