大家好,欢迎来到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>
想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~
文章就到这里,给个三连再走吧~