HTML之文本元素

小灰灰 2023-03-14 10:37 55阅读 0赞

### 文章目录 ###

*  文本元素
 *   *  h
     *  p
     *  span \[无语义\]
     *  pre

# 文本元素 #

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

## h ##

标题： header

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

## p ##

段落：paragraphs

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

**使用**

1.  lorem : 生成无用的废话

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?

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

Lorem.
 In?
 Vero.
 Sed.
 Id?
 Eaque.

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

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

## 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*