小白前端入门笔记(七),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 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>
想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~ 文章就到这里,给个三连再走吧~
- web前端分享HTML5中的nav标签学习笔记
- 小白入门---HTML5标签canvas
- web前端笔记:html5的<b>标签
- 前端零基础入门 -- HTML5标签的变化
- 前端CSS笔记之 小白入门(二)
- 前端开发入门到实战:HTML5新增和废弃的标签
- web前端基础之HTML5语义化新标签学习笔记(13)学会用语义化标签
- 后端小白的VUE入门笔记, 前端高能慎入
- HTML5 video标签(播放器)学习笔记(一):使用入门
- 学习笔记(14):C语言 从小白到大神: 入门篇-变量的存储和引用,内部和外部函数...
- 移动前端头部标签(HTML5 head meta)转载
- 移动前端不得不了解的html5 head 头标签
- HTML5学习笔记之audio标签
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
- 编程小白的第一本 python 入门书 学习笔记01 第二章 安装Python环境
- 每天成长一点---WEB前端学习入门笔记
- 前端笔记----jquery入门知识点总结
- DayDayUP之HTML5学习笔记 三 article、hgroup、figure、figcaption、dialog标签简单应用
- HTML5 入门:一个最简单的HTML页面(doctype、meta、Head、标签的使用)
- HTML入门笔记5-居中标签和空格