首页 前端知识 HTML5 CSS3 基础知识梳理

HTML5 CSS3 基础知识梳理

2024-05-08 10:05:02 前端知识 前端哥 192 802 我要收藏

第一章、初识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媒体播放总时间
volume0.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()

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7511.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!