HTML元素的特性有哪些呢

小林芝คิดถึง

已于 2022-06-13 17:05:30 修改

阅读量126

点赞数

文章标签： html css css3

于 2022-05-17 17:47:51 首次发布

本文链接：https://blog.csdn.net/coderlhj666/article/details/124826540

版权

HTML元素的特性有哪些呢

一、HTML的类型

我们知道div是块级元素会独占一行，span元素是行内级元素会在同一行显示。

<!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>
  <style>
    .box {
      background-color: #f00;
    }
  </style>
</head>

<body>
  <div class="box">我是div元素</div>
  <span>我是span元素</span>
  <input type="text">
</body>

</html>

那到底什么是块级元素，什么是行内级元素？
- 首先我们来看一下HTML元素的定义思路：
  - HTML元素有很多，p/span/a/img/div等等
  - 当我们把一个元素放在页面上时，到底这个元素占据页面的中一行的多大空间呢
    - 为什么我们这里只说一行呢，因为高度通常是由垂直方向的内容决定的。
  - 比如一个h1标题元素，我们必然希望它单独占一行，其他内容不应该和它在同一行（就比如报纸的标题是独占一行的，肯定不希望和内容一起）。
  - 比如一个p段落元素，我们必然希望它独占一行，其他段落内容不应该和我的段落放在一起。
  - 而类似span/a这类元素，它们做为内容的描述，不应该独占一行
  - 所以为了区分哪些元素是独占一行，哪些元素是不独占一行，HTML将元素分（本质是通过css的）成两类：
    - 块级元素（blonk level elements）：独占父元素的一行
    - 行内级元素（inline level elements）：多个行内级元素可以在父元素同一行显示

二、通过css修改元素类型

前面可以知道元素本来没有啥区别，只是浏览器加了css样式修改了元素类型
div是块级元素，span元素是行内级元素
div元素之所以是块级元素仅仅是浏览器给div元素加了display属性而已！

那我们可不可以通过修改display属性改变元素类型呢

答案是可以的

<!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>
  <style>
    .box {
      background-color: #f00;

    }

    span {
      display: block;
      background-color: bisque;
    }
  </style>
</head>

<body>
  <div class="box">我是div元素</div>
  <a href="#">百度一下</a>
  <span>我是span元素</span>
  <input type="text">
</body>

</html>

三、属性-display

css有一个display属性，能够改变元素的显示类型，有常用的四个值
block：让元素显示为块级元素
inline：让元素显示为行内级元素
inline-block：让元素同时据有行内级元素、块级元素的特征
none：隐藏元素

四、display值的特性（非常重要）

block元素：
- 独占父元素的一行
- 可以随意设置宽高
- 默认高度由内容决定
inline元素：
- 跟其他行内级元素同一行显示
- 不可以设置宽高
- 高度有内容决定
inline-block：
- 跟其他行内级元素一行显示
- 可以随意设置宽高
- 默认高度由内容决定
- 可以这样理解
  - 对外，它是一个行内级元素
  - 对内，它是一个块级元素
元素的类型特点

五、编写HTML时的注意事项

块级元素、inline-block元素

一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素）

特殊情况，p元素不能包含其他块级元素

以下是包含块级元素的情况，会出现奇怪现象

<!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>
  <style>
    .box {
      background-color: #f00;

    }

    span {
      display: inline;
      background-color: bisque;
    }
  </style>
</head>

<body>
  <div class="box">我是div元素</div>
  <a href="#">百度一下</a>
  <span>我是span元素</span>
  <input type="text">

  <p>
    11221
  <div>我是div元素</div>
  affdgds
  </p>
</body>

</html>

你会发现如果p元素加入块级元素，浏览器解析出来的和我们编写的代码是不一样的
- 行内级（比如a、span、strong等)
- 一般情况下，只能包含行内级元素

小林芝คิดถึง

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML元素的特性有哪些呢

HTML元素的特性有哪些呢一、HTML的类型我们知道div是块级元素会独占一行，span元素是行内级元素会在同一行显示。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫