美文网首页
HTML系列知识(四)

HTML系列知识(四)

作者: 纭微细雨 | 来源:发表于2019-10-21 20:22 被阅读0次

HTML块 div span

<div>

<span>

这两种标签都是布局用的

这种标签本身没有任何显示效果

通常是用来结合css进行页面布局

div 和 span 看不出任何效果

<div> 这是一个div </div>

<span>这是一个span</span>

div布局

一个简单的div布局的例子

注: 这里使用了style外边距样式,margin-left:50px 指的是左边距50个像素

需要对两个图片进行左边距控制

如果不使用div,则需要对每一个图像设置边距

使用了div后,先把两个图像都放在一个div里

只需要设置div的边距,就可以达到两个图片都移动的效果

<div  style="margin-left:100px">

 <img  src="http://how2j.cn/example.gif"/>

  <br/>

 <img  src="http://how2j.cn/example.gif"/>

</div>

div和span的区别 

div是块元素,即自动换行

常见的块元素还有h1,table,p

span是内联元素,即不会换行

常见的内联元素还有img,a,b,strong

<div>

 第一个div

</div>

<div>

 第二个div

</div>

<span>

 第一个span

</span>

<span>

 第二个span

</span>

HTML内联框架

<iframe> 即内联框架

通过内联框架 可以实现在网页中“插入”网页

<iframe  src="http://how2j.cn/"  width="600px"  height="400px">

</iframe>

相关文章

  • HTML系列知识(四)

    HTML块 div span 这两种标签都是布局用的 这种标签本身没有任何显示效果 通常是用来结合css进行页面布...

  • HTML系列知识(五)

    HTML文本框 即表示文本框 并且只能够输入一行 如果要输入多行 使用文本域 注: 标签很特别,一般是不需要写...

  • HTML系列知识(六)

    HTML文本域 即文本域 与文本框不同的是,文本域可以有多行,并且可以有滚动条 abcdef 设置宽度和行数 ,使...

  • HTML系列知识(三)

    HTML图像 即图像标签,需要设置其属性 src指定图像的路径 如果是本地文件,只需把图片放在同一个目录下即可,s...

  • HTML系列知识(二)

    HTML段落 标签即表示段落,是paragraph的缩写,自带换行效果 在p标签中的文本会自动换行,不在p标签中的...

  • HTML系列知识(一)

    HTML标签 HTML是Hyper Text Markup Language 超文本标记语言 的缩写 HTML是由...

  • H5学习之第一阶段

    前言:本系列课程旨在快速学习H5的相关知识,共分四个阶段。当前为第一阶段,学习一些HTML和CSS的基础知识。 相...

  • 常用标签&选择器

    本系列是前端基础的学习笔记,只是方便自己学习记忆的。 html、xhtml、xml、html5 一些历史知识而已啦...

  • HTML基础知识二

    知识点导航: 一、h 和 p

    HTML标签是分等级的,HTML将所有的标签分为两种: h 系列 h 是容...

  • 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者...

网友评论

      本文标题:HTML系列知识(四)

      本文链接:https://www.haomeiwen.com/subject/ftsxvctx.html