iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >html的内联元素和块级元素有什么不同
  • 503
分享到

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

2024-04-02 19:04:59 503人浏览 薄情痞子
摘要

这篇文章给大家分享的是有关html的内联元素和块级元素有什么不同的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   html标签分为两种,内联元素和块级元素,首先我们先了解一下

这篇文章给大家分享的是有关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的内联元素和块级元素有什么不同”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: html的内联元素和块级元素有什么不同

本文链接: https://www.lsjlt.com/news/91958.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html的内联元素和块级元素有什么不同
    这篇文章给大家分享的是有关html的内联元素和块级元素有什么不同的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   html标签分为两种,内联元素和块级元素,首先我们先了解一下...
    99+
    2024-04-02
  • html中内联元素和块级元素有什么区别
    这篇文章主要介绍“html中内联元素和块级元素有什么区别”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html中内联元素和块级元素有什么区别”文章能帮助大家解决问题...
    99+
    2024-04-02
  • HTML块级元素和内联元素怎么使用
    这篇文章主要介绍“HTML块级元素和内联元素怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML块级元素和内联元素怎么使用”文章能帮助大家解决问题。 1...
    99+
    2024-04-02
  • HTML行内元素和块级元素的区别是什么
    这篇文章主要介绍“HTML行内元素和块级元素的区别是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML行内元素和块级元素的区别是什么”文章能帮助大家解决问题...
    99+
    2024-04-02
  • 行内元素和块级元素的区别有什么
    行内元素和块级元素的区别有:1、行内元素不会独占一行,而块级元素会独占一行;2、行内元素的宽度由其内容决定,而块级元素的宽度默认是其父元素的100%;3、行内元素的盒模型主要包括水平方向的内边距、外边距和边框,而每个方向都有。本教程操作系统...
    99+
    2023-08-18
  • HTML5中常见的内联元素和块级元素有哪些?
    HTML5中常见的行内元素和块级元素有哪些?HTML5是一种用于创建网页和Web应用程序的标记语言。在HTML5中,元素按其显示行为可以分为两类:行内元素和块级元素。行内元素指的是在一行内显示,并且只占据内容所需要的宽度,不会独占一行;而块...
    99+
    2023-12-28
    html 块级元素 行内元素
  • html块级元素和行级元素的区别是什么
    本篇内容主要讲解“html块级元素和行级元素的区别是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html块级元素和行级元素的区别是什么”吧!行内、块状元素...
    99+
    2024-04-02
  • HTML中行内元素和块级元素的区别有哪些
    本文将为大家详细介绍“HTML中行内元素和块级元素的区别有哪些”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“HTML中行内元素和块级元素的区别有哪些”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体...
    99+
    2023-06-06
  • html内联元素和块级元素的基本概念及如何使用
    这篇“html内联元素和块级元素的基本概念及如何使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看...
    99+
    2024-04-02
  • CSS中块元素和内联元素的区别是什么
    本篇文章为大家展示了CSS中块元素和内联元素的区别是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。CSS中块元素和内联元素的区别CSS块元素(blockelem...
    99+
    2024-04-02
  • html中有哪些行内元素和块状元素
    这篇文章将为大家详细讲解有关html中有哪些行内元素和块状元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html行内元素有:a、b、br、code、em、font、i、img、input、span、s...
    99+
    2023-06-06
  • css如何将内联元素转为块级元素
    这篇文章主要介绍了css如何将内联元素转为块级元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css如何将内联元素转为块级元素文章都会有所收获,下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • 什么是行内元素和块元素
    这篇文章主要讲解了“什么是行内元素和块元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“什么是行内元素和块元素”吧!行内元素只占内容的宽度,块元素不管内容多少都要占全行。 2、行内元素只能容...
    99+
    2023-06-08
  • html块级和行级元素是什么
    本文小编为大家详细介绍“html块级和行级元素是什么”,内容详细,步骤清晰,细节处理妥当,希望这篇“html块级和行级元素是什么”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2024-04-02
  • 如何正确使用HTML块级元素和行内元素
    如何正确使用HTML块级元素和行内元素,需要具体代码示例在使用HTML来构建网页时,块级元素和行内元素的正确应用是非常重要的。块级元素和行内元素有着不同的特性和用途,合理使用可以提高网页的可读性和效果。本文将详细介绍如何正确使用HTML块级...
    99+
    2023-12-23
    正确使用 行内元素 HTML块级元素
  • HTML块级元素有什么特点
    今天小编给大家分享一下HTML块级元素有什么特点的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下...
    99+
    2024-04-02
  • HTML内联元素是什么
    这篇文章主要介绍了HTML内联元素是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 内联元素在显示时通常不会以新行开始; 如:&...
    99+
    2024-04-02
  • html中的行内元素和块内元素分别有哪些
    这篇文章主要介绍了html中的行内元素和块内元素分别有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   HTML行内元素(inlin...
    99+
    2024-04-02
  • CSS行内元素和块级元素怎么居中
    本篇内容介绍了“CSS行内元素和块级元素怎么居中”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一.水平居中...
    99+
    2024-04-02
  • web开发中行内元素和块级元素有哪些
    这篇文章将为大家详细讲解有关web开发中行内元素和块级元素有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 一、常见块级元素有哪些:button,div ,...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作