【HTML】行内-块级-行块级

  • 行内元素
  1. 相邻元素可以在一行显示直到一行排不下才进行换行。
  2. 不可设置宽高,宽度随内容变化。
  3. padding和margin的设置中,水平方向(padding-left…)有效果,垂直方向无效果。
  • 块级元素
  1. 占一行或多行。
  2. 可设置宽高。
  3. 排列从上至下。
  4. 可设置padding和margin。
  5. 宽度没设置,默认100%
  • 行内块元素
  1. 不自动换行。
  2. 可设置宽高。
  3. 排列从左到右。
  • 行内元素,块级元素,行内块元素之间的转换
  1. display:inline;转换为行内元素
  2. display:block;转换为块状元素
  3. display:inline-block;转换为行内块状元素

行内元素

       * 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 – 定义变量

块级元素

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

可变元素

  可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  * applet – java applet
  * button – 按钮
  * del – 删除文本
  * iframe – inline frame
  * ins – 插入的文本
  * map – 图片区块(map)
  * object – object对象
  * script – 客户端脚本