8、HTML 区块与内联

<div>详解:

DIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置

当你把文字、图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”

DIV元素,是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素

DIV 属于块级元素,浏览器会在其前后显示折行

实例 --->

<body>

<p>这是一些文本。</p>

<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>

<p>这是一些文本。</p>

</body>

 

<span>详解:

<span>在行内定义一个区域,也就是一行内可以被<span>划分成好几个区域,从而实现某种特定效果

<span>在CSS定义中属于一个行内元素,而<div>是块级元素,我们可能通俗地理解为<div>为大容器,大容器当然可以放一个小容器了,<span>就是小容器

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性

实例 --->

<body>

<p>
我的母亲有
<span style="color:blue;font-weight:bold">
蓝色
</span>
的眼睛,我得父亲有
<span style="color:darkolivegreen;font-weight:bold">
碧绿色
</span>
的眼睛。
</p> </body>

 

区块元素和内联元素

大多数 HTML 元素被定义为块级元素内联元素

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例: <h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。

实例: <b>, <td>, <a>, <img>

 

 

 

框架集

 

1、<frameset></frameset>  框架集标签

  rows=" 150, * "  建立上下两个框架,一个框架高度是150px,一个框架的高度是剩下的全部(150px以外)

  cols=" 150, * "  建立左右两个框架,一个框架宽度是150px,一个框架的宽度是剩下的全部(150px以外)

 

2、<frame></frame>  子框架集标签  src="src.html"  源网页

  noresize="noresize"  使子框架不能拖动边框,无法缩放

  frameborder="0"  使子框架的边框为0

 

实例:
<frameset rows="40%, 60%">
  <frame>
  <frameset cols="50%, 50%">
    <frame>
    <frame>
  </frameset>
</frameset>
分为上下两个子框架
下面又嵌套了左右两个子框架

 

 

区块 与 内联

 

1、内联 ------》 块

  在标签内添加:Display:block

2、块 ------》内联

  在标签内添加:Display:inline-block

 

注意:块元素 Display:inline-block 包含块 和 内联元素

   内联元素 Display:block 只能包含内联元素

   内联元素又叫行内元素

posted @ 2018-02-07 10:11  FullStack~ELF  阅读(157)  评论(0)    收藏  举报