一、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. vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到过什么问题、踩过的坑)

    问题描述: 用vue封装一个swiper组件的时候,发现轮播图不能轮播了. 原因: 异步请求的时间远大于生命周期执行的时间,mounted初始化DOM时数据未返回,渲染数据是空数组,导致轮播图的容器层 ...

  2. vb.net 对字符串中的括号匹配进行判断,容许嵌套

    '   括号检查 '     括号共有四种:  1(英文圆括号),2(中文圆括号),3[方括号],4{花括号} '      要左右匹配(可以嵌套) Private Shared Function i ...

  3. UA记录

    安卓QQ内置浏览器UA: Mozilla/5.0 (Linux; Android 5.0; SM-N9100 Build/LRX21V) AppleWebKit/537.36 (KHTML, like ...

  4. 基于web公交查询系统---站点信息管理

    界面设计: 界面设计代码获取: 搭建好框架获取信息: 核心代码: var users = [ ];//获取到的bus所有站点信息 var rowIndex = -1; $.ajax({ url: &q ...

  5. 《Linux就该这么学》培训笔记_ch07_RAID和LVM

    <Linux就该这么学>培训笔记_ch07_RAID和LVM 文章最后会post上书本的笔记照片. 文章主要内容: RAID(独立冗余磁盘阵列) 部署磁盘阵列 损坏磁盘阵列及修复 磁盘阵列 ...

  6. Centos修改swap分区大小

    1. 查看当前分区情况 free -m 2. 增加swap大小 dd if=/dev/zero of=/var/swap bs=1024 count=12288000 #增加12G空间 3. 设置交换 ...

  7. [转帖]Linux firewalld 防火墙使用

    Linux firewalld 防火墙使用 2018-06-19 19:26:08 蚩尤后裔 阅读数 2101  收藏 更多 分类专栏: Linux   版权声明:本文为博主原创文章,遵循CC 4.0 ...

  8. 在RedisTemplate中使用scan代替keys指令

    keys * 这个命令千万别在生产环境乱用.特别是数据庞大的情况下.因为Keys会引发Redis锁,并且增加Redis的CPU占用.很多公司的运维都是禁止了这个命令的 当需要扫描key,匹配出自己需要 ...

  9. Spring Boot 嵌入式 Tomcat 文件上传、url 映射虚拟路径

    1.Java web 应用开发完成后如果是导入外置的 Tomcat 的 webapps 目录的话,那么上传的文件可以直接的放在应用的 web 目录下去就好了,浏览器可以很方便的进行访问. 2.Spri ...

  10. C/C++ 的编译和链接

    C/C++文件 C/C++程序文件包括 .h .c .hpp .cpp,其中源文件(.c .cpp)是基本的编译单元,头文件(.h .hpp)不会被编译器编译. C/C++项目构建(build)过程, ...