热门关键字:
jquery > jquery教程 > jquery教程 > HTML_html内联元素和块级元素的基本概念及使用示例

HTML_html内联元素和块级元素的基本概念及使用示例

317
作者:管理员
发布时间:2021/6/21 18:29:59
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4985
  html内联元素和块级元素的基本概念及使用示例


  html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念:


  块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div”


  内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。


  根据块级元素的概念我们可以理解为块级元素前后带有换行符,也就相当于元素前后加了一个


  标签。我们可以把块级元素想象成一个块或一个矩形,所以块级元素能设置高度宽度属性


  例:


  css文件:


  复制代码代码如下:


  #div1{


  width:200px;


  height:200px;


  background:#666


  }


  div2{


  width:200px;


  height:200px;


  background:#F00


  }


  html文件:


  复制代码代码如下:


  div1


  块级元素排斥其他元素与其位于同一行


  div2


  块级元素排斥其他元素与其位于同一行


  显示效果:


  两个div元素不位于同一行


  根据内联元素的概念,我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线,所以它不能设置height属性和width属性。


  块级元素(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 - 非排序列表


  内联元素(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 - 定义打字机文本




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐