学习记录1

HTML5和CSS
1.选择器与类选择器
2.对于文本的属性设置，如color、font-size、font-family。并且加入了字形的链接与使用优先级
3.对于图片的插入与属性设置
4.无序序列与有序序列
5.form表单的设置
6.div元素
7.classs属性与id属性

1~3.

<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;    border-radius: 50%;  }  .smaller-image {    width: 100px;  }</style><h2 class="red-text">CatPhotoApp</h2><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">

另外应该注意a元素，即anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。
alt属性是图片加载不成功时，进而代替的文本。

<p>Click here for <a href=#>cat photos</a>.</p>或<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"alt="A cute orange cat lying on its back"></a>当然图片也可作为链接如：<a href="#"><img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg"></a>

4.无序序列和有序序列

这里分别列举了一个示例。<ul>  <li>cat nip</li>  <li>laser pointers</li>  <li>lasagna</li></ul><p>Top 3 things cats hate:</p><ol>  <li>flea treatment</li>  <li>thunder</li>  <li>other cats</li></ol>

5.form表单的学习内容如下：

<form action="/submit-cat-photo"><input type="text" placeholder="cat photo URL"required></form>这其中action属性的值指定了表单提交到服务器的地址，这样就构建了可以使HTML跟服务器交互的Web表单。input type=“text”为用户输入栏，placeholder为预定的文本输入。required表示此栏为必填项

按钮button：

<form action="/submit-cat-photo">  <label><input type="radio" name="test-name"checked>Indoor</label>  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>  <label><input type="checkbox" name="personality" checked> Loving</label>  <label><input type="checkbox" name="personality"> Lazy</label>  <label><input type="checkbox" name="personality"> Energetic</label>  <input type="text" placeholder="cat photo URL" required>  <button type="submit">Submit</button></form>单选按钮（radio）和复选按钮（checkbox）为type属性中两种设定，均需要嵌入 <label>当中，checked表示已经设置为预选。**注意：所有关联的单选按钮应该使用相同的name属性。**另外提交按钮需要嵌入在<button></button>中，**所有关联的复选按钮应该具有相同的name属性。**

6.div元素，也被称作division(层)元素，是一个盛装其他元素的通用容器。所以可以利用CSS的继承关系把div上的CSS传递给它所有子元素。

<div class="gray-background">  <p>Things cats love:</p>  <ul>    <li>cat nip</li>    <li>laser pointers</li>    <li>lasagna</li>  </ul>  <p>Top 3 things cats hate:</p>  <ol>    <li>flea treatment</li>    <li>thunder</li>    <li>other cats</li>  </ol></div>这样两个序列均被放入了div层，设置背景颜色为灰色。

7.class属性可以包含多个，但id属性是唯一的

<style>#cat-photo-form{    background-color:green  } </style> <form  id="cat-photo-form" action="/submit-cat-photo">..........**注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。**

以上为第一天的学习内容，如有错误，恳请读者指出，修正我的学习内容。