創建文本框 18113

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><!-->谷歌瀏覽器龍蝦字體的鏈接</-->
<style><!-->定義整體網頁的風格</-->
  .red-text { <!-->紅色字體的類的建立。名稱前面記得加上句點，後面可以在引用，注意引用的位置</-->
    color: red;
  }


  h2 {<!-->針對h2的文本使用什麼字體，沒有該字體可以自動降級到下一字體。</-->
    font-family: Lobster, Monospace;
  }


  p {<!-->針對p佔位符的字符的大小爲16像素，使用的字體做一個統一</-->
    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> <!-->注意對類的引用的位置</-->


<p>Click here for <a href="#">cat photos</a>.</p><!-->建立了死鏈接，這樣可以之後再確定圖片的網址</-->


<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></a><!-->直接把圖片整了鏈接，注意圖片必須要有alt，這樣圖片加載不出的時候有東西</-->


<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>

專業英語（ProfessionalEnglish）：這段都認識

樣例（Samples）:<input type="text">

什麼時候用（When）：整文本框