这一章节我们来学习align-items属性，本属性定义了项目在交叉轴上的对齐方式。属性值分别为：

align-items: flex-start | flex-end | center | baseline | stretch;

结合右侧编辑器中的布局以及下面的样式设置进行理解：

flex-start：默认值，左对齐

   .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-start;
    }

实现效果：

flex-end：交叉轴的终点对齐

 .box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: flex-end;
    }

实现效果：

center： 交叉轴的中点对齐

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: center;
    }

实现效果：

baseline：项目的第一行文字的基线对齐。

.box {
        height: 700px;
        background: blue;
        display: flex;
        align-items: baseline;
    }

三个盒子中设置不同的字体大小，可以参考右侧编辑器中的代码进行测试。

实现效果：

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

.box {
       height: 300px;
       background: blue;
       display: flex;
       align-items: stretch;
   }

   .box div {
       /*不设置高度，元素在垂直方向上铺满父容器*/
       width: 200px;
   }

flex之 justify-content属性

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start：交叉轴的起点对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-start;
    }

flex-end：右对齐

 .box {
        background: blue;
        display: flex;
        justify-content: flex-end;
    }

center： 居中

 .box {
        background: blue;
        display: flex;
        justify-content: center;
    }

space-between：两端对齐，项目之间的间隔都相等。

.box {
        background: blue;
        display: flex;
        justify-content: space-between;
    }

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

.box {
        background: blue;
        display: flex;
        justify-content: space-around;
    }

效果可以运行试试

<textarea  rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。

2、cols ：多行输入域的列数。

3、rows ：多行输入域的行数。

4、在<textarea></textarea>标签之间可以输入默认值。

<form  method="post" action="save.php">        <label>联系我们</label>        <textarea cols="50" rows="10" >在这里输入内容...</textarea></form>

1、Input的type属性设置为email,则表示该输入框的类型为邮箱。

2、数字框的值必须包含@。

3、数字框的值@之后必须有内容,否则会报错误提示

1、input的type属性设置为url,则表示该输入框的类型为网址。

2、数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示。

1、input的type属性设置为number,则表示该输入框的类型为数字。

2、数字框只能输入数字，输入其他字符无效。

3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

和之前的那个placeholder一样的，只是这个是数字输入的只能是数字

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

<form>
  <input type="text/password" name="名称" value="文本" />
</form>

tip:

当type="text"时，输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

name：为文本框命名，以备后台程序ASP 、PHP使用

value：为文本输入框设置默认值。(一般起到提示作用)

标签选择器，标签名{}，作用于所有此标签。

类选择器， .class{}，在标签内定义class=""，属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。

<div>不能再<p>标签里

html的元素分为三种,块状元素`内联元素`内联块状元素.块状元素好比土豪,强行霸占一条路,也就是直接独占网页的一行.内联元素那就是普通平民了,和领居共用一条路,也就是一起使用网页的一行.至于内联块状元素可以理解为土豪的管家,具体可以搜索下.

有了上面的基础,现在可以回答你的问题了.div是块状元素,是土豪,很霸道,所以要另起一行.

超链接格式

<a href=""></a>

• 标签成对出现，结束标签比开始标签多一个/

  例如：

  <h1></h1>

• 标签是可以嵌套的，但是要保持对称

  例如：

  <div><h1></h1></div>

• html不区分大小写

  
  

<ul>

        <li></li>

        <li></li>

         ...

</ul>

是无序列表

<ol>

        <li></li>

        <li></li>

         ...

</ol>

是有序列表

div{
   width:200px;
   padding:20px;
   border:1px solid red;
   margin:10px;    
}

块元素在页面中以区域块的形式出现，每个块元素都会独自占据一整行或多整行，其中<div>标记为最典型的块元素。

内联元素特点是不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和他前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置高度宽度等属性，常用语控制页面中文本的样式，<span>标记是最典型的行内元素。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

块元素在页面中以区域块的形式出现，每个块元素都会独自占据一整行或多整行，其中<div>标记为最典型的块元素。

内联元素特点是不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和他前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置高度宽度等属性，常用语控制页面中文本的样式，<span>标记是最典型的行内元素。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

块元素在页面中以区域块的形式出现，每个块元素都会独自占据一整行或多整行，其中<div>标记为最典型的块元素。内联元素特点是不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常回合他前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置高度宽度等属性，常用语控制页面中文本的样式，<span>标记是最典型的行内元素。内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

块元素在页面中以区域块的形式出现，每个块元素都会独自占据一整行或多整行，其中<div>标记为最典型的块元素。内联元素特点是不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常回合他前后的其他行内元素显示在同一行中，他们不占有独立的区域，仅仅靠自己的字体大小和图像尺寸来支撑结构，一般不可以设置高度宽度等属性，常用语控制页面中文本的样式，<span>标记是最典型的行内元素。内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

 使用<a>标签为网页添加超链接

1.语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

使用<img>标签为网页添加图片：

语法：

<img scr="图片地址"alt="下载失败时替换文本"title=“提示文本”>

1.scr:标识图像的位置

2.alt:指定图像的描述性文本，当图像不可见时（下载不成功时），可以看到该属性指定的文本。

3.title:提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）。

4.图像可以是GIF,PNG,JPEG格式的图像文件。