行内html,【HTML】行内-块级-行块级

本文详细介绍了HTML中的行内元素、块级元素和行内块元素,包括它们的特点、显示模式以及如何通过CSS的`display`属性进行转换。内容涵盖了各种常见的HTML标签,如`<p>`、`<div>`、`<a>`等,并探讨了CSS的盒模型和布局方式。此外,还讨论了如何使用CSS将元素在行内、块级和行内块级之间切换,以实现不同的页面布局效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

行内元素

相邻元素可以在一行显示直到一行排不下才进行换行。

不可设置宽高,宽度随内容变化。

padding和margin的设置中,水平方向(padding-left...)有效果,垂直方向无效果。

块级元素

占一行或多行。

可设置宽高。

排列从上至下。

可设置padding和margin。

宽度没设置,默认100%。

行内块元素

不自动换行。

可设置宽高。

排列从左到右。

行内元素,块级元素,行内块元素之间的转换

display:inline;转换为行内元素

display:block;转换为块状元素

display:inline-block;转换为行内块状元素

行内元素

* a - 锚点

* abbr - 缩写

* acronym - 首字

* b - 粗体(不推荐)

* bdo - bidi override

* big - 大字体

* br - 换行

* cite - 引用

* code - 计算机代码(在引用源码的时候需要)

* dfn - 定义字段

* em - 强调

* font - 字体设定(不推荐)

* i - 斜体

* img - 图片

* input - 输入框

* kbd - 定义键盘文本

* label - 表格标签

* q - 短引用

* s - 中划线(不推荐)

* samp - 定义范例计算机代码

* select - 项目选择

* small - 小字体文本

* span - 常用内联容器,定义文本内区块

* strike - 中划线

* strong - 粗体强调

* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

块级元素

* address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* div - 常用块级容易,也是css layout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 -h6 标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容

* noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

可变元素

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet

* button - 按钮

* del - 删除文本

* iframe - inline frame

* ins - 插入的文本

* map - 图片区块(map)

* object - object对象

* script - 客户端脚本

css块级标签,行内标签,行内块标签的转换(2)

css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...

html&colon;常见行内标签,常见块级标签&comma;常见自闭合标签

本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...

html标签的显示模式(块级标签,行内标签,行内块标签)(转)

html标签的显示模式(块级标签,行内标签,行内块标签)   今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...

CSS&lpar;3&rpar;---块级标签、行内标签、行内块标签

块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...

&ast; CSS 视觉格式化(基本框、包含块、盒模型、水平格式化、垂直格式化、行布局、em框、内容区、行间距、行内框、行框)

前言 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应该显示的 ...

行内元素有哪些&quest;块级元素有哪些&quest;CSS的盒模型&quest;转载

块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding css中的 ...

css块级标签、行内标签、行内块级标签

&lt ...

HTML开发之(块级标签,行内标签,行内块标签)

显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...

display&colon;inline与display&colon;block——行内元素显示与块级元素显示

display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

随机推荐

Web API应用架构设计分析(2)

在上篇随笔,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...

自己动手编译hadoop-2&period;5&period;2源码

搭建环境:Centos x 6.5  64bit (后来:我才知道原来官网上发布的就是64位的,不过这个对我来说是个学习过程,对以后进行其他平台编译的时候有帮助!) 1.安装JDK 我这里用的是64位 ...

SharePoint 2010 文档管理系列之星级评论功能

前言:正如我们前面介绍的是,文档管理就是让大家更加直观.方便的对手里的文档,进行统筹掌控,哪些文档是有价值的,哪些文档更受大家欢迎,所有就带来了这个星级评论. 当然,这个是SharePoint 201 ...

hdu1998 bjfu1272奇数阶幻方构造

这题就是一个sb题,本来很水,硬是说得很含混.奇数阶幻方构造其实有好多方法,这题既不special judge,也不说清楚,以为这样能把水题变成难题似的,简直想骂出题人. /* * Author : ...

Jquery 实现Xml文件内容处理

用JS对XMl文件处理实现和用JS处理一般的Dom元素一样; 加载一个Xml内容与新建一个Dom元素基本相同 如: 1.新建一个Dom元素的Jquey语法为:$("

hell ...

使用Mockito进行单元测试【1】——mock and verify&lbrack;转&rsqb;

本文转自:http://qiuguo0205.iteye.com/blog/1443344 1. 为什么使用Mockito来进行单元测试? 回答这个问题需要回答两个方面,第一个是为什么使用mock?m ...

Oracle 总账年终结算流程

 1.Oracle 总账应用中年终结算流程包含在开启/关闭期间程序里.当用户开启新一年的第一个期间,开启/关闭期间程序中的"gloire" 流程会完成传送所有收入及支出(损益表 ...

C语言头文件和库的一些问题

使用gcc的编译器 头文件没有包含stdlib.h,使用atoi函数(atoi函数在stdlib.h中才有声明),编译却没有出错如果编译的时候加上-Wall选项,会有个警告,请问这是为什么? 这是因为 ...

C&num; winfrom容器布局与工具栏&amp&semi;&amp&semi;右键菜单栏&amp&semi;&amp&semi;隐藏显示小图标的的简单事件

前两天的时候学习了winfrom,简单地说就是各种布局,然后给按钮,textbox等各种控件添加各种事件的操作,经过前天一晚上,昨天一天的练习操作的还算熟练,但是对构造函数传值还是不是很了解,由于各种 ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值