HTML+css学习学习笔记，由浅入深_综合

? 猿猿的前端之路就此开始，下面小白白们跟着猿猿一起学习前端基础h5+css叭！
? 以下是猿猿的学习笔记，内容包含h5+css菜鸟教程几乎所有知识和pink老师知识，外加个人理解简化

HTML5知识点总结

截图工具 Snipaste，是一款强大的贴图软件，猿猿们可以自行下载哦在这里插入图片描述

alt取色，shift切换取色模式

文章目录

HTML5知识点总结
- 一、网页（网站、网页）
- - - **什么是HTML:** 是一种用来描述网页的一种语言
- 二、浏览器
- 三、Web标准（使代码更规范更简介更通用）
- - **HTML语法规范**：
  - **结构标签的总结：**
  - **lang语言：**"en"定义语言为英文，"zh-CN"定义语言为中文
  - 路径
  - - - 1目录文件夹和根目录
        
        2相对路径和绝对路径
  - 特殊字符（空格 +; 小于号<+; 大于号>+;）
- **常用标签**：
- - - **1.语义标签**：标题标签、段落和换行、不换行标签
    - 2.文本格式化标签（粗体倾斜、删除线、下划线）
    - 4.图像标签
    - - 图像标签的属性：
        
        alt：图片显示不出来时用 alt文字替换的方法
        
        title：鼠标放在图片上能显示文字
        
        width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放
    - 复制图片地址导入自己的网页：
    - 5.超链接标签（重点）
    - - 1 语法格式
      - 2 链接分类
      - 1.外部链接：
        
        2.内部链接：
        
        3.空链接：
        
        4.下载链接：
        
        5.网页元素超链接：
        
        6.锚点链接：两部曲
    - 6.注释标签：
    - 7.表格标签
    - - 1.表格的基本语法：
      - 2.表头单元格标签：（用th表示，table hand的缩写），效果居中加粗显示
      - 3.表格的属性：
      - align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。
      - 4.表格结构标签：更加清晰简洁
      - image-20210111112039375
      - 5.合并单元格（rowspan 跨行；colspan跨列）：
      - 合并单元格三部曲：
  - 8.列表标签（占一行）
  - - - 1.无序列表：（ul li）（重点）
      - 2.有序列表：（ol li理解）
      - 3.自定义列表：（dl dt dd重点）
      - 4.列表总结：
    - 9.表单标签
    - - 1.表单的组成：表单控制、表单域、提示信息
      - 2.表单域：（了解）
      - 3.表单控件（表单元素input、select、texarea）
      - 1.imput表单元素：
        
        2.select下拉表单元素：
        
        3.textarea文本域表格元素：（可以输入很多文本区域）
      - 4.type属性：
      - 1.radio多选一，checkbox复选框多选（他们名字必须都相同）。
        
        2.添加value后，文本框中直接出现添加的value值；
        
        3.给他们设置checked后，打开后默认已经被勾选；
        
        4.maxlength="6" 规定只能输入六个字符；
        
        5.submit提交加**value修改自定义字体内容**，点了之后可以把表单域中的表单元素送给后台服务器。
        
        6.reset重置加**value修改自定义字体内容**，点了之后表单域中所有的东西恢复原状
        
        7.button普通按钮后期搭配js使用
        
        8.file文件域需要上传文件时添加此功能
        
        9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖
    - 10.lable标签
css知识点总结
- css单位详讲
- - 1.1 相对长度单位
  - - 1.1.1 字体的相对长度
    - 1.1.3 百分比单位 (%)
    - 1.2 绝对长度单位
  - 时间单位 (s , ms)
  - - 时间单位
- 目录：
- - 1.为什么要用css：
  - 2.css语法规范：
  - 3.css代码风格：样式格式书写、样式大小写风格、样式空格风格
  - - - 1.样式格式书写：（提倡用第二种）
      - 2.样式大小写书写：
      - 3.样式空格风格：
  - 4.css基础选择器
  - - 1.作用：![image-20210112095700089](https://img-blog.csdnimg.cn/img_convert/8dcac34faf92e46f9640e56c8552dd8c.png)
    - 2.选择器的分类：
    - - 1.标签选择器：
      - 2.类选择器：
      - 语法：
        
        多类名：
      - 3.id选择器：
      - 语法：
        
        id选择器和类选择器的区别：
      - 4.通配符选择器：
      - 语法：
      - 5.基础选择器的总结：
  - 5.CSS字体属性：
  - - - 1.字体系列：
      - 2.字体大小：
      - 3.字体粗细：
      - 4.文字样式：
      - 5.字体符合属性：
  - **简写方式：**（倾斜方式、字体粗细、字体大小/字体行距、字体类型）
  - - - 6.字体属性总结：
  - 6.css文本属性：
  - - - 1.文本颜色：
      - 2.文本对齐：(test-align:)
      - 3.装饰文本：（test-decoration ）
      - 4.文本缩进：（test-indent，常用于段落的首行缩进）单位px，em
      - 5.行间距、段落行间距：（line-height:）单位像素：px
      - 6.文本属性总结：
  - 6.css引入方式：
  - - 1.css样式表
    - - 1.内部样式表：
      - 2.行内样式表：（结构简单的时候使用，适用比较少）
      - 3.外部样式表：（用到比较多）
      - 4.引入方式总结：
      - 5.综合案例：（https://www.bilibili.com/video/BV14J4114768?p=90）
      - 6.调试工具：鼠标右键打开检查或F12
  - 7.Emmt语法：
  - - 1.快速生成HIML结构语法：
    - 2.快速生成css样式语法：
    - 3.快速格式化规范代码：
  - 8.复合选择器：（后代选择器、子选择器、并集选择器、伪类选择器）
  - - 1.后代选择器：（重要）
    - - 语法：
    - 2.子选择器：（亲儿子选择器）
    - - 语法：如：
    - 3.并集选择器：（重要）
    - - 语法：
    - 4.伪类选择器：
    - - 1.链接伪类的基本属性
      - 2.focus伪类选择器：
      - 语法：
    - 5.复合选择器总结：
  - 9.元素显示模式：
  - - 1.块元素：
    - - 常见的块元素：
    - 2.行内元素：
    - 3.行内块元素：
    - - 特点：具有行内元素的特点（不会分段），块级元素特点（宽高内外边距行高可控）
    - 4.元素显示模式总结
    - 5.元素显示模式转换
    - - 行内元素转换为块级元素：display： block
      - 块级元素转换为行内元素：display： inline
      - 转换为行内块元素：display： inline-block
  - 10.css背景：
  - - - background：
    - 1.背景颜色 background-color：颜色值；
  - 11.flex布局：
  - - - 转换为flex布局： display： flex；
      - 注意：
      - 布局原理：
      - 常见的父项属性：
      - flex-direction：设置主轴方向
        
        justify-content：设置主轴上的子元素排列方式
        
        flex-wrap：设置子元素是否换行
        
        align-content：设置侧轴上的子元素排列方式（多行）
        
        align-items：设置侧轴上的子元素排列方式（单行）
        
        flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
    - 六大属性：
  - 11.grid布局：
  - - - 开启布局：给外层元素添加：
    - 设置每列的宽度：
    - - 固定宽度：
        
        grid-template-colomn：100px 100px 100px
        
        浮动宽度：
        
        grid-template-colomn：1fr 2fr 1fr fr代表着每行的比例，如1fr=1/总数
    - 设置间距：
    - - column-gap：列间距
        
        row-gap：行间距
        
        gap：行间距和列间距
    - 排列元素：template（模板）
    - 对齐：
    - - 垂直方向对齐子元素：（居中、靠下）
      - align-items：center，end
      - 水平方向对齐子元素：（居中、靠右、两端）
      - justify-items：center、end、space-between
      - 当行轨道和列轨道尺寸小于grid容器时：
      - 垂直方向上：align-content（居中、靠下）
      - align-content：center、end
      - 水平方向上：justify-content（居中、靠右、两端）
      - justify-content：center、end、space-between
  - 12.position的属性：
  - - - 不用转换为块状：
      - 固定定位：
      - 语法：
  - 13.动画（-）（transform）
  - - - （1）过度（执行这个动作的时间）：（transtation）
      - （2）元素的转换点：
      - 语法：（原点）（起源）
        
        注意：
    - 1.移动（treanslate）
    - - 1.语法：
      - 2.注意：
    - 2.旋转：
    - - 1.语法：
        
        2.注意：
        
        3.旋转案例
    - 3.缩放：
    - - 1.语法：transform：scale（x，y）；
        
        2.div：hover
        
        3.优点：
      - 4.连写：
  - 13.动画（二）：
  - - 1.步骤：
    - - 1.用@keyframes定义动画（类似于定义类选择器）：
      - 语法：
      - 2.使用动画：
      - 语法：
      - 3.动画属性
      - ease种类：
        
        简写：![image-20210121162434740](https://img-blog.csdnimg.cn/img_convert/d42e2c1cb5de22de3e05cd1d1a5bbe59.png)
        
        不包括：
  - 13.动画（三）：3D转换
  - - 知识点：
    - - 1.3D移动：transform：translate3d（x，y，z）
      - 2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度
      - 旋转方向：（左手法则）
      - 3.透视：perspective
      - 定义：
        
        注意：写在父级元素中
      - 4.3D呈现：transform-style
  - 13.动画（四）：轮播图
  - - **1.z - index ：**
    - - 代码：
  - 14.网页布局：
  - - 1.盒子定位
  - image-20210121104552836
  - - 2.显示与隐藏
    - - 1.display属性：
      - display：none；
        
        display：block；
      - 2.visibility属性：
      - 3.overflow属性：
    - 4.nth-child( ) 与 nth-of-type( )的定义与用法
    - 5.实现文本居中
    - 6.box-sizing
    - 7.margin和paddding
  - 15.常用标签
考核重点：
- - 一、点位：四种
  - 二、css单位的种类和区别 em字节 px像素
  - 三、颜色的表示方法
  - 四、浮动float(none、left、right)
  - - 清除浮动的方法：
- CSS3的filter(滤镜)属性详解

一、网页（网站、网页）

网页构成的基本元素：图片、链接、文字、声音、视频，通常是**.htm和.html**为后缀命名的文件，因此称为HTML文件

什么是HTML: 是一种用来描述网页的一种语言

二、浏览器

作用就是读取html或htm文件（即HTML文档），并以网页的形式读取他们。

三、Web标准（使代码更规范更简介更通用）

三大构成：结构、表现、行为，结构更重要

HTML语法规范：

1.1尖括号、双标签、单标签（特殊,<br /》极少情况

? 包含和并列关系代码：结构标签代码

**结构标签：**html,head、/head，body

结构标签的总结：

根标签、头部、身体三大部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我利用vscode创建的第一个页面</title>
</head>
<body>写代码是一件快乐的事
</body>
</html>

lang语言："en"定义语言为英文，"zh-CN"定义语言为中文

声名标签，不属于html里面的标签

字符集，代表了各种字符，防止乱码

路径

2相对路径和绝对路径

相对路径：

绝对路径：文件所在电脑的具体位置

特殊字符（空格 &nbsp+; 小于号&lt+; 大于号&gt+;）

常用标签：

1.语义标签：标题标签、段落和换行、不换行标签

标题标签：

不能像正常一样，按空格就能分段换行，需要用段落标签来操作。

段落标签：

强制换行：

强制不换行：

2.文本格式化标签（粗体倾斜、删除线、下划线）

3.独占一行

div没有语义的标签，span是一个小盒子，是一个大盒子，用来装东西。可装图片或文字

4.图像标签

图像标签的属性：

图片需要与网页文件放在同一个文件夹中

alt：图片显示不出来时用 alt文字替换的方法

title：鼠标放在图片上能显示文字

width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放

复制图片地址导入自己的网页：

也可以复制网页中的图片地址，直接导入自己的网页中

图像标签注意事项：

5.超链接标签（重点）

1 语法格式

herf必须要写的属性（写在a后面）；两个a中间可加图片或文本

target（元素被链接到的目标元素）以什么方式打开：_self（默认值）当前的窗口打开，_blank新窗口中打开

**:target{display:block;} ?*target 是“伪类”后边的是样式设置

2 链接分类

1.外部链接：

2.内部链接：

3.空链接：

javascript:void(0) javascript: ；

4.下载链接：

5.网页元素超链接：

6.锚点链接：两部曲

6.注释标签：

7.表格标签

表格的主要作用：清楚的展示数据

1.表格的基本语法：

2.表头单元格标签：（用th表示，table hand的缩写），效果居中加粗显示

三行三列：

3.表格的属性：

align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。

border-radius：（百分号或数字）圆角边框

border:10px solid #a1a1a1; 边框粗细和颜色

padding盒子内边距，会影响盒子实际大小，但不存在撑开盒子的情况

padding：7px 13px 0px；内边距上7，左右13，下0

4.表格结构标签：更加清晰简洁

5.合并单元格（rowspan 跨行；colspan跨列）：

目标单元格：代码写在需要合并的第一个单元格括号内

合并单元格三部曲：

8.列表标签（占一行）

1.无序列表：（ul li）（重点）

ul里面有li子，嵌套关系。ul只能放li，li里面可以放很多东西

2.有序列表：（ol li理解）

ol里面有li子，嵌套关系。ul只能放li，li里面可以放很多东西

3.自定义列表：（dl dt dd重点）

dl里面有dt和dd（dt和dd并列关系，dt大哥在上面）。

4.列表总结：

9.表单标签

1.表单的组成：表单控制、表单域、提示信息

2.表单域：（了解）

表单域就是form：

3.表单控件（表单元素input、select、texarea）

分为：

1.imput表单元素：

2.select下拉表单元素：

3.textarea文本域表格元素：（可以输入很多文本区域）

clls每行最多的字数，rows显示的行数

4.type属性：

1.radio多选一，checkbox复选框多选（他们名字必须都相同）。

2.添加value后，文本框中直接出现添加的value值；

3.给他们设置checked后，打开后默认已经被勾选；

4.maxlength=“6” 规定只能输入六个字符；

5.submit提交加value修改自定义字体内容，点了之后可以把表单域中的表单元素送给后台服务器。

6.reset重置加value修改自定义字体内容，点了之后表单域中所有的东西恢复原状

7.button普通按钮后期搭配js使用

8.file文件域需要上传文件时添加此功能

9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖

 <form>用户名：<input type="text" name="username" value="请输入你的用户名"  maxlength="6"> <br>密码：<input type="password" name="pwd" > <br><!-- radio多选一 -->性别：男<input type="radio" name="1" value="男">  女<input type="radio" name="1" value="女"> 人妖<input type="radio" name="1"    checked="checked"> <br><!-- checkbox复选框，选后能取消，多选 ，加上checked自动勾选-->爱好：吃饭<input type="checkbox" name="2" value="吃饭" checked="checked">   睡觉<input type="checkbox" name="2"> 打豆豆<input type="checkbox" name="2" value="打豆豆 ">       <input type="submit" value="免费注册"><input type="reset" value="重新设置"><input type="button" value="发送手机验证码"> <br>上传文件：<input type="file" ></form>

10.lable标签

作用：点击名称也能填写内容空白块

css知识点总结

css单位详讲

(1条消息) 【CSS 单位 (详细介绍)】_Hey_Coder-CSDN博客_css单位

1.1 相对长度单位

1.1.1 字体的相对长度

⑴ em : (相对于当前元素本身的 )字体大小 font-size 的倍数
⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数
⑶ ex : x 的高度 (随 font-family , font-size 改变)
⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)
1.1.2 视窗的相对长度
⑴ vh : 视窗高度的 1% (百分之一)
⑵ vw :视窗宽度的 1%(百分之一)
⑶ vmin : vw 和 vh 中的较小值 (宽/高较小值的百分之一)
⑶ vmax : vw 和 vh 中的较大值 (宽/高较大值的百分之一)

? 视窗单位的计算方法

1.1.3 百分比单位 (%)

⑴ 定位中的百分比
⑵ 盒模型中的百分比
⑶ 文本中的百分比
⑷ 边框和圆角中的百分比
⑸ 背景属性中的百分比
⑹ 变换中的百分比
? 百分比值的继承

1.2 绝对长度单位

⑴ px : 像素
⑵ cm : 厘米 ( 1/2.54 in , 38px)
⑶ mm : 毫米 (1/25.4 in, 3.8px)
⑷ in : 英寸 ( 1in = 96px ,2.54cm)
⑸ pc : 派卡 ( 1/6 in ,12pt, 16px)
⑹ pt : 点 (显示器上一个个的点,1/72 in,1.3px)
? CSS 绝对单位的换算关系

1in = 96px
1in = 2.54cm
1in = 25.4mm
1in = 72pt
1in = 6pc
- 1pc = 12pt

? 长度单位的浏览器支持

长度单位的浏览器支持

时间单位 (s , ms)
1. 时间单位
  
  CSS 中两个常见的时间单位
  ① 秒（s）
  ② 毫秒（ms）
  换算: 1s = 1000ms。
  搭配属性: 常用于 CSS 中 transition-duration、transition-delay、animation-duration 和 animation-delay 属性中。
2.频率单位 (Hz , kHz)
1. 频率值的使用位置: 在听（或说）级联样式表中使用.
2. 频率的两个单位值
- ① 赫兹（Hz）
- ② 千赫（kHz）
- 频率的作用
- 可以被用来改变一个语音阅读文本的音调。
  - 低频率是低音
  - 高频率是高音
角度单位 (deg,rad,grads,turn)
1. ⑴ 角度: deg
  角度最常用的用法
  ① 设置旋转角度:
  在CSS 中给旋转元素设置一个旋转角度（度数），依赖于 CSS 的 transform 属性中的rotate()，skew() 函数等
  ② 渐变中的角度: linear-gradient(260deg,red,blue)
  0deg = to top
  角度缺省的默认值: to bottom = 180deg
  ⑵ 百分度（grads）：
  一个分度，百分度相对于 1/400 个整圆
  跟角度单位一样，支持负值
  负值表示逆时针方向，100grad = 90deg
  ⑶ 弧度（rad）：
  
  在 Canvas中用到弧度
  1rad = 180/π °（大约为 57.3deg）
  1.570796326794897rad = 100grad = 90deg
  rad = (π / 180) * deg
  deg = (rad * 180) / π
  ⑷ 圈数（turn）：1turn = 360deg

position有以下属性：static、inherit、fixed、absolute、relative
前三个好理解好区分：
static：是默认状态，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
nherit：从父元素继承 position 属性的值。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。（即滚动浏览器的时候，元素永远固定显示在窗口可视区的某个位置）。

比较常用而且会引起初学者迷惑的是absolute和relative，它俩有什么分别呢？

一、先来看看W3C给的概念（定位是不占位置的）子绝父相

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

relative：生成相对定位的元素，相对于其正常位置进行定位。

两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。

绝对定位：position: absolute

绝对定位是相对于元素最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（也就是body）。

绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样，所以它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的相应顺序。

相对定位：position: relative

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

不用转换为块状：

加入绝对定位、相对定位浮动的行内元素

固定定位：

语法：

13.动画（-）（transform）

（1）过度（执行这个动作的时间）：（transtation）

过度写到本身上，谁做动画给谁加 transform：all 0.3s；

（2）元素的转换点：

语法：（原点）（起源）

默认中间：50% 50% 如设置左下角：

注意：

1.移动（treanslate）

移动盒子位置三种方法：定位、盒子外边距、2d转换

水平移动100px，垂直移动100px

1.语法：

2.注意：

参数可以用百分号，如50% 移动自身宽度的一半

水平居中垂直居中绝对定位：

top：50% left50%

transform：translate（-50%，-50%）/margin-top：-盒子的一半像素；margin-left：-盒子的一半像素

2.旋转：

1.语法：

2.注意：

3.旋转案例

3.缩放：

1.语法：transform：scale（x，y）；

不跟单位，数字就是倍的意思，x=2就是宽变为两倍

等比例缩放语法：transform：scale（z）；括号里面只有一个数字

2.div：hover

3.优点：

不会影响其他盒子，可以设置中心点

4.连写：

注意：treanslate位移写在最前面

13.动画（二）：

1.步骤：

先定义动画，在使用（调用动画）

1.用@keyframes定义动画（类似于定义类选择器）：

语法：

0% 和 100% 可替换为 from 和to

百分比*时间=每个状态所用的时间

2.使用动画：

语法：

animation：卡通片绘制 duration：持续时间

3.动画属性

ease种类：

简写：

不包括：

linear（匀速），前两个要写上

动画的速度曲线：

opacity（透明度）

animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1)（透视轮播图）

cubic-bezier即为贝兹bai曲线中du的绘制方法。

图上有四zhi点，P0-3，其中P0、P3是默认的dao点，对应了zhuan[0,0], [1,1]。而剩下的P1、P2两点则是shu我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

13.动画（三）：3D转换

透视写在父级中

知识点：

1.3D移动：transform：translate3d（x，y，z）

2.3D旋转：transform：rotate3d（x，y，z，deg）沿着自定义轴旋转deg角度

旋转方向：（左手法则）

左手法则：大拇指为x、y、z正方向，四指指的方向为正直（y轴正方向朝下）

xyz值要么是0，要么是1

3.透视：perspective

实现近大远小特点：改变perspective或z的大小（两者同时存在）

定义：

就是视距，透视越小，盒子越大,产生3d效果，在二维平面产生近大远小的特点

注意：写在父级元素中

4.3D呈现：transform-style

13.动画（四）：轮播图

1.z - index ：

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

*： z - index *（位置：绝对、位置：相对或位置：固定]

代码：

<title>轮播图-锚点</title><style>*{padding: 0px;margin: 0px;}     .href {/* 目的为了改变点击按钮的位置 =====子类*/position: absolute;top: 480px;left: 120px;}.href a {/* 为链接a添加相对定位，其他都是绝对定位======父类 */position: relative;width: 20px;height: 20px;background-color: #666666;float: left;margin-left: 15px;border-radius: 50%;}.images {/* 目的，使点击按钮放在图片之上 ======子类*/position: absolute;z-index: -1;}img {/* 设置图片的大小 =====子类*/position: absolute;width: 590px;}.im {/* 使用不到的图片隐藏 */display: none;}:target {/* 使伪类链接--隐藏的图片显示出来 */display: block;}</style>
</head>
<body><!-- 两个伪类链接 --><div class="href"><a href="#a"></a><a href="#b"></a><a href="#c"></a><a href="#d"></a></div><images><!-- 590*470 --><img src="sort1.png" alt="" ><img src="sort2.png" alt="" id="b" class="im"><img src="sort3.png" alt="" id="c" class="im"><img src="sort4.png" alt="" id="d" class="im"></images>
</body>
</html>
自动
<title>轮播图-自动</title><style>* {padding: 0;margin: 0;list-style: none;           }.images {width: 510px;height: 510px;position: relative;overflow: hidden;left: 350px;}.images ul {position: absolute;animation: move 8s ease-in-out infinite;}@keyframes move {0% {left: 0px;}25% {left: -510px;}50% {left: -1020px;}75% {left: -1530px;}100% {left: 0px;}}.images ul li {position: absolute;}li:nth-of-type(1){left: 0px;}li:nth-of-type(2){left: 510px;}li:nth-of-type(3){left: 1020px;}li:nth-of-type(4){left: 1530px;}img {width: 510px;}</style>
</head>
<body><div class="images"><ul><li><img src="sort1.png" alt=""></li><li><img src="sort2.png" alt=""></li><li><img src="sort3.png" alt=""></li><li><img src="sort4.png" alt=""></li></ul></div>
</body>
渐变轮播图
如何实现渐变效果动画: 主要就是改变图片的透明度来实现.代码如下
.container ul li {
position: absolute;
opacity: 0; /* 如果不改变默认透明度,那么后续的执行动画需要从最后一张开始,采用倒序 */
?
/* 动画设置 */
animation-name: fade;
animation-duration: 20s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-iteration-count: infinite;
}@keyframes fade {
0% {
opacity: 0;
z-index: 0;
}
25% {
opacity: 1;
z-index: 1;
}
50% {
opacity: 0;
z-index: 0;
}
}
?
.container ul li:nth-child(1) {
animation-delay: 0s;
}
.container ul li:nth-child(2) {
animation-delay: 5s;
}
.container ul li:nth-child(3) {
animation-delay: 10s;
}
.container ul li:nth-child(4) {
animation-delay: 15s;
}

14.网页布局：

阴影：box-shadow

box-shadow: -20px 10px 10px 100px #888888;

1.盒子定位

2.显示与隐藏

display（显示隐藏）、visibillity（显示隐藏）、overflow（溢出显示隐藏）

1.display属性：

display：none；

隐藏对象，不在占有位置

display：block；

转换为块状元素或显示元素

2.visibility属性：

visibility：visible；元素可见

visibility：hidden；元素隐藏，继续占着位置

3.overflow属性：

overflow：visible（默认）溢出的部分直接显示出来

overflow：hidden；溢出部分隐藏（定位的盒子慎用）

overflow：scroll；溢出时显示滚动条，不溢出时也显示滚动条

overflow：auto；只有溢出时才显示滚动条

溢出部分显示省略号：

实例：

 		<style>.tudou {position: relative;width: 444px;height: 320px;background-color: pink;margin: 30px auto;}.tudou img {width: 100%;height: 100%;}.mask {display: none;position: absolute;top: 0;left: 0;width: 100%;填充整个盒子height: 100%;background: rgba(0, 0, 0, 0.4) url(2.png) no-repeat center;/* alpha透明度 */}.tudou:hover .mask {display: block;}</style><body><div class="tudou"><div class="mask"></div><img src="1.png" ></div></body>

4.nth-child( ) 与 nth-of-type( )的定义与用法

1.nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式，比如：nth-child(odd) 奇数 ,nth-child(even) 偶数。

2.nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素，后者是查找同类型元素中某个绝对位置的元素。

5.实现文本居中

利用Flex布局实现、利用属性 line-height和text-align、利用position 定位来实现、利用 vertical-align 来实现

6.box-sizing

content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

译者注: border-box不包含margin

7.margin和paddding

adding(margin):10px 20px 30px; 10px是上内（外）边距；20px是左右内（外）边距；30px是下内（外）边距；
padding(margin):10px 20px 30px 40px; 10px是上内（外）边距；20px是右内（外）边距；30px是下内（外）边距；40px是左内边距；

https://blz.nosdn.127.net/1/tm/overwatch/events/2021KanezakaChallenge/KanezakaChallenge-HomeBanner-Desktop.jpeg

15.常用标签

定义文档类型

定义超文本链接
定义一个点击按钮

定义文档中的节定义了HTML文档的表单

to

定义 HTML 标题定义斜体字定义图像定义输入控件

定义列表的项目定义文档与外部资源的关系定义关于 HTML 文档的元信息。

定义有序列表。
定义段落。标签为媒介元素（比如和）定义媒介资源。定义文档中的节。

考核重点：

一、点位：四种

普通定位top bottom left right 相对定位relative 绝对定位absolute

静态定位static

固定定位 fixed

粘性定位sticky

二、css单位的种类和区别 em字节 px像素

三、颜色的表示方法

1.RGB（RGBA）

2.直接用英文

3.十六进制

4.hsl（色相，饱和度，亮度）

5.直接设置透明度 transparent

四、浮动float(none、left、right)

清除浮动的方法：

1.在父元素结尾处添加空的div标签，clear:both。
优点：简单，代码少，浏览器支持好，不容易出问题；

缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。

2.给父元素添加before，after为元素。
优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持
缺点：代码多

3.给父元素添加overflow:hidden属性。

必须定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：代码少，简单，浏览器支持。
缺点：不能配合position使用，因为超出部分被隐藏

4.父元素一起浮动，所有代码浮动变成一个整体，但是会产生新的问题，只做了解不推荐使用。

5.父级div定义display:table ，只做了解不推荐使用。

在浮动层下，设置空DIV，代码如下：

复制代码

说明：
clear: both;可以让元素不受到浮动层影响，排到浮动层的底下，
而父级可以包住最底下这个空DIV，这样看起来，它似乎也就包住那个浮动层了，
其实是障眼法哈～

缺点：IE6下会多出1像素来，并且设置了无语义的空DIV；

在父级设置：overflow: hidden;

复制代码

说明：overflow: hidden; 用它是为了提高父级的层级，层级提高了，自然能包住子级浮动元素了。

缺点：要是父级里面有什么元素居然飘到父级以外的地方，那就悲剧了，例如很多JS的提示层效果，

就不能用 overflow: hidden;

在父级设置：float

复制代码

说明：父级包不住浮动层，因为层级不够，那父级也设置float好喽

缺点：父级如果也有父级，也要设置浮动，那用这种方法，一路浮动到body那儿才算完事儿～～呃。。此方法本身就很滑稽

在父级设置：display: inline-block;

复制代码

说明：inline-block; 是一个不兼容的属性，但用在这里只是为了提高父级层级，
如此一来，可以完全忽略它的不兼容性哈～

缺点：设置不了元素居中：margin-left: auto; margin-right: auto;
你可以在不需要居中的元素上使用这方法哈～

父级如果是绝对定位：position: absolute;

复制代码

说明：要说层级，那绝对定位必定是老大，在绝对定位眼中，小小的浮动也居然敢称层级？？

缺点：position: absolute;会影响布局，它是相对父级的块元素为参照物进行定位，
完全不按文档流的方式走，呵呵，所以如果你要是在绝对定位的元素里设置浮动，那就尽情设置吧，

不必理会任何浮动神马的，因为在绝对定位下，浮动啥的，真的是浮云了～

给浮动层下设置：

复制代码

说明：短小精炼的一行代码，很有效哈，对此代码不了解？
看看这里吧：
http://www.blueidea.com/tech/web/2007/4576.asp

给父级加上这行吧：
.clear:after { content: ‘\20’; clear: both; display: block; }

复制代码

说明：:after 是一个很好用的属性，有了它，可以往任何元素里插入字符串、空格啦，’.'之类的，
但可惜，IE6，IE7不认识:after，不过，又有什么关系呢？
反正IE6\IE7的父级能包住浮动层，所以不必管它们喽～
忘了解释了，先给浮动层底下插入一个空格（content: ‘\20’;），再把这个空格转成块元素，并且清除浮动层的影响，让父级包住这个空格，也是障眼法哈～

五、锚点链接targe在何处打开链接

文档流、定位连用

相对定位：相对位置的坐标参考系是以自己上一次的位置（x，y）作为原点（0，0）。

绝对定位，即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。

固定定位，即完全脱离文档流，相对于视区进行偏移。

CSS3的filter(滤镜)属性详解

参考链接：

https://blog.csdn.net/fantasy_geek/article/details/104936483?ops_request_misc=&request_id=&biz_id=102&utm_term=css%E7%9A%84brightness&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-1-104936483.pc_search_result_no_baidu_js

HTML+css学习 学习笔记，由浅入深

HTML5知识点总结

文章目录

一、网页（网站、网页）

什么是HTML: 是一种用来描述网页的一种语言

二、浏览器

三、Web标准（使代码更规范更简介更通用）

HTML语法规范：

结构标签的总结：

lang语言："en"定义语言为英文，"zh-CN"定义语言为中文

路径

1目录文件夹和根目录

2相对路径和绝对路径

特殊字符（空格 &nbsp+; 小于号&lt+; 大于号&gt+;）

常用标签：

1.语义标签：标题标签、段落和换行、不换行标签

2.文本格式化标签（粗体倾斜、删除线、下划线）

4.图像标签

图像标签的属性：

alt：图片显示不出来时用 alt文字替换的方法

title：鼠标放在图片上能显示文字

width，heigth 设置图片的宽高，只设置一个时另一个会等比例自己缩放

复制图片地址导入自己的网页：

5.超链接标签（重点）

1 语法格式

2 链接分类

1.外部链接 ：

2.内部链接：

3.空链接：

4.下载链接：

5.网页元素超链接：

6.锚点链接： 两部曲

6.注释标签：

7.表格标签

1.表格的基本语法：

2.表头单元格标签：（用th表示，table hand的缩写） ，效果居中加粗显示

3.表格的属性：

align对齐方式；border边框，1有边框，默认为” “ 无边框；cellpadding像素距离边框的距离；cellspacing单元格和单元格之间的空隙，默认2像素；width表格的宽度大小。

4.表格结构标签：更加清晰简洁

5.合并单元格（rowspan 跨行；colspan跨列）：

合并单元格三部曲：

8.列表标签（占一行）

1.无序列表：（ul li）（重点）

2.有序列表：（ol li理解）

3.自定义列表：（dl dt dd重点）

4.列表总结：

9.表单标签

1.表单的组成：表单控制、表单域、提示信息

2.表单域：（了解）

3.表单控件（表单元素input、select、texarea）

1.imput表单元素：

2.select下拉表单元素：

3.textarea文本域表格元素：（可以输入很多文本区域）

4.type属性：

1.radio多选一，checkbox复选框多选（他们名字必须都相同）。

2.添加value后，文本框中直接出现添加的value值；

3.给他们设置checked后，打开后默认已经被勾选；

4.maxlength=“6” 规定只能输入六个字符；

5.submit提交 加value修改自定义字体内容，点了之后可以把表单域中的表单元素送给后台服务器。

6.reset重置 加value修改自定义字体内容，点了之后表单域中所有的东西恢复原状

7.button普通按钮 后期搭配js使用

8.file文件域 需要上传文件时添加此功能

9.placeholder：用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖

10.lable标签

css知识点总结

css单位详讲

1.1 相对长度 单位

1.1.1 字体的 相对长度

1.1.3 百分比 单位 (%)

1.2 绝对长度单位

时间单位 (s , ms)

时间单位

目录：

1.为什么要用css：

2.css语法规范：

3.css代码风格：样式格式书写、样式大小写风格、样式空格风格

1.样式格式书写：（提倡用第二种）

2.样式大小写书写：

3.样式空格风格：

4.css基础选择器

HTML+css学习学习笔记，由浅入深

1.外部链接：

6.锚点链接：两部曲

2.表头单元格标签：（用th表示，table hand的缩写），效果居中加粗显示

5.submit提交加value修改自定义字体内容，点了之后可以把表单域中的表单元素送给后台服务器。

6.reset重置加value修改自定义字体内容，点了之后表单域中所有的东西恢复原状

7.button普通按钮后期搭配js使用

8.file文件域需要上传文件时添加此功能

1.1 相对长度单位

1.1.1 字体的相对长度

1.1.3 百分比单位 (%)