在 Visual Studio Code 中创建 HTML 段落

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

当你想在网站中添加文本内容时,HTML 段落非常重要。在这个逐步实验中,你将学习如何使用 p 标签创建 HTML 段落。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") subgraph Lab Skills html/basic_elems -.-> lab-70813{{"`在 Visual Studio Code 中创建 HTML 段落`"}} html/text_head -.-> lab-70813{{"`在 Visual Studio Code 中创建 HTML 段落`"}} html/para_br -.-> lab-70813{{"`在 Visual Studio Code 中创建 HTML 段落`"}} html/doc_flow -.-> lab-70813{{"`在 Visual Studio Code 中创建 HTML 段落`"}} end

创建段落标签

首先,创建一个名为 index.html 的 HTML 文件。你可以使用任何你喜欢的代码编辑器。

在你的 HTML 文件的 body 部分添加以下代码块来创建一个段落标签。

<p>This is a HTML paragraph.</p>

向段落中添加文本

通过将步骤 2 中的代码块修改为以下内容,向段落中添加一些文本:

<p>Hello, my name is John. I am a software developer.</p>

添加多个段落

通过重复步骤 2 和步骤 3 并使用不同的文本内容,向你的 HTML 文件中添加多个段落。你的最终代码块应该类似于以下内容:

<body>
  <p>Hello, my name is John. I am a software developer.</p>
  <p>I love coding and creating beautiful websites.</p>
  <p>HTML and CSS are my favorite programming languages.</p>
</body>

总结

恭喜!你已经成功学会了如何创建 HTML 段落并向其中添加文本内容。这是构建网站时的一项重要技能。继续练习并探索 HTML 标签,以创建动态且引人入胜的网页。

您可能感兴趣的其他 HTML 教程