1. html5 t添加輸入框的必填檢測 require 字段。
2. #main 標籤 只能包含一個。標籤規定文檔的主要內容。
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<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>
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
註釋：在一個文檔中，不能出現一個以上的 <main> 元素。<main> 元素不能是以下元素的後代：<article>、<aside>、<footer>、<header> 或 <nav>。
3. radio 多個單選組合。一般將input 的radio 類型嵌套在 label 標籤中。label 中的for 屬性名與 input 中的 id 一致時， 當點擊label 中的text 即選中了單選框。同一組單選框input 標籤中具有相同的name 屬性。input 標籤中 checked 屬性表示默認選中。
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
<label for="indoor">
<input type="radio" name="indoor-outdoor" id="indoor">indoor
</label>
<label for="outdoor">
<input type="radio" name="indoor-outdoor" id="outdoor">outdoor
</label>
</form>
4. checkbox 複選框 與單選框相同，Input 標籤嵌在label 標籤中。 在一組選框中，input 的name 屬性必須相同。input 標籤中 checked 屬性表示默認選中。
5. 對於a 鏈接可以設置opacity 透明度。
6. 媒體查詢用於不同視口的調整。@media ( max-width: 100px) ===> 當媒體寬度小於或等於100px時
@media (max-width: 100px)
{
p { font-size: 20px;}
}
通過設置 vm(相對視口的百分比)， vmin（最小視口的百分比）
h2{
width:80vw;
}
p{
width:75vmin;
}
7. 彈性佈局flex
在父元素中設置 display: flex; 設置彈性佈局，使其子元素按一定規律排列
在父元素中 flex-direction: row : 默認按照行來排列。 決定主軸的方向。
在主軸線上如何分佈元素。
align-items 定義子元素如何在崔志方向（交叉軸）分佈。
排列在一行的子元素是否換行。flex-wrap: nowrap(默認不換行)
在一行或一列元素排列時，子元素的縮小比例。 flex-shrink: 0 爲0 不縮小。
flex-grow 在行或列的子元素中定義排列的數字比例。
order: 子元素的顯示順序。1、2、3 數字大小比較。數字越小越靠前。
align-self: center
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch