HTML 区块元素

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

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

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

HTML 内联元素

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

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

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

HTML <div> 元素

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

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

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

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

HTML <span> 元素

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

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

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

HTML学习(13)区块元素和内联元素的更多相关文章

  1. Css中的两个重要概念:块状元素和内联元素

    一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...

  2. html标签分两种:块状元素和内联元素

      块状元素一般是其它元素的容器,可以容纳内联元素和其它块状元素,独占一行,宽度和高度起作用.如div,p等标签属于块状元素.     内联元素只能容纳文本和其它内联元素,可与其它内联元素位于同一行, ...

  3. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  4. CSS 块状元素和内联元素的详解

    我们先来分析一下块级元素.内联级元素的定义和解析:  块元素(block element)一般是其他元素的容器元素,块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P&q ...

  5. CSS 块状元素和内联元素

    在用CSS布局页面的时候,我们会将HTML标签分成两种,块状元素和内联元素(我们平常用到的div和p就是块状元素,链接标签a就是内联元素) 块状元素一般是其他元素的容器,可容纳内联元素和其他块状元素, ...

  6. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  8. HTML-块级元素和内联元素

    HTML-块级元素和内联元素 块级元素 内联元素 address - 地址 block - 块引用 center - 居中对齐块(不推荐) dir - 目录列表(HTML5踢出) div - 常用的不 ...

  9. htmlt中的块状元素与内联元素

    块元素(block element) address - 地址 blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout ...

随机推荐

  1. 安装Bind到CentOS(YUM)

    运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:Bind-x 硬件要求:无 安装过程 1.配置YUM源 [root@localhost ~]# ...

  2. PAT (Advanced Level) Practice 1015 Reversible Primes (20 分)

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  3. 0级搭建类004-中标麒麟 Linux 安装 (V7.0) 公开

    项目文档引子系列是根据项目原型,制作的测试实验文档,目的是为了提升项目过程中的实际动手能力,打造精品文档AskScuti. 项目文档引子系列目前不对外发布,仅作为博客记录.如学员在实际工作过程中需提前 ...

  4. 2020牛客寒假算法基础集训营6 E.立方数(唯一分解定理 素数筛)

    https://ac.nowcoder.com/acm/contest/3007/E 放下题解 #include<bits/stdc++.h> using namespace std; t ...

  5. source insight增加tab标签页的方法之sihook

    1.效果如下 2.方法见如下博客 http://www.cnblogs.com/Red_angelX/archive/2013/01/23/2873603.html

  6. Git分支规范说明

    1.分支类型说明 分支名称 分支描述 唯一 权限管理 release 发布分支,内部分支,当确定需要发布版本时,从develop分支拉出此分支 唯一 最高权限,由版本经理或者团队核心成员组管理 mas ...

  7. chrome json接口数据 插件

    chrome json接口数据 插件 JSON-Handle 官网 下载后 地址栏输入 chrome://extensions/ 将下载的文件拖入页面 OK

  8. gulp-css-spriter 雪碧图合并

    相信做前端的同学都做过这样的事情,为优化图片,减少请求会把拿到切好的图标图片,通过ps(或者其他工具)把图片合并到一张图里面,再通过css定位把对于的样式写出来引用的html里面.gulp-css-s ...

  9. gazebo仿真踩坑--rviz中设定机器人的目标位置,move_base后台日志报错

    启动仿真环境及各种节点(amcl,move_base,map_server)后,在rviz中设定机器人的目标位置,后台日志报错 [ INFO] [1571974242.864525935, 40.51 ...

  10. vue页面加载前显示{{代码}}的原因及解决办法

    进入正题,简单说说自己对html中出现{{}}的原因及解决办法: 这样写的话,就会出现{{}}一闪的情况: 原因:html的加载顺序: 解析html结构 -> 加载外部脚本和样式表文件 -> ...