HTML之文本元素

文本元素

HTML5中支持的元素：HTML5元素周期表

h

标题： header

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

p

段落：paragraphs

lorem：乱数假文，没有任何实际含义的文字

使用

1. lorem : 生成无用的废话

    <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum sed debitis voluptate commodi cumque ipsum minus
        iure ut cupiditate dolor quidem numquam distinctio, facilis dicta deserunt asperiores porro voluptatibus vero?
    </p>

2. lorem1 : 每个标签都只生成一个无用标记

<p>Lorem.</p>
<p>In?</p>
<p>Vero.</p>
<p>Sed.</p>
<p>Id?</p>
<p>Eaque.</p>

3. lorem7 : 每个标签都只生成7个无用标记

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
    <p>Repellat, incidunt placeat impedit explicabo cupiditate voluptate?</p>
    <p>Dolorum placeat repudiandae soluta ipsa dignissimos dicta?</p>

span [无语义]

以前：某些元素在显示时会独占一行(块级元素)。而某些元素不会（行级元素）

到了HTML5，已经弃用这种说法，因为根据w3c官方标准描述，元素代表的是含义，
跟显示无关。

pre

预格式化文本元素：

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

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

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

  <pre>

               ┌─┐       ┌─┐
            ┌──┘ ┴───────┘ ┴──┐
            │                 │
            │       ───       │
            │  ─┬┘       └┬─  │
            │                 │
            │       ─┴─       │
            │                 │
            └───┐         ┌───┘
                │         │
                │         │
                │         │
                │         └──────────────┐
                │                        │
                │                        ├─┐
                │                        ┌─┘    
                │                        │
                └─┐  ┐  ┌───────┬──┐  ┌──┘         
                  │ ─┤ ─┤       │ ─┤ ─┤         
                  └──┴──┘       └──┴──┘ 
                    神兽保佑,代码无BUG! 
  </pre>

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

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

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

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