文章目录
HTML5
1. 什么是HTML5
1. 是html5，css3，js新版的总称
2.多了些什么呢：
- 新的选择器
- 转换transform
- 动画animation
- 浏览器私有前缀
2. 新增语义标签（部分）
1. <header></header> 头部标签
2. <nav></nav> 导航标签
3. <article></article> 内容标签
4. <section></section> 块级标签
5. <aside></aside> 侧边栏标签
6. <footer></footer> 尾部标签
7. <audio src=""></audio> ogg Mp3 Wav格式
8. <video src=""></video>
注意：
- 这种语义化是针对搜索引擎的
- 这些标签在页面中可以使用多次
- 在IE9中需要把这个标签转换为块级元素
- 移动端喜欢用这些标签
3. H5新增多媒体标签
7. <audio src=""></audio> ogg MPEg3 Wav格式
8. <video src=""></video> ogg MPEg4 WebM格式
选择不同的格式播放：
<audio src="" controls>
<source src="" type="audio/mpeg3">
<source src="" type="audio/ogg">
你的浏览器太low了 不支持audio播放
</audio>
<video src="" controls>
<source src="" type="vidio/mpeg4">
<source src="" type="vidio/ogg">
你的浏览器太low了 不支持audio播放
</video>
4. H5新增表单标签
PC端的语义化及方便，手机端的不同键盘等的触发。
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为URL类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机类型 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择类表单 |
<form action="">
<label for="">日期：</label>
<input type="date">
<label for="">password：</label>
<input type="password">
<label for="">手机号：</label>
<input type="tel">
<label for="">邮件：</label>
<input type="email">
<label for="">数字：</label>
<input type="number" min="0" max="100"> /*字母 e 可以输入，其他不行，科学计数法*/
<label for="">搜索框：</label>
<input type="search">
<label for="">颜色：</label>
<input type="color">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本（占位符） | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 光标自动聚焦，页面加载完成自动加载到指定表单 |
| autocomplate | off / on | 当用户在字段开始键入时，浏览器基于之前键入的值，应该显示出字段中填写的选项，例：autocomplate = “off”，需要放在表单内同时加上name属性，同时成功提交 |
| multiple | mutiple | 可以多选文件提交 |
实例：
<form action="">
用户名：<input type="text" required placeholder="请输入用户名" autofocus name="username" autocomplete="on">
<input type="file" name="" id="" multiple>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
CSS3
cursor: pointer; /*鼠标样式*/
disabled /*按钮禁用，在发验证码时，避免重复发送*/
1. css3 现状
- 在css2的基础上新增（扩展样式）
- 移动端支持优于 PC 端
- 不断改进中
- 应用相对广泛
2. css3 属性选择器（权重高于标签选择器）
| 选择符 | 简介 |
|---|---|
| E[att] | 具有att属性的E标签 |
| E[att = “val”] | 具有att属性的E标签 ,且值以val为属性的标签 |
| E[att ^= “val”] | 具有att属性，且值以val开头的E标签 |
| E[att $= “val”] | 具有att属性，且值以val结尾的E标签 |
| E[att *= “val”] | 具有att属性,，且值中含有val的E标签 |
类选择器，属性选择器，伪类选择器， 权重为10
例：
input[type=search] { /*选择search框*/
color: aqua;
}
div[class ^= "icon"] {
color: red;
}
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="text" value="文本框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
<input type="search" value="搜索框">
<div class="icon1">图标1</div>
<div class="icon2">图标2</div>
<div class="icon3">图标3</div>
.
.
button {
cursor: pointer;
}
button[disabled] {
cursor: default;
}
<button>按钮</button>
<button>按钮</button> /*鼠标样式小手*/
<button disabled>按钮</button> /*被禁用*/
3. css3 结构伪类选择器
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素 |
| E:last-child | 匹配父元素中的最后一个子元素 |
| E:nth-child(n) | 匹配父元素中的第 n(可以是关键词) 个子元素 |
| E:first-of-type | 指定类型 E 的第一个 |
| E:last-of-type | 指定类型 E 的最后一个 |
| E:nth-of-type(n) | 指定类型 E 的第 n(可以是关键词) 个 |
1. :nth-child(）
- n可以是数字关键字和公式
- n、如果是数字，就是选择第几个
- 常见的关键字有 even偶数 odd奇数
- 常见的公式如下（如果n是公式，则从开始计算）
- 但是第零个元素或者超出了元素个数会被忽略
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n + 1 | 奇数 |
| 5n | 5 10 15 |
| n + 5 | 从第五个开始（包含第五个）到最后 |
| -n + 5 | 前五个（包含第五个） |
例：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
ul li:first-child {
color: red;
}
ul li:last-child {
color: red;
}
ul li:nth-child(8) {
color: red;
}
ul li:nth-child(2n) {
background-color: pink;
/*
2 * 0 = 0
2 * 1 = 2
2 * 2 = 4
*/
}
ul li:nth-child(2n + 1) {
background-color: rgb(162, 162, 212);
/*
2 * 0 + 1 = 1
2 * 1 + 1 = 3
2 * 2 + 1 = 5
*/
}
ul li:nth-child(5n) {
color: blueviolet;
}
ul li:nth-child(n + 5) {
font-size: 30px;
}
ul li:nth-child(-n + 5) {
font-size: 6px;
}
2. :nth-of-type()
为啥会有这个选择器（用例子来说）
例：
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
div :nth-child(2) {
/*只管他是第几个子元素但不管是什么类型*/
background-color: powderblue;
}
div span:nth-child(1) {
/*这个选不到，n为2才能选到*/
color: red;
}
例：
<div>
<p>我是一个屁</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</div>
div span:first-of-type {
color: rosybrown;
}
div span:last-of-type {
background-color: rgb(162, 162, 212);
}
div span:nth-of-type(2) {
background-color: red;
}
注：如果子元素都是一个类型那么 :nth-child() 和 :nth-of-type() 是一样的
4. css3 伪元素选择器
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注意：
- before 和 after 必须有 content 属性
- befor 在内容的前面，after在内容的后面
- before 和 after 创建一个元素，但是属于行内元素
- 因为在 dom 里面看不见刚才创建的元素，所以我们称它为伪元素
- 伪元素和标签选择器一样，权重为 1
例：
<div>是</div>
div::before {
content: "我";
}
div::after {
content: "Gragon";
}
例：
<div>是</div>
div::before {
width: 20px;
height: 20px;
background-color: red;
display: inline-block;
content: "我";
}
div::after {
width: 20px;
height: 20px;
background-color: red;
content: "Gragon";
}
例：字体图标
5. css3 2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果。可以简单理解为变形
1. 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
2. 移动：translate
- 语法
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
transform: translate(x, y);
/*或者分开写*/
transform: translateX(n);
transform: translateY(n);
/*三者互相独立不能同时用，下面两个也不行*/
- 重点
- 定义2D转换中的移动，沿着 X 和 Y 轴移动元素
- translate最大的优点：不会影响到其他元素的位置（像是脱离了文档流）
- translate中的百分比单位是相对自身元素的translate（50%，50%）;
- 对行内元素没有效果
3. 旋转：rotate
A. 2D旋转指的是让元素在 2 维平面内顺时针旋转或者逆时针旋转。
- 语法
transform：rotate(度数);
- 重点
- rotate里面跟度数，单位是 deg 比如 rotate(deg)
- 角度为真时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
例一：
<img src="1.gif" alt="">
img {
width: 150px;
height: 150px;
margin: 50px;
border-radius: 50%;
/* 过渡写到本身上，谁做动画给谁加 */
transition: all 2s;
}
img:hover {
transform: rotate(360deg);
}
B. 转换中心点 transform-origin
我们可以设置元素转换的中心点
- 语法
transform:origin:x y;/*注意中间是空格*/
- 重点
- 注意后面的 x 和 y 用空格隔开
- x y 默认转换的中心点（50% 50%）
- 还可以给 x y 设置像素 或者 方位名词 （top bottom left right center）
例一（一定要看）：
<div></div>
div {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
margin: 100px;
transition: all 2s;
/* 1. 可以跟方位名词 */
/* 2. 默认是 50% 50% 等价于 center center */
/* 3. 可以是像素(px), 元素 */
transform-origin: left bottom;
transform-origin: 10px 10px;
/*设置一个，另一个是默认值center*/
}
div:hover {
transform: rotate(360deg);
}
例二（可以不看）：
<!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: 200px;
height: 200px;
border: 1px solid black;
margin: 10px;
overflow: hidden;
float: left;
}
div::before {
content: "帅";
display: block;
width: 100%;
height: 100%;
background-color: pink;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.5s;
}
div:hover::before {
transform: rotate(0);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
4. 缩放：scale
缩放，顾名思义，可以放大和缩小，只要给元素添上了这个属性就能控制它放大还是缩小
- 语法
里面写的是数字，就是倍数的意思 1就是1倍， 2就是2倍
transform: scale(x, y);
- 注意
- 注意其中的 x 和 y 使用逗号
- transform:scale(1, 1)：宽和高都放大一倍，相对于没有放大
- transform:scale(2, 2)：宽和高都放大了 2 倍
- transform:scale(2)：只写了一个参数，第二个参数和第一个参数一样，相当于 scale(2, 2)
- transform:scale(0.5, 0.5)：缩小
- scale缩放量最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而不影响其他盒子
实例1（盒子，不影响其他元素）：
<!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 {
background-color: pink;
width: 200px;
height: 200px;
margin: 100px auto;
}
div:hover {
transform: scale(2);
transform-origin: right top;
}
</style>
</head>
<body>
<div></div>
123
</body>
</html>
实例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>
div {
width: 200px;
height: 200px;
float: left;
margin: 10px;
overflow: hidden;
border: 1px solid black;
}
img {
width: 100%;
height: auto;
transition: all 1s;
}
img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<a href=""><img src="./1/timg (2).gif" alt=""></a>
</div>
<div>
<a href=""><img src="./1/timg (2).gif" alt=""></a>
</div>
<div>
<a href=""><img src="./1/timg (2).gif" alt=""></a>
</div>
</body>
</html>
实例3（分页按钮）
<!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>
ul {
height: 50px;
width: 700px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
li {
height: 20px;
width: 20px;
list-style-type: none;
margin-right: 50px;
border: 1px solid black;
border-radius: 50%;
text-align: center;
transition: all 1s;
cursor: pointer;
}
li:hover {
transform: scale(1.3);
}
a {
text-decoration: none;
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</body>
</html>
2D转换的综合写法
注意：
- 同时使用多个转换，其格式为：
transform: translate() rotate() scale()...等 - 其顺序会影响转换的效果。（先旋转会改变坐标轴位置）
- 当我们同时有位移和其他属性的时候，记得要将位移放到最前。
6. css3 动画
-
需求：我们想要页面一打开，一个盒子就从左边走到右边（所以需要动画）
-
动画（animation) 是css3中具有颠覆性属性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，用来实现复杂的动画效果
-
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
1. 动画的基本使用
制作动画分为两步：
- 先定义动画
- 在使用（调用动画）
2. 用keyframe定义动画（类似类选择器）
@keyframes 动画名称 {
from / 0% {
width: 100px;
}
to / 100% {
width: 200px;
}
}
3. 元素使用动画
div {
width: 200px;
height: 200px;
background-color: blueviolet;
/* animation: move ease 2s infinite; */
/*调用动画*/
animation-name: 动画名称;
animation-duration: 持续时间;
}
4. 动画序列
- %0 是动画的开始，100% 是动画的完成，这样的规则就是动画序列。
- 在 @keyframe(关键帧) 中规定某项 css 样式。就能创建由当前样式逐渐改为新样式的动画效果。
- 动画是使元素从一种样式逐渐变化到另一种样式的效果，您可以改变任意多的样式任意多的次数。
- 请用百分比来规定变化发生的时间，或者用关键词 “from” 和 “to” , 等同于 0% 和 100%。
5. 动画的常用属性
| 属性 | 描述 |
|---|---|
| @keyframe | 规定动画 |
| animation | 所有动画属性的简写属性，除了animate-paly-state属性 |
| animation-name | 规定@keyframe动画的名称（必须的） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0.（必须的） |
| animation-timimg-function | 规定动画的速度曲线 |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一周期逆向播放，默认是“normal”，altermate逆播放 |
| animation-play-state | 规定动画是否正在运行或是暂停，默认值是“running”，还有“pause” |
| animation-fill-mode | 规定动画结束后的状态，保持forwards回到起始的backwards |
6. 动画简写属性
animation：动画名称 持续时间 运动曲线 播放次数 是否反方向 动画起始或者结束的状态
注意
- 简写属性里面不包括 animation-play-state
- 暂停动画：animation-play-state：purse经常和鼠标经过等其他配合使用
- 想要动画走过来，而不是直接跳回来：animation-direction：alternate
- 盒子动画结束后，停在结束位置：animation-fill-mode：forwards
例（一定要看）:
<!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: 200px;
height: 200px;
background-color: blueviolet;
/*调用动画*/
/* 动画名称 */
/* animation-name: move; */
/*持续时间*/
/* animation-duration: 2s; */
/*运动曲线*/
/* animation-timing-function: ease; */
/*何时开始*/
/* animation-delay: 1s; */
/*动画 重复 次数*/
/* animation-iteration-count: infinite; */
/*是否反方向播放 默认是normal*/
/* animation-direction: alternate; */
/*动画结束后的状态 默认是backwards 回到起始状态 我们可以让它停留在结束状态 forwards*/
/* animation-fill-mode: forwards; */
animation: move 2s linear 0s 1 alternate forwards;
}
div:hover {
/*鼠标经过div 让这个div停止动画， 鼠标离开就继续动画*/
animation-play-state: paused;
}
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(500px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例：
7. 速度曲线细节
| 值 | 描述 |
|---|---|
| linear | 动画从开头到结尾的速度是相同的，匀速 |
| ease | 默认，动画以低速开始，然后加快，再结束的变量 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps( ) | 指定了时间函数中的间隔数量（步长） |
steps()的案例(要去看)
7. css3 3D转
在我们生活中的环境是3D的，图片就是3D物体在2D平面呈现的例子
有啥特点
- 近大远小
- 物体后面遮挡不可见
1. 三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。（遵循左手法则）
- x轴：水平向右 注意：向右是正值，向左是负值
- y轴：垂直向下 注意：向下是正值，向上是负值
- z轴：垂直屏幕 注意：向外是正值，向内是负值
当我们在网页上构建3D效果的时候参考这些特点就能产生3D效果
主要知识点
- 3D位移：translate3d(x, y, z)
- 3D旋转：rotate3d(x, y, z)
- 透视：perspective
- 3D呈现 transform-style
2. 3D位移：translate3d(x, y, z)
3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
| 名称 | 作用 |
|---|---|
| transform: translateX(100px) | 仅仅是在 X轴 上移动 |
| transform: translateY(100px) | 仅仅是在 Y轴 上移动 |
| transform: translateZ(100px) | 仅仅是在 Z轴 上移动 （注意： translateZ一般用px单位） |
| transform: translate3d(x, y, z) | 其中x， y， z分别指要移动的轴的方向的距离 |
3. 透视 perspective
在2D平面产生近大远小的视觉立体，但只是效果二维的
- 如果在网页中产生3D效果需要透视（理解成3D物体投影在2D平面内）
- 模拟人类的视觉位置，可认为安排一只眼睛去看
- 透视我们也称为视距：是距就是人的眼睛到屏幕的距离
- 距离视觉点越近的在电脑上平面成像越大，越远成像越小
- 透视的单位是像素
透视写写在被观察元素的父盒子上
- d：就是视距，就是一个距离人的眼睛到屏幕的距离
- z：就是 z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。
4. translateZ
transform: translateZ(100px)：仅仅是在 Z轴上的移动，有了透视，就能看到translateZ引起的变化了。
5. 3D旋转 rotate3d
3D旋转至可以让元素在三维平面内沿着 x轴， y轴， z轴或者自定义轴进行旋转
语法
| 名称 | 作用 |
|---|---|
| transform: rotateX(45deg) | 沿着 X轴 正方向旋转45度 |
| transform: rotateY(45deg) | 沿着 Y轴 正方向旋转45deg |
| transform: rotateZ(45deg) | 沿着 Z轴 正方向旋转45deg |
| transform: rotate3d(x, y, z, deg) | 沿着自定义轴旋转 deg为角度（了解即可）四个参数 |
注：
- x，y，z是旋转轴的矢量，所以它可以自定义一个轴进行旋转
- 旋转方向遵循（左手准则）
- 左手的拇指指向 某轴 的正方向
- 其余手指的弯曲方向就是沿某轴旋转的方向（正值）
6. 3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat 子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级，但影响的是子盒子
- 这个属性很重要
栗子：
8. 浏览器私有前缀
1. 为啥：
- 在pc端的的支持情况是不相同的，针对不同的浏览器书写不同的样式
- 浏览器私有前缀：为了兼容老版本的写法，比较新版本的浏览器无需添加
2. 有哪些：
- -moz- : 代表 firefox 浏览器的私有属性
- -ms- ：代表 IE 浏览器的私有属性
- -webkit：代表 Safari，Chrome的私有属性
- -o-：代表Opera的私有属性
3. 提倡的写法
栗子：
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
扫一扫
4956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
