HTML 文本元素

原创于 2022-10-20 15:54:32 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

本文介绍了HTML5中的各种元素，包括标题、段落、预格式化文本和代码展示。通过实体字符展示了特殊符号的使用，并给出了HTML5文档的基本结构。同时，通过示例演示了代码块的表示方法及其在页面显示中的效果。

文本元素

HTML5支持那些元素（HTML5元素周期表）

h

标题：head

h1~h6 一到六级标题

p

段落： paragraphs

乱数假文：没有温和含义的假文

span【无语义】

设置样式

某些元素在显示时独占一行（块级元素），某些元素不会（行内元素）
到了HTML5，已经弃用这种说法

pre

预格式化文本元素

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

列外：在pre元素中的内容不会出现空白折叠

该元素主要是进行显示代码

pre元素的本质是它有一个默认的css属性

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

实体字符 HTML.Entity

实体字符通常用于在页面中显示一些特殊符号

1.&单词：
2.&#数字；

&lt；小于符号
&gt；大于符号
&nbsp；空格
&copy；版权符号
&amp；&符号

<!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>
</head>
<body>
    <h1>一级标题</h1>
    <!-- h2*5{文本}-->
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <h2>二级标题</h2>
    <!--h$*5>{$级文本}-->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <!--lorem:乱数假文-->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam hic maiores consectetur distinctio optio dolores doloremque eum! Sequi provident pariatur labore illo, nam inventore reprehenderit maiores ipsum numquam, quos dignissimos.
    <!--P*6>lroem lorem后面可以加数字表示加多少字-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos quisquam qui repellendus fugit mollitia provident eveniet in sint, corrupti, dolores cum labore similique minima. Voluptas odit ducimus laboriosam impedit ipsum.</p>
    <p>Mollitia iure ullam pariatur repellat harum reprehenderit eius perspiciatis, voluptatum necessitatibus in sint eligendi deleniti fugiat nesciunt earum dolore id libero consequatur et facere qui sit ab voluptas error. Accusamus.</p>
    <p>Cupiditate molestiae unde aut in fuga voluptas distinctio enim, exercitationem itaque veritatis tempora eum alias maiores vitae nam id earum provident beatae maxime aliquid tenetur? Rerum, ea ipsum? Iure, expedita?</p>
    <p>Distinctio nam vero culpa asperiores quasi quis, similique quidem ipsa debitis, nulla exercitationem quas ex laborum! Nobis dolore iure laborum laudantium, natus sint error reiciendis, voluptatibus odit nisi sit sequi!</p>
    <p>Doloribus optio unde fuga at illo alias facilis ipsam delectus iure, incidunt debitis animi sapiente sint error non ab voluptas perspiciatis. Fugiat accusantium beatae quidem nostrum necessitatibus nesciunt eveniet. Officiis.</p>
    <p>Beatae tenetur quibusdam animi fugit cumque temporibus doloremque alias! Laborum blanditiis eius magni a alias nesciunt laboriosam perspiciatis omnis, exercitationem reiciendis aut cumque animi adipisci doloremque architecto, nam, officia incidunt?</p>
    <!--shife+table键减缩进，table缩进-->
    <code>
        <pre>
            4234
            34223
            32423
            4234
        </pre>
    </code>
    <!--小于&lt：&gt大于-->
    <p>在页面中显示字符 </p>
</body>
</html>