小白前端入门笔记（七），HTML5中的main标签

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了小白前端入门笔记（七），HTML5中的main标签，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2495字，纯文字阅读大概需要4分钟。

内容图文

大家好，欢迎来到freecodecamp HTML专题第7篇。

首先声明，我们的文章跳过了一篇，也就是freecodecamp这个网站上第7个挑战：Basic HTML and HTML5: Delete HTML Elements，即删除指定的HTML元素。由于这个挑战实在是太简单了，就不单独写一篇文章占据篇幅了。这一篇文章写的是它下一个挑战：Basic HTML and HTML5: Introduction to HTML5 Elements，HTML和HTML5的基础介绍。

背景知识
我们都听说过HTML5，这是HTML标签最新的一个标准。它在HTML的基础上拓展了许多新的标签，包括main, header, footer, nav, video, article, section等等。

这些标签除了提供新的功能之外呢，也是让我们的HTML代码结构更加的清楚，可读性更强，并且帮助我们进行SEO。SEO(Search Engine Optimization)是搜索引擎优化，它的目的是为了让用户在搜索和网站相关的关键词的时候，可以使得我们的网站在搜索引擎的排名尽量靠前，从而达到增加我们流量的目的。main这个标签就可以帮助到搜索引擎以及搜索工程师找到我们网站的主要内容，这个标签本身并不承载特殊的功能和意义。

举一个例子，我们写一个main标签，在其中包含两个子元素。

<main> 
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

这里的main标签起的就是一个提示作用，告诉我们网站的主要内容就是main标签当中的部分。在HTML解析上和普通的div标签实际起到的效果是一样的。但是想象一下，在过去我们只能使用div标签的时候，复杂的网站代码经常写满了一层层嵌套的div，要分辨网站的内容结构是一件非常麻烦的事情，现在有了各种层次和类别的标签，可以大大改善这个问题。

注意：许多其他的HTML5标签以及它们的功能用处会在之后的文章当中详细介绍。

题意
在现在已有的p标签之后创建第二个p标签，这个标签当中应该包含如下的kitty ipsum填充文本：

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

接着创建一个main标签嵌套这两个p标签。

要求

• 你需要拥有两个包含Kitty Ipsum文本的p标签
• 每一个p标签都应该包含closing tag
• 你的p元素应该包含Kitty Ipsum文本开头的若干单词
• 你的代码应该包含一个main标签
• main标签应该包含两个p标签作为子元素
• main标签的opening tag应该在第一个p标签之前
• main标签的closing tag应该在第二个p标签之后
  编辑器
  
  解答
  今天的挑战主要是为我们介绍了HTML5的main标签，问题并不困难，我们只需要按照题目的要求添加一个p标签，并且在两个p标签外面包裹上main标签即可。

<h2>CatPhotoApp</h2>

<main>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

</main>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里，给个三连再走吧~

内容总结

以上是互联网集市为您收集整理的小白前端入门笔记（七），HTML5中的main标签全部内容，希望文章能够帮你解决小白前端入门笔记（七），HTML5中的main标签所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---