【前端学习之HTML&CSS】-- HTML第五篇 -- 文本元素

【前端学习之HTML&CSS】-- HTML第五篇 – 文本元素

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章主要介绍了多种多样的文本元素，例如h元素（标题）、span元素、pre元素和一些书写代码的技巧。

h标题（head）

h1-h6元素的统称，分别表示一到六级标题：

小技巧

1. h1*6 + tab直接生成六个h1元素；
2. h1*6>{一级标题} + tab直接生成带有六个内容为一级标题的h1元素；
3. h$*6>{$级标题} + tab直接生成从h1到h6且内容从1级到6级标题的六个元素；
   【$为进位符，能够实现内容的递增】
   效果：

	<!-- h$*6>{$级标题} + tab -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6> 

p元素（段落）

生成多个段落同上: p*3>{这是一个段落} + tab

前端代码书写技巧

由于各元素具体内容应根据实际情况修改变化，故前端代码中元素内容随机即可，可>以通过Js、Java、PHP、C#替换；

lorem：乱数假文，没有任何实际含义的文字
p*6>lorem,生成随机六个段落，其中内容为乱数假文；
lorem1–一个随机单词，lorem1000–1000个随机单词；
效果

	<!-- p*3>{这是一个段落} + tab -->
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <!-- p*6>lorem7 -->
    <p>Lorem ipsum dolor sit amet consectetur.</p>
    <p>Aspernatur reprehenderit minima praesentium expedita quisquam.</p>
    <p>Molestias atque fuga dolores fugiat maiores!</p>
    <p>Totam error sapiente sunt consequuntur esse?</p>
    <p>Quia blanditiis non laudantium dicta libero.</p>
    <p>Cumque ducimus temporibus similique sint optio?</p>

span【无语义】

没有语义，就是需要一个元素，仅用于设置样式；

效果:

    三原色包含: <span style="color: red;">red</span>、 
                <span style="color: green;">green</span>、 
                <span style="color: blue;">blue</span>
    <!-- 这里可以通过打开网页，对应元素处右键单击检查，在右侧element处单击--
        添加display：block，将此元素变为块级元素 -->

扩展

块级（block）元素：某些元素在显示时会独占一行（h、p）；
行内（inline）元素：某些元素不会（span）；
HTML5：已经弃用这种说法，块级–流内容类别，行内–措辞内容类别；
实际均由CSS决定，右键检查可以发现，对应element处，display可以选择修改类别；

pre（预格式化文本元素）

在pre元素内部出现的内容，会按照源代码格式显示到页面上；
通常用于在网页中显示一些代码,例如：

<code>
    <!-- code加不加其实一样，只是为了语义化 -->
    <pre>
        var i = 1;
        if(i){
            console.log(i);
        }
    </pre>
</code>

pre元素的实质是它（无语义）拥有一个默认的CSS属性；
故其他元素也可以通过CSS实现相同的格式；

<p style="white-space: pre;">
<!-- 也可以实现与源代码同样式 -->
</p>

空白折叠：
在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格；
例外：在pre元素中的内容不会出现空白折叠；

    <p>
        Lorem           ipsum dolor sit amet consectetur adipisicing.
        <!--源代码中的连续空白字符在显示时会被折叠成一个空格 -->
    </p>
    <pre>
         (------)
        {/ o  o /}
         ( (oo) )
         --------
    </pre>

实际效果如图：

总结

文本元素是HTML元素中最常见的几种元素，根据上一篇博客语义化的概念，我们应该更加能够理解各个元素的作用，合理地使用标题和段落元素来表现网页内容，通过pre元素处理一些显示上的特殊问题。下篇博客我们将把目光聚焦于a元素和路径的书写，超链接，当之无愧是网页的重头大戏。