2017/5/10 freeCodeCamp html+css 部分总结 （二）

以代码加注释的方法来记录吧。文字为主的基础知识的记录感觉写的麻烦，看得也麻烦。

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">    <!--链接引入外部字体-->

<style>                                                              <!--css样式修改-->
    .red-text {
      color: red;
    }

    h2 {
      font-family: Lobster, Monospace;
    }

    p {
      font-size: 16px;
      font-family: Monospace， Lobster;              <!--位置顺序，依次采用-->
    }

    .thick-green-border {
      border-color: green;
      border-width: 10px;
      border-style: solid;
      border-radius: 50%;                  <!--边框半径-->
    }

    .smaller-image {
      width: 100px;
    }

 #orange-text{color:orange;}       <!--通过id来修改属性-->
</style>

<h2 class="red-text" id="orange-text">CatPhotoApp</h2>

<p> view more <a href="http://www.freecatphotoapp.com">cat photos</a> </p>  <!--Nesting（嵌套），锚点，锚点文本，应该类似word里的超链接吧-->

<img class="smaller-image thick-green-border" src="/images/relaxing-cat.jpg">       <!--类选择器，并列，空格分开-->

<p class="red-text">在大家心目中，猫是慵懒的可爱的化身。</p>
<p class="red-text">养动物有的时候，就是介于爱与恨之间。</p>

 

<ul>                             <!--无序列表-->
    <li>milk</li>
    <li>cheese</li>
    <li>cheese</li>
</ul>

<ol>                          <!--有序列表-->   
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

 

 

<form  action="/submit-cat-photo">   <!--通过给form元素添加action属性来跟服务器交互。action属性的值指定了表单提交到服务器的地址。-->

<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>          <!--radio 单选按钮。name属性应该相同。 checked 默认选中-->
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
<label><input type="checkbox" name="personality" checked> Loving</label>     <!--checkbox  复选按钮-->
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label>

  <input type="text form" required placeholder="cat photo URL" >  <!--添加文本输入框，自动关闭。 placeholder 预定义文本。required属性要求必须输入才能提交-->

  <button type="submit">submit</button>   <!--button按钮会将input 的文本传到action指定地址-->

</form>