讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

了解HTML 元素分类_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:26:54
原创
1217人浏览过

　　html中包含大量的标签, 这些标签在我们使用中发现会有小小的差别, 有的标签用了之后不会有太大的布局变化, 只是语义化, 而有的标签却会重起一行, 相当于自己回车了一次, 这就是不同标签元素的分类不同造成的结果.

　　块级元素

　　在HTML中,

,

,

,

,
    ,
    ,
  1. 等标签就是块级元素, 每个块级元素一般都具有相同的特点.

    　　1, 每个块级元素都从新的一行开始, 并且其后的元素也另起一行. (也就是块级元素就要自己占一行, 后面的也得让路)

    　　2, 元素的高度, 宽度, 行高以及顶和底边距都可设置.

    　　3, 元素宽度在不设置的情况下, 是它本身父容器的100%, 也可以单独进行的设置.

    立即学习“前端免费学习笔记（深入）”；

    　　内联元素

    　　区别于块状元素, , ,

    　　当然, 内联元素也有自己的一些特点, 这些和块级元素都是一一对应的.

    　　1, 内联元素和其他元素都是在一行上, 而不会排挤其他的元素, 

    　　2, 元素的高度, 宽度以及顶部底部边距不可设置(因为元素都是行内紧挨着, 你如果设置这些, 那么元素不就都乱了).

    　　3, 元素的宽度就是它包含的文字或图片的宽度, 不可改变.

    趣问问AI
    趣问问AI

    免费可用的国内版chat，AI写作和AI对话

    趣问问AI 97
    查看详情 趣问问AI

    　　内联块状元素

    　　这种元素非常少, 它们同时具备两种元素的特点, 了解HTML 元素分类_html/css_WEB-ITnose, 这两个标签就是内联块状元素. 就不多做介绍了.

    　　

    　　这三种元素是可以互相转化的, 也就是说可以通过css强制修改其元素类型, 只需要设置display的属性即可, 假如想要将内联元素类型修改为块级元素, 代码如下

    　　span{

    　　　　display:block;

    　　}

    　　同理其他的也是一样的属性值不同而已, 修改为块级元素:block, 修改为内联元素:inline, 修改为内联块状元素:inline-block.

    　　这三种元素一定要非常准确的掌握, 因为在div + css布局中, 它们占了举足轻重的地位.

    　　

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

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

下载
来源：php中文网
收藏 点赞
上一篇：工作中遇到的浏览器差别（就不叫IE6bug了）_html/css_WEB-ITnose 下一篇：熟悉HTML CSS布局模型_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
html5源码怎么打包_html5用webpack或gulp打包源码成静态文件【打包】 需借助构建工具将HTML5项目构建成静态文件：Webpack通过模块化打包并自动注入资源；Gulp基于流式操作压缩HTML/CSS/JS；纯手动方式适用于极简项目，依赖人工整理与第三方工具压缩。
2025-12-24 10:57:48
745
html5能否插入可编辑文档_html5可编辑文档嵌入与权限控制【指南】 需结合contenteditable属性、iframe集成、data-权限标记及ShadowDOM封装实现网页文档编辑与访问控制：一、用contenteditable="true"启用编辑，配tabindex与CSS限制；二、iframe嵌入外部文档，通过postMessage通信传递权限；三、data-属性硬编码权限，JS匹配用户角色控制编辑状态；四、ShadowDOM封装编辑器，隔离样式逻辑并提供setPermission接口。
2025-12-24 10:55:02
808
jimdo怎么插入html5音频_jimdo音频html5代码插入与播放设置【指南】 需用HTML代码模块插入audio标签，上传音频至Jimdo媒体库或外部托管，支持多源兼容、自动播放（需muted+交互解除）、响应式样式调整。
2025-12-24 10:53:03
185
html5如何建立站点_使用HTML5建立个人站点步骤【站点】 需按五步搭建HTML5个人站点：一、规划目录结构并创建index.html等基础文件；二、用header、nav、main等语义化标签构建主体；三、外链CSS、JS及FontAwesome资源；四、设置viewport与响应式样式；五、添加ARIA属性、alt文本等可访问性标记。
2025-12-24 10:49:03
586
html如何引入其他html_引入其他HTML页面内容的方法【方法】 可在HTML页面中嵌入外部HTML内容的方法有五种：一、iframe标签；二、JavaScript动态加载；三、已废弃的HTMLImports；四、服务器端包含（SSI）；五、构建工具预处理。
2025-12-24 10:45:09
327
html5视频怎么打开_HTML5 video标签加controls点击播放视频【打开】 HTML5视频无法点击播放通常因缺少controls属性、src路径错误、格式兼容性差、静音策略限制或play()调用未处理拒绝错误；需逐一检查并修复。
2025-12-24 10:14:03
465
电脑怎么转html5_用工具如Adobe Animate将Flash转HTML5格式【转换】 AdobeAnimate是官方推荐的Flash转HTML5工具，支持.fla文件直接发布为HTML5Canvas；GoogleSwiffy离线版可转换简单SWF；复杂AS3动画需手动用HTML5+CSS3+JS重制。
2025-12-24 10:10:02
876
html5颜色怎么变_HT5用JS改CSS color或background-color变色【改变】 在HTML5中动态修改元素颜色有五种方法：一、直接改style.color或style.backgroundColor；二、切换预设CSS类名；三、用getComputedStyle读取并调整当前颜色；四、通过CSS变量集中控制；五、用setAttribute批量设置内联样式。
2025-12-24 10:03:08
339
怎么获取html5源码_浏览器F12开发者工具查看Elements或Sources获源码【获取】 可通过浏览器开发者工具获取HTML5源码：一、Elements面板复制outerHTML获渲染后DOM；二、Sources面板保存原始HTML文件；三、Network面板筛选并导出200状态HTML响应。
2025-12-24 10:00:03
660
html5如何制作折叠菜单_html5折叠菜单js交互与样式实现【技巧】 HTML5details/summary可原生实现折叠菜单，CSS+JS可通过class切换控制动画，data属性支持多级菜单，CSS变量便于主题化，触摸设备需优化点击区域与防抖。
2025-12-24 09:28:02
291
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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

  • PHP学习

  • 技术支持

  • 返回顶部