HTML基础教程：[2]文本标签

来源：互联网 2023-03-16 19:19:14 版权归原作者所有，如有侵权，请联系我们

我们浏览网页，从网页里面获取我们需要的信息，那今天就让我们一起学习HTML中承载信息的文本标签吧！

工具/原料

笔记本/

方法/步骤

通过前面的学习我们已经了解了HTML的基本结构，那我们的文本信息是写在html文件的那部分呢？应该写在html的body>/body>里，从而让浏者看到我们的文本，获取我们传递给他的信息。

1.标题：

h1>/h1>

h2>/h2>

h3>/h3>

h4>/h4>

h5>/h5>

h6>/h6>

这是六个级别标题标签。下面让我们一起做个小例子吧！

请在body>里录入下面代码

h1>百度经验之HTML基础教程——文本标签/h1>

h2>百度经验之HTML基础教程——文本标签/h2>

h3>百度经验之HTML基础教程——文本标签/h3>

h4>百度经验之HTML基础教程——文本标签/h4>

h5>百度经验之HTML基础教程——文本标签/h5>

h6>百度经验之HTML基础教程——文本标签/h6>

并且预览：

HTML基础教程：[2]文本标签

3相关内容未经许可获取自百度经验

我们可以看到从h1>到h6>，文字从大到小，也就是说，h1>是最主要的标题，其他的依次次之。

2.段落：

在成段的文字两端分别加上/就构成了段落。

下面我们来做个小例子。

请在body>里录入下面代码：

百度经验是百度于2010年10月推出的一款生活知识系新产品。它主要解决用户“具体怎样做”，重在解决实际问题。在架构上，整合了百度知道的问题和百度百科的格式标准。/

经验是一篇能指导人们达到某种目的的文章，通常包

百度经验页面截图

括概述、工具/原料、步骤/方法、注意事项、参考资料等几个部分，其中步骤/方法详细的描述了达到目的的操作过程，便于学习和模仿。经验一般含有丰富的图片（如果必要），和简明的文字，通常和现实生活联系紧密，能帮助人们解决实际问题

浏览网页：

HTML基础教程：[2]文本标签

我们可以看出默认情况下，浏览器在显示段落时会另起一行，并且与后续段落保持一定的距离。

3.粗体和斜体标签：

b>/b>

i>/i>

我们在body>里录入下面代码，看看效果吧。

b>百度经验之HTML基础教程——文本标签/b>

i>百度经验之HTML基础教程——文本标签/i>

HTML基础教程：[2]文本标签

从上面的例子我们很容易看出b>和i>标签的显示效果。

4.上标和下标标签：

su/su

sub>/sub>

我们我网页里也会常常用到数学公式或者其他数据，那么怎么在网页里显示出某个数的平方，或者出现下标呢，我们通过下面的例子一起来学习吧！

请在body>里录入下面代码：

asu2/su bsu2/su 2ab=(a b)su2su/

asub>1/sub> aasub>2/sub>=a/

浏览效果

HTML基础教程：[2]文本标签

5.换行符和水平线标签：

br/>

hr/>

在一个段落里，我们如果想换行，就需要用到换行标签br/>，如果我们直接在下源代码上换行，浏览器在显示时，不会有换行效果，仅仅是空一格，所以要想换行，就必须要用br/>下面我们看看这个例子。

请在body>里录入下面代码：

在一个段落里，我们如果想换行，就需要用到换行标签，

如果我们直接在下源代码上换行，浏览器在显示时，

不会有换行效果，仅仅是空一格，所以要想换行，

就必须要用br/>下面我们看看这个例子。

我们来看看效果

HTML基础教程：[2]文本标签

我们再body>里录入下面代码：

在一个段落里，我们如果想换行，就需要用到换行标签，br/>

如果我们直接在下源代码上换行，浏览器在显示时，br/>

不会有换行效果，仅仅是空一格，所以要想换行，br/>

就必须要用br/>

我们来看看效果：

HTML基础教程：[2]文本标签

由上面的两个实例可见换行符的用途。我们再我们再body>里录入下面代码：

百度经验/hr/>

HTML教程/hr/>

文本标签/hr/>

醉春风_IT/hr/>

浏览效果：

HTML基础教程：[2]文本标签

由上面的例子我们也看到了水平线标签的显示效果，他常用来分割两个不同的内容。

注意事项

记得动手操作哦！

结构|下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：HTML如何在页面输出表情符号下一篇：html基础第七节------表单

HTML基础教程：[2]文本标签

工具/原料

方法/步骤

注意事项

热门文章

标签列表