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. ES6之新增let命令使用方法

    let命令的用法 let是es6中的声明一个变量的命令,只在它声明的代码块中有效,出了这个代码块就会报错.也非常适合for循环,在循环中i的值只在循环语句中生效,在外边取不到的. var命令声明的是一 ...

  2. shell-008:检测502

    检测502的方法有多种 1.curl他的状态码(不建议,会对网站造成不必要的访问和多余的日志输出) 2.可以直接检测访问日志 下面用while做成一个死循环监控日志502的状态 #!/bin/bash ...

  3. [转] linux alias 编写 函数 脚本

    [From] https://blog.csdn.net/csdnmonkey/article/details/53286314 案例 alias ttt='ttt(){ echo $1 ; };tt ...

  4. SpringMVC初写(一)SpringMVC的配置方式

    1.Spring概述a)SpringMVC是什么?SpringMVC是Spring框架内置的MVC实现.SpringMVC就是一个Spring内置的MVC子框架MVC:Model-View-Contr ...

  5. 【ORACLE】oracle 日志文件管理

    修改Oracle重做日志文件大小 创建新的日志组1 删除旧的日志组0(旧的日志组状态需要是INACTIVE) 创建新的日志组2,组名为旧的日志组0的组名 删除日志组1 ---------------- ...

  6. Linux下C++开发常用命令

    本页面记录本人在Linux下进行C++开发时使用的常用命令,注意这里不包括比如ls,mv等linux命令,这里会持续更新.首先假设你只有一个源程序文件,叫vec.cpp,编译后的可执行程序叫vec(本 ...

  7. Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call. 调用函数约定不同

    Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call.  This is ...

  8. WPF使用Path画圆的一个示例代码

    <Path Fill="red" Data="M 0,0 A 20,20 45 1 1 0,1 Z"/> 1. Fill是指Path的填充颜色 2. ...

  9. Debian9安装桌面环境

    更新安装源 apt-get update 安装 x-window apt-get install x-window-system-core 安装 gnomeapt-get install gnome- ...

  10. JAVA练手--String

    package tet; public class kk { public static void main(String[] args) { //1. { String Stra = "1 ...