HTML5 CSS3 基础知识梳理

第一章、初识HTML5 

1、了解HTMLL5优势：跨平台、兼容性、各大浏览器厂商的支持

2、HTML5新增元素以及属性

2.1、H5新增的结构元素：header、nav、section、article、aside、footer

2.2、H5新增网页元素：video（视频）、audio（音频）、canvas（画布）、datalist、time、mark（高亮）、process（进度条）

2.3、H5新增全局属性：contentEditable（是否允许用户编辑内容）、designMode（整个页面是否可编辑）、hidde（是否对元素进行隐藏）、spellcheck（是否对元素进行拼写或语法检查）

3、CSS3高级选择器：

p:first-of-type   // 选择所有属于其父元素的第一个p类型的元素

p:last-of-type  // 选择所有属于其父元素的最后一个p类型的元素

p:first-child   // 选择所有属于其父元素的第一个子元素的p元素

p:last-child   // 选择所有属于其父元素的最后一个子元素的p元素

p:nth-child(n)  // 选择所有属于其父元素的第n个子元素的p元素

p:nth-child(odd)  // 选择所有属于其父元素的第奇数个子元素的p元素

p:nth-child(even)  // 选择所有属于其父元素的第偶数个子元素的p元素

p:before   // 在每个p元素的内容之前插入内容

p:after   // 在每个p元素的内容之后插入内容

第二章、HTML5表单

1、H5新增的input 类型

1.1、H5之前版本支持的input类型

<!-- 文本域 -->
  <input type="text">
  <!-- 单选按钮：要有相同的name值 -->
  <input type="radio">
  <!-- 复选框：要有相同的name值  -->
  <input type="checkbox">
  <!-- 下拉列表 -->
  <select name="address">
    <option value="广州">广州</option>
    <option value="上海">上海</option>
    <option value="北京">北京</option>
  </select>
  <!-- 密码框 -->
  <input type="password">
  <!-- 提交按钮 -->
  <input type="submit">
  <!-- 普通按钮 -->
  <input type="button">
  <!-- 图像按钮 -->
  <input type="image" src="../第二章、HTML5表单/img.jpg">
  <!-- 文件域：用于文件上传 -->
  <input type="file">
  <!-- 重置按钮 -->
  <input type="reset">
  <!-- 隐藏域 -->
  <input type="hidden">

1.2、H5新增的input类型

email：电子邮电地址文本框，提交时表单回自动验证Email值

<input type="email">

url：网页的URL，提交表单时会自动验证URL值

<input type="url">

number：只能录入数字

<!-- value: 规定的默认值  max：最大值  min：最小值   step：每次递增或递减的数值，可以是整数也可以是小数  -->
  <input type="number" value="5" max="10" min="1" step="1">

range：特定范围内的数字选择器，以滑块形式呈现

<!-- value: 规定的默认值  max：最大值  min：最小值   step：每次递增或递减的数值，可以是整数也可以是小数  -->
  <input type="range" value="5" max="10" min="1" step="1">

search：用于搜索引擎的搜索框

<input type="search">

Datepicker：拥有多个可供选取日期的新输入类型，又称日期选择器

 <fieldset>
    <legend>Date picker类型</legend>
    <p>
      Date:
      <input type="date">
    </p>
    <p>
      Moth:
      <input type="month">
    </p>
    <p>
      Week:
      <input type="week">
    </p>
    <p>
      Time:
      <input type="time">
    </p>
    <p>
      DateTime:
      <input type="datetime">
    </p>
    <p>
      DatetimeLoacl:
      <input type="datetime-local">
    </p>
  </fieldset>

2、H5新增的input 属性

autofocus：自动获取焦点

<input type="text" autofocus>

required：必填，即输入不能为空

<input type="text" required>

placeholder：提示，输入数据后消失

<input type="text" placeholder="你好帅啊">

pattern：正则表达式

<input type="tel" placeholder="请输入11位数字" pattern="[0-9]{11}">

第三章、CSS3应用

1、CSS3边框效果

border-radius：设置边框圆角，有1-4个值

<img src="../img/7.png" alt="">

// 一个值
img {
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

// 2个值
img {
      width: 200px;
      height: 200px;
      border-radius: 10px 50px;
    }

border-image：设置图片边框

box-shadow：设置盒子阴影，一共6个参数:h-shadow水平阴影位置、v-shadow垂直阴影位置、blur模糊距离（可选）、spread阴影的尺寸（可选）、color阴影的颜色（可选）、inset内部阴影（默认外部阴影 outset）

box-shadow：h-shadow v-shadow blur spread color inset

img {
      width: 200px;
      height: 200px;
      border-radius: 20px;
      box-shadow: 10px 5px 6px 3px #ccc;
    }

2、CSS3文本效果

text-shadow：设置文本阴影，使用方法与盒子阴影相同，一共6个参数：h-shadow水平阴影位置、v-shadow垂直阴影位置、blur模糊距离（可选）、spread阴影的尺寸（可选）、color阴影的颜色（可选）、inset内部阴影（默认外部阴影 outset）

text-shadow：h-shadow v-shadow blur spread color inset

<div>text-shadow 浮雕效果</div>

body {
      background-color: #000;
      text-align: center;
    }
    div {
      padding: 30px;
      font-size: 60px;
      font-weight: 700;
      color: #ddd;
      background-color: #ccc;
      text-shadow: -1px -1px #fff,2px 2px #222;
    }

浮雕效果：

word-wrap：设置自动换行，防止单词太长产生溢出现象

<p>this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word this is a long word </p>

p {
      border: 1px solid #000;
      width: 300px;   
      word-wrap: break-word;
    }

3、CSS3背景与渐变效果应用

background-size：设置背景图片大小

div {
      width: 200px;
      height: 130px;
      border: 1px solid pink;
      background: url("../img//7.png") no-repeat;
      /* background-size: auto; */
      /* background-size: cover;  填满元素 */
      background-size: 120px 100px;
    }

渐变：background: linear-gradient();

div {
      width: 200px;
      height: 130px;
      background: linear-gradient(to top,pink,skyblue);
    }

第四章、CSS3高级应用

1、CSS3  2D变形应用

1.1、平移： x 为正值，向x轴右边移动；负值则向x轴左边移动

transform: translate(x,y);

transform: translateX();

transform: translateY();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      list-style: none;
      float: left;
      width: 80px;
      line-height: 40px;
      background-color: rgba(242, 135, 5, 0.61);
      border-radius: 6px;
      font-size: 16px;
      margin-left: 5px;
    }
    li a {
      text-decoration: none;
      color: #fff;
      display: block;
      text-align: center;
      height: 40px;
    }
    li a:hover {
      background-color: rgba(242, 88, 6, 0.87);
      border-radius: 10px;
      /* 鼠标移入时向左下角移动 */
      transform: translate(4px,8px);
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
  </ul>
</body>
</html>

1.2、缩放： 0-1  表示缩小       >1    表示放大

transform: scale(1.5);  // 表示同时放大1.5倍

transform: scale(x,y);

transform: scaleX(0.5);

transform: scaleY(1.2);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      list-style: none;
      float: left;
      width: 80px;
      line-height: 40px;
      background-color: rgba(242, 135, 5, 0.61);
      border-radius: 6px;
      font-size: 16px;
      margin-left: 5px;
    }
    li a {
      text-decoration: none;
      color: #fff;
      display: block;
      text-align: center;
      height: 40px;
    }
    li a:hover {
      background-color: rgba(242, 88, 6, 0.87);
      border-radius: 10px;
      /* 鼠标移入时放大1.5倍 */
      transform: scale(1.5);
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="#">服装城</a></li>
    <li><a href="#">美妆馆</a></li>
    <li><a href="#">超市</a></li>
    <li><a href="#">全球购</a></li>
    <li><a href="#">闪购</a></li>
    <li><a href="#">团购</a></li>
    <li><a href="#">拍卖</a></li>
  </ul>
</body>
</html>

1.3、旋转：rotate()函数只接收一个值a  代表角度

transform: rotate(90deg);

1.4、倾斜： x > 0  向右倾斜     y > 0   向上倾斜

transform: skewX(40deg);

transform: skewY(-20deg);

transform: skew(40deg,-20deg);

2、CSS3  3D变形应用

1、3D位移：transform: translate3d(x,y,z);

transform: translateX(100px);

transform: translateY(100px);

transform: translateZ(300px);

transform: translate3d(100px,100px,300px);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 创建3D场景 */
      transform-style: preserve-3d;
      perspective: 1000px;
    }
    img {
      width: 200px;
    }
    img:nth-child(1) {
      opacity: 0.5;
    }
    div img:nth-child(2) {
      transform: translate3d(100px,100px,300px);
    }
  </style>
</head>
<body>
  <div>
    <img src="../img/微信小程序.jpg" alt="">
  <img src="../img/微信小程序.jpg" alt=""></div>
</body>
</html>

2、3D旋转：transform: rotate3d(x,y,z,a);

transform: rotate3d(1,0,1,45deg);

3、3D缩放：transform: scale3d(x,y,z);

transform: scale3d(1.2,0.5,3);

第五章、使用CSS3制作动画

1、CSS3过渡实现动画效果

transition: 过渡名称 | 过渡所需时间 | 过渡动画函数 | 过渡延迟时间;

transition: transition-property | transition-duration| transition-timing-function | transition-delay;

transition-property：规定过渡的CSS属性名称

transition-duration：定义过渡效果花费的时间

transition-timing-function：规定过渡效果的时间曲线

transition-delay：规定过渡效果何时开始

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* transition: 过渡名称 | 过渡所需时间 | 过渡动画函数 | 过渡延迟时间; */
      background-color: pink;
      width: 200px;
      height: 200px;
      transition: background-color 2s ease-in-out;
    }
    div:hover {
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

2、CSS3动画的使用

animation: 动画名字 | 动画播放时间 | 动画播放方式 | 开始播放动画的时间 | 动画播放的次数 | 动画的播放方向 | 动画的播放状态 | 动画时间外操作;

animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state | animation-fill-mode;

animation-name：规定@keyframs  动画的名称

animation-duration：规定动画完成一个周期所花费的时间

animation-timing-function：规定动画的速度曲线  默认是 ease

animation-delay：规定动画何时开始

animation-iteration-count：动画的播放次数

animation-direction：动画的播放方向

animation-play-state：动画的播放状态

animation-fill-mode：动画时间外操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      /* 调用动画 */
      animation: move 2s linear infinite;
    }
    /* 定义动画 */
    @keyframes move {
      0% {
        width: 0;
        transform: translate(100px,0);
      }
      25% {
        width: 20px;
        transform: translate(200px,0);
      }
      50% {
        width: 50px;
        transform: translate(300px,0);
      }
      75% {
        width: 70px;
        transform: translate(200px,0);
      }
      100% {
        width: 100px;
        transform: translate(100px,0);
      }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

第六章、HTML5媒体元素

1、音频元素：audio

音频元素属性

src	规定音频文件的URL
controls	向用户显示音频控件（比如播放、暂停按钮）
loop	当音频结束时重新开始播放
autoplay	音频在就绪后马上播放
muted	音频输出为静音
preload	当网页加载时，音频是否被默认加载以及如何被加载

2、视频元素：video

视频元素属性

src	要播放视频的URL
controls	向用户显示控件，比如播放按钮
autoplay	视频在就绪后马上播放
loop	当媒体文件完成播放后再次播放
preload	视频页面加载时就开始加载，并预备播放，如果使用autoplay，则忽略改属性
poster	规定视频正在加载时显示的图像，直到用户单击播放按钮
width、height	设置视频播放器的宽高

3、自定义视频播放器

3.1播放器需要的属性：

视频播放器需要的属性

controls	显示或隐藏用户控制界面
autoplay	媒体是否自动播放
loop	媒体是否循环播放
pause	媒体是否暂停（只读属性）
ended	媒体是否播放完毕（只读属性）
currentTime	当前的播放进度
duration	媒体播放总时间
volume	0.0到1.0的音量相对值
muted	是否静音

3.2播放器需要的方法：

视频播放器用到的方法

play()	媒体播放
Pause()	媒体暂停
Timeupdate()	时间更新
Canplay()	可以播放

第七章、Canvas 基础

1、Canvas概述以及应用：

1.1  canvas可应用于游戏、做炫酷效果以及各种图形，比如电视剧《点燃我，温暖你》里面的李峋 爱心❤ 就是使用canvas开发的

1.2  创建canvas步骤：①：创建canvas元素  ②：使用id获取canvas元素  ③：创建canvas对象（创建上下文绘图环境）

2、使用Canvas绘制基本图形：

2.1  绘制直线

cxt.moveTo(x,y)   定义线条的开始坐标

cxt.lineTo(x,y)  定义线条的结束坐标

cxt.stroke()   绘制已定义的路径

cxt.strokeStyle = "pink"  设置线条的颜色值

cxt.lineWidth = "5"  设置线条的粗细

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="mycanvas"></canvas>
</body>
<script>
  var canvas = document.querySelector('#mycanvas')
  var cxt = canvas.getContext("2d")
  cxt.moveTo(0,0)
  cxt.lineTo(400,200)
  // 设置直线的颜色
  cxt.strokeStyle = "pink"
  // 设置直线的粗细
  cxt.lineWidth = 5
  cxt.stroke()
</script>
</html>

2.2  绘制三角形

fillStyle()   设置填充颜色

fill()   设置填充

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      width: 400px;
      height: 400px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="mycanvas"></canvas>
</body>
<script>
  var canvas = document.querySelector('#mycanvas')
  var cxt = canvas.getContext("2d")
  cxt.moveTo(200,20)
  cxt.lineTo(20,100)
  cxt.lineTo(300,120)
  cxt.lineTo(200,20)
  cxt.stroke()
</script>
</html>

2.3  绘制矩形

strokeRect(x,y,width,height)   描边矩形  空心

fillRect(x,y,width,height)   填充矩形  实心

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="mycanvas"></canvas>
</body>
<script>
  var canvas = document.querySelector('#mycanvas')
  var cxt = canvas.getContext("2d")
  cxt.beginPath()
  cxt.rect(40,30,200,100) // 绘制矩形
  cxt.lineWidth = 3 
  cxt.fillStyle = 'pink'
  cxt.fill()
  cxt.strokeStyle = "skyblue"
  cxt.stroke()
</script>
</html>

2.4  绘制圆形

x 坐标  y 坐标  圆的半径    起始角   结束角    true(逆时针)    false(顺时针)

arc(x,y,r,start,stop,true/false)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas {
      width: 400px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="mycanvas"></canvas>
</body>
<script>
  var canvas = document.querySelector('#mycanvas')
  var cxt = canvas.getContext("2d")
  cxt.beginPath()
  cxt.arc(100,60,50,0,2*Math.PI,false) // 绘制矩形
  cxt.lineWidth = 3
  cxt.fillStyle = 'pink'
  cxt.fill()
  cxt.strokeStyle = "skyblue"
  cxt.stroke()
</script>
</html>

2.5  清空画布

ctx.clearRect(x,y,width,height)   清除矩形区域

3、使用Canvas绘制贝塞尔曲线：

3.1  二次方贝塞尔曲线：quadraticCurveTo()

3.2  三次方贝塞尔曲线：bezieCurveTo()