html块标签与行内标签(超有用)

转自:http://blog.csdn.net/yuyanqiao/article/details/8558118

  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-10-09 18:44:59

html块标签与行内标签(超有用)的相关文章

img/input等部分标签是行内标签,为什么也可以设置宽和高

常见标签分类在平常的学习中,我们应该都知道 html 标签可以分为块级标签和行内标签常见的块级标签有:ul.ol.li.form.h1-h6.hr.p.table.div 等常见的行内标签有:a.button.br.img.input.label.select.span 等但细心的同学就会发现,尽管 img 是行内标签,但是我们仍然可以给其设置宽和高,这里就涉及到另一个概念 另一种分类:可替换标签和不可替换标签可替换标签:标签的具体显示内容要根据其属性来决定的标签就是可替换标签,如 img.in

css基础 display:inline 块级标签->行内标签 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

行内标签与块级标签的转换

display : inline-block  块级标签转换为行内标签 display : block  行内标签转换为块级标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="dis

CSS中的行内标签变成块级标签

大家都知道,CSS中的行内标签(span,i,b等等),是不能设置宽高或者margin-top;margin-bottom;但是在设置了display为block或者inline-block的情况下是可以设置的,这就是常见的行内元素转化为块级元素: 今天给大家分享的是自己在案例中看到的小技巧.给行内标签添加position:absolute或者float中的设置,行内元素是会被默认转成块级元素!!!

行内标签 和 块级标签

块级标签 div    ………………块级标签 h1~h6   ………………标题 ul (内含多个li) ol (内含多个li) dl (内含一个dt    多个dd)………………列表 table(内含tr  th  td)……………………表格 p…………………………………………段落 br…………………………………………换行 form……………………………………表单 行级标签 span a……………………超链接 img……………………图片 var……………………变量,显示斜体 strong…………

css基础 display:block 行内标签转为块级标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

网页编程技术二(块级元素和行内标签)

1.块级元素 顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1></h1> ~ <h6></h6>,从1级到6级每级标题的字体依次递减 1.2水平线标签:<hr/>,添加水平分隔线,让页面更容易区分段落:该标签是单个出现,不是成对出现: 1.3段落标签:<p></p>,使用段落标签区分段落,不同的段落之间

HTML学习笔记——块级标签、行级标签、图片标签

1>块级标签.行级标签 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

块元素与行内(内嵌)元素的区别

原文连接http://www.jb51.net/css/468282.html block(块)元素的特点: ①总是在新行上开始,相当于每个块元素默认有个换行符:②高度,行高以及外边距和内边距都可控制:③宽度缺省是它的容器的100%,除非设定一个宽度.④它可以容纳内联元素和其他块元素 inline元素的特点: ①和其他元素都在一行上  默认没有换行符所以在一行上可以显示多个行内元素:②高,行高及外边距和内边距不可改变:③宽度就是它的文字或图片的宽度,不可改变④内联元素只能容纳文本或者其他内联元素