HTML 结构标签(div+span)
一、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)的更多相关文章
- 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规则,类 ...
- 10-2 body标签中相关的标签(字体标签,排版标签(div,span),超链接,图片标签)
一 排版标签(div,span) 1块级标签 <!--div:把标签中的内容作为一个块儿来对待(division).必须单独占据一行.--> <!--div标签的属性:--> ...
- HTML中的Div Span label的区别
div与span 大家在初学div+css布局时,有很多困惑,在div与span的使用过程没觉得有一定的”章法”,觉得两个区别不大,在w3c的关于div和span的定义:div作为分割文档结构自然使它 ...
- HTML5-新增语义化结构标签
总结目录结构: 1.简洁的DOCTYPE声明 2.新的布局结构标签 header,article,section,aside,footer 3.新的其它常用标签: nav,hgroup,figure, ...
- div/span等获取焦点问题(tabindex属性的简单理解)
1.先看问题 当我们要对一个div/span元素获取焦点的时候,直接对$("#div1").focus()是不能实现效果的,比如下图: 当点击输入框进行输入后,在点击区域弹出选择地 ...
- HTML5新增结构标签
引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...
- img标签与span一起使用不在同一条线上
布局时 img标签与span标签在同一行是不能垂直,解决办法:在 img标签添加一个 vertical-align:middle; 即 <!-- img与span的文字与图片保持同一条水平线 在 ...
- 前端 HTML body标签相关内容 常用标签 盒子标签 div
盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...
- HTML5的新结构标签
在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...
- html5新结构标签
html5新结构标签 <header> 定义 section 或 page 的页眉,也就是定义头部的标签. <footer> 定义 section 或 page 的页脚. & ...
随机推荐
- java任务调度之Timer定时器
定时器相信大家都不陌生,平时使用定时器就像使用闹钟一样,我们可以在固定的时间做某件事,也可以在固定的时间段重复做某件事,今天就来分析一下java中自带的定时任务器Timer. 一.Timer基本使用 ...
- mysql之子查询、视图、事务及pymysql等
数据准备 CREATE TABLE `emp` ( `id` int(0) NOT NULL AUTO_INCREMENT, `name` varchar(10) NOT NULL, `gender` ...
- POJ1463-Strategic game-(树形dp)
http://poj.org/problem?id=1463 题意:有一棵n个结点的树,要在这棵树上放士兵守卫,一个士兵可以守卫自己所在的位置以及与之相邻的点.问最少放多少个士兵? 题解:对于每个点, ...
- 历届试题 危险系数-(dfs+记录路径)
历届试题 危险系数 问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我 ...
- monkey--常用参数
前戏 参数分类:常规类参数,事件类参数,约束类参数,调试类参数 常规类参数:常规类参数包括帮助参数和日志信息参数,帮助参数用于输出monkey命令使用指导,日志信息参数将日志分为三个等级,级别越高,日 ...
- Qt常用类——QFrame类与QWidge类
QFrame与QWidget的区别: QFrame是基本控件的基类,QWidget是QFrame基类. QWidget类是所有用户界面对象的基类. Widget是用户界面的基本单元:它从窗口系统接收鼠 ...
- docker 修改gwbridge ip address
docker_gwbridge介绍 docker_gwbridge接口为使用多主机群覆盖网络的所有容器和任务提供默认网关功能.它是在每个Docker主机上创建的,当它们加入集群时.如果接口docker ...
- 【BigData】Java基础_构造方法的使用
需求描述 实现上图需求,根据输入的三个人的信息,分别计算出这个三个客户的平均年龄和最大年龄 涉及知识点: ①构造方法 ②字符串切割 ③对象数组 代码实现 代码结构图: package cn.test. ...
- .NET Core 获取自定义配置文件信息
前言 .net core来势已不可阻挡.既然挡不了,那我们就顺应它.了解它并学习它.今天我们就来看看和之前.net版本的配置文件读取方式有何异同,这里不在赘述.NET Core 基础知识. ps:更新 ...
- Shell脚本之五 基本运算符
Shell 和其他编程语言一样,支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 ...