HTML5+CSS3一表流（一）文本相关操作（零基础必看）

本文链接：https://blog.csdn.net/weixin_47072335/article/details/126041338

HTML5+CSS3一表流（一）文本相关操作（零基础必看）

1.1HTML5+CSS3一表流（一）文本相关操作表格

元素	含义	备注
<h1></h1>	标题	数字可替换为1~6，数字越大，字号越大
<em></em>	斜体	-
<u></u>	下划线	-
<sup></sup>	上标	-
<sub></sub>	下标	-
<p></p>	段落	-
<br>	换行	单个标记
<pre></pre>	原格式	在本标记打出的文字，不会自动排版，会按照原格式输出
<hr>	水平线	<hr width = ‘水平线宽度’>

友情提示：以下代码没有添加任何CSS代码，以体现其原始功能。

1.2 演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5+CSS3一表流（一）文本相关操作（零基础必看）</title>
</head>
<!--这是注释，以上部分暂时不用理解，创建新html文件时webstorm会自动编写，<title></title>,即网页名称-->
<body>
<h1>h1</h1> <h2>h2</h2> <h3>h3</h3>
<h4>h4</h4> <h5>h5</h5> <h6>h6</h6>
<em>斜体</em>
<u>下划线</u>
<p>
    <!--注意上下标的位置不同与网页显示位置的不同-->
    x<sup>2</sup> + x<sub>0</sub> = x<sub>1</sub><sup>3</sup> - x<sup>4</sup><sub>3</sub>
</p>
<br><hr>
<pre>
    。      。  。。     。  。 。 。    。。。。       。       。   。。。。 。。。。
    。    。    。。     。    。。    。       。     。       。        。 。
    。  。      。 。    。    。。  。                。。。。。。        。 。
    。。        。  。   。    。。  。     。 。 。    。。。。。。        。 。
    。  。      。   。  。    。。  。          。    。       。        。 。
    。    。    。    。 。    。。    。       。     。       。        。 。
    。      。  。     。。  。 。 。    。。。。       。       。        。 。
</pre>
<!--为展示最基本功能，未添加任何CSS代码-->
</body>
</html>