HTML标签元素单词释义及知识点总结

HTML标签元素单词释义及知识点总结

一.说明

该内容为本人自学HTML所记笔记，如有不准确的地方欢迎各位批评指正，希望对需要的人有所帮助，谢谢。

二.基本标签

• 块级元素：div；p；dl；form；h1～h6；ol；ul

• 行内元素：a；b；i；em；img；span

• (pre是块级元素但只能包含文本或行内元素)

三.css样式和选择器

选择器

1. 空格 后代选择器 .main div{ }
   后代所有div

2. >大于号 子元素选择器 .main>div{ }
   所有儿子div

3. ＋加号 相邻元素选择器 .main>ul＋div{ }
   紧随ul其后的一个同代div

4. ～波浪线 兄弟选择器 .main>ul～div{ }

   紧随ul其后的所有同代div

复合选择器

1. 交集选择器

   div .gd .nav[title]{}

   这个标签是div标签而且class=’‘gd nav’'而且有title属性（空格表示后代的意思）

2. 并集选择器

   div,p,span{}

   逗号隔开的，所有选择器都会执行后面的样式

四.css盒模型

• width 宽度

• height 高度

• border 边框

  1. 复合写法
     • border:宽度 种类 颜色;
     • border-top:宽度 种类 颜色;
     • border-bottom:宽度 种类 颜色;
     • border-left:宽度 种类 颜色;
     • border-right:宽度 种类 颜色;
  2. 单例写法
     • border-width:
     • border-style:
       dotted圆点边框, double双边框,
       dashed虚线边框,solid实线边框
     • border-color:
     • border-top-width:
     • border-bottom-style:
     • border-left-color:

• padding 内边距

• margin 外边距

  • margin:10px;
  • margin:10px 20px;
  • margin:10px 20px 30px;
  • margin:10px 20px 30px 40px;

怪异盒模型

1. box-sizing:content-box;默认盒模型

   如果你设置一个元素的宽为100px，

   那么这个元素的内容区会有100px宽，

   并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

2. box-sizing:border-box;怪异盒模型

   如果你将一个元素的width设为100px,

   那么这100px会包含其它的border和padding，

   内容区的实际宽度会是width减去border + padding的计算值。

五.行内盒模型和文字样式

• font-size: 字体大小 (20px或1.5em)

• font-style: 字体样式

  1. italic 斜体
  2. normal 正常(默认)
  3. oblique 倾斜的字体
  4. inherit 继承父级的字体样式

• font-weight: 字体粗细

  1. norma l和 bold
  2. bolder 和 lighter (相对于父级)
  3. “100”到“900”的9个数字序列

• font-family:Tahoma,Helvetica,Arial,sans-serif; 字体类型

• line-height: 行高

• vertical-align：垂直对齐

  • baseline：使元素的基线与父元素的基线对齐

  • middle：使元素的中部与父元素的中线对齐

  • top：使元素及其后代元素的顶部与整行的顶部对齐

  • bottom：使元素及其后代元素的底部与整行的底部对齐。

• text-indent: 文本缩进样式

  • text-indent：1em; 文本首行缩进一个字符
  • text-indent：20px; 文本首行缩进20px

• text-align: 文本对齐样式

  • text-align：left; 左对齐
  • text-align：right; 右对齐
  • text-align：center; 居中对齐
  • text-align：justify;两端对齐

• text-decoration: 文本装饰

  • text-decoration:underline; 下划线

  • text-decoration:overline; 上划线

  • text-decoration:line-through; 贯穿线

六.默认显示类型与转换

• display:block; 块级盒模型
• display:inline; 行内盒模型
• display:inline-block; 行内块级盒模型
• display:none; 隐藏

默认样式的清除方法

• *{margin:0;padding:0;}

• body,p,ul,ol,dl,li{margin:0;padding:0;}

• ul,ol{list-style:none;}

• normalize.css

七.背景样式

层级关系

内容层>边框层>背景图片层>背景颜色层
color>border-color>background-image>background-color

• background-color: 背景颜色

  • 默认颜色为transparent 透明
  • rgb:取值范围:rgb(0,0,0)->rgb(255,255,255);
  • rgba:透明度a的取值范围为0~1（25,25,25,1）
  • 十六进制： #000000~#ffffff(大小写都可,但是要统一)，
    #aabbcc简写: #abc

• background-image: 背景图片

  background-image:url(‘图片地址’);

• background-repeat 背景图片平铺

  • 初始值为repeat;(默认重复)如果不需要背景图片重复显示：

    样式值可设置为no-repeat

  • 分解为两个值:
    background-repeat-x:repeat;
background-repeat-y:repeat;

  • 写法二:
    background-repeat: repeat-x;

    background-repeat: repeat-y;

• background-size: 背景图片大小

  • 数字类样式值：width height；
    1.百分比: 基数为父级width和height;
    2.像素: 直接数值px;
    (数值可以写一个或两个,如果只有一个第二个就是默认auto)

  • 关键字类样式值：

    cover: 图片等比缩放直到刚好覆盖背景区域，超出部分不显示
    contain: 图片等比缩放,直到有一条边触碰到边 框就停止

• background-origin: 背景图片显示基点样式

  • content-box;

    背景图片内容区左上角开始

  • padding-box;
    背景图片从内边距左上角开始(默认)

  • border-box;
    背景图片相当于边框左上角开始

• background-clip: 背景图片裁剪域

  • content-box;
    只显示内容区部分的背景图片
  • padding-box;
    显示内容区和内边距部分的背景图片
  • border-box;
    显示内容区、内边距和边框部分的图片

• background-attachment: 背景图片关联依附

  • fixed;

    背景相对于视口固定，即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

  • local;
    背景相对于元素的内容固定，如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，

    并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

  • scroll;
    背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

• overflow

  • overflow：visible; (默认)超出内容正常显示
  • overflow：hidden; 超出内容隐藏
  • overflow：scroll; 滚动条的形式展示多余内容
  • overflow：auto; 内容未超出,正常显示;内容超出,显示滚动条

背景是复合属性

background: color image repeat attachment position/size;

背景: 颜色 图片 平铺方式 关联依附方式 基点样式 裁剪域 位置/背景大小

background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px;

1. 省略部分会被默认值替代,

2. position和size之间要用/分割

3. 单个元素可设置多个背景图片

   background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px,url(images/1.png) no-repeat scroll 20px 20px/30px 30px;

八.圆角样式和渐变色样式

• border-radius 圆角属性

  1. • border-radius:20px;
     • border-radius:20px 30px;
     • border-radius:20px 30px 40px;
     • border-radius:20px 30px 40px 50px;

  2. border-top-left-radius:50px;

  3. 椭圆角

     • border-radius:200px/100px;
     • border-radius:200px 150px/100px;
     • border-radius:200px/100px 80px;
     • border-radius:200px 100px/100px 200px;

  4. 圆角单位

     • 百分数:是相对于父级宽和高的百分比 (宽和高不一致的时候就是椭圆角)
     • 像素值px

• linear-gradient 和 radial-gradient 渐变属性

  1. 线性渐变 background-image:linear-gradient(red 50px,blue 100px,green 200px);

     • background-image:linear-gradient(to left,red,black); 渐变方向

     • background-image:linear-gradient(230deg,red,black); 渐变度数

     • background-image:linear-gradient(rgba(255,234,256,0.6)); 支持rgba

     • background-image:repeating-linear-gradient(red 50px,blue 100px); 重复渐变

  2. 径向渐变 background-image:radial-gradient();

     写法组成:形状,半径,圆心的位置,颜色

     • background-image:radial-gradient(circle 100px,red,blue); 圆形

     • background-image:radial-gradient(ellipse 100px 50px,red,blue); 椭圆

     • background-image:radial-gradient(#cc66ff 50px,#00ffff 100px); 半径

     • background-image:radial-gradient(circle closest-side at 60px 80px,#33ffff,#cc33ff);

       closest-side 以圆心到最近的一条边的距离为半径
       farthest-side 以圆心到最远的一条边的距离为半径
       closest-corner 以圆心到最近的一个角的距离为半径
       farthest-corner 以圆心到最远的一个角的距离为半径

     • background-image:radial-gradient(circle at 60px 80px,#33ffff,#cc33ff);

       第一个值x轴 第2个值是Y轴,如果只写一个值 是给x轴的 y轴默认是center
       1)像素值px

       ​ 2)百分比:父级宽和高的百分之多少为x轴和y轴定位圆心

       ​ 3)关键词:x轴 left;center;right y轴 top;center;bottom

     • background-image:repeating-radial-gradient( ); 重复渐变

  3. background:radial-gradient(red 0px,red 20px,blue 20px ,blue 40px) no-repeat top left/100px 100px,linear-gradient(#ffff00 30px ,#00ccff 60px) no-repeat bottom left/100px 100px ,black;

九.浮动样式详解

• float:left; 左浮动

• float:right; 右浮动

解决高度塌陷

<head>
    <style>
		.clearfix::after{
			content:''; 
			display:block;
			clear:both;
		}
	style>
head>
<body>
	<div class="father clearfix">div>
body>

十.定位样式详解

• position:absolute; 绝对定位

  1. 是完全脱离文档流(文字也感受不到)
  2. 设置了定位之后 所有元素会变成块级元素 支持宽和高
  3. 没有设置宽度 宽度由内容撑开
  4. 没有祖先元素相对于浏览器可视区域进行偏移
  5. 配合参照物,一般是配合相对定位(父相子绝)
  6. margin:auto;失效
  7. 层级上升: 定位>文本>浮动>普通块元素 (定位之间的层级 是取决于后来居上)

• position:relative; 相对定位

  1. 不使元素脱离文档流,对于原来的结构没有任何的影响
  2. 不影响元素本身的特性(display)
  3. 本身占位 真实的位置保留 跑出去的只是影子(灵魂出窍)
  4. 层级上升: 定位>文本>浮动>普通块元素

• position:fixed; 固定定位

  1. 相对于浏览器窗口进行定位 元素在屏幕滚动时候 不会改变
  2. 脱离文档流的 本身位置不保留

• position:static; 静态定位

  元素默认就是静态定位(相当于不设置定位)

  1. 不脱离文档流
  2. top/left/bottom/right 无效
  3. 不会提高层级

• top: 10px; 上到下进行偏移
  left:20%; 左到右进行偏移
  right:100px; 右到左进行偏移
  bottom:50%; 下到上进行偏移

层级 z-index:数字;

1. 默认层级是0
2. 数字大的会覆盖数字小的(整数)
3. 可以为负数 就会比普通块元素的层级(0)还低
4. 层级只对设置了定位的元素有用 (相对 绝对 固定)
5. 从父现象 父级层级即便小于0,子级层级设置多少也没有用

十一.表单元素详解

属性:

1. action 处理当提交表单的时候向何处(URL)发送表单数据

2. method 规定用于发送数据的http方法

   • get 数据会暴露在地址的地方 不安全 默认
   • post 数据会包含在表单体内然后再发送到服务器,相对于get会安全一点 ,更安全地的方法 等到js再讲

3. name 表单的名字,必须要写,但是name 唯一

4. target 规定action属性提交的页面在何处打开

   • _self 默认

   • _blank 新窗口

控件元素 (form标签内)

1. input标签

接受来自用户的信息 ,为单标签, 输入标签 ,行内块元素 text-ident 宽高

1. type 控件类型

		1)单行文本输入框 text (name必须写)
			<input type='text' name='username'>
			
		2)密码框 password
			<input type='password'>

		3)单选框 radio
			<input type='radio' value='man' name='sex'>男
			<input type='radio' value='woman' name='sex'>女
			(1)value 给浏览器一个单选框信息
			(2)name 必须写,一个name表示一个问题
		
		4)多选框 checkbox
			<input type='checkbox' value='apple' name='fruit'>苹果
			<input type='checkbox' value='strawberry' name='fruit'>草莓
			<input type='checkbox' value='banana' name='fruit'>香蕉
			(1)name 必须写,一个name表示一个问题
			(2)value 给浏览器一个多选框信息
			
		5)数字框 number
			<input type='number' min="5" max="15" step="3" value="6">
			(1)min=""  max="" 设置数字的范围
			(2)step="3" 一次增加3,即5,8,11,14
			(3)value="" 默认值,最开始出现的值

		6)日期选择 (placeholder没有用)						
			(1)date   年月日 <input type='date'>
			(2)month  年月 <input type='month'>
			(3)week 周 <input type='week'>
			(4)time  小时分钟 <input type='time'>
				有些浏览器是24小时制 有些浏览器是12小时制
			(5)datetime-local 你的时间 <input type='datetime-local'> 
				以你的地区为准 最具体 年月日 小时分钟

		7)颜色 color (placeholder没有用)
			<input type='color'>
			选择颜色的模块 是操作系统提供
			
		8)文件域按钮 file			
			(1)选择一个文件 <input type='file'>
			(2)选择多个文件 <input type='multiple' multiple>

		9)按钮 
			(1)提交 submit  <input type='submit' value='提交'>
			(2)重置 reset  <input type='reset' value='重置'>
			(3)普通按钮 button  <input type='button' value='登录'>

		10)隐藏输入框 hidden
			<input type='hidden'>			

2. name 控件的名称,只能英文,方便浏览器识别信息类别

3. value 控件的值,在没有输入的情况下,输入框会出现一个默认的值

4. placeholder 默认的提示信息(占位符),输入框里删除默认值,placeholder提示信息依然阴影显示

5. disabled 规定禁用input元素,输入框不能输入

6. required 必须输入的控件,不输入,点提交会提醒

7. autofocus 刷新页面后会光标自动聚焦在该输入框

8. checked 表示单选或多选框默认选中的内容

   苹果
   草莓
   香蕉

2. 文本域 textarea

1. name 文本框的名字
2. cols 设置列数
3. row 设置行数

3.下拉框 select option
来创建菜单 他是一个区域 需要name 数据名字
选项 需要value 数据值

<select name="">
				<optgroup label="月份">optgroup>
				<option value="" selected>一月option>
				<option value="">二月option>
				<option value="">三月option>
				<option value="">四月option>
select>

一月 二月 三月 四月

1. multiple 规定可以多选
2. size 规定下拉列表可见选项的数目
3. selected 规定下拉框默认展示的选项
4. optgroup 规定下拉框进行分组 与选项是兄弟关系,但不能选

表格 table 标签

• table标签内结构
  表标题 一般不在表格的内部
  表头
  表正文
  表正文 (注脚的内容 签名 年月日)

  • tr 元素定义表格行

  • th 元素定义表头

  • td 元素定义表格最小单元

    <tr>
    	<th>th>
    	<td>td>
    tr>
    

• table样式

  1. border-collapse 边框样式
     (1)边框合并 collapse
     table{border-collapse:collapse;}
     不同的单元格边框不同情况下 粗的生效
     同样的粗细的情况下 设置了颜色的生效
     (2)边框分割 separate (默认)
     table{border-collapse:separate;}

  2. border-spacing 相邻单元格边框间的距离（仅用于“边框分离”模式）
     table{border-spacing:3px 5px;}
     第一个是水平间隔，第二个是垂直间隔

  3. 单元格的合并

     (1)col 列 colspan 列合并 从左到右
     数学两学期

     (2)row 行 rowspan 行合并 从上到下
     34期

内联框架 iframe标签

<iframe src="" frameborder="" width="" height="" name="" scrolling="">iframe>

• 属性

  1. src 规定在框架中显示文档的url
  2. width 宽度
  3. height 高度
  4. frameborder 规定框架周围有没有边框 ( 0 没有 1 有 )
  5. name 规定框架的名称
  6. scrolling 规定是否框架中显示滚动条 ( yes 有 ; no 没有 ; auto 根据内容自动显示有无滚动条 )

• 样式 : 外边距生效 auto无效 支持内边距 支持定位

十二.表格元素与表格布局详解

(一)组合表单中的相关元素

• fieldset 分组 块级元素 双标签(区域标签)

  <form>
  	<fieldset>
  	fieldset>
  form>
  

• legend 定义域的标题 双标签

  <form>
  	<fieldset>
          <legend>您的性别是:legend>
  	fieldset>
  form>
  

  您的性别是:

• label 绑定 为input标签定义标注,本身没有任何特殊的效果 ,增加了可用性和可选择的区域
  通过input标签id名和label标签for进行绑

  <form>
      <label for="man">label>
      <input type="radio" name="sex" id="man"/>
    	<label for="woman">label>
     	<input type="radio" name="sex" id="woman"/>
  form>
  

  ​

• button 按钮标签 双标签 我们一般input模拟 input的兼容性更好

​
​ 登录
​

(二)伪类

• 概念
  伪类是状态
  我们的元素现在处于一个什么状态
  状态理解为简单的交互
  辅助用户给某些元素设置(添加或者改变)样式

​ 伪元素 2个冒号,伪类 1个冒号

• 语法

  1. 伪类给自己添加样式

     .box:hover{
     		width:200px;
     		height:200px;
     }
     

  2. 伪类给其他元素添加样式
     .box1:hover(选择器).box2{}
     鼠标需要放在的元素写在hover前面
     需要改变的元素写在hover后面
     只能是兄弟元素 或者子元素 或者是兄弟的子元素(只能是平级或者后级)
     去掉:hover之后就是正常的选择器

• 表单的伪类
  :checked 单选或者多选按钮被选择
  :focus 获取焦点的状态
  :focus-within 当某个后代元素获取焦点的时候,自身运用样式

十三.高级选择器和伪元素应用

(一)基本选择器

1. 标签选择器 tagname(直接写标签名字)
2. 类名选择器 class
3. id 选择器
4. 通配符选择器 *
5. 组合选择器 div#aa
6. 后代选择器 空格
7. 子元素选择器 >
8. 相邻兄弟选择器 +
9. 通用兄弟选择器 ~

​ 优先级
​ !important>行内样式>id>类>标签>通配符>默认>继承

​ 选择器是怎么样选择一个元素的呢
​ 从里往外看的（选择器是一个条件 是一个判断的名单）
​ 1.先找到元素 往外开始判断
​ 2.不满足条件就停止 满足条件就设置样式（减少工作量和搜索范围）

(二)伪类选择器

• 伪类选择器之状态类
  :hover{} 鼠标悬停
  :focus{} 处于被聚焦的状态
  :checked{} 表单被勾选的状态

  ​ a标签一些选择器
  ​ a:link{} 未访问链接
  ​ a:hover{} 用户鼠标悬停
  ​ a:active{} 激活链接 鼠标按下去后
  ​ a:visited{} 已访问链接(前提是必须有hover和active)

• 伪类选择器之结构类
  css3新增结构伪类选择器

	e:first-line{} 表示我们e标签中第一行
	e:first-letter{} 表示我们e标签中第一个字符
	e::selection{} 被鼠标选中的文本（双冒号 唯一一个特殊的伪类）
	e:not(.select){} 反选 选中.select之外的元素
	e:empty{}  选择没有内容的e标签
	e:target{} 选择当前锚点激活的p  结合我们的a标签一起使用

	e:first-child{} 选择的e元素为父级的第一个子元素
	e:last-child{} 选择的e元素为父级的最后一个子元素
	e:nth-child(2){} 选择的e元素为父级的第2个子元素(2可替换成任意数字)
	e:nth-child(3n){} 选择的e元素为父级的3的倍数子元素
	e:nth-child(odd){} 选择的e元素为父级的奇数子元素
	e:nth-child(2n-1){} 选择的e元素为父级的奇数子元素
	e:nth-child(even){} 选择的e元素为父级的偶数子元素
	e:nth-child(2n){} 选择的e元素为父级的偶数子元素
	e:only-child{}  选择的e元素为父级的父级唯一子元素

	e:first-of-type{} 选择的e元素为父级的第一个e元素(其他元素不算)
	e:last-of-type{} 选择的e元素为父级的最后一个e元素(其他元素不算)
	e:nth-of-type(3){} 选择的e元素为父级的第3个e元素(其他元素不算)
	e:nth-of-type(3n){} 选择的e元素为父级的3的倍数的e元素(其他元素不算)
	e:only-of-type{} 选择的e元素为父级的唯一e元素(其他元素不算)

• 伪类选择器之属性类

  1. e[attr] attr表示属性,即选择有属性的e元素

  2. a[href]{} 即选择所有带href属性的a标签

  3. e[attr=val] 匹配有attr属性等于"value"的e元素

  4. e[attr=val][attr2=val2][attr3] 匹配三个属性的e元素

  5. e[attr$=val] 匹配有attr属性以"value"结尾的e元素

  6. e[attr^=val] 匹配有attr属性以"value"开头的e元素

  7. e[attr*=val] 匹配有attr属性包含"value"的e元素

(三)伪元素

假的元素 不是代码自带的元素 通过css写的元素

1. 属于行内元素
2. 是单标签
3. 标签之前/之后
4. 可以给伪元素设置样式
5. 父级为当前元素
6. content激活伪元素
7. 一个标签只能有一个before和一个after
8. 只有双标签才有伪元素,单标签没有

伪类与伪元素的对比
伪类是一个冒号,伪元素是2个冒号

.box:hover::before{color} 能实现效果  
.box::before:hover{color} 不能实现 

十四.动画样式详解

(一)过渡 transition

元素样式变化的过程

• 过渡时间 transition-duration：
  默认是0s ,单位：s秒 ms毫秒 1s=1000ms

  过渡时间写在不同的位置 效果不一样

  1. 写在盒子里面 过去和回来都有过渡时间、
  2. 写在hover里 过去有时间 回来没有
  3. 写在盒子里面1s hover 0s 过去没有时间 回来有

  过渡时间满足的条件

  1. 开始状态
  2. 结束状态
  3. 可计算的属性

  bgc width height background-image 都可以

• 过渡延迟 transition-delay:

  1. 过渡之前的等待时间 不算在过渡时间、
  2. 只要样式发生改变 就会有等待时间
  3. 可以设置负数 在开始之前已经跑了多少秒

• 过渡属性 transition-property:
  规定过渡作用于元素哪条样式上面
  多个值用逗号隔开

  1. all 对所有可能的样式都生效(默认)
  2. none 没有过渡属性

• 过渡的速率 transition-timing-function:

  1. ease 先慢后快再慢 默认
  2. linear 匀速
  3. ease-in 匀加速
  4. ease-out 匀减速
  5. ease-in-out 先快后慢再快

  自定义运动方式
  网址：https://cubic-bezier.com
  贝塞尔曲线 cubic-bezier , 横轴时间竖轴路程
  越陡速度越快 越平缓速度越慢
  cubic-bezier(x1,y1,x2,y2)
  1.x1 x2取值范围是0-1
  2.y1 y2 可以任意取值

• 过渡的复合属性
  transition : property(属性) duration(时间) delay(延迟) timing-fuction(过渡速率);transition : all 4s -2s cubic-bezier(0,1.36,1,-1.42) , width 2s -1s linear;
  只有时长不可以省略 其他都可以省略

(二)动画 animation

​ 过渡 transition 开始和结束状态的变化过程 需要手动触发
​ 动画 animation 能够精确的描述各个时间进程的状态 自己运动

• 需要满足条件

  1. 运动轨迹
  2. 运动时间

• 语法

  @keyframes animation-name{
  			        keyframes-selector(关键帧){css-style}
  			        keyframes-selector(关键帧){css-style}
  }
  

• 属性

  1. animation-name 自定义动画名称
  2. keyframes-selector(关键帧)
     关键帧是5个 动画是4段, n段动画 关键帧是n+1
     动画时长百分比: 0%-100% 可多个; form(0%) to(100%)只有开始和结束
  3. css-style 一个或者多个合法的css属性

• 样式

  • animation-duration: 动画时间
  • animation-delay: 动画延迟(支持负数)和过渡一样
  • animation-timing-function: 动画速率
    细节 每2个关键帧之间就有一个运动速率
    1. ease 先慢后快再慢 默认
    2. linear 匀速
    3. ease-in 匀加速
    4. ease-out 匀减速
    5. ease-in-out 先快后慢再快
    6. 特殊值 贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

  ​ 逐帧动画 steps(n) n表示动画分为几个帧一个盒子搞不定 再加一个盒子,各控制一个运动

  • animation-iteration-count: 动画执行次数
    1. n 次数
    2. infinite 无数次
  • animation-play-state: 动画暂停(结合伪类)
    1. paused 暂停我们动画
    2. running 运行动画
  • animation-direction: 动画执行方向
    1. normal 正常播放 默认
    2. reverse 反向播放
    3. alternate 大于等于2能看到效果
       奇数次是正向 偶数次是反向
    4. alternate-reverse 大于等于2能看到效果
       奇数次是反向 偶数次是正向
  • animation-fill-mode: 动画结束之后的状态
    1. backwards 原始状态-动画-原始状态
    2. forwards 原始状态-动画-停在最后一帧

• 动画的复合样式

  animation : animation-name(名称) animation-duration(时间) animation-delay(延迟) timing-function(速率) iteration-count(次数) direction(执行方向)
  

十五.transform变化样式详解

​ 应用于 2D 或 3D 转换。
​ 允许我们对元素进行旋转、缩放、移动或倾斜。
​ 主体:页面的元素
​ 方式:旋转 缩放 移动 或者倾斜
​ 核心概念:使物体发生形状或者位置的变化

• 位移 transform:translate(偏移量1,偏移量2);
  设置元素以自身初始位置为原点的偏移效果

  • 偏移量1:定义元素水平方向的偏移量;
    可以单独用translateX()来设置
  • 偏移量2:定义元素垂直方向的偏移量;
    可以单独用translateY()来设置

• 旋转 transform:rotate(角度值);
  设置元素绕着中心的旋转效果
  角度值取值(正数是顺时针旋转的 负数的逆时针旋转的)
  1.deg 度数
  2.rad 弧度 1rad约等于57.3度
  3.turn 圈 1turn=360deg

• 缩放 transform:scale(倍数1,倍数2);

  • 倍数1:定义元素水平方向的缩放倍数;
    可以单独用scaleX()来设置
  • 倍数2:定义元素垂直方向的缩放倍数;
    可以单独用scaleY()来设置
    倍数取值:

  ​ 0~1之间, 元素缩小(倍数为0元素消失不见)

  ​ 1 , 元素放大
  ​ <0, 元素倒置( -1~0,倒置缩小;小于-1,倒置放大 )

• 倾斜 transform:skew(角度1,角度2);

  • 角度1:定义元素水平方向的倾斜角度;
    可以单独用skewX()来设置
  • 角度2:定义元素垂直方向的倾斜角度;
    可以单独用skewY()来设置

• 设置元素基点 transform-origin: ;
  默认值为transform-origin:50% 50%; (中心点)
  变化原点:水平位置 垂直位置

    	1. 关键词:
     		水平方向取值:left;center;right 对应百分值为left=0%;center=50%;right=100%
     		垂直方向的取值:top;center;bottom 对应百分值为top=0%;center=50%;bottom=100%;
    	2. 像素值 px
    	3. 百分数 %
  

• 变化样式复合写法
  如 transform: scale() translate() skew() rotate() ;
  顺序的不同会导致完全不一样的结果

十六.3D动画，盒阴影及滤镜样式

(一)3D动画

• perspective:1000px; 景深
• perspective-origin:50% 50%;（默认） 景深的基点
• transform-style:preserve-3d; 该属性设置在父级元素中，它的子级元素具有3d效果

(二)盒子阴影 box-shadow

box-shadow : h-shadow v-shadow blur spread color inset;

1. h-shadow 必需的,水平阴影的位置,允许负值
2. v-shadow 必需的,垂直阴影的位置,允许负值
3. blur 可选,模糊距离
4. spread 可选,阴影的大小
5. color 可选,阴影的颜色
6. inset 可选,从外层的阴影（开始时）改变阴影内侧阴影

多个阴影的写法:逗号隔开
box-shadow:10px 10px 10px 10px #ffcc33,-10px -10px 10px 10px #9933ff;

(三)文字阴影 text-shadow

text-shadow : x-shadow y-shadow blur color;

(四) css滤镜 filter:

1. none
2. blur() 模糊度 只接受像素
3. brightness() 明亮度 >1更亮 <1就是更暗 1 没有变化 0是全黑
4. contrast() 对比度 >1更大的对比 <1就是更暗 1 没有变化 0是全黑
5. hue-rotate() 色相旋转 默认0 可取值:90deg -0.25turn 3.142rad
6. opacity() 透明度
7. sepia() 图片转为深褐色 0%图像无变化 100%深褐色

.box{
	-webkit-filter:blur(5px); //谷歌浏览器兼容
	filter:blur(5px);
}

十七.flexbox弹性盒模型

(一)概念

​ 伸缩容器:(父级)一个设有display:flex的元素
​ 伸缩项目:(子级)伸缩容器的子元素
​ 主轴:main axis 元素排列方向,向上,向下,向左,向右,4个
​ 主轴起点:main start
​ 主轴终点:main end
​ 占据主轴的空间:main size
​ 交叉轴:cross axis先主轴再有交叉轴即换行方向 共8个
​ 交叉轴起点:cross start
​ 交叉轴终点:cross end
​ 占据交叉轴的空间:cros size

​ 行内元素使用弹性布局 display: inline-flex;

(二)给父级的样式

1. flex-direction: 元素排列方向
   1)row 行(默认)
   2)row-reverse 与行反向
   3)column 列
   4)column-reverse 与列反向
2. flex-wrap: 换行方向
   1)nowrap 不换行(默认)
   2)wrap 换行(第一行在上方)
   3)wrap-reverse 反向换行(第一行在下方)
3. flex-flow: 复合属性 建立坐标系 把主轴和交叉轴写在一起
   flex-flow：flex-direction(主轴方向) flex-wrap(换行方向);
4. justify-content: 子元素在主轴上的对齐方式
   1)flex-start 子元素将向行起始位置对齐(默认)
   2)flex-end 子元素将向行结束位置对齐
   3)center 子元素将向行中间位置对齐
   4)space-between 子元素两端对齐其余平均地分布在行里
   5)space-around 两端保留子元素之间间距的一半,其余平均地分布
5. align-items: 子元素在交叉轴上的对齐方式（单行）
   1)stertch 默认 项目被拉伸以适应整个容器
   2)center 项目位于容器的中心
   3)flex-start 项目位于容器的开始
   4)flex-end 项目位于容器的结束
   5)baseline 项目位于容器的基线
6. align-content: 子元素在交叉轴上的对齐方式（多行）
   1)stertch 默认 项目被拉伸以适应整个容器
   2)center 项目位交叉轴的中心
   3)flex-start 项目位于交叉轴的开始
   4)flex-end 项目位于交叉轴的结束
   5)space-between 项目在交叉轴上间隙均分
   6)space-around 也是均分法则 项目在交叉轴上间隙均分 2边都有相同的间隙

(三)给子级的样式

1. order: 元素的排列顺序
   用整数值来定义排列顺序,数值小的排在前面,可以为负值(-1 0 1)

2. flex-grow: 拉伸比列 (容器有空余空间才会拉伸)
   用整数值来定义拉伸比列,数值小的拉伸越小,不可为负值,默认是0

3. flex-shrink: 压缩比列 (如果子元素的总宽度超过了主轴宽度)
   用整数值来定义压缩比列,默认值是1,都压缩同样大小, 0是不压缩,不可为负数

4. flex-basis: 分配多余空间之前,项目占据的主轴空间
   1)length 像素 不允许为负值
   2)百分比 不允许为负值
   3)auto 默认值 没有设置宽度的情况下 由内容撑开
   4)content 由内容撑开

5. align-self 单个项目于其它项目的对齐方式 可以覆盖align-items

   ​ 1)auto 默认值 继承父级交叉轴对齐方式
   ​ 2)stertch 默认 项目被拉伸以适应整个容器
   3)center 项目位于容器的中心
   4)flex-start 项目位于容器的开始
   ​ 5)flex-end 项目位于容器的结束
   ​ 6)baseline 项目位于容器的基线
   ​ 7)inital 设置该属性为它的默认值
   ​ 8)inherit 继承父级

6. 复合属性

   flex : 第一个值flex-grow 第二个值flex-shrink 第三个值flex-basis ;
   1)默认;其数值为 0 1 auto
   2)flex:auto; 其数值为 1 1 auto
   3)flex:none; 其数值为0 0 auto
   4)flex:inherit; 继承父元素

详见

https://blog.csdn.net/m0_38099607/article/details/72614852?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158469662319724848362178%2522%252C%2522scm%2522%253A%252220140713.130056874…%2522%257D&request_id=158469662319724848362178&biz_id=0&utm_source=distribute.pc_search_result.none-task

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

十八.阿里图标、iframe

(一)阿里图标

涵盖市面上绝大多数的一些功能性图标（矢量图）

(1)下载使用图标

1. 进入官网https://www.iconfont.cn/
2. 先登陆 方便我们的图标统一管理
3. 在图标库里面选择图标 点击加入购物车
4. 在顶部导航栏 选择购物车 点击
5. 下载项目 然后把项目放进我们的项目的文件夹里面
6. 打开下载文件夹的文档观看操作

• Unicode 是字体在网页端最原始的应用方式
• font-class 是 Unicode 使用方式的一种变种
• Symbol 是做了一个 SVG (矢量图)的集合

(2)在线使用图标

1. 进入官网https://www.iconfont.cn/
2. 先登陆 方便我们的图标统一管理
3. 在图标库里面选择图标 点击加入购物车
4. 在顶部导航栏 选择购物车 点击
5. 添加至项目
6. 打开项目观看操作

(二)swiper 框架

框架:将一些常用的重复的操作封装起来 使开发效率变高

https://www.swiper.com.cn/

操作步骤

1. 点击标题栏’获取swiper’选择’swiper CDN地址’
2. 引入link标签到head标签内 (选择后缀为.min.css 压缩的css文件)
3. 引入script文件到body标签内 (选择后缀为.min.js 压缩的js文件)
4. 点击标题栏’中文教程’选择’swiper5 使用方法’
5. 引入html的内容到body标签内且script标签前
6. 设置css样式
7. 初始化Swiper,最好是挨着标签 (组件参见标题栏’API文档’)

十九.响应式布局

不同的设备有不同的尺寸 ,使用一套代码可能不适用所有的情况

(一)响应式

​ 一个网页 网页自动识别设备 然后展示对应的样式

• 核心逻辑

  1. 可伸缩的内容区块
  2. 可自由排布的内容区块
  3. 能够自动隐藏/显示的部分
  4. 能够自动折叠的导航和菜单
  5. 能够适应尺寸的图片
  6. 能够适应比例变化的边距

• 响应式触发点是宽度
  核心技术是css技术,基于媒体查询属性@media(查询你的设备 跟进你的设备显示对应的网页)

• 媒体类型

  1. all 所有媒体
  2. screen 彩屏设备(居多)
  3. print 用于打印机和打印浏览

• 语法
  @media screen and (){}
  具体语法

  @media screen and (min-width:200px) and (max-width:600px){
  	.box{
  		background-color:#ffcc00;
  	}
  }
  

• 媒体特性

  1. (width:600px)
  2. (max-width:600px) 最大值的600 (x<=600)
  3. (min-width:600px) 最小值的600 (x>=600)
  4. (min-width:200px) and (max-width:600px) (200<=x<=600)
  5. (orienation:portrait) 竖屏
  6. (orienation:landscape) 横屏

• 如何引入响应式

  1. 内联样式

  2. 外部样式引入

     1）link

     "stylesheet" type="text/css" href="1.css" media="screen and (max-width:600px)">
     

     2）@import
     @import url("1.css") screen and (max-width:600px); 写在style标签里面的第一排

(二)移动端适配 viewport 元标签

可以结合比例控制大小来完成移动端适配

1. "viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">  /* 值之间逗号隔开 */
   

   ​ 1)width 控制视口的一个宽度 推荐写特殊值 device-width 表示页面宽度为屏幕的宽度;不推荐写像素值
   ​ 2)initial-scale 初始比例
   ​ 3)maximum-scale 允许缩放的最大比例,一般为1.0,禁止缩放 因为缩放页面布局会乱
   ​ 4)minimum-scale 允许缩放的最小比例,一般为1.0,一般maximum-scale和minimum-scale写一个就可以
   ​ 5)user-scalable 是否允许缩放, yes / no 或者 1 / 0 ,一般是no

2. 不要写绝对宽度 用百分比来写

3. 不要写高度 让子元素去撑开父元素高度

4. 字体大小 用相对大小 em 或者rem

(三)其他适配方式

1. vw vh布局
   100vw=浏览器的宽度
   100vh=浏览器的高度
   没有父级的概念 只跟浏览器窗口和百分比有区别, 百分比会受父级的限制

2. rem适配
   em可以作为布局单位 但是会继承父级 所以em的值不一样,是结合js来做