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-05 15:16:01

html块级元素和行内元素的相关文章

关于块级元素与行内元素

块级元素 块级元素拥有以下的几个特征: 如果宽度未设置,则元素会自动适应父元素的宽度 可以拥有外边距与内边距 如果高度未设置,则元素会自动适应子元素的高度(假设它们没有设置浮动与定位) 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位) 忽略vertical-align属性 所以,对于块级元素来说,我们没有必要设置width:100%来让它的宽度撑满父元素,而且那样做的话还有可能会对日后的维护带来麻烦. 而且,对于上述第四点来说,我们没有必要对块级元素设置"clear"

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

一.行内元素与块级函数的三个区别 行内元素的特点: 和其他元素都在一行上: 高,行高及外边距和内边距部分可改变: 宽度只与内容有关: 行内元素只能容纳文本或者其他行内元素. 行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效 块级元素 总是在新行上开始,占据一整行: 高度,行高以及外边距和内边距都可控制: 宽带始终是与浏览器宽度一样,与内容无关: 它可以容纳行内元素和其他块元素. 二.行内元素转换为块级元素 display

块元素和行内元素

块元素: 1.占用整行宽度 2.前后都有换行符 3.拥有完整的盒模型结构 行内元素: 1.根据内容决定占用宽度 2.前后不换行 3.不拥有完整的盒模型结构 补充: warning: 1.一个内联元素设置为display:block是不允许有它内部的嵌套块元素. 2.块级元素可以包含行内和块级,但行内元素不能包含块级元素. 3.行内元素设置width无效,height无效,可以设置line-height, margin上下.padding上下无效.(水平方向排列)

HTML 块级元素与行内元素

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

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

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

块级元素与行内元素

标准文档流是指在没有CSS干预时各种元素的排列规则.在这种前提下,HTML文档中的元素可以分为两大类:块级元素和行内元素.1.块级元素(block)独占一行,可以设定元素的宽和高.常见的块级元素有:* html 文档的类型* body 文档的内容* h1-h6 一级标题到六级标题* p 文章段落* ul 无序列表* li 定义列表项目* ol 有序列表* dl 定义列表* dt 定义列表中的项目* dd 定义列表中定义条目* pre 定义预格式文本* blockquote 大段引用* div 划

深度理解CSS中块级元素与行内元素的区别（个人易错点）

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ

块级元素和行内元素

块级元素和行内元素的区别 1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度.   行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.块级元素是可以设置宽高,而行内元素不可以. 3.块级元素可以设置外边距(margin),内边距(padding).   行内元素水平方向的margin-left; margin-right; padding-left; padding-right;

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

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