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