美文网首页网页前端后台技巧(CSS+HTML)让前端飞互联网科技
web前端html实例-div和span元素的用法简单介绍

web前端html实例-div和span元素的用法简单介绍

作者: 560b7bb7b879 | 来源:发表于2019-05-06 23:10 被阅读5次

简单介绍一下div元素和span元素的用法,这里对于它们的细节不做介绍,这里所要介绍的是在何种场合应该选择何种元素,希望能够对初学者有所帮助。
一.div元素:

首先它是一个块级元素,当然也可以转换为内联元素。它所使用的场合一般是页面的结构布局,例如网页左中右区域的划分,或者新闻版块的划分等等,也就是说它一般使用在较"大"的层面上。

二.span元素:

它是一个内联元素,当然也可以转换为块级元素,它通常不会用在结构布局上,而是对细节的修饰,比如文字的颜色或者大小。

三.代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习扣qun:731771211  每日分享技术,学术交流</title>
<style type="text/css">
div{
  width:200px;
  height:100px;
  float:left;
  margin-left:10px;
  background-color:#CCC;
}
div ul li span{color:blue}
</style>
</head> 
<body> 
<div id="left">
  <ul>
    <li>认真学前1端<span>2019-1-15</span></li>
    <li>认真学前端2<span>2019-1-15</span></li>
  </ul>
</div>
<div id="right"></div>
</body> 
</html>

以上代码简单演示了div和span元素的用法。

相关文章

  • web前端html实例-div和span元素的用法简单介绍

    简单介绍一下div元素和span元素的用法,这里对于它们的细节不做介绍,这里所要介绍的是在何种场合应该选择何种元素...

  • HTML块

    HTML

    可以通过
    将HTML元素组合起来。 一.HTML块元素 大...

  • htmlb笔记

    设置html的字符串,显示中文 html中常⽤用tag的⽤用法 div, span 定义 span,用来组...

  • HTML 标签

    该篇主要介绍HTML标签,接上篇 HTML 初识 div span 标签 div span 没有语义,是布局网页的...

  • HTML<div>和<span>

    一.可以通过

    将HTML元素组合起来 二.HTML块元素 大多数HTML元素被定义块级元素或...

  • HTML块

    可以通过

    将HTML元素组合起来。 HTML块元素 大多数HTML元素被定义为块级元素或内联...

  • jQuery|"~"同级选择器

    实例 选取 元素同级的所有 元素: $("div ~ p") 定义和用法 ("element ~ sibl...

  • 整理

    HTML中DTD意义和作用 XHTML和HTML的区别 div和span标签的区别 列举常用的meta元素 怪异模...

  • 初识前端笔记之二

    使用 v-html 指令用于输出 html 代码v-html 指令 html几个重要标签用法(div,p,span...

  • HTML 区块

    HTML可以通过

    将元素组合起来大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览...

网友评论

    本文标题:web前端html实例-div和span元素的用法简单介绍

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