一、div 标签

  div 就是 division 的缩写 分割, 分区的意思

  常见的用途是文档布局。

二、span 标签

  span, 跨度,跨距;范围

  <span> 元素可用于为部分文本设置样式属性

三、分类

  根据每个标签的特性和属性不同又可以分为行元素,块元素,行块元素。

  1、块元素 

   块元素主要是 <div> 为首的元素,如 h 系列的标签,p 元素,ul,ol,li 等元素

   特点:

    •   默认与父类同宽度
    •        高度由内容撑开
    •        独占父亲一行

  2、行元素

   行元素是以 <span> 元素为首的标签,如 <strong>标签,a 标签等

   特点:

    •    宽度由内容决定,不支持宽高设置
    •       同行显示,换行有间隙

  3、行块元素

    行块元素同时具有行元素、块元素的特点,如 img 标签等。

    更多的标签学习请参考这里:http://www.w3school.com.cn/html/index.asp

HTML 结构标签(div+span)的更多相关文章

  1. HTML基础之HTML标签-html header(meta,title) html body(p,br,h,form,div,span,input,lable)

    摘自:http://www.imdsx.cn/index.php/2017/07/27/html0/ 一.HTML标签 <!DOCTYPE html> <!--标准的html规则,类 ...

  2. 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)

    一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...

  3. HTML中的Div Span label的区别

    div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...

  4. HTML5-新增语义化结构标签

    总结目录结构: 1.简洁的DOCTYPE声明 2.新的布局结构标签 header,article,section,aside,footer 3.新的其它常用标签: nav,hgroup,figure, ...

  5. div/span等获取焦点问题(tabindex属性的简单理解)

    1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...

  6. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  7. img标签与span一起使用不在同一条线上

    布局时 img标签与span标签在同一行是不能垂直,解决办法:在 img标签添加一个 vertical-align:middle; 即 <!-- img与span的文字与图片保持同一条水平线 在 ...

  8. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  9. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  10. html5新结构标签

    html5新结构标签 <header>  定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...

随机推荐

  1. 08-cmake语法-set()

    CMake的基本数据类型是字符串,一组字符串在一起称为列表(list) 用于设置变量. set(VAR a b c) # 输出 VAR = a;b;c VAR 就是一个list 参考: https:/ ...

  2. echarts x轴标签文字过多导致显示不全

    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...

  3. pycharm调整选中的变量的颜色

  4. opencv4.0.0+cmake编译(含contrib)

    https://blog.csdn.net/bobo184/article/details/88749651 前言笔者环境:win10+vs2015+cmake3.8.2 介绍下4.0.0的新特性,沿 ...

  5. 一本通 1615:【例 1】序列的第 k 个数

    传送门 我在这里! 思路 输入一个序列的前三个数并求出这个序列的第K项,这个数列不是等比序列就是等差数列,等差数列比较好判断,如果序列中\(a_{i+2}-a_{i+1}=a_{i+1}-a_{i}\ ...

  6. 复旦大学2018--2019学年第二学期(18级)高等代数II期末考试第六大题解答

    六.(本题10分)  设 $A$ 为 $n$ 阶实对称阵, 证明: $A$ 有 $n$ 个不同的特征值当且仅当对 $A$ 的任一特征值 $\lambda_0$ 及对应的特征向量 $\alpha$, 矩 ...

  7. 何为pc值

    PC就是程序计数器,就是指挥程序从哪里执行.如果是8位机,每个存储单元存放一个字节,指令有单字节.双字节和3字节.单片机复位时,PC=0000H,而后每执行一条指令,PC根据指令的字节数增加,如图:最 ...

  8. react + node + express + ant + mongodb 的简洁兼时尚的博客网站

    前言 此项目是用于构建博客网站的,由三部分组成,包含前台展示.管理后台和后端. 此项目是基于 react + node + express + ant + mongodb 的,项目已经开源,项目地址在 ...

  9. 为什么需要动态SQL

    为什么需要动态SQL 在使用EF或者写SQL语句时,查询条件往往是这样一种非常常见的逻辑:如果客户填了查询信息,则查询该条件:如果客户没填,则返回所有数据. 我常常看到很多人解决这类问题时使用了错误的 ...

  10. 【LeetCode】缺失的第一个正数【原地HashMap】

    给定一个未排序的整数数组,找出其中没有出现的最小的正整数. 示例 1: 输入: [1,2,0] 输出: 3 示例 2: 输入: [3,4,-1,1] 输出: 2 示例 3: 输入: [7,8,9,11 ...