文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

html的内联元素和块级元素有什么不同

2024-04-02 19:55

关注

这篇文章给大家分享的是有关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&ndash;居中对齐

  dir-目录列表

  div-常用块级容易,也是CSSlayout的主要标签

  dl-定义列表

  fieldset-form控制组

  form-交互表单

  h2-大

  h3-副

  h4-3级

  h5-4级

  h6-5级

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


感谢各位的阅读!关于“html的内联元素和块级元素有什么不同”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯