html中内联元素和块级元素的区别

2023-05-16

1.下表列出了内联元素和块级元素的主要区别

html中内联元素和块级元素的区别
块级元素行内元素
独占一行,默认情况下,其宽度自动填满其父元素宽度相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
可以设置width,height属性行内元素设置width,height属性无效
可以设置margin和padding属性行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right,其它属性不会起边距效果。
对应于display:block对应于display:inline;

2.按字母顺序排列块级元素主要有

<address>        定义地址
<caption>        定义表格标题
<dd>        定义列表中定义条目
<div>        定义文档中的分区或节
<dl>        定义列表
<dt>        定义列表中的项目
<fieldset>        定义一个框架集
<form>        创建表单元素
<h1><h2><h3><h4><h5><h6>        标题元素
<hr>        水平线
<legend>        给fieldset元素定义标题
<li>        定义列表项目
<noframes>        为那些不支持框架的浏览器显示文本,放置于frameset标签内
<noscript>        为那些不支持脚本的浏览器显示文本
<ol>        有序列表
<ul>        无序列表
<p>        定义段落
<pre>        定义预格式化文本
<table>        定义表格
<tbody>        定义表格主体
<td>        表格中的标准单元格
<tr>        表格中的行
<tfoot>        表格中的页脚
<th>        定义表头单元格
<thead>        定义表格的表头

3.内联元素有

<a>        可定义锚以及超链接
<abbr>        表示一个缩写形式
<acronym>        表示只取title中首字母的缩写形式
<b>        字体加粗
<bdo>        可覆盖默认的文本方向
<big>        大号字体加粗
<br>        换行
<cite>        引用进行定义
<code>        定义计算机代码文本
<dfn>        定义一个定义项目
<em>        定义为强调的内容
<i>        斜体文本效果
<img>        向网页中嵌入一张图像
<input>        输入框
<kbd>        定义键盘文本
<label>        为input进行标记/标注
<q>        定义短的引用

<s>    表示不准确不相关,却不应当给予删除的内容

<samp>        定义样本文本

<select>        定义单选或者多选菜单
<small>        呈现小号字体效果
<span>        组合文档中的行内元素
<strong>        语气更强的强调内容
<sub>        定义下标文本
<sup>        定义上标文本
<textarea>        多行文本输入控件
<tt>        打字机或者等宽的文本效果
<var>        定义变量

<input>和<img>都是行内元素,但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。

替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

 例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 

不可替换元素 html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。

例如: <p>段落的内容</p> 段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

转载于:https://www.cnblogs.com/dxzg/p/6423922.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html中内联元素和块级元素的区别 的相关文章

  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • 是否可以使“HTML 到语音”与“文本到语音”相同?

    我有一个奇怪的要求 在我现有的应用程序中我有Text2Speech为此 我使用了AVSpeechSynthesizer 到语音文本 但现在要求发生了变化 现在我需要将 HTML 文件数据转换为文本 例如HTML2Speech 我们可以想到的
  • 如何保留用户的输入打印?

    我正在尝试添加用户的评论 所以我只是尝试读取输入并将其发送以进行打印 但问题是 一旦我刷新页面或输入另一个输入 打印的输入就会消失 因此 即使刷新页面或重新输入新评论 我也希望始终保持所有用户的显示 代码 div div
  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript
  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 使用 python 在一个 html 页面中显示分割数据框的 HTML 代码

    我是 html css 新手 所以对以 html 格式显示的数据有疑问 我有一个很长的列表 我想将其拆分并以 html 格式显示为两个单独的列 例如 而不是 Col1 Col2 1 a 2 a 3 a 4 a 5 b 6 b 7 b 8 b
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • VBA 完成 Internet 表单

    我正在寻找将 Excel 中的值放入网页的代码 Sub FillInternetForm Dim IE As Object Set IE CreateObject InternetExplorer Application IE naviga
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 从 PHP 数组生成 HTML 表

    我不明白这一点 我需要解决看似简单的问题 但这超出了我的逻辑 我需要编写一个函数 table columns input cols 它将输出一个表 示例 input array apple orange monkey potato chee

随机推荐

  • 轻松搭建CAS 5.x系列(1)-使用cas overlay搭建SSO SERVER服务端

    概要说明 cas的服务端搭建有两种常用的方式 xff1a 1 基于源码的基础上构建出来的 2 使用WAR overlay的方式来安装 官方推荐使用第二种 xff0c 配置管理方便 xff0c 以后升级也容易 本文就是使用第二种方式 安装步骤
  • vnc连接报错“connection refused (10061)”

    排除 防火墙等等 xff0c 网络设置的错误外 xff0c 登录putty exe 使用以下命令来启动 vnc server 共两行 xff1a service vncserver start vncserver 之后弹出两个warning
  • ST-LINK V2 DIY笔记(一)

    最近一段时间调试STM32板子的时候 xff0c 都是用JLINK 43 杜邦线 xff0c 或者拿官方板子当STLINK用 xff0c 可以用 xff0c 但是体积比较大 xff0c 有时候觉得比较麻烦 正好前一阵手头项目少 xff0c
  • 驱动级键盘模拟(C#)(高手请飘过)

    游戏外挂一般分为三个级别 xff1a 初级是鼠标 键盘模拟 xff0c 中级是Call游戏内部函数 xff0c 读写内存 xff0c 高级是抓包 xff0c 封包的 脱机挂 xff08 完全模拟客户端网络数据 xff0c 不用运行游戏 xf
  • CentOS7安装配置VNCServer

    一 安装图形界面 1 安装X Window图形界面 shell gt yum y groupinstall 34 X Window System 34 shell gt yum y install gnome classic session
  • 【计算机本科补全计划】NFV/SDN初识(为了避免保研复试被电话面试)

    正文之前 所有的通信应用无非就是两部分组成 xff1a 计算和网络 这两者关系密不可分 xff0c 但两者关系严重缺乏对称性 xff0c 网络一直拖累着计算 就好像是发快递 xff0c 你打个包 xff08 计算 xff09 只需要几分钟
  • [!] CDN: trunk - Cannot perform full-text search because Algolia returned an error: 0: Cannot reach

    pod search XXXX 时报错 xff1a CDN trunk Cannot perform full text search because Algolia returned an error 0 Cannot reach any
  • 北大青鸟消防设备说明书_北大青鸟火灾报警控制器JB-TG/T-JBF-11S厂家使用说明书...

    北大青鸟火灾报警控制器JB TG T JBF 11S厂家 使用说明书 一 JB TG T JBF 11S火灾报警控制器主要技术指标 xff1a 型号JB TG T JBF 11S 供电主电AC220V 10 50Hz 巡检周期3秒 备电DC
  • linux测试音量,在Linux中获取C中的主音量

    我正试图在Linux中检索 可能稍后设置 主音量 我正在使用PulseAudio 但理想情况下它也适用于ALSA 我找到了关于如何设置音量的this非常有用的帖子 从中我能够推断出snd mixer selem get playback v
  • Linux之apt命令详解

    一 apt的简介 apt命令可以说是Linux系统下最为重要的命令 xff0c 安装 更新 卸载软件 xff0c 升级系统内核都离不开apt命令 apt的全称是Advanced Packaging Tool是Linux系统下的一款安装包管理
  • cas服务器作用,CAS服务器搭建

    CAS服务器搭建 目的 xff1a 搭建以jdbc方式连接数据库并认证用户信息 服务器源码下载地址 https github com apereo cas releases tag v4 2 1 解压后 xff0c 项目目录如下 xff1a
  • prometheus 最全面的书籍推荐

    https yunlzheng gitbook io prometheus book 转载于 https www cnblogs com kevincaptain p 10709575 html
  • 使用ubuntu搭建时间机器备份服务

    如何在ubuntu下搭建时间备份服务 折腾了很久 终于可以了 请严格按照下面的方式来操作 真正明白问题的 可以按照自己的思路来 我用的是ubnutu 16 04 安装配置netatalk sudo apt get install netat
  • sqlalchemy源代码阅读随笔(1)

    今天看的 xff0c 是url py模块 xff0c 这个在create engine中 xff0c 起到的最用很大 xff0c 其本质 xff0c 就是对访问数据库的url xff0c 进行操作管里 我们可以直接访问这个类 看一个简单的代
  • C++的中英文字符串表示(string,wstring)

    在C 43 43 中字符串类的string的模板原型是basic string template lt class Elem class traits 61 char traits lt Elem gt class Ax 61 alloca
  • iOS开发中UITableView和UITableViewCell的几种样式

    说了很久要写自己的技术博客 xff0c 由于执行力差 xff0c 一直拖到现在才开始写文章 我是一个刚进入软件行业还不到一年的小菜鸟 xff0c 没有什么技术可言 xff0c 然后就在这里斗胆妄自尊大的在博客园上写些东西 xff0c 还希望
  • ubuntu 16.04 + VMware Workstation 16player VCS +Verdi 安装备忘录

    经过了一周左右的煎熬 xff0c 终于将VCS 43 Verdi的验证环境搭建好了 xff0c 只能说很不容易 xff0c 在此作一叙述 xff0c 也是以备自己将来再在相同的地方摔跤 参考 下载软件 xff08 tb买一天会员就行 xff
  • 素数伴侣HJ28

    题目链接 xff1a 素数伴侣 牛客题霸 牛客网 解法 xff1a 最大匹配 因为素数不可能是偶数 xff0c 所以 素数伴侣 只能是一个奇数和一个偶数 由此我们可以创建二分图 xff1a 一个子集全是奇数 xff0c 另一个子集全是偶数
  • A Radiologist's Notes

    肺 lung 肺野 lung fields 后前位胸像上自纵膈肺门向外的透光区域 为了便于定位 xff0c 演第2 4前肋下缘水平画线将肺野分为上中下肺野 xff0c 从肺门到一侧肺野的最外部纵行均分三带 内 xff0c 中 xff0c 外
  • html中内联元素和块级元素的区别

    1 下表列出了内联元素和块级元素的主要区别 html中内联元素和块级元素的区别 块级元素 行内元素 独占一行 默认情况下 xff0c 其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里 xff0c 直到一行排不下 xff0c 才会换