HTML5+CSS3学习笔记（第2章）文本

最新推荐文章于 2024-07-23 13:17:20 发布

放屁鮰鱼

最新推荐文章于 2024-07-23 13:17:20 发布

阅读量240

点赞数 1

分类专栏： HTML5 笔记

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104148207

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

HTML5

16 篇文章 0 订阅

订阅专栏

HTML5+CSS3学习笔记（第2章）文本

2.1标题

共有6个分别是<h1><h2><h3><h4><h5><h6>
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序猿的笑话</title>
</head>
<body>
<!--表示文章标题-->
<h1>程序猿的笑话</h1>
<!--表示相关发布信息-->
<h5>发布时间：2020年2月2日19:17:42|发布者：程序员|阅读数：156次</h5>
<!--表示对话内容-->
<h4>甲：《C++ 面向对象程序设计》这本书怎么比《C程序设计语言》厚了好几倍？</h4>
<h4>乙：当然了，有“对象”后肯定麻烦呀！</h4>
</body>
</html>

2.1.2标签对齐

<h1 align="center">放屁鮰鱼</h1>

2.2文字

2.2.1文字的斜体，下划线，删除线

<em>斜体</em>
<u>下划线</u>
<strike>带删除线的文字</strike>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斜体、下划线、删除线</title>
</head>
<body>
<img src="fish.png" width="412">
<h3>书名：<em>案例学wed前端开发</em></h3><br>
<h3>作者：明日科技</h3>
<h3>出版社：吉林大学出版社</h3>
<h3>出版日期：<u>2018年7月</u></h3>
<h3>页数：288页</h3>
<h3>原价：<strike>49.80</strike>元 促销价格：33.80元</h3>
</body>
</html>

2.2.2文字的上标与下标

<sup>上标标记内容</sup>
<sub>下标标记内容</sub>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上标和下标标签</title>
</head>
<body>
<h1 align="center">上标和下标标签</h1>
<h3 align="center">在数字计算中：</h3>
<h3 align="center">上标：X<sup>3</sup>+9X<sup>2</sup>-3=0</h3>
<h3 align="center">下标：3X<sub>1</sub>+2X<sub>2</sub>=10</h3>
</body>
</html>

2.2.3特殊符号

  空格

2.3段落

需要通过标签实现段落的效果

2.3.1段落标签

会在前后创建一些空白

<p>段落文字</p>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
<p>╭═════════放屁鮰鱼，鮰鱼中的放屁鱼═════════╮</p>
<p>║&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一条欢乐的放屁鮰鱼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;║</p>
</body>
</html>

2.3.2段落的换行标签

<br>换行标签
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落的换行标签</title>
</head>
<body>
<p align="center">《望庐山瀑布》&nbsp;&nbsp;&nbsp;&nbsp;李白</p>
<p align="center">
    日照香炉生紫烟，遥望瀑布挂前川。<br>
    飞流直下三千尺，疑是银河落九天。<br>
</p>
</body>
</html>

2.3.3段落的原格式标签

在这里插入代码片

<pre>文本内容</pre>

可以使用原格式进行排版，如空格、制表符等。
例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落的换行标签</title>
</head>
<body>
<pre>
                OOOOO
        oooo                oooo
            000     000
        0   0   0   0   0   0   0
</pre>
</body>
</html>

2.4水平线

<hr>