非零基础自学前端最后一遍一 HTML+CSS 3 额外知识补充 3.3 元素语义化和作用

àì夳堔傛蜴生んèń 2024-03-25 09:25 59阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  3 额外知识补充
         *   *  3.3 元素语义化和作用
             *   *  3.3.1 元素的语义化

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

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

#### 3 额外知识补充 ####

##### 3.3 元素语义化和作用 #####

###### 3.3.1 元素的语义化 ######

*  元素的语义化：用正确的元素做正确的事情。
 *  理论上来说，所有的HTML元素，我们都能实现相同的事情：
 *  标签语义化的好处
    
     *  方便代码维护；
     *  减少让开发者之间的沟通成本；
     *  能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
     *  有利于SEO；
     *  …

<!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>
        span {
          
          display: block;
        }
    
        .box {
          
          font-size: 32px;
          font-weight: 700;
          margin: 22px 0;
        }
    
      </style>
    </head>
    <body>
      
      <h1>我是h1元素</h1>
      <p>我是p元素</p>
    
      <div>我是div元素</div>
      <span>我是span元素</span>
    
      
      <div class="box">我也是div元素</div>
    
    </body>
    </html>

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

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

[09898754b2f14b528aef9351ffb5712d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4e0fe4e84f104a0291ea0f9616cd1e07.png
[7b0d7dde42514489beff2032810fd98d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/9eb61f1345fd4bfc8ea86a2f4546cbc6.png
[ad0fc409e831405886b9a680e9a01851.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/bf1d7d04e099406eaa4df25e72753827.png