html5的网络书店图书网站代码_小白前端入门笔记（七），HTML5中的main标签

点击上方蓝字，关注并星标，和我一起学技术。

大家好，欢迎来到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 Worldh1>
  <p>Hello Paragraphp>
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标签。

要求

1. 你需要拥有两个包含Kitty Ipsum文本的p标签
2. 每一个p标签都应该包含closing tag
3. 你的p元素应该包含Kitty Ipsum文本开头的若干单词
4. 你的代码应该包含一个main标签
5. main标签应该包含两个p标签作为子元素
6. main标签的opening tag应该在第一个p标签之前
7. main标签的closing tag应该在第二个p标签之后

编辑器

解答

今天的挑战主要是为我们介绍了HTML5的main标签，问题并不困难，我们只需要按照题目的要求添加一个p标签，并且在两个p标签外面包裹上main标签即可。

<h2>CatPhotoApph2>

<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>

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

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