学习笔记（一）

前端学习(一)

1.学习这8个web开发技术

HTML+CSS+jQuery+JavaScript完成了10个项目，可获得前端开发证书
React+Sass+D3.js完成了10个项目，可获得数据可视化证书
Node.js,+Express+MongoDB完成了10个项目，可获得后端开发证书，还可通过Git和Heroku把项目部署到云上，让所有人都可以访问。

2.程序猿三大必备技能之一：

Read-Search-Ask

3.HTML 基础：
(1)向 HTML 元素问好:
大部分 HTML 元素都有一个开始标记和一个结束标记。
开始标记像这样：<h1>
结束标记像这样：</h1>
开始标记和结束标记的唯一区别就是结束标记多了一个/
如：请把h1元素的内容改为：Hello World。

  <h1>Hello</h1>

（2）用 h2 元素代表副标题：
h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。
如：在主标题下面创建一个副标题，标题内容是：CatPhotoApp。

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

（3）用 p 元素代表段落：
p是paragraph的缩写，通常被用来创建一个段落。
如：在副标题下面新增一个段落，段落内容是：Hello Paragraph。

<h1>Hello World</h1>
<h2>我家的猫咪</h2>
<p>Hello Paragraph</p>

（4）注释：
通过删除<!--和-->来删除注释。
注释的开始标记是<!--
结束标记是-->
如：把主标题和段落都注释掉，但把副标题留着。

<!--
<h1>Hello World</h1> -->
<h2>我家的猫咪</h2>
<!--
<p>Hello Paragraph</p>-->

(5)改变字体颜色：
修改h2元素的style(样式)，
样式的属性有很多，其中color用来指定颜色。
如：修改你的h2元素的style，让文本的颜色变为红色。

<h2 style="color: red">我家的猫咪</h2>

(6)HTML5 元素介绍：
HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
如：在第一个段落前添加，在第二个段落后添加。main元素应有两个 p元素作为它的子元素

<h2>猫咪</h2>
<main>
<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。</p>
<p>所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
</main>

（7）使用CSS选择器设置元素的样式：
样式的属性多达几千个，按照80-20原则，常用的也就几十个，完全可以掌握
像 <h2 style="color: red">CatPhotoApp</h2>，h2元素添加了inline style(内联样式)。
内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS
如：删除你的h2元素的内联样式，然后创建一个style元素。添加必要的CSS，使所有h2元素变为蓝色。

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

（8）使用CSS类对元素进行样式设置：
我们先声明一个类选择器：

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

上面的代码在 <style> 标记中声明了一个叫做 blue-text 的类样式。
然后在h2元素上应用我们声明的类选择器：

<h2 class="blue-text">CatPhotoApp</h2>

注意：
在CSS中，类选择器应该添加**.**为前缀。

.blue-text {
  color: blue;}

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

<h2 class="blue-text">CatPhotoApp</h2>

这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。
如：在你的style元素中，修改h2选择器为.red-text选择器，并把颜色值从blue修改为red。最后在h2元素上应用我们声明的.red-text选择器。

<style>
  .red-text {
    color: red;
  }
</style>
<h2 class="red-text">我家的猫咪</h2>

（9）使用CSS类为多个元素设置样式：
如：将red-text类应用到h2和p元素中

<style>
  .red-text {
    color: red;
  }
</style>
<h2 class="red-text">我家的猫咪</h2>
<p class="red-text">在大家心目中，怎能不惹人怜爱。</p>

（10）更改元素的字体大小：
字号是由样式属性font-size来控制的
如：让第一个段落和第二个段落的font-size都为16px。
请不要为第二个段落添加 class 属性

<style>
  .red-text {
    color: red;
  }
  p{
    font-size: 30px;
  }
</style>
<h2 class="red-text">我家的猫咪</h2>
<p class="red-text">养动物有的时候，就是介于爱与恨之间</p>
<p >它们一旦认定你了，它们必定心中重创。 </p>

（11）设置元素的字体：
用font-family属性来设置元素的字体
如：让所有的p元素都使用Monospace字体。

<style>
  .red-text {
    color: red;
  }
  p {
    font-family: Monospace;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">在大家心目中，猫是慵懒的可爱的化身</p>
<p>养动物有的时候，就是介于爱与恨之间</p>

（12）导入谷歌字体
首先，需要用link标签来引入谷歌Lobster字体。
复制下面的代码片断并将其粘贴到你的代码编辑器的顶部

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

如：将Lobster作为 font-family属性 的值应用到你的h2元素上

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  h2{
    font-family: Lobster;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<p class="red-text">在大家心目中，猫是慵懒的可爱的化身</p>
<p class="red-text">养动物有的时候</p>

（13）字体降级
有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。
当某种字体不可用时，你可以让浏览器自动降级到另一种字体。
例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：

p {
  font-family: Helvetica, Sans-Serif;
}

（14）给网站添加图片：
用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
注意：img元素是没有结束标记的
所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
理想情况下，alt属性不应该包含特殊字符，除非需要
如：

<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起拇指">

（15）图片大小
CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。
如：创建一个名为smaller-image的类选择器，然后用它来改变图片尺寸，使图片仅有100像素宽。

<style>
.smaller-image{
    width: 100px;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img src="/images/relaxing-cat.jpg" class="smaller-image">

(16)在元素周围添加边框
CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
如：创建一个叫thick-green-border的class，让它的边框宽度为10像素、边框样式为solid(固体)、边框颜色为绿色(green)，然后把这个class应用到你的猫咪照片上。
提示：你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可。例如

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }
  h2 {
    font-family: Lobster, Monospace;
  }
  p {
    font-size: 16px;
    font-family: Monospace;
  }
  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
  }
</style>
<h2 class="red-text">CatPhotoApp</h2>
<img class="thick-green-border smaller-image"   src="/images/relaxing-cat.jpg">
<p class="red-text">在大家心目中，猫是慵懒的可爱的化身</p>
<p class="red-text">养动物有的时候，就是介于爱与恨之间</p>