块元素：单独占一行，宽度占整行，可以包含内联元素和其他块元素，通过样式display:inline，变为行内元素，不换行

　　内联元素：不单独占一行，宽度根据内容来决定，只能容纳文本或者其他内联元素 ，可以通过样式display:block，使其单独占一行，但是不能包含块元素,不能设置width, height, padding-top, padding-bottom和margin-top, margin-bottom

1、常见块元素(block element)   

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

2、内联元素(inline element)   

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器，定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

　　例子

　　html代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--块元素独自占一行-->

<h2 style="background-color:red">Nirvana</h2>

<!--不独自占一行，该多宽就多宽-->

<span style="background-color:green">Record: MTV Unplugged in New York</span>

<span>Year: 1993</span>

<h2>Radiohead</h2>

<span>Record: OK Computer</span>

<span>Year: 1997</span>

</body>

</html>

　　运行结果：

HTML 基础 块级元素与行内元素的更多相关文章

  1. 【CSS3】块级元素与行内元素的区别

    一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效 ...

  2. 基础复习之HTML （meta标签、块级元素与行内元素）

    一.meta标签 SEO 如何在不使用JS的情况下刷新页面(http-equiv="refresh" , content="time") 设置页面缓存 移动端设 ...

  3. CSS学习笔记——盒模型，块级元素和行内元素的区别和特性

    今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...

  4. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

  5. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  6. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  7. CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  8. html块级元素与行内元素

    1.关于行内元素和快元素的说明: 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display ...

  9. css块级元素和行内元素详细解析

    块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div  p  form ul ol li 等: 常见的行内元素:span stronh em; ...

  10. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

随机推荐

  1. linux如何查询系统驱动是否支持该型号显卡

    操作系统在做硬件适配时,经常会检查系统内核是否支持硬件的显卡:如果不支持,则一般是通过升级内核或者该型号对应品牌的显卡驱动来解决(开源或者闭源): 操作流程如下 1> 查询本机的显卡型号 因显卡 ...

  2. BZOJ1084或洛谷2331 [SCOI2005]最大子矩阵

    BZOJ原题链接 洛谷原题链接 注意该题的子矩阵可以是空矩阵,即可以不选,答案的下界为\(0\). 设\(f[i][j][k]\)表示前\(i\)行选择了\(j\)个子矩阵,选择的方式为\(k\)时的 ...

  3. kdump 调试手段

    kdump是在系统崩溃的时候用来转储内存运行参数的一个工具和服务,打个比方,如果系统一旦崩溃那么正常的内核就没有办法工作了,在这个时候将由kdump产生一个用于capture当前运行信息的内核,该内核 ...

  4. [SoapUI] 从上一个测试步骤获取ID list，通过Groovy脚本动态生成 Data Source 供后面的步骤使用

    https://support.smartbear.com/readyapi/docs/testing/data-driven/types/groovy.html 从官网拷贝code到SoapUI里面 ...

  5. Java开发环境安装配置

    电脑配置:Win7 64位 JDK1.8+Apache Tomcat8.5.4 下载JDK1.8 全名: Java SE Development Kit 8u151,下载最新稳定版本 下载地址:htt ...

  6. m序列

    产生m序列移位寄存器是一种逻辑电路,1阶,2阶...的电路图各不相同. 一般使用本原多项式计算出各阶数电路图. 一般的多项式为 f(x) = c0 * x^0 + c1 * x^1 + c2 * x^ ...

  7. MySQL把本地数据库上传到linux

    今天是要导入数据库到linux系统 先用Navicat把sql导出,然后登陆到linux去执行 登陆mysql: mysql -uroot -p123456 创建数据库:create database ...

  8. Django+Uwsgi+Nginx项目部署文档

    一.基本环境搭建 1)查看服务器 [root@Myjumpserver ~]# cat /etc/sysconfig/selinux SELINUX=disabled SELINUXTYPE=targ ...

  9. SpringMVC作用域传值几种方式

    一.SpringMVC 作用域传值的几种方式 1  使用原生Servlet 1.1 在 HandlerMethod 参数中添加作用域对象 1.1.1 ServletContext不能在方法参数中获取, ...

  10. Python开课复习-10/17

    pickle是一个用来序列化的模块序列化是什么?指的是将内存中的数据结构转化为一种中间格式 并存储到硬盘上 反序列化?将硬盘上存储的中间格式数据在还原为内存中的数据结构 为什么要序列化?就是为了将数据 ...