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

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    2026春节习俗大全
    2026春节习俗大全

    本专题整合了2026春节习俗大全,阅读专题下面的文章了解更多详细内容。

    68

    2026.02.11

    Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析
    Yandex网页版官方入口使用指南_国际版与俄罗斯版访问方法解析

    本专题全面整理了Yandex搜索引擎的官方入口信息,涵盖国际版与俄罗斯版官网访问方式、网页版直达入口及免登录使用说明,帮助用户快速、安全地进入Yandex官网,高效使用其搜索与相关服务。

    200

    2026.02.11

    虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法
    虫虫漫画网页版入口与免费阅读指南_正版漫画全集在线查看方法

    本专题系统整理了虫虫漫画官网及网页版最新入口,涵盖免登录观看、正版漫画全集在线阅读方式,并汇总稳定可用的访问渠道,帮助用户快速找到虫虫漫画官方页面,轻松在线阅读各类热门漫画内容。

    40

    2026.02.11

    Docker容器化部署与DevOps实践
    Docker容器化部署与DevOps实践

    本专题面向后端与运维开发者,系统讲解 Docker 容器化技术在实际项目中的应用。内容涵盖 Docker 镜像构建、容器运行机制、Docker Compose 多服务编排,以及在 DevOps 流程中的持续集成与持续部署实践。通过真实场景演示,帮助开发者实现应用的快速部署、环境一致性与运维自动化。

    4

    2026.02.11

    Rust异步编程与Tokio运行时实战
    Rust异步编程与Tokio运行时实战

    本专题聚焦 Rust 语言的异步编程模型,深入讲解 async/await 机制与 Tokio 运行时的核心原理。内容包括异步任务调度、Future 执行模型、并发安全、网络 IO 编程以及高并发场景下的性能优化。通过实战示例,帮助开发者使用 Rust 构建高性能、低延迟的后端服务与网络应用。

    1

    2026.02.11

    Spring Boot企业级开发与MyBatis Plus实战
    Spring Boot企业级开发与MyBatis Plus实战

    本专题面向 Java 后端开发者,系统讲解如何基于 Spring Boot 与 MyBatis Plus 构建高效、规范的企业级应用。内容涵盖项目架构设计、数据访问层封装、通用 CRUD 实现、分页与条件查询、代码生成器以及常见性能优化方案。通过完整实战案例,帮助开发者提升后端开发效率,减少重复代码,快速交付稳定可维护的业务系统。

    6

    2026.02.11

    包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法
    包子漫画网页版入口与全集阅读指南_正版免费漫画快速访问方法

    本专题汇总了包子漫画官网和网页版入口,提供最新章节抢先看方法、正版免费阅读指南,以及稳定访问方式,帮助用户快速直达包子漫画页面,无广告畅享全集漫画内容。

    159

    2026.02.10

    MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
    MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

    本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

    89

    2026.02.10

    谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
    谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

    本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

    78

    2026.02.10

    热门下载

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

    精品课程

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

    共46课时 | 3.3万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.5万人学习

    CSS教程
    CSS教程

    共754课时 | 30.2万人学习

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

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