HTML的核心文本元素

最新推荐文章于 2024-07-22 22:37:58 发布

文墨轩

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量311

点赞数 7

分类专栏：前端的自我学习文章标签： html

本文链接：https://blog.csdn.net/weixin_49830664/article/details/119106917

版权

前端的自我学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文本元素

HTML支持的元素:HTML5元素周期表

a元素

是一个超链接元素

h

标题:head

h1_{h6:表示一级标题}到六级标题

p

段落，paragraphs

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

span [无语义]

没有语义只是用来设置样式

以前：某些元素在显示是只会独占一行（块级元素），而某些元素不会（行级元素）
到了HTML5已经弃用这种说法

pre

预格式化文本元素

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

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

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

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

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

整体代码如下

<!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>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>  
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
    <p>Eveniet laboriosam molestiae qui accusamus libero numquam sed?</p>
    <p>Nesciunt mollitia ea quia sapiente eius! Doloribus, cumque.</p>
    <p>Delectus placeat et consectetur, ipsum excepturi nihil suscipit.</p>
    <p>A, vero architecto veritatis quae atque illo aliquam.</p>
    <p>Tenetur voluptas ullam laudantium. Suscipit enim a reiciendis!</p>
    <p>Lorem.</p>
    <p>Dolorem!</p>
    <p>Sint!</p>
    <p>Quibusdam.</p>
    <p>Facere.</p>
    <p>Non!</p> -->
</body>
</html>

执行图如下：
在这里插入图片描述

文墨轩

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML的核心文本元素

文本元素HTML支持的元素:HTML5元素周期表a元素是一个超链接元素h标题:headh1h6:表示一级标题到六级标题p段落，paragraphslorem, 乱数假文：没有任何实际含义的文字span [无语义]没有语义只是用来设置样式以前：某些元素在显示是只会独占一行（块级元素），而某些元素不会（行级元素）到了HTML5已经弃用这种说法pre预格式化文本元素空白折叠：在源代码中的连续空白字符（空格，换行，制表），在页面显示时，会被折叠为一个空格例外：在pre元素中
复制链接

扫一扫