小白学编程之HTML/CSS Day002

小白学编程之HTML/CSS Day 002

从此妈妈再也不用担心我不懂编程了

上期回顾

在上一篇学习笔记中，主要学习了以下内容，可以翻阅《小白学编程之HTML/CSS Day 001》 查看具体内容

1.01 What is HTML | 什么是HTML
1.02 HTML tags | HTML 标签
1.03

tag | 标题标签
1.04

tag | 自然段标签
1.05

和
tag | 列表标签

上篇文章发出来以后有两点需要补充如下

1. 有人问需不需要Mac，答案windos和Mac都可以，事实上只要有个浏览器就OK了。
2. 上次我推荐在txt记事本或者W3School的在线编辑器上进行HTML练习。有亲爱的读者朋友yarving推荐可以在 codeopen 或者是 jsfiddle 上进行练习，看了一下，很酷的两个网站。我自己比较喜欢codeopen，因为界面酷炫，不像jsfiddle需要点击“Run”才能显示效果。还有很重要的一点，codeopen的code需要一个字符一个字符敲，而jsfiddle有自动补全功能，个人认为对于初学小白还是一个字一个字敲比较好。所以这篇文章里将使用codeopen进行效果演示。

codeopen 截图如下：

codeopen截图

jsfiddle截图如下

jsfiddle截图

本期概览

这一篇是学习HTML/CSS的第二天，主要内容有

1.06 Nesting tags| 标签的嵌套关系
1.07 tag | 包含一切的标签
1.08 tag | 标签
1.09 tag | 　标签
1.10 DOCTYPE | 设置HTML版本

---

1.06 Nesting tags| 标签的嵌套关系

HTML标签有时候会包含另外的标签，在这种情况下，包含其他标签的标签叫做parent（爹和妈），被包含的标签叫做children（娃）。

像之前在使用列表标签时，

被包含在

（无序列表）或

（有序列表），这时候

或

就被称为parent，

就被称为children，如下图所示：

6.nesting.png

1.07 tag | 包含一切的标签

既然娃有爹妈，那么爹妈也有爹妈；在HTML里，所有能通过网页显示（纯文字）内容的标签都要被嵌套在 标签里。

7.bodytag.png

1.08 tag | 标签

既然任何网页显示的（文字）内容都需要放在标签里。言外之意，就是之外还有标签写的不是（纯文字）内容的显示，这就是。

8.headtag.png

1.09 tag | 标签

HTML 当然少不了标签，所有的HTML标签 都要放在标签里面。

9.htmltag.png

1.11 DOCTYPE | 设置HTML版本

DOCTYPE 翻译为中文就是文件类型，这不是一个标签，所以不是成对出现，只有一个，这个主要是用来指定HTML 版本。设定这个之后，浏览器可以知道如何更好的显示你的页面。

10.doctype.png

扩展阅读之，如果还想知道更多 请前往 声明

最后来总结一下，
目前为止，学习了一份HTML文件包含四大类元素：DOCTYPE，标签，标签，标签，每一类里面都需要填写不同的内容。层次结构如下图所示：

summary.png

贪多嚼不烂。建议一个字一个字敲，练习练习再练习。

用目前学到的试着敲一个作品吧！下面是我的“黯然销魂虾”哟。

sample销魂虾.png

---

下期预告

如何添加链接

欢迎来纠错，也欢迎提意见和任何问题~~~