前端入门-文本元素-一一网

文本元素

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

HTML5元素周期表.png

h元素

h1~h6 一到六级标题
快捷输入

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

p元素

段落，paragraphs

    <p>这是一个段落</p>
    <p>这还是一个段落</p>
复制代码

安装了Emmet插件，输入lorem会产生乱数假文，即没有任何含义的文字

<!-- 产生六个段落，内容是乱数假文 -->
p*6>lorem
复制代码

span元素（无语义）

仅仅用于样式设置

<span style="color: red;">红色</span>，<span style="color: green;">绿</span>，<span style="color: blue;">蓝</span>
复制代码

某些元素在显示时会独占一行（块级元素），而有些元素则不会（行内元素）。
到了HTML5已经弃用这种说法了，在HTML5中是更为复杂的内容类别来区分，‘块级’相当于流内容类别，而‘行内’则相当于措辞内容类别
HTML5有较为严格的语义化，每个元素代表一个语义，所以展示效果不能用元素来表达

pre元素

预格式化文本元素

pre元素功能的本质，是因为pre有一个默认的css属性。

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

例外：在pre元素中不会出现空白折叠，也就是说在pre元素里，源代码的内容跟页面显示的内容一致，该元素通常用于在网页中显示源代码,在显示代码时，通常外面套code元素，code表示代码显示区域。

例如：

    <pre>
        这是pre元素的练习

        这还是pre元素的练习
    </pre>
复制代码

HTML实体

实体字符（参考资料：www.w3school.com.cn/html/html_e…

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

使用方法：

1.&单词;

2.&#数字;

例如：

空格  , 

小于符号（<） <,<

大于符号（>） >,>

练习

<!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>文本元素</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <p>这是一个段落</p>
    <p>这还是一个段落</p>
    <!-- 这是乱数假文 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque culpa recusandae optio incidunt soluta voluptatibus quasi iure? Repellat repellendus, debitis quis labore nihil assumenda maiores, placeat quod minus laboriosam tempora.</p>
    <!-- span元素练习 -->
    <p>三原色包括：<span style="color: red;">红色</span>，<span style="color: green;">绿</span>，<span style="color: blue;">蓝</span></p>
    <pre>
        这是pre元素的练习

        这还是pre元素的练习
    </pre>
</body>
</html>
复制代码