Day1—H5新增标签、Form表单和CSS3

H5新增语义化标签

独占一行的

本质都是一种div，只不过是默认起好名字

这些标签的作用是代替div使程序更好的语义化，增加程序的可读性

在一行显示的

类似于span标签

音视频

音频使用 audio 标签进行引入，视频使用 video 引入，标签自带属性如下

其中loop是可以设定具体的循环次数的格式为loop='次数'

音视频标签自带scr属性，但是不使用，因为为了兼容性使用 <source src="" type=""> 来引入相关音视频，可以在一个音视频标签下多次引入不同格式的相同音频来做到不同浏览器的兼容问题

Form表单

对前文提到的表单进行扩充，增加新的表单控件

表单控件格式大部分为<input type="控件类型">，本文补充控件如下

当然还有一些特殊的控件

比如表单字段集<fieldset></fieldset>，作用是会出现一个框环绕元素，配合使用表单字段集标题<legend></legend>，需要放在fieldset里第一个，会在字段集左上角显示一个标题

比如还有下拉选框select配合option使用

  <select name="" id="">
    <option value="">今天</option>
    <option value="">明天</option>
    <option value="">后天</option>
    <option value="">大后天</option>
  </select>

还有多行文本域<textarea name="" id="" cols="20" rows="5">，其中cols属性控制每行输入的字符数，英文占一个字符，中文占两个字符，rows属性控制行数，在CSS中可以使用resize:none来取消用户自定义大小

以及数据列表datalist，数据列表必须设置id，input必须设置list="id名",这样两者才能关联起来

    <input type="text" list="week">
    <datalist id="week">
      <option value="周一" label="不愿意起来"></option>
      <option value="周二" label="逐渐进入状态"></option>
      <option value="周三" label="开始学习"></option>
      <option value="周四" label="又快放假了"></option>
      <option value="周五" label="今天混混得了"></option>
    </datalist>

数据列表的作用是类似于历史记录，在输入信息后会自动匹配相应的选项

表单控件还有一些新的属性

过渡和变换

过渡transition

在我们设置各种变换的时候往往变换过程都是瞬时的，这样对于用户来说太突兀，因此我们可以设置过渡来使变换过程更平滑

以上的属性可以统一简写为transition: 过度时间 过渡速度 过渡属性，延迟时间;，还可以进一步简写为transition: 过度时间，过渡速度;等

过渡可以设置多个作用属性，每个属性之间使用逗号隔开

变换transform

变换为元素提供了各种变换效果，这些效果统一使用transform:变换效果来实现

以上所有变换效果都可以分成水平和竖直两个方向单独设置，水平需要添加X，竖直需要添加Y

如scaleX()和scaleY()也可以直接简写为scale(x ， y)

如果想同时实现两种效果，需要使用空格隔开

需要注意位移可以设置为负值，正值是向右侧和下侧运动，而负值是向左侧和上侧运动

利用这一特性结合定位可以实现元素垂直水平居中

  .box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

动画

动画需要使用@keyframes 动画名提前写好，然后在需要使用的时候进行绑定，使用animation属性来绑定

  animation: name duration timing-function delay iteration-count direction fill-mode;
  animation: 动画名字 时长  速度linear    延迟时间   次数          方向       停止画面;

例如

  section{
    width: 200px;
    height: 200px;
    background: cyan;
    /* 绑定动画，只有简写 */
    /* animation: 动画名字 时长 速度 次数; */
    animation: text 10s linear infinite;
  }

  @keyframes text {
    0%{width: 200px;background: red;}
    20%{width: 600px;background: yellow;}
    40%{width: 100px;background: blue;}
    60%{width: 700px;background: greenyellow;}
    80%{width: 300px;background: black;}
    100%{width: 900px;background: sienna;}
  }

二级菜单

所谓二级菜单，就是电商平台这类在鼠标滑过或点击侧边栏后，会出现新的内容块

需要记住，二级永远是写在一级里的，写好内容块后设置定位然后将元素隐藏起来，在鼠标滑过目标后显示

案例如下

<div id="banner">
  <!-- 这里是一张banner大图 -->
  <img src="../images/1.webp" alt="">
  <div class="box">
    <ul>
        <li>文字</li>
        <li>文字</li>
        <li>
            文字
            <div class="erji"></div>
        </li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
        <li>文字</li>
    </ul>
  </div>
</div>

  #banner{
      height: 507px;
      background: blue;
      margin: 0 auto;
      /* 因为img绝对定位了，所以父相子绝 */
      position: relative;
      /* 切掉溢出的内容 */
      overflow: hidden;
  }
  #banner img{
      /* 绝对定位 */
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
  }
  #banner .box{
      width: 1200px;
      height: 507px;
      /* 不设定位会导致被banner图片遮住，因为图片是绝对定位，浮在上层 */
      position: relative;
      margin: 0 auto;
      border: 2px solid cyan;
  }
  ul{
      list-style: none;
      width: 200px;
      padding-bottom: 7px;
      line-height: 50px;
      background: red;
  }
  li{
      border-bottom: 1px solid #000;
      color: #fff;
      padding-left: 40px;
  }
  li:hover{
      /* 鼠标滑过列表项背景变色 */
      background: #333;
  }
  .erji{
      width: 1000px;
      height: 507px;
      background: green;
      /* 这里定位是根据box的，如果ul设置定位，那他就是根据ul */
      position: absolute;
      left: 200px;
      top: 0;
      /* 让他消失，平时不遮挡其他元素 */
      display: none;
  }
  li:hover .erji{
      /* 在鼠标滑过列表项时，让二级菜单出现 */
      display: block;
  }

---

Day2—弹性盒和响应式

怪异盒模型

在我们给元素设置宽高之后，如果我们给元素设置padding和border会导致元素的大小被撑大，如果想保持原来的大小就需要手动调整减去这部分，而设置怪异盒之后，无论怎么设置padding和border，元素都会保持原来的大小

属性为box-sizing:;，默认属性值为content-box也就是标准盒模型，需要设置为border-box怪异盒模型

弹性盒

弹性盒在前端中的应用非常广泛，尤其移动端

弹性盒的主要知识点有容器、项目、主轴和侧轴

• 容器：设置了display:flex或者display:inline-flex;的元素被称为容器
• 项目：容器内的子元素被称为项目，注意是子元素，子元素的子元素不算
• 主轴：项目排列的方向，主轴默认的方向是横向从左向右的，因此设置弹性盒后，容器内的项目会自动横向排列
• 侧轴：侧轴是垂直于主轴的，方向从上到下，会随着主轴的改变而改变

弹性盒的设置是通过属性display:flex来实现的，以下所有的属性均是在此基础上实现的

设置给容器的属性

首先便是改变主轴方向，使用属性flex-direction来实现，需要注意项目的排列方式是根据主轴的方向走的，因此主轴变换项目也会跟着变，侧轴始终垂直与主轴，因此也会改变

当一行的项目过多超过了容器宽度之后是不会折行的，而是每个项目的宽度都缩小挤在一行，我们可以通过属性flex-wrap来使项目折行

以上两个属性可以简写合并为flex-flow: 主轴方向 是否折行;

项目在主轴上的排列对齐方式可以通过justify-content:;属性设置

其中主轴起点和主轴末端是根据主轴的方向定的，默认起点在左侧，末端在右侧

说完主轴还有侧轴，侧轴分为单行和多行两种情况，单行项目侧轴对齐使用align-items: ;

多行项目和主轴的排列方式很像，使用align-content: ;，多行项目是项目过多且设置了warp后折叠产生的

需要注意在默认值的情况下设置了项目高度，则每行项目会保留均分高度减去项目高度后的空隙

设置给项目的属性

项目的顺序使用order属性来设置，默认值为auto，相当于0，越大越在后，越小越在前，可以设置为负值

flex:;属性表示是否占满剩余空间，可以分出三个属性

• 属性flex-shrink:1;表示项目是否收缩，1是默认值，代表当容器空间不够时，项目自动收缩，需要注意的是项目的收缩本质很类似分蛋糕

  比如一个宽度200的容器，里面有5个项目，每个项目宽度为50，此时项目的宽度和明显超出了容器，用250 - 200 = 50 ，也就是项目超了50px
  我们将项目1设为flex-shrink:4;，项目2设为flex-shrink:3;，项目3设为flex-shrink:2;，项目2设为flex-shrink:1;，项目1设为flex-shrink:0;，于是我们将4+3+2+1+0得到一共十份，此时50px / 10份得到每份是5px

  • 项目1分去4份，也就是他要收缩20px
  • 项目2分去3份，他要收缩15px
  • 项目3分去2份，他要收缩10px
  • 项目4分去1份，他要收缩5px
  • 项目5分去0份，他不收缩

• 属性flex-grow: 0;代表当空间足够时项目是否占据剩余空间，默认值为0也就是不占据

  和shrink一样，也是分蛋糕的形式，根据设置的属性值来分配剩余空间，但要注意默认值为0

• 属性flex-basis: 400px;指定某个项目的空间大小，可以设置具体值，也可以设置百分比，当设置百分比时代表的是父元素也就是容器的百分之多少

属性align-self:;表示单个项目的排列方式

响应式

使用媒体查询来查询窗口大小以此来显示不同的元素组成不同的布局

  @media screen and (min-width:1200px){
      header{
          background: cyan;
      }
  }
  @media screen and (max-width:1200px) and (min-width:800px){
      header{
          background: green;
      }
  }

响应式虽然对不同分辨率的设备可以更灵活，但这往往需要大量的工作，以及冗余的代码，会隐藏很多无用的元素，导致网页加载速度变慢，这是一种折中的解决方案，多方面影响而达不到理想效果，一定程度上改变了网站的原有布局，会出现用户混淆的情况

Day3—矢量图和移动端

矢量图

矢量图库—阿里巴巴矢量图库

在图库里选好自己需要的图标后下载字体文件，会出现名为iconfont的文件夹，将他放到我们的站点下，在页面中引入文件夹下的iconfont.css文件，此时我们就做好了准备

在页面中需要插入矢量图的位置写一个i标签，并将class名设置为iconfont然后打开demo_index.html文件会跳转到浏览器，在网页中选择Font class标签挑选自己需要的矢量图，然后复制他的class名，并粘贴到刚才的i标签里，这样这个i标签就有了两个class名，之后我们就可以在CSS文件中通过设置字体属性来设置矢量图的样式了

一定要注意，矢量图本质是一种字体，因此设置样式是使用文字相关的属性，比如font-size和color

移动端

移动端常用单位

• rem：和html根节点的文字大小有关，1rem=根节点的文字大小px

• vh：他不是一个固定单位，会随着设备大小的变化而变化，1vh代表着当前设备高度百分之一的大小
  vh是一个单位，可以用来表示宽度，也可以用来表示高度

• vw 他不是一个固定单位，他会随着设备大小的变化而变化，1vw代表着当前设备宽度百分之一的大小
  vw是一个单位，可以用来表示宽度，也可以用来表示高度

理想视口

视口（viewport）是用户在网页上的可见区域。

视口随设备而异，在移动电话上会比在计算机屏幕上更小。

在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。

然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。为了解决这个问题，这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。

因此我们在书写移动端之前首先就要设置理想视口

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

移动端单位换算

与我们写pc端网页不同，移动端因为不同设备的分辨率经常有差别，因此如果我们使用px单位会导致在一个手机上显示正常在别的手机上会出现各种空隙等，因此需要我们使用一种可以变化的单位，也就是rem+vw

我们常常将1rem设置为100px，但这仍为固定像素，因此我们在目标机型上将100px转换为对应的vw，以我们常用的iPhone6/7/8为例，他的的宽度为375px，那么在这个设备上1vw=3.75px，我们需要计算1rem = ？vw，所以我们用100px/3.75px=26.67vw，因此在这个设备上1rem = 100px = 26.67vw，于是我们将html根节点字体大小设置为26.67vw，同理在iPhone5上我们得到的这个数字为31.25vw，这两个是最常用的换算比例

DPR是物理像素和逻辑像素的比值，通常我们移动端在设计的时候都是以DPR2到3倍来设计页面的，因此我们在书写的时候也要除去相应的DPR然后再除100得到的就是我们在移动端的大小了