行内元素和块级元素-html教程(html中行内元素和块级元素的区别)

boyanx7个月前技术教程49

块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

行内元素:span, strong, em, br, img , input, label, select, textarea, cite,

内联元素(inline element)a - 超链接

b - 粗体(不推荐)br - 换行

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

label - 表格标签

select - 选择框

small - 小字体文本

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

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

块元素(block element)* blockquote - 块引用

* center - 居中

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

* dl - 定义列表

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 无序列表

块级元素和行内元素的区别:

1)块级元素会独占一行,其宽度自动填满其父元素宽度

行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容 而变化

2) 块级元素可以设置 width, height属性,行内元素设置width, height无效

3) 块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

文章自留地:

成笑笑博客_一个.Net和安卓技术狂爱者博客。

主要以发布和分享.Net和安卓文章为主,争做全栈开发工程师,爱学习,爱挑战,爱编程。用技术改变生活。

欢迎关注,微信公众号:net知识分享(net4k8k)[做个12k的技术员].博客网址:www.chengxiaoxiao.com.

欢迎加入qq技术交流群:538742639.

相关文章

JAVA GUI常用布局管理器(java语言中常用的布局管理器有哪些)

绝对布局绝对布局指的是把容器的布局管理器设置成null,控件的位置由编程者自己控制设置控件的绝对位置和大小,通过组件的setBounds方法设置绝对位置和大小绝对布局的坐标系:以矩形容器的左上角的点为...

html中input、label、form、textarea、select

表单input:表单是用来收集信息的,由表单控件(表单元素)、提示信息、表单域构成。input控件的属性及值:除以上属性外,input元素type属性还有一个number属性值,此为仅可以填数字,默认...

6 个值得常驻 MacBook 状态栏的 App,总有 1 款适合你

MacBook 的顶部菜单栏位置寸土寸金,但总有一些应用,我们愿意从一开机时便给它们「排面」。今天要为大家推荐的,就是 6 款值得开机启动的工具——它们到底有多好用?只能说让我开机快速进入工作状态,就...

3分钟入门微信小程序开发 组件分类 常用基本组件

微信为小程序提供的组件,可以帮助开发者快速搭建出漂亮的页面结构,共9大类,包括:1.视图容器:view布局组件(相当于div)、scroll-view滚动列表组件、swiper和swiper-item...

YAAT-Yat Another ActionTab开发(1)—— 拖拉拽组件

前段时间使用了一下ActionTab感觉这个产品,小编也想向这个产品学习学习,自己开发一个工具箱。就当是学习总结之用了,有兴趣的小伙伴可以私信小编获取代码,后续等功能界面稍微成型了再放到github上...

Python交互仪表盘工具:Panel 进阶学习路线图

Panel 作为 Python 生态系统中最强大的交互式仪表盘工具之一,其学习曲线既平缓又深远。这里我将为您构建一个系统化的进阶学习框架,包含实战项目和关键学习节点。1. 现代化 Web 集成开发1....

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。