[前端学习] HTML CSS 学习笔记(六)

HTML + CSS 学习笔记(六)

一、HTML5 简介

1. 什么是 HTML5
   • HTML5 是新一代 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。
   • HTML5 狭义上指新一代的 HTML 标准，广义上指：整个前端。
2. HTML5 优势
   • 针对Javascript，新增了很多可操作的接口；
   • 新增了一些语义化标签、全局属性；
   • 新增了多媒体标签，可以很好的替代flash；
   • 更加侧重语义化，对 SEO 更友好；
   • 可移植性好，可以大量应用在移动设备上。
3. HTML5 兼容性
   支持Chrome、Safari、Opera、Firefox等主流浏览器。
   IE 浏览器必须是 9及以上 的版本才支持HTML5，且 IE9 只支持部分 HTML5 新特性。

二、HTML5 新增语义化标签

1. 新增布局标签

   标签名	语义
   header	整个页面或部分区域的头部
   footer	整个页面或部分区域的底部
   nav	导航
   article	文章、帖子、杂志、新闻、博客、评论等
   section	页面中或文章中的某段文字（里面文字通常包含标题）
   aside	侧边栏

   article与section的区别：

   1. article里面可以有多个section；
   2. section强调的是分段或分块，如果想将一段内容分成几段的时候，可使用section元素；
   3. article比section强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。

2. 新增状态标签

   • meter标签：定义已知范围内的标量测量，例如：电量、磁盘电量等；

     属性	描述
     high	值为数字，规定高值
     low	值为数字，规定低值
     max	值为数字，规定最大值
     min	值为数字，规定最小值
     optimum	值为数字，规定最优值
     value	值为数字，规定当前值

   • progress标签：显示某个任务完成的进度的指示器，一般用于表示进度条。

     属性	描述
     max	值为数字，规定目标值
     value	值为数字，规定当前值

3. 新增列表标签

   标签名	语义
   datalist	用于搜索框的关键字提示
   details	用于展示问题和答案，或对专有名词进行解释
   summary	写在details里面，用于指定问题或专有名词

   <input type="text" list="mydata">
   <datalist id="mydata">
      <option value="第一名"></option>
      <option value="第二名"></option>
      <option value="一等座"></option>
      <option value="二等座"></option>
   </datalist>
   <details>
      <summary>什么是前端？</summary>
      <p>前端是……</p>
   </details>
   

4. 新增文本标签

   标签名	语义
   ruby	用于包裹需要注音的文字
   rt	写注音，标签需写在ruby里面，
   mark	标记

   <ruby>
      <span>魑魅魍魉</span>
      <rt>chi mei wang liang</rt>
   </ruby>
   <p>这是一段关于<mark>前端</mark>的文本</p>
   

5. 新增表单控件属性

   属性名	描述
   placeholder	提示文字，适用于文本输入类的表单控件
   required	表示该输入项是必填项，适用于除按钮以外的表单控件
   autofocus	自动获取焦点，适用于所有表单控件
   autocomplete	自动完成，可以设置为on或off，适用于文本输入类的表单控件； 密码输入框、多行文本输入框不可用
   pattern	填写正则表达式，适用与文本输入类的表单控件； 多行输入不可用，且空的输入框不会验证，往往与required配合使用

6. input 新增type属性值

   属性值	描述
   email	邮箱，提交时会验证格式，为空时不验证
   url	url，提交时会验证格式，为空时不验证
   number	数字，提交时会验证格式，为空时不验证
   search	搜索，提交时不会验证格式
   tel	电话，提交时会验证格式，为空时不验证；在移动端使用时会唤起数字键盘
   range	范围，默认值为50，提交时不会验证格式
   color	颜色，默认颜色为黑色，提交时不会验证格式
   date	日期，默认值为空，提交时不会验证格式
   month	月份，默认值为空，提交时不会验证格式
   week	周，默认值为空，提交时不会验证格式
   time	时间，默认值为空，提交时不会验证格式
   datetime-local	日期＋时间，默认值为空，提交时不会验证格式

7. form 标签新增属性
   novalidate：设置了该属性，则提交表单时不会验证格式。

8. 新增多媒体标签

   • video：视频标签

     属性值	描述
     width	宽度
     height	高度
     src	视频url地址
     controls	向用户显示视频控件
     muted	视频静音
     autoplay	视频自动播放
     loop	视频循环播放，一般需要设置视频静音才会自动播放，如果不静音也能播放，可能是该网址媒体参与度高
     poster	视频封面
     preload	视频预加载，值有auto、metadata、none，如果使用了autoplay，则此属性被忽略

   • audio：音频

     属性值	描述
     src	音频url地址
     controls	向用户显示音频控件
     muted	音频静音
     autoplay	音频自动播放
     loop	音频循环播放
     preload	音频预加载，值有auto、metadata、none，如果使用了autoplay，则此属性被忽略

9. 新增全局属性（了解）

   属性值	描述
   contenteditable	表示元素是否可编辑，值有true、false
   draggable	表示元素可以被拖动，值有true、false
   hidden	隐藏元素
   spellcheck	规定是否对元素进行拼写和语法检查，值有true、false
   contextmenu	规定元素的上下文菜单，在用户鼠标右键点击元素时显示
   data-*	用于存储页面的私有定制数据，*为自定义的值

10. 兼容性处理

• 添加元信息，让浏览器处于最优渲染模式

  <!-- 设置IE总是使用最新的文档模式进行渲染 -->
  <meta http-equiv="X-UA-Compatiable" content="IE-Edge">
  <!-- 优先使用 webkit 内核进行渲染，针对360等壳浏览器 -->
  <meta name="renderer" content="webkit">
  

• 使用html5shiv让低版本浏览器认识 H5 的语义化标签

  <!--[if lt ie 9]>
  <script src="../html5shiv.js"></script>
  <![endif]-->
  

  扩展：

  lt——小于
  lte——小于等于
  gt——大于
  gte——大于等于
  !——逻辑非

三、CSS3 简介

1. CSS3 概述
   • CSS3 是CSS2 的升级版本，新增了很多强大的新功能；
   • CSS3 的未来会按照模块化的方式去发展。
2. CSS3 的私有前缀
   1）什么是私有前缀？
   下面代码中的-webkit-就是私有前缀

   div {
      width: 200px;
      height: 200px;
      -webkit-border-radius: 20px;
   }
   

   2）为什么要有私有前缀？
   W3C 标准提出的某个 CSS 特性在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
   例如：

   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   border-radius: 20px;
   

   查询 CSS3 兼容性网：https://caniuse.com/
   3）常见浏览器私有前缀
   • Chrome浏览器：-webkit-
   • Safari浏览器：-webkit-
   • Firefox浏览器：-moz-
   • Edge浏览器：-webkit-
   • 旧Opera浏览器：-o-
   • 旧IE浏览器：-ms-

四、CSS3 新增

1. 新增长度单位
   • vw：使用方式nvw（n是数字），表示是视口宽度的 n%；
   • vh：使用方式nvh（n是数字），表示是视口高度的 n%；
   • vmax：使用方式nvmax（n是数字），表示是视口高度和宽度中两者中最大值的 n%；
   • vmin：使用方式nvmin（n是数字），表示是视口高度和宽度中两者中最小值的 n%；
2. 新增盒子模型相关属性

   • box-sizing：可以设置盒模型的两种类型

     可选值	含义
     content-box	默认值，width和height设置的是盒子内容区的大小
     border-box	默认值，width和height设置的是盒子总大小（怪异盒模型），包括内边距和边框的宽高

   • resize：可以控制是否运允许用户调整元素大小，须和overflow一起使用

     可选值	含义
     none	默认值，不允许调整
     both	水平方向宽度和垂直方向高度都可调
     horizontal	可调水平方向宽度
     vertical	可调垂直方向高度

   • box-shadow：为盒子添加阴影，语法box-shadow: h-shadow v-shadow blur spread color inset，默认值box-shadow: none表示没有阴影；

     可选值	含义
     h-shadow	水平阴影的位置，必填，可以为负值
     v-shadow	垂直阴影的位置，必填，可以为负值
     blur	可选，模糊距离
     spread	可选，阴影的外延值
     color	可选，阴影的颜色
     inset	可选，将外部阴影改为内部阴影

     例如：

     /* 常用写法，写四个值，含义，水平位置、垂直位置、模糊值、颜色 */
     div {
       box-shadow: 10px 10px 10px red;
     }
     

   • opcity：不透明度，为元素添加透明效果，值为 0 ~ 1，0是完全透明，1是完全不透明。

3. 新增背景属性
   • background-origin：设置背景图的原点（即背景图的左上角顶点从哪开始）
     • padding-box：默认值，从padding区域开始显示背景图片；
     • border-box：从border区域开始显示背景图片；
     • content-box：从content区域开始显示背景图片。
   • background-clip：设置背景图的裁剪区域
     • border-box：默认值，从border区域开始裁剪背景图片；
     • padding-box：从padding区域开始裁剪背景图片；
     • content-box：从content区域开始裁剪背景图片；
     • text：背景图片只显示在文字上，文字需要是透明的。
   • background-size：设置背景图尺寸
     • 用长度指定：background-size: 100px 200px，不能为负值；
     • 用百分比指定：background-size: 50% 100%，不能为负值；
     • auto：默认值，背景图的真实大小；
     • contain：将图片等比例缩放，使背景图的宽/高，与容器的宽/高相等，再将完整背景图片包含在容器内，可能会造成部分区域没有背景图；
     • cover：将图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但背景图可能显示不完整。
   • background：复合属性
     语法：background: color url repeat position / size origin clip
   • 多背景图：利用background属性设置多个url
     例如：

     div {
      background: url(../bg1.png) no-repeat,
                  url(../bg2.png) no-repeat right top,
                  url(../bg3.png) no-repeat left bottom,
                  url(../bg4.png) no-repeat right bottom;
     }
     

4. 新增边框相关属性
   • border-radius：边框圆角
     同时设置四个一样的圆角：border-radius: 10px;
     分开设置（几乎不用）：border-top-left、border-top-right、border-bottom-right、border-bottom-left，一个值是圆角半径，两个值分别是椭圆的x半径和y半径；
     或者border-radius: 左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y。
   • outline：边框外轮廓
     和border类似，可以分别设置outline-width、outline-color、outline-style，也可同时设置，例如：outline: 10px solid red;，正负值都可以设置，且不占位置，不影响盒子大小。
     注：outline-offset不是outline的子属性，是一个独立的属性。
5. 新增文本标签

   • text-shadow：文本阴影，语法text-shadow: h-shadow v-shadow blur color，默认值box-shadow: none表示没有阴影；

     可选值	含义
     h-shadow	水平阴影的位置，必填，可以为负值
     v-shadow	垂直阴影的位置，必填，可以为负值
     blur	可选，模糊距离
     color	可选，阴影的颜色

   • white-space：设置文本换行的方式

     可选值	含义
     normal	默认值，文本超出边界自动换行，文本中的换行被浏览器识别为一个空格
     pre	原样输出
     pre-wrap	在pre效果的基础上，超出元素边界自动换行
     pre-line	在pre效果的基础上，超出元素边界自动换行，且识别文本中的换行，空格会忽略
     nowrap	强制不换行

   • text-overflow：设置文本溢出的方式

     可选值	含义
     clip	默认值，当内联内容溢出时，将溢出部分裁切掉
     ellipsis	当内联内容溢出容器时，将溢出部分用省略号表示

     注：要使text-overflow生效，块容器必须设置overflow的值为非visible值，white-space为nowrap值。

   • text-decoration：文本修饰，CSS3 升级了text-decoration为复合属性，
     子属性：
     text-decoration-line：文本修饰线的位置，可使用的值有：

     • none：默认，无修饰；
     • underline：下划线；
     • overline：上划线；
     • line-through：删除线；
       text-decoration-style：文本修饰线的样式，可使用的值有：
     • solid：默认，实线；
     • double：双线；
     • dotted：点状线；
     • dashed：虚线；
     • wavy：波浪线。
       text-decoration-color：文本修饰线的颜色。

   • -webkit-text-stroke：文本描边，仅webkit内核浏览器支持

     • -webkit-text-stroke-width：宽度；
     • -webkit-text-stroke-color：颜色；
6. 新增渐变
   • linear-gradient：线性渐变，渐变方向和渐变区域的位置可以同时设置
     • linear-gradient(red, yellow, green)：多个颜色之间的渐变，默认从上到下渐变；
     • linear-gradient(to right, red, yellow, green)、linear-gradient(to right top, red, yellow, green)：在第一个颜色前使用关键词改变渐变的方向；
     • linear-gradient(30deg, red, yellow, green)：在第一个颜色前使用角度改变渐变的方向；
     • linear-gradient(red 50px, yellow 100px, green 150px)：调整渐变的区域。
   • radial-gradient：径向渐变，从圆心的位置向外扩散渐变，渐变方向和渐变开始的位置可以同时设置
     • radial-gradient(red, yellow, green)：多个颜色之间的渐变，默认从圆心向外扩散渐变，不一定是正圆，要看容器本身宽高比；
     • radial-gradient(at right, red, yellow, green)、radial-gradient(at right top, red, yellow, green)：在第一个颜色前使用关键词改变圆心的位置；
     • radial-gradient(at 100px 50px, red, yellow, green)：在第一个颜色前使用坐标改变圆心的位置；
     • radial-gradient(circle, red, yellow, green)：通过**关键字circle**将渐变区域调整为正圆；
     • radial-gradient(50px 50px, red, yellow, green)：通过像素值调整渐变区域的x半径和y半径；
     • linear-gradient(red 50px, yellow 100px, green 150px)：调整渐变的区域。
   • repeating-linear-gradient/reapeating-radial-gradient：重复渐变，在线性渐变或径向渐变前面加上repeating，在没有发生渐变的区域重复渐变。

五、web 字体和字体图标

web字体：可以通过@font-face指定字体的具体地址，浏览器会自动下载该地址。
语法：

/* （简写方式） */
h1 {
   @font-face {
      font-family: "字体名";
      src: url('../font.ttf');
   }
}

字体图标：相比于图片更加清晰；灵活性高，更加方便改变大小、颜色、风格等；兼容性好，IE也能支持。字体图标不同平台使用方式不同，参考图标官网使用指南。

六、2D 变换

在样式中给元素添加transform属性，通过给不同的值实现不同的变换。

1. 2D 位移：translate
   1）2D 位移可以改变元素的位置

   可选值	含义
   translateX	水平方向位移，可填长度值或百分比；若是百分比，是参考自身宽度的百分比
   translateY	垂直方向位移，可填长度值或百分比；若是百分比，是参考自身高度的百分比
   translate	填一个值表示水平方向；填两个值第一个是水平方向，第二个是垂直方向

   2）注意点

   1. 位移与相对定位很相似，都不脱离文档流，不会影响到其他元素；
   2. 与相对定位的区别：相对定位的百分比值参考的是其父元素；位移的百分比值参考的是自身；
   3. 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高；
   4. transform可以链式编写，例如：transform: translateX(30px) translateY(50px)
   5. 位移对行内元素无效；
   6. 位移配合定位，可实现元素垂直居中

2. 2D 缩放：scale
   1）2D 缩放可以让元素放大或缩小

   可选值	含义
   scaleX	水平方向缩放比例，值为数字；1表示不缩放，大于1放大，小于1缩小
   scaleY	垂直方向缩放比例，值为数字；1表示不缩放，大于1放大，小于1缩小
   scale	填一个值表示水平垂直两个方向同时缩放；填两个值第一个是水平方向，第二个是垂直方向

   2）注意点

   1. scale的值可以填负值，但几乎不用；
   2. 借助缩放可实现显示小于12px的文字。

3. 2D 旋转：rotate
   1）2D 旋转可以让元素在二维平面内，顺时针或逆时针旋转

   可选值	含义
   rotateZ	值为角度值，绕元素中心点旋转，正值为顺时针旋转，负值为逆时针旋转，例如：rotateZ(30deg)
   rotate	填一个值相当于rotateZ

4. 2D 扭曲（了解）：skew
   定义了一个元素在二维平面上的倾斜转换

   可选值	含义
   skewX	水平方向倾斜，会将元素的左上角和右下角沿水平方向左右拉伸
   skewY	垂直方向倾斜，会将元素的左上角和右下角沿垂直方向上下拉伸
   skew	填一个值相当于skewX；填两个值分别是skewX、skewY

5. 2D 多重变换
   可以给transform多个值来实现多重变换，中间用空格隔开。
   例如：transform: translate(100px, 100px) rotate(45deg)。
   注意：多重变换时，旋转rotate建议放在最后，因为旋转后会改变坐标系的位置。

6. 变换原点：transform-origin

   • 元素变换时，默认原点时元素的中心点，使用transform-origin可以改变变换原点；
   • 修改原点对位移没有影响，对旋转和缩放会产生影响；
   • 如果给一个值，第一个是横坐标，第二个是纵坐标；
   • 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键字，则另一个方向的坐标取50%。

七、3D 变换

1. 3D 空间和景深
   元素要进行3D 变换，其父元素必须要开启 3D 空间。
   在父元素上使用transform-style开启 3D 空间，可选择的值有：
   • flat：默认值：让子元素位于此元素的二维平面内（2D 空间）；
   • preserve-3d：让子元素位于此元素的三维平面内（3D 空间）。
     景深是指：观察者与z=0平面的距离，能让 3D 变换的元素，产生透视效果，看起来更立体。
     在父元素上使用perspective设置景深，可选值有：
   • none：默认值，不指定；
   • 长度值：指定距离，不允许为负值。
2. 3D 透视点位置
   透视点位置即观察者位置；默认的透视点位置在发生3D变换的元素的中心。
   在父元素上使用perspective-origin设置透视点位置，例如perspective-origin: 300px 400px表示视角相对坐标轴向右偏移300px，向左偏移400px。
3. 3D 位移
   在2D位移的基础上，可以让元素沿z轴位移。

   可选值	含义
   translateZ	设置 z轴 位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。
   translate3d	必须写三个参数，分别代表 x轴、y轴、z轴

4. 3D 旋转
   在2D旋转的基础上，可以让元素沿x轴和y轴旋转。

   可选值	含义
   rotateX	值为角度值，面对x轴正方向，正值为顺时针旋转，负值为逆时针旋转
   rotateY	值为角度值，面对y轴正方向，正值为顺时针旋转，负值为逆时针旋转
   rotate3d	3D旋转需填四个值，前三个的值为0~1间的值，0 表示不旋转，1 表示旋转，第四个值为角度值，表示旋转的角度值

5. 3D 缩放
   在2D缩放的基础上，可以让元素沿z轴缩放。

   可选值	含义
   scaleZ	设置 z轴 方向缩放比例，值为数字；1表示不缩放，大于1放大，小于1缩小
   scale3d	必须写三个参数，分别代表 x轴、y轴、z轴

6. 多重变换
   可以给transform多个值来实现多重变换，中间用空格隔开。
   例如：transform: translateZ(100px) rotateY(45deg)。
   注意：多重变换时，旋转rotate建议放在最后，因为旋转后会改变坐标系的位置。
7. 背部可见性
   可通过属性backface-visibility来设置背部可见，将值设为hidden则背部不可见。

八、过渡

过渡可以让元素从一种样式平滑过渡为另一种样式。

1. 基本使用
   属性：

   • transition-property：设置哪些属性需要过渡。
     常用值：

     可选值	含义
     none	不过渡任何属性
     all	过渡所有能过渡的属性
     具体属性名	多个属性之间以逗号分隔

     不是所有属性都能过渡，值为数字或者值能转为数字的属性，都支持过渡，否则不支持过渡。

   • transition-duration：设置过渡时间，值为多少秒(s)或者毫秒(ms)；默认值为0，没有过渡时间；当所有属性过渡时间一样时，可以只写一个值；当不同属性过渡时间不一样时，则按transition-property顺序依次写多个时间。

2. 高级使用
   • transition-delay：过渡延迟，指定开始过渡的延迟时间，在延迟一段时间后才发生过渡。
   • transition-timing-function：设置过渡的类型
     常用值：

     可选值	含义
     ease	默认值，平滑过渡
     linear	线性过渡
     ease-in	缓入，慢-快
     ease-out	缓出，快-慢
     ease-in-out	慢-快-慢
     step-start	一下子就到过渡最终点，等同于steps(1, start)
     step-end	等待过渡时间，在过渡时间结束时一下子到过渡终点，等同于steps(1, end)
     steps(interger, ?)	第一个值为过渡步数，第二个值为start或end(可选)
     cubic-bezier(num, num, num, num)	贝塞尔曲线，参考网址https://cubic-bezier.com

3. 复合属性
   transition，如果只写了一个时间表示duration，如果写了两个时间则第一个是duration，第二个表示delay，其他属性没有顺序要求。例如：transition: 1s 0.5s linear all;。

九、动画

1. 帧和关键帧
   • 什么是帧 —— 一段动画在1s内由n个画面组成，每个画面就是一帧。
   • 什么是关键帧 —— 在组成动画的若干帧中，起到决定性作用的几帧。
2. 基本使用
   • 第一步：定义动画（关键帧）
     • 简单方式：

       @keyframes 动画名 {
          from {
             /* 可为空 */
             属性: 值;
          }
          to {
             属性: 值;
             属性: 值;
          }
       }
       

     • 完整方式定义
       定义一组关键帧

       @keyframes 动画名 {
          /* 根据需求写需要关键帧的地方 */
          0% {
             /* 可为空 */
             属性: 值;
          }
          50% {
             属性: 值;
             属性: 值;
          }
          100% {
             属性: 值;
             属性: 值;
          }
       }
       

   • 第二步：给元素应用动画

     属性名	含义
     animation-name	需要应用的动画名
     animation-duration	设置动画持续时间
     animation-delay	设置动画延迟

     .box {
        /* 指定动画名 (必填)*/
        animation-name: 动画名;
        /* 设置动画时间（必填） */
        animation-duration: 5s;
        /* 设置动画延迟时间（可选值）（有时由于浏览器渲染原因会导致动画一开始的画面看不到，设置合理的延迟可以避免） */
        animation-delay: 0.5s;
     }
     

3. 其他属性

   • animation-timing-function：属性值与过渡一样，参考过渡。

   • animation-iteration-count: 指定动画的播放次数。

     常用值	含义
     number	数字，指定次数
     infinite	无限循环

   • animation-direction：指定动画方向。

     常用值	含义
     normal	默认值，正常方向
     reverse	反方向
     alternate	先正方向再反方向，持续交替
     alternate-reverse	先反方向再正方向，持续交替

     若animation-iteration-count只有一次，则alternate、alternate-reverse无效。

   • animation-fill-mode: 设置动画执行之前和执行之后的状态。

     常用值	含义
     none	默认，不设置任何样式
     forwards	设置为动画最后一个关键帧的样子
     backwards	设置为动画开始时第一个关键帧的样子

   • animation-play-state: 指定动画的播放状态。

     常用值	含义
     running	默认，运动
     paused	暂停

4. 复合属性
   animation，如果只写了一个时间表示duration，如果写了两个时间则第一个是duration，第二个表示delay，其他属性没有顺序要求。且animation-play-state一般单独使用。