HTML <div> 和 <span>

可以通过 <div> 和 <span> 将 HTML 元素组合起来。


HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注:"块级元素"译为 block level element,"内联元素"译为 inline element。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

例子:<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子:<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签

描述

<div>

定义文档中的分区或节(division/section)。

<span>

定义 span,用来组合文档中的行内元素。

html5 区块与内联div 与span html块级元素的更多相关文章

  1. div和span与块级和行内标签

    <div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...

  2. 块级元素 Vs 内联元素

    HTML的元素可以分为两种: 块级元素(block level element ) 内联元素(inline element ) 二者的区别如下: 1. 块级元素独占一行(除非显示修改元素的displa ...

  3. 4-21 嵌套选择器 、块级元素和内联元素、光标、布局-overflow

    1.嵌套选择器 p{ }: 为所有 p 元素指定一个样式.(默认,,也就是说可以被改变样式) .marked{ }: 为所有 class="marked" 的元素指定一个样式. . ...

  4. [html]------行内元素与块级元素

    块级元素(block element)div -最常用的块级元素dl - 和dt dd搭配使用的块级元素form - 交互表单h1 - 大标题hr - 水平分隔线ol - 排序表单p - 段落ul - ...

  5. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

  6. 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  7. css总结17:HTML块级元素&行内元素之分: <div> 和<span>

    1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...

  8. 关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级(内联)元素? 块级(block)元素的特点: ①总是在新行上开始: ②高度,行高以及外边距和内边距都可控制: ③宽度缺省是它的容器的100%,除非设定一个宽度: ...

  9. HTML(二)HTML元素(整体结构,块级元素,内联元素,结构元素,交互元素,元素嵌套规则)

    HTML整体结构解释 <!DOCTYPE html> // 文件应以"<!DOCTYPE ......>"首行顶格开始,推荐使用"<!DOC ...

随机推荐

  1. UITableView 头部效果/放大/移动跟随效果

    [self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOp ...

  2. 网络基础 08_NAT

    1 NAT的基本概念 为什么需要NAT IPv4地址紧缺 什么是NAT NAT(Network Address Translation) 私有IPv4地址 10.0.0.0 - 10.255.255. ...

  3. BZOJ - 2500 树形DP乱搞

    题意:给出一棵树,两个给给的人在第\(i\)天会从节点\(i\)沿着最长路径走,求最长的连续天数\([L,R]\)使得\([L,R]\)为起点的最长路径极差不超过m 求\(1\)到\(n\)的最长路经 ...

  4. hdu 3709 Balanced Number(平衡数)--数位dp

    Balanced Number Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) ...

  5. Mac 10.12安装专业抓包工具Wireshark

    说明:专业到不太会用. 下载: (链接: https://pan.baidu.com/s/1c570YE 密码: pkmr)

  6. 【JSP】jsp报错:Syntax error, insert "}" to complete MethodBody

    使用MyEclipse编写JSP的时候有时会报错误如下 Syntax error, insert "}" to complete MethodBody 大体意思就是说方法体缺少缺少 ...

  7. Linux 下使用yum 命令安装MySQL

    Linux下使用yum安装MySQL,以及启动.登录和远程访问MySQL数据库. 1.yum安装mysql 1. 查看有没有安装包:   yum list mysql*    #移除已经安装的mysq ...

  8. 在超链接href中实现form的提交

    <form name="form1" method="post" action=""> <div class=" ...

  9. vue监听不到props中的值时

    已解决: watch: { data: { immediate: true, handler: function(newVal) { console.log(newVal); } } },

  10. 打乱数组——shuffle

    在学习vue移动端音乐项目时,看到一个打乱数组函数,感觉很有意思就记录一下(意外发现:slice是个有趣的知识点) 原理:遍历数组,(let i = 0; i < _arr.length; i+ ...