0

0

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

巴扎黑

巴扎黑

发布时间:2017-06-27 09:19:06

|

3149人浏览过

|

来源于php中文网

原创

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

行内元素:

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

换行
引用进行定义
定义计算机代码文本
定义一个定义项目
定义为强调的内容
斜体文本效果
html中的行内元素和块级元素小结向网页中嵌入一幅图像
输入框
定义键盘文本

块级元素:

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

定义最大的标题

定义副标题

定义标题

定义标题

定义标题
定义最小的标题

创建一条水平线
元素为 
元素定义标题
  • 标签定义列表项目
    为那些不支持框架的浏览器显示文本,于 frameset 元素内部<br><noscript>定义在脚本未被执行时的替代内容<ol>定义有序列表<br> </ol> <ul>定义无序列表<br><p>标签定义段落<br></p> </ul> <pre class="brush:php;toolbar:false;">定义预格式化的文本<br></pre> <table>标签定义 HTML 表格<br><tbody>标签表格主体(正文)<br><td>表格中的标准单元格<br> </td> </tbody> <tfoot>定义表格的页脚(脚注或表注)<br><th>定义表头单元格<br><thead>标签定义表格的表头<br><tr>定义表格中的行<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)</a>”;</p> <p>二.然后我们再来看看行内元素和块级元素的区别:</p> <p>1.行内元素与块级元素直观上的区别</p> <p>行内元素会在一条直线上排列,都是同一行的,水平方向排列</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/5836" title="Gridster.js多列网格式拖动布局插件"><img src="https://img.php.cn/upload/webcode/000/120/096/5d885b89678f3930.jpg" alt="Gridster.js多列网格式拖动布局插件"></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/5836" title="Gridster.js多列网格式拖动布局插件">Gridster.js多列网格式拖动布局插件</a> <p>网页中拖动 DIV 是很常见的操作,今天就分享给大家一个 jQuery 多列网格拖动布局插件,和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小,并且支持多列的网格布局,它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件</p> </div> <a href="/xiazai/code/5836" title="Gridster.js多列网格式拖动布局插件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    相关专题

    更多
    微信聊天记录删除恢复导出教程汇总
    微信聊天记录删除恢复导出教程汇总

    本专题整合了微信聊天记录相关教程大全,阅读专题下面的文章了解更多详细内容。

    2

    2026.01.18

    高德地图升级方法汇总
    高德地图升级方法汇总

    本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

    74

    2026.01.16

    全民K歌得高分教程大全
    全民K歌得高分教程大全

    本专题整合了全民K歌得高分技巧汇总,阅读专题下面的文章了解更多详细内容。

    133

    2026.01.16

    C++ 单元测试与代码质量保障
    C++ 单元测试与代码质量保障

    本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

    54

    2026.01.16

    java数据库连接教程大全
    java数据库连接教程大全

    本专题整合了java数据库连接相关教程,阅读专题下面的文章了解更多详细内容。

    39

    2026.01.15

    Java音频处理教程汇总
    Java音频处理教程汇总

    本专题整合了java音频处理教程大全,阅读专题下面的文章了解更多详细内容。

    19

    2026.01.15

    windows查看wifi密码教程大全
    windows查看wifi密码教程大全

    本专题整合了windows查看wifi密码教程大全,阅读专题下面的文章了解更多详细内容。

    106

    2026.01.15

    浏览器缓存清理方法汇总
    浏览器缓存清理方法汇总

    本专题整合了浏览器缓存清理教程汇总,阅读专题下面的文章了解更多详细内容。

    44

    2026.01.15

    ps图片相关教程汇总
    ps图片相关教程汇总

    本专题整合了ps图片设置相关教程合集,阅读专题下面的文章了解更多详细内容。

    11

    2026.01.15

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 2.9万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 2.7万人学习

    CSS教程
    CSS教程

    共754课时 | 20.3万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

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