4、HTML基础——文本元素

文本元素

HTML5中支持的元素：HTML5元素周期表
元素周期表可以查看：https://www.xuanfengge.com/funny/html5/element/

1. h元素

标题，head

h1-h6：表示1级标题~6级标题

小技巧：
1.在vscode中不论光标在一行的什么位置，Ctrl+回车，会在此行下方新加一行（光标也会在下一行）；Ctrl+Shift+回车，会在此行上方新加一行；
2.打出h1*6，然后回车/Tab，会生成

    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>
    <h1></h1>

打出h1*6>{1级标题}，回车或Tab，生成

    <h1>1级标题</h1>
    <h1>1级标题</h1>
    <h1>1级标题</h1>
    <h1>1级标题</h1>
    <h1>1级标题</h1>
    <h1>1级标题</h1>

打出和h$*6>{$级标题}，回车或Tab，生成

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

2. p元素

段落，paragraphs

小技巧：
为了测试网页中段落生成的效果，检查排版，使用乱数假文可以大大提升效率。
乱数假文：没有任何实际含义的文字，lorem；
中文的乱数假文：下载插件 Chinese Lorem 后，将lorem替换为jw即可。

例：输入p*6>lorem，回车/Tab

   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, necessitatibus nihil voluptas animi omnis quos autem tempore quisquam rem ab illum doloremque maxime explicabo laudantium, fugiat est, provident commodi maiores.</p>
   <p>Consequuntur quidem voluptatem inventore aliquam asperiores similique porro dicta enim fuga reprehenderit iusto, debitis dolorum minus ratione. Eum vitae quis cum consequuntur consequatur rem pariatur aspernatur autem, reiciendis labore cupiditate.</p>
   <p>Laborum excepturi fugiat, cupiditate adipisci accusamus culpa quas. Doloremque necessitatibus placeat voluptate aperiam inventore numquam ducimus, nihil cumque tempora, quasi dolorem, possimus totam enim libero quod delectus quaerat impedit? Asperiores!</p>
   <p>Eos expedita laboriosam quis facere earum. Tenetur assumenda pariatur adipisci veritatis ad distinctio minima aut! Illum nisi quisquam esse quo voluptatem quis voluptas alias, tempore nemo! Possimus in quam explicabo?</p>
   <p>Blanditiis, nemo repellendus. Temporibus voluptas unde ex quo doloremque dolorum nihil assumenda nobis quos ipsa. Esse omnis dolores voluptatibus. A accusantium modi, consectetur perferendis ea at aspernatur porro tempore sequi.</p>
   <p>Minima possimus nihil accusantium sed quia et animi. Fuga, eum temporibus, iusto natus ipsum sed, cum cumque nostrum culpa similique ullam iure. Veniam debitis provident amet qui explicabo, aliquid cupiditate?</p>

输入<p>lorem*6</p>，回车/Tab

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem impedit est vitae facilis itaque voluptate, eius aliquid veritatis quam cumque id et accusantium natus fugit. Totam odit quis quos delectus!
Adipisci, excepturi deserunt! Libero odit quam culpa praesentium cum aperiam enim accusantium esse nisi magnam ipsam a harum, numquam, perferendis impedit reiciendis pariatur doloremque. Et voluptas minima beatae vel laboriosam?
Repellat, dolores? Asperiores non, tempore accusantium corporis illum quaerat, maxime eveniet praesentium voluptates commodi deleniti quibusdam provident accusamus distinctio dolorem iste, totam consectetur aliquam officiis! Earum blanditiis maxime molestias fugit?
Quis omnis, aut et inventore deserunt alias consequatur vel ut dolores optio velit non illo iusto reiciendis corrupti temporibus nostrum placeat. Doloremque hic voluptatibus vero minima, optio quo delectus officiis!
Explicabo voluptatibus quis reprehenderit officia quaerat corporis possimus facilis rerum molestiae deserunt officiis nesciunt quibusdam nam inventore, at pariatur excepturi omnis nobis minus voluptates enim temporibus rem cum architecto. Adipisci!
Vel perspiciatis ut, sapiente aliquid ipsa iste debitis molestias minima tempora dolore officiis exercitationem, cum natus. Dolor, sequi omnis accusamus vitae illo ducimus assumenda ipsam totam at reprehenderit deserunt soluta!</p>

输入<p>jw</p>，回车/Tab

<p>张都了小召会尘兄者这尘你大望人二愚国，有天京丐者前卑与为前，叩的慧羊以雷说回到那，快感对是，病降不落郭低，厄我就，准然你是向二非，但谋之不人作程上在区会里五李，和事惶喜最希导卑就太判勉郭，关别衣帮完位郭常招但拾土中未评导貂易哉，薪韩不明五薪，大介今，会在。</p>

但是jw生成的中文假文不能像上面两个例子一样生成多段。

值得注意的是，lorem或jw后面加上数字，可以控制生成的假文单词或汉字的数量。jw默认生成128个简体中文字符。

3. span【无语义】元素

没有语义，仅作为一个容器，用于设置样式。

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级（行内）元素）；
现在：到了HTML5，已经弃用这种说法。根据W3C官方标准的描述，每个元素都有具体的含义，与显示效果无关，是否独占一行完全可以由CSS语言来设置。

“块级”类别大致相当于HTML5当中的流内容类别，而“行内”类别相当于措辞内容类别。

三原色：<span style="color: red;">红</span>、<span style="color: green">绿</span>、<span style="color: blue;">蓝</span>

4. pre元素

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、回车（换行）、Tab（制表）），在页面显示时，会被折叠为一个空格。

<p>Lorem 
        
        
        
        
        
        
        
                                  ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam molestiae illo expedita rerum architecto, error fuga voluptas sint ratione, unde corporis illum dolor porro aliquid possimus nemo nesciunt exercitationem!</p>

显示出的效果

Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quisquam molestiae illo expedita rerum architecto, error fuga voluptas sint ratione, unde corporis illum dolor porro aliquid possimus nemo nesciunt exercitationem!

例外：在pre元素中的内容不会被空白折叠
在pre元素内部出现的内容，会按照源代码的格式显示到页面上。

该元素通常用于在网页上显示一些代码。

	<p>
   		var i = 1;
   		if(i){
       		console.log(i);
        }
    </p>

    <pre>
        var i = 1;
        if(i){
            console.log(i);
        }
    </pre>

显示效果：

pre元素功能的本质：它有一个默认的CSS属性。white-space: pre;

显示代码时，通常外面套code元素，code表示代码区域。

<code>
    <pre>
        var i = 1;
        if(i){
            console.log(i);
        }
    </pre>
</code>