非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.12 div元素和span元素的使用

灰太狼 2024-03-26 19:35 29阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.12 div元素和span元素的使用
             *   *  2.12.1 div元素、span元素的历史
                 *  2.12.2 div元素、span元素的区别

![在这里插入图片描述][fd9f3fcb70944a629b9c66a6c25ac8ac.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.12 div元素和span元素的使用 #####

###### 2.12.1 div元素、span元素的历史 ######

*  在HTML中有两个特殊的元素div元素、span元素：
    
     *  div元素：division，分开、分配的意思；
     *  span元素：跨域、涵盖的意思；
 *  这两个元素有什么作用呢？无所用、无所不用。
 *  产生的历史：
    
     *  网页的发展早期是没有css，这个时候我们必须通过语义化元素来告知浏览器一段文字如何显示；
     *  后来出现了css，结构和样式需要分离，这个时候html只需要负责结构即可；
     *  比如h1元素可以是一段普通的文本+CSS修饰样式；
     *  这个时候就出现了div、span来编写HTML结构所有的结构，样式都交给css来处理；
 *  所以，理论上来说：
    
     *  我们的页面可以没有div、span；
     *  我们的页面也可以全部都是div、span；

###### 2.12.2 div元素、span元素的区别 ######

*  这个时候有一个问题：我出现一个不就可以了吗？
 *  div元素和span元素都是“纯粹的” 容器，也可以把他们理解成“盒子”，它们都是用来包裹内容的；
    
     *  div元素：多个div元素包裹的内容会在不同的行显示；
        
         *  一般作为其他元素的父容器，把其他元素包住，代表一个整体
         *  用于把网页分割为多个独立的部分
     *  span元素：多个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>
        .area {
          
          border: 1px solid red;
        }
    
        .keyword {
          
          font-size: 30px;
          font-weight: 700;
          color: blue;
        }
      </style>
    </head>
    <body>
      
      <h1>学习前端</h1>
    
    
    
      <div class="area">
        <h2>1.学习HTML+CSS</h2>
        <p>
          先学习HTML, 再学习CSS, 了解一些历史/本质等等
        </p>
      </div>
    
    
    
      <div class="area">
        <h2>2.学习JavaScript</h2>
        <p>
          学习<span class="keyword">JavaScript</span>的基本语法, BOM/DOM, 学网络请求, 学习ES6~12, 学习一些高级语法, 原理
        </p>
      </div>
    
    
    
      <div class="area">
        <h2>3.学习工具</h2>
        <p>
          npm/node/webpack/git
        </p>
      </div>
    
    </body>
    </html>

![在这里插入图片描述][ed2322c02a7c45878d924bad9e9bf685.png_pic_center]

浏览器渲染效果

![在这里插入图片描述][311201d1b237460791552697e0a7f0f1.png_pic_center]

[fd9f3fcb70944a629b9c66a6c25ac8ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/bfdeee41bc814caf80cc896f0f78fc11.png
[ed2322c02a7c45878d924bad9e9bf685.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/dd08979b24cc4b08b42a96da642ec532.png
[311201d1b237460791552697e0a7f0f1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/397d207c3d404b1cb55baaae820a2d49.png