FCC学习记录第001天:Hello World

Say Hello to HTML Element

<h1>Hello World</h1>

h1就是一个HTML元素,h1是header1的简写,意思是一级标题。二级标题就是h2,三级标题呢?我猜您能猜得到。

大部分元素都有一个开始标记和一个结束标记。

开始标记像这样:<h1>

结束标记像这样:</h1>

开始标记和结束标记的唯一区别就是结束标记多了一个/。

壹号特工按语:

学习任何编程语言基本都是以Hello World作为开场白(尽管很多人不承认html、css什么的是编程语言,管他呢,与争论相比,学会更有意义),这就如同古代不论何门何派打擂台之前先来个拱手礼,现代擂台开始之前先碰下拳一样。

打完这句话就证明你向编程世界问了个好,从今天,开始你的编程之旅吧。

以下所有代码都是经过验证可呈现预期效果的,如果没有呈现出预期效果,请仔细检查标点符号,

Headline with the h2 Element

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>

这一节也很简单,就是在一级标题下面创建二级标题。

Inform with the Paragraph Element

这个是创建段落,Paragraph简写为p,格式跟标题一样。

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

Uncomment HTML

<!--
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>
-->

不想删除,又不想让他运行就使用注释。

Comment out HTML

<!--
<h1>Hello World</h1>
-->
<h2>CatPhotoApp</h2>
<!--
<p>Hello Paragraph</p>
-->

主标题和段落都注释掉,只留下副标题。

Fill in the Blank with Placeholder Text

<h1>西游记</h1>
<h2>齐天大圣</h2>
<h2>孙悟空</h2>
<p>Monkey code 猴哥猴哥,你真了不得,金箍棒在手,问世间谁是英雄。</p>

Delete HTML Elements

<h2>CatPhotoApp</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>

Change the Color of Text

<h2 style="color:red">CatPhotoApp</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>

Use CSS Selectors to Style Elements

元素选择器样例如下:

<style>
 选择器 {属性名称: 属性值;}
 h2 {color: red;}
</style>

据FCC课程上说呀,样式的属性有几千个,但咱们不用担心,按照28原则,常用的也就几十个,咱们完全可以掌握。不知道28原则的自行百度或谷歌。

<style>
 h2{color:blue;}
 </style>
<h2 >CatPhotoApp</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>

Use a CSS Class to Style an Element

上节是元素选择器,这节是类选择器。

声明一个类选择器:

<style>
 .blue-text {
  color: blue;
 }
</style>

在CSS中,类选择器应该添加.为前缀。

而在HTML中,class属性不能添加.为前缀。

 <style>
   .red-text{
     color:red;
   }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p>在大家心目中,猫是慵懒的可爱的化身,它可以睡饱了再起来吃饭,可以逗趣小耗子,可以卖得了萌,使得了坏,这样百变的小怪兽就集结在一只宠物上,怎能不惹人怜爱。</p>

这是第一天,其实之前也刷过这些,但是,时间太久远,已经忘得差不多了,这次重刷,有一起刷的欢迎留言交流。