freecodecamp 前端html css3部分

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