(转)html块级元素与行内元素-哪些是块级哪些是内联对象

  1. 块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签‘P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
  2. 如 果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想 要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和 css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果 普通使用者不经意点了 查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经 验的普通使用者把内容快 速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。
  3. 你 能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下 来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种 技术的延伸,网页布局设计也遵循了同样的模式。.
  4. 内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
  5. 块 元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从 新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上 display:block这样的属性,让他也有每次都从新行开始的属性。
  6. 可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
  7. 关 于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元 素,我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
  8. 块元素(block element)
  9.   * address - 地址
  10.   * blockquote - 块引用
  11.   * center - 举中对齐块
  12.   * dir - 目录列表
  13.   * div - 常用块级容易,也是css layout的主要标签
  14.   * dl - 定义列表
  15.   * fieldset - form控制组
  16.   * form - 交互表单
  17.   * h1 - 大标题
  18.   * h2 - 副标题
  19.   * h3 - 3级标题
  20.   * h4 - 4级标题
  21.   * h5 - 5级标题
  22.   * h6 - 6级标题
  23.   * hr - 水平分隔线
  24.   * isindex - input prompt
  25.   * menu - 菜单列表
  26.   * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  27.   * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  28.   * ol - 排序表单
  29.   * p - 段落
  30.   * pre - 格式化文本
  31.   * table - 表格
  32.   * ul - 非排序列表
  33. 内联元素(inline element)
  34.   * a - 锚点
  35.   * abbr - 缩写
  36.   * acronym - 首字
  37.   * b - 粗体(不推荐)
  38.   * bdo - bidi override
  39.   * big - 大字体
  40.   * br - 换行
  41.   * cite - 引用
  42.   * code - 计算机代码(在引用源码的时候需要)
  43.   * dfn - 定义字段
  44.   * em - 强调
  45.   * font - 字体设定(不推荐)
  46.   * i - 斜体
  47.   * img - 图片
  48.   * input - 输入框
  49.   * kbd - 定义键盘文本
  50.   * label - 表格标签
  51.   * q - 短引用
  52.   * s - 中划线(不推荐)
  53.   * samp - 定义范例计算机代码
  54.   * select - 项目选择
  55.   * small - 小字体文本
  56.   * span - 常用内联容器,定义文本内区块
  57.   * strike - 中划线
  58.   * strong - 粗体强调
  59.   * sub - 下标
  60.   * sup - 上标
  61.   * textarea - 多行文本输入框
  62.   * tt - 电传文本
  63.   * u - 下划线
  64.   * var - 定义变量
  65. 可变元素
  66.   可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  67.   * applet - java applet
  68.   * button - 按钮
  69.   * del - 删除文本
  70.   * iframe - inline frame
  71.   * ins - 插入的文本
  72.   * map - 图片区块(map)
  73.   * object - object对象
  74.   * script - 客户端脚本
时间: 2024-08-03 03:10:31

(转)html块级元素与行内元素-哪些是块级哪些是内联对象的相关文章

微信小程序布局之行内元素和块级元素

元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制. 块级元素特点总结: 1.总是在新行上开始 2.宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好等于父级元素的内容区域宽度,即父元素的width.当设定新的宽度,如果宽度是100%,并且padding.margin不为零,导致块级元素宽度溢出父元素 3.盒子模型的高度默认由内容决定 4.盒子模型中高度.宽度和内外边距都是可控制

HTML 块级元素与行内元素

1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"."form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排.而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想要 的位置上去.而不是每次都愚蠢的另起一行.需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障

【前段开发】行内元素和块级元素总结(HTML CSS)

块级元素 <address> information on author <blockquote> long quotation <button> push button <caption> table caption <dd> definition description <del> deleted text <div> generic language/style container <dl> defini

行内元素与块级元素的区分

块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4> 定义标题 <h5&

行内元素和块级元素

1 块级元素:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table 行内元素:span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite, 内联元素(inline element) a - 锚点 b - 粗体(不推荐) br - 换行 em - 强调 font - 字体设定(不推荐)

行内元素和块级元素总结

块级元素<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条目<div> 定义文档中的分区或节<dl> 定义列表<dt> 定义列表中的项目<fieldset> 定义一个框架集<form> 创建 HTML 表单<h1> 定义最大的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6&

行内元素和块级元素的区别

一.行内元素和块级元素的区别 1. 行内元素不会占据整行,在一条直线上排列,都是同一行,水平方向排列: 块级元素会占据一行,垂直方向排列. 2. 块级元素可以包含行内元素和块级元素:行内元素不能包含块级元素. 3. 行内元素与块级元素属性的不同,主要是盒模型属性上,行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 二.行内元素和块级元素的相互转换 行内元素转化为块元素: display:block; 块元素转化为行内元

块级元素和行内元素的区别 (block vs. inline)

块级元素 (display: block) 独占一行,多个block元素会各自新起一行.默认情况下,block元素的宽度会填满父元素的宽度. 可以设置width, height属性.但是,即使设置了width属性,仍然独占一行. 可以设置margin, padding. 行内元素 (display: inline) HTML元素分为替换元素和非替换元素. 替换元素是指浏览器根据其标签的元素与属性来判断显示具体的内容.例如img,input等. HTML中大多数元素是不可替换元素,他们将内容直接告

替换元素和不可替换元素,块级元素和行内元素

替换元素和不可替换元素 1>  替换元素 替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容,在其显示中生成了框.HTML中的<img>.<input>.<textarea>.<select>.<object>都是替换元素.这些元素往往没有实际的内容,即是一个空元素.Example:#1 <img src=”path/to/picture.jpg”/>浏览器根据<img>标签的src属性的值来读取图片信

3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  hr    table 2.行内元素(内联元素) A:常见的=行内元素有 a  span  img   input B:行内元素的特点 B.1 大小受到文字区域影响,不受width  height 影响 B.2 行内元素不会单独占满一行 3. 行内元素和块级元素相互转换 A:  行内元素转换成块级元素