HTML_元素分类

NewBurlaSKing

于 2022-08-06 19:52:59 发布

阅读量121

点赞数

分类专栏： HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/qq_55961861/article/details/126200199

版权

HTML学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中的三大元素类型：块元素、行内元素和行内块级元素。块元素占据整行，可设置宽高；行内元素仅占自身大小，宽高无效；行内块级元素则兼具两者特性，可设置宽高但不独占一行。常见例子如div、p为块元素，a、span为行内元素，button、img为行内块级元素。通过实例展示了这些元素在网页布局中的应用。

摘要由CSDN通过智能技术生成

一.分类

HTML中主要的元素分为两大类：块元素，行内元素

二.块元素

块元素在页面中独占一行（自上向下垂直排列）
可以设置width,height属性
一般块元素可以包含行内元素，其他块级元素

常见的块级元素：

div、form、h1~h6、hr、p、table、ul等

三.行内元素（内联元素）

行内元素不会独占页面中的一行，只占自身的大小（纵向排列）
行内元素设置width，height属性无效
⼀般内联元素包含内联元素不包含块级元素

常见的行内元素：

a、b、em、i、span、strong等

行内块级元素：

不会独占页面中的一行，只占自身的大小
能设置width,height属性
⼀般行内块级元素包含内联元素不包含块级元素

button、img、input等

四.展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 块级元素 -->
    <h1>标题</h1>
    <p>哈哈哈哈哈哈哈哈哈哈哈</p>

    <!-- 行内元素 -->
    <a href="www.163.com">网易</a>
    <b>语气加重</b>

    <!-- 行内块级元素 -->
    <img src="hh.webp" alt="">
    <input type="submit" value="提交">
</body>
</html>