html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

简介: html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。 块级元素特点: 1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。

html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(霸道,一个块级元素独占一行)

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

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

设置display:block;可以将元素转换块级元素。

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

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

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>

设置display:inline;可以将块状元素转换为内联元素

内联块级元素特点:(同时具备内联元素、块级元素的特点)


1、和其他元素都在一行上;

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

常用的内联块状元素有:

<img>、<input>

display:inline-block;float:left / right;position:absolute/fixed;可以将元素设置为内联块级元素。

目录
相关文章
|
1月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
49 5
WK
|
1月前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
47 1
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)
本文介绍了Twaver HTML5中的形状连线(ShapeLink),包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型:直线(lineto)、正交(orthogonalto)、二次贝塞尔曲线(quadto)和三次贝塞尔曲线(cubicto),并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
46 3
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
15天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
18天前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
19 1
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
本文介绍了Twaver HTML5中连线(Link)的不同类型,包括直线、延伸直线和正交直线,并通过示例代码展示了如何在React组件中设置Link的类型和样式。
21 1
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)
本文介绍了Twaver HTML5中的拓扑元素(Element),包括网元(Element)、节点(Node)和连线(Link)的基本概念和使用方法。文章详细解释了Element的属性和方法,并通过示例代码展示了如何在React组件中创建节点、设置节点属性和样式。
40 1
Twaver-HTML5基础学习(8)拓扑元素(Element)_网元(Element)、节点(Node)