登录  /  注册
首页 > web前端 > html教程 > 正文

html中的行内元素和块级元素小结

巴扎黑
发布： 2017-06-27 09:19:06
原创
2462人浏览过

一.首先我们总结下行内元素和块级元素有哪些：

行内元素：

标签可定义锚
表示一个缩写形式
定义只取首字母缩写
字体加粗
可覆盖默认的文本方向
大号字体加粗

换行
引用进行定义
定义计算机代码文本<br><dfn>定义一个定义项目<br><em>定义为强调的内容<br><i>斜体文本效果<br><img alt="html中的行内元素和块级元素小结" >向网页中嵌入一幅图像<br><input>输入框<br><kbd>定义键盘文本<br><label>标签为<br><input> 元素定义标注（标记）<br><q>定义短的引用<br><samp>定义样本文本<br><select>创建单选或多选菜单<br><small>呈现小号字体效果<br><span>组合文档中的行内元素<br><strong>语气更强的强调的内容<br><sub>定义下标文本<br><sup>定义上标文本<br><textarea>多行的文本输入控件<br><tt>打字机或者等宽的文本效果<br><var>定义变量</var></tt></textarea></sup></sub></strong></span></small></select></samp></q></label></kbd></i></em></dfn>

块级元素：

定义地址
定义表格标题
定义列表中定义条目
定义文档中的分区或节
定义列表
定义列表中的项目
定义一个框架集
创建 HTML 表单

定义最大的标题

定义副标题

定义标题

定义标题

定义标题
定义最小的标题
创建一条水平线
元素为 
元素定义标题
  • 标签定义列表项目
    为那些不支持框架的浏览器显示文本，于 frameset 元素内部<br><noscript>定义在脚本未被执行时的替代内容<ol>定义有序列表<br> </ol> <ul>定义无序列表<br><p>标签定义段落<br></p> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">定义预格式化的文本&lt;br&gt;</pre><div class="contentsignin">登录后复制</div></div> <table>标签定义 HTML 表格<br><tbody>标签表格主体（正文）<br><td>表格中的标准单元格<br> </td> </tbody> <tfoot>定义表格的页脚（脚注或表注）<br><th>定义表头单元格<br><thead>标签定义表格的表头<br><tr>定义表格中的行<p>二.然后我们再来看看行内元素和块级元素的区别：</p> <p>1.行内元素与块级元素直观上的区别</p> <p>行内元素会在一条直线上排列，都是同一行的，水平方向排列</p> <p>块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。</p> <p>2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。</p> <p>3.行内元素与块级元素属性的不同，主要是盒模型属性上</p> <p>行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效</p> <p>三.行内元素和块级元素的转化：</p> <p>把块级元素转换成行内元素：display:inline;</p> <p>将行内元素转换成块级元素:display:block;</p> <p>行内块元素：display:inline-block;</p> </tr> </thead> </th> </tfoot> </table> </noscript>

    • 以上就是html中的行内元素和块级元素小结的详细内容，更多请关注php中文网其它相关文章！

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
    我要提问
    来源：php中文网
    收藏 点赞
    上一篇：表格布局----基于bootstrap样式 布局 下一篇：分享Form提交表单后页面刷新不跳转的图文详解
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    关于CSS思维导图的课件在哪？ 课件
    凡人来自于2024-04-16 10:10:18
    0 0 34
    PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
    凡人来自于2024-04-16 09:34:16
    0 0 102
    PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
    P粉785905797来自于2024-04-06 22:09:02
    0 1 371
    通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
    P粉738046172来自于2024-04-06 22:01:35
    0 2 270
    我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
    P粉573809727来自于2024-04-06 22:03:59
    0 1 393
    返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
    P粉757556355来自于2024-04-06 21:55:20
    0 1 232
    页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
    P粉771233336来自于2024-04-06 21:58:04
    0 1 326
    如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
    P粉970736384来自于2024-04-06 21:28:37
    0 1 1826
    将将类的私有成员设置为构造函数参数 classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
    P粉761718546来自于2024-04-06 21:48:47
    0 1 240
    如何从结果集中仅显示最低值（MYSQL） 我有以下声明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
    P粉338969567来自于2024-04-06 21:44:19
    0 1 221
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    app下载
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部