非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.3 h元素和p元素以及本质

墨蓝 2024-03-26 19:34 30阅读 0赞

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

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

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.3 h元素和p元素以及本质
             *   *  2.3.1 body元素
                 *  2.3.2 HTML元素
                 *  2.3.3 案例分析 – 使用什么元素
                 *  2.3.4 常见元素 – h元素
                 *  2.3.5 常见元素 – p元素

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

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

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

##### 2.3 h元素和p元素以及本质 #####

###### 2.3.1 body元素 ######

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。

之后学习的大部分HTML元素都是在body中编写呈现的；

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

###### 2.3.2 HTML元素 ######

*  HTML元素本身很多，但是常用的元素就是那么几个。
    
     *  [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element][https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]
        
        ![在这里插入图片描述][a9307485cbf545509f5173ffc539c094.png_pic_center]
     *  我们只需要记住常用的，不常用的学会查看文档即可；
 *  常用的元素（暂时掌握下面几个就够了，90%时间都在写这几个）：
    
     *  p元素、h元素；
     *  img元素、a元素
     *  iframe元素；
     *  div元素、span元素；
 *  下阶段学习的元素：
    
     *  ul、ol、li元素；
     *  button元素、input元素；
     *  table、thead、tbody、thead、th、tr、td；
 *  HTML5新增元素（后续学习）

###### 2.3.3 案例分析 – 使用什么元素 ######

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

新闻地址： https://www.toutiao.com/article/7075122482247664128

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

###### 2.3.4 常见元素 – h元素 ######

在一个页面中通常会有一些比较重要的文字作为标题，这个时候我们可以使用h元素。

*  <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题
    
     *  Heading是头部的意思，通常会用来做标题
     *  <h1> 级别最高，而 <h6> 级别最低。
    
    ![在这里插入图片描述][347ba6c2a3174e6d8f0e763ef6a53520.png_pic_center]
    
    浏览器渲染效果
    
    ![在这里插入图片描述][96d12da68e71428c98d2a8b9253ccae3.png_pic_center]
 *  注意：h元素通常和SEO优化有关系（什么是SEO，后续再介绍）

###### 2.3.5 常见元素 – p元素 ######

*  如果我们想表示一个段落，这个时候可以使用p元素。
 *  HTML<p>元素（或者说 HTML 段落元素）表示文本的一个段落。
    
     *  p元素是paragraph单词的缩写，是段落、分段的意思；
     *  p元素多个段落之间会有一定的间距；

[f092f370b8b04ef3985a4d376cfe746e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cc331af0c8734a868a4f43f8b3516b0b.png
[dd5ad26262564f47abffb8967d86e549.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/71ee21c7d1f74dfaaf0951d1aa5ebbff.png
[https_developer.mozilla.org_zh-CN_docs_Web_HTML_Element]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
[a9307485cbf545509f5173ffc539c094.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b9c45c51ad674264a2633451f3c06091.png
[5b0173567c3d456fbf0ba26b422d0d4e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f86eb94c5464f06949c7e3e09fc4e6e.png
[5e758c70f4134f489a81aae8021665f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4462a6c9f1414c92b7bd66af49db0894.png
[347ba6c2a3174e6d8f0e763ef6a53520.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9c5ca9f3d1cd4d9f8c26aa3c93383de4.png
[96d12da68e71428c98d2a8b9253ccae3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/82aa0ea7d661401a81bf8041f0682e8b.png