html的内联元素和块级元素有哪些不同

  html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念:
 
  块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div”
 
  内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。
 
  根据块级元素的概念我们可以理解为块级元素前后带有换行符,也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形,所以块级元素能设置高度宽度属性
 
  例:
 
  css文件:
 
  #div1{
 
  width:200px;
 
  height:200px;
 
  background:#666
 
  }
 
  div2{
 
  width:200px;
 
  height:200px;
 
  background:#F00
 
  }
 
  html文件:
 
  <divid="div1">
 
  div1
 
  块级元素排斥其他元素与其位于同一行
 
  </div>
 
  <divid="div2">
 
  div2
 
  块级元素排斥其他元素与其位于同一行
 
  </div>
 
  两个div元素不位于同一行
 
  根据内联元素的概念,我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线,所以它不能设置height属性和width属性。
 
  块级元素(blockelement)标签
 
  address-地址
 
  blockquote-块引用
 
  center–居中对齐
 
  dir-目录列表
 
  div-常用块级容易,也是CSSlayout的主要标签
 
  dl-定义列表
 
  fieldset-form控制组
 
  form-交互表单
 
  h1-大标题
 
  h2-副标题
 
  h3-3级标题
 
  h4-4级标题
 
  h5-5级标题
 
  h6-6级标题
 
  hr-水平分隔线
 
  isindex-inputprompt
 
  menu-菜单列表
 
  noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容
 
  noscript-可选脚本内容(对于不支持script的浏览器显示此内容)
 
  ol-排序表单
 
  p-段落
 
  pre-格式化文本
 
  table-表格
 
  ul-非排序列表
 
  内联元素(inlineelement)
 
  a-锚点
 
  abbr-缩写
 
  acronym-首字
 
  b-粗体(不推荐)
 
  bdo-bidioverride
 
  big-大字体
 
  br-换行
 
  cite-引用
 
  code-计算机代码(在引用源码的时候需要)
 
  dfn-定义字段
 
  em-强调
 
  font-字体设定(不推荐)
 
  i-斜体
 
  img-图片
 
  input-输入框
 
  kbd-定义键盘文本
 
  label-表格标签
 
  q-短引用
 
  s-中划线
 
  samp-定义范例计算机代码
 
  select-项目选择
 
  small-小字体文本
 
  span-常用内联容器,定义文本内区块
 
  strike-中划线
 
  strong-粗体强调
 
  sub-下标
 
  sup-上标
 
  textarea-多行文本输入框
 
  tt-定义打字机文本
 
  var-定义变量







本文转载自中文网

推荐阅读