非零基础自学前端最后一遍一 HTML+CSS 1 你的第一个网页 1.4 元素的结构分析和单双元素

浅浅的花香味﹌ 2024-03-26 18:58 16阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  1 你的第一个网页
         *   *  1.4 元素的结构分析和单双元素
             *   *  1.4.1 认识元素
                 *  1.4.2 元素的组成
                 *  1.4.3 单标签元素 – 双标签元素

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

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

#### 1 你的第一个网页 ####

##### 1.4 元素的结构分析和单双元素 #####

###### 1.4.1 认识元素 ######

*  我们会发现HTML本质上是由一系列的元素（Element）构成的；
 *  什么是元素（Element）呢？
    
     *  元素是网页的一部分；
     *  一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；
 *  那么HTML有哪些元素呢？
    
    [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]
    
    ![在这里插入图片描述][0a7084ad05d344dbb0fea6162d13af7b.png_pic_center]
 *  我们会发现元素非常非常的多，这么多能记得住吗？
    
     *  常用的，用的多自然就记住了；
     *  不常用的，知道在哪里查找即可；

###### 1.4.2 元素的组成 ######

*  剖析一个HTML元素的组成：
    
    ![在这里插入图片描述][cf79898133624cb486ad7928c75eeab1.png_pic_center]
 *  这个元素的主要部分有：
    
    1.  开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
    2.  结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落 在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
    3.  内容（Content）：元素的内容，本例中就是所输入的文本本身。
    4.  元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

###### 1.4.3 单标签元素 – 双标签元素 ######

*  双标签元素：我们会发现前面大部分看到的元素都是双标签的；
    
     *  html、body、head、h2、p、a元素；
 *  单标签元素：也有一些元素是只有一个标签；
    
     *  br、img、hr、meta、input；
    
    ![在这里插入图片描述][ed595c08b7b5434ca2ea6192c522f251.png_pic_center]
 *  注意事项：【HTML元素不区分大小写，但是推荐小写】

[e93d330a807642de97832bfe3214b618.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2b6fd5230ea94708be9834534cb20781.png
[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
[0a7084ad05d344dbb0fea6162d13af7b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f5f0d0c496c941558820dd9129d02341.png
[cf79898133624cb486ad7928c75eeab1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b3856585644d4000b3865da72d2c44e7.png
[ed595c08b7b5434ca2ea6192c522f251.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4456c7326eeb4d7997ff50d632c7b70c.png