基础语法&标签
1.建立站点
html、css、js、images、等文件夹和index.html文件
2.基础知识
1.<!DOCTYPE html>注记 翻译html 兼容低版本会造成页面串行
英文
<head></head> 定义窗体信息 外部引入文件
放置页面显示信息
3.基础标签
-
p 段落标签, h1~h6标题标签, (b,strong)加粗标签
（i,em)倾斜标签 sub,sup左上角右上角 hr br
转义字符有
特殊字符 描述 代码 空格 < 小于号 < > 大于号 >
常用的标签&表格属性
1.常见标签
1.列表
有序：ul>li
无序：ul>li
自定义：dl>dd+dt(dt解释dd)
2.超链接a
| 属性 | 说明 |
|---|---|
| href | 用于指定链接的url地址，（必须属性）当为标签应用href属性时，具有超链接功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，__blank为新窗口打开。 |
3.图片img
| 属性 | 属性值 | 说明 |
|---|---|---|
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 只修改一个的话，另一个会等比例缩放 |
| height | 像素 | 只修改一个的话，另一个会等比例缩放 |
| border | 像素 | 图像边框的粗细 |
2.表格
1.基础表格
| 属性名 | 属性值 | 说明 |
|---|---|---|
| align | left 、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1或者“” | 规定表格单元是否拥有边框，默认“”，即没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格宽度 |
- 合并单元格
跨行合并 rowspan=“合并单元格的个数”
跨列合并 colspan=“合并单元格的个数”
2.高级表格
1.单元格之间的间距
属性:border-spacing
- 给table设置、属性值为数值加单位不可以接负值
- 单元格之间的间距清除掉后 两个相邻单元格之间的边框是相连的
2.合并相邻的单元格边框
属性:border-collapse
属性值
- collapse 合并
- separate 默认值 分开
3.无内容时单元格的设置
属性:empty-cells
属性值
- show 显示
- hiden 隐藏
4.单元格中的计算属性
属性:table-layout
属性值:
- auto 默认值
- fixed 固定
5.表格的列标题
标签名称:th (td写法一样)
6.表格的名称
标签名称:caption
属性:caption-side:top/right/bottom/left
7.数据的行分组
- tbody(table) 表格中的主体内容 默认都会显示一个 可以写多个
- thead+tfoot 成双成对 只能有一个
8.数据的列分组
- col/colgroup
- 属性 span 选择到几个 将几列归为一组
- 只有一个属性可以使用width
3.表单
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素)和提示信息3个部分构成。
1.表单域
标签用于定义表单域，实现用户信息的收集和传递。标签会把它范围内的表单元素信息提交给服务器
常用属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | url地址 | 用于接收和处理表单数据的服务器程序的url地址 |
| method | post/get | 用于设置表单数据的提交方式，post或者get |
| name | 名称 | 用于指定表单域的名称，用于区分同一个页面的多个表单域 |
2.表单控件
1.input表单元素
标签，用于收集用户信息，包含一个type属性
<input type="属性值">
-
为单标签
-
type属性设置不同属性值用来指定不同的空间类型
-
type属性值：
属性值 描述 button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。 checkbox 定义复选框。 file 定义输入字段和"浏览""按钮，供文件上传。 hidden 定义隐藏的输入字段。 image 定义图像形式的提交按钮。 password 定义密码字段。该字段中的字符被掩码。 radio 定义单选按钮。 reset 定义重置按钮。重置按钮会清除表单中的所有效据。 submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。 -
除type属性外，标签还具有其他属性：
属性 属性值 说明 name 用户定义 定义input元素的名称 value 用户定义 规定input元素的值 checked checked 规定此input元素首次加载时应当被选中 maxlength 正整数 规定输入字段的字符的最大长度 placeholder 框内输入提示文本 -
name和value是每个表单元素都有的属性值，主要给后台人员使用。
-
name表单元素的名字，要求单选按钮和复选框都要有相同的名字。
-
disable定义表单无法使用
-
表单字段集
标签名称:
默认样式
- 块级元素、自带边框
- 可以做多层嵌套
- disabled 表示禁止用户填写个人信息
-
字段级标题
标签名称:legend
属性:align:left right center
注意:通常作为表单中(fieldset)第一个子级元素
-
-
<label for="male">男</label> <input type="radio" name="gender" id="male">
2.select下拉表单元素
多个选项供用户选择，并且想要节约空间时。
标签定义下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
123456
- 中至少包含一对
- 在中定义
selected="selected"时，当前项即为默认选择项
3.textarea文本域表单元素
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。
标签，用于定义多行输入的控件 ```html 在此是显示在文本域的内容123
1. cols=“每行中的字符数”，rows=“显示的行数”，**实际开发不会使用，都是通过CSS来调整**
# **css基础**
### **1.基本语法**
主要有两部分组成：**选择器**、**一条或多条声明**
1. 选择器是用于指定CSS样式的**HTML标签**，花括号内是对该对象设置的具体样式
2. 属性和属性值以**“键值对”**的形式出现
### 2.样式表的创建：
1. 行内式************优先级最高
2. 内部式
3. 外部式（2和3取决于与元素的距离）
### 3.常见的选择器
1. 基础选择器
2. 复合选择器如下：
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| ---------------- | ---------------------- | ---------------- | -------- | ------------------------ |
| 后代选择器 | 选择后代元素 | 可以是子孙后代 | 较多 | 空格 .nav p |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 大于号 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 逗号 .nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住a {} 和a:hover{} |
| :focus链接选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus |
### **4.css的三大特性**
css有三个非常重要的特性：**层叠性**、**继承性**、**优先级**
#### 1.重叠性
相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠）\**另一个冲突的样式。层叠性主要\**解决样式突的问题**
层叠性原则：
- 样式冲突，遵循的原则是就近原则，
- 样式不冲突，不会层叠
#### 2. 继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
- 恰当地使用继承可以简化代码，降低css样式的复杂性
- 子元素可以继承的样式：text-，font-，line-这些开头的元素，以及color属性
特别的，行高的继承。
- 行高可以跟单位也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高
- 如果子元素设置了行高，此时行高为：文字大小*1.5
- body行高为1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
#### **3.优先级**
| 选择器 | 权重[1](https://blog.csdn.net/weixin_44524703/article/details/121071964?ops_request_misc=%7B%22request%5Fid%22%3A%22164528116716780261942413%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fall.%22%7D&request_id=164528116716780261942413&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-15-121071964.first_rank_v2_pc_rank_v29&utm_term=pink老师&spm=1018.2226.3001.4187#fn1) | 优先级 |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------ |
| ！important[2](https://blog.csdn.net/weixin_44524703/article/details/121071964?ops_request_misc=%7B%22request%5Fid%22%3A%22164528116716780261942413%22%2C%22scm%22%3A%2220140713.130102334.pc%5Fall.%22%7D&request_id=164528116716780261942413&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-15-121071964.first_rank_v2_pc_rank_v29&utm_term=pink老师&spm=1018.2226.3001.4187#fn2) | +∞ | 高 |
| 行内样式 | 1，0，0，0 | \| |
| id选择器 | 0，1，0，0 | \| |
| 类选择器、伪类选择器 | 0，0，1，0 | \| |
| 标签选择器 | 0，0，0，1 | ↓ |
| 继承、通配符选择器 | 0，0，0，0 | 低 |
# 盒子模型
### 1.浮动
#### 1. 什么是浮动
**float**属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
```css
float: 属性值
| 属性值 | 说明 |
|---|---|
| none | 元素不浮动（默认） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
2.浮动特性（重难点）
- 浮动元素会脱离标准流（脱标）
- 浮动元素会一行内显示并且元素顶部对齐
- 浮动元素会具有行内块元素的特性
3.清除浮动
1.清除的原因
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响
2.清除的本质
- 清除浮动本质就是清除浮动元素的影响
- 如果父元素本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流
clear:属性值;
| 属性值 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
3.清除的方法
| 清除浮动方式 | 优点 | 缺点 |
|---|---|---|
| 额外标签法 | 通俗易懂、书写方便 | 添加许多无意义标签, 结构化差 |
| 父级overflow: hidden | 书写方便 | 溢出隐藏 |
| 父级:after伪元素 | 结构语义化正确 | IE6、7不支持:after,兼容性差 |
| 父级双伪元素 | 结构语义化正确 | IE6、7不支持:after,兼容性差 |
2.盒模型
所谓盒子模型∶就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括:边框、外边距、内边距、和实际内容
- 边框：border
- 外边距：magin
- 内边距：padding
- 内容：content
1.边框
border可以设置元素的边框。边框由三部分：边框粗细、边框样式、边框颜色
border: border-width|border-style|border-color;
1
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，单位是px |
| border-style | 边框的样式，重点记住solid实线、dashed虚线、dotted点线、double双实线、（groove定义3D凹槽边框 、ridge定义3D垄状边框、 inset定义3Dinset边框 、outset定义3Doutset 边框） |
| border-color | 边框颜色 |
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapes: collapse;
2.外边距magin
1.margin属性用于设置外边距，控制盒子与盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
2.外边距合并
使用margin设置块级元素的上下外边距时，可能会出现外边距的合并。
-
相邻块级元素垂直外边距（上下外边距）的合并
当上下两个块级元素（兄弟关系），上面的块级元素设置了下外边距100px，下面的块级元素设置了上外边距200px，但它们之间的边距只为200px，这就是外边距的合并。这种情况外边距仅取最大的外边距。
- 解决方案：
尽量只给一个盒子添加margin值
-
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会先较大的外边距值。
- 解决方案：
- 为父元素添加上边框
- 为父元素添加内边距
- 为父元素添加
overflow: hidden；推荐使用这种方法，不会增加盒子的宽度 - 其他方法比如：浮动、固定、绝对定位的盒子
- 解决方案：
3.内边距padding
padding属性用于设置内边距，即边框与内容之间的距离
- padding会影响盒子实际大小
当我们给盒子指定padding值之后，发生了2件事情:
- 内容和边框有了距离，添加了内边距。
- padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案∶
如果保证盒子跟效果图大小保持一致，则让width/height减去多出来的内边距大小即可。
特别地，如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小.
css核心
1.盒模型
1.盒模型的计算(标准盒模型)
1.计算盒子的自身大小 content+padding+border
2.计算盒子的真实大小 content+padding+border+margin
2.边框
-
边框的颜色:border-color
- 英文单词 red
边框的大小:border-width
- 常规属性值(数值+单位)
边框的样式:border-style
- solid(实线) dashed(虚线) dotted(点线) double(双实线)
3.文字大小
-
属性:font-size
属性值:
- 常规属性值 20px(像素-web页面中常用的固定值单位)
- 在浏览器中默认的字体大小是16px
- 默认设置最小的值是12px(可以更小 但是浏览器存在差异) 建议设置偶数
- 常用单位
- pt 硬件设备 打印机 磅
- em 相对单位 相对于父级元素进行计算 首航缩进
- rem 相对单位 相对于html元素进行计算 移动端
4.字体类型和粗细，倾斜
-
font-family:‘Times New Roman’, Times, serif,‘微软雅黑’
/* 备胎1,备胎2,备胎3… */
-
1.加粗属性 font-weight
属性值:
- 数字 100~900之间的整百数 100~500表示正常的 600~900表示加粗
- bold 加粗
- bolder 更粗的
- 重要:normal 正常的 清除加粗样式
2.倾斜属性 font-style
- italic 倾斜的
- oblique 更倾斜的
- 重要:normal 清除倾斜样式
5.font简写
- - font-weight font-style font-size/line-height font-family
- font-weight font-style 顺序是可以颠倒的
- font-szie/line-height是固定的 不可更改
- family-family一定得加 默认为微软雅黑
6.文本修饰和文本颜色
1.文本修饰
文本修饰 text-decoration
属性值
- underline 添加下划线
- overline 添加上横线
- line-through 添加删除线 del标签
- 重要:none 清除默认的下划线标签样式
1.首航缩进 text-indent
- 属性值数值+单位 (px/em)
- 正值、负值都可以使用
- 只针对于第一行文本
2.字间距 letter-sapcing
3.词间距 word-spacing
2.文本颜色
属性:color 不要写成font-color
属性值
- 英文单词
- 十六进制
- 以#开始 后面接六位字符(0123456789a-f) #12 34 56
- 后面的六位字符如果是相同的时候 可以简写成3位 #ffffff #ccc #000 #333
- 如何获取设计图上的颜色? ps吸管工具
- rgb(red, green, blue) red green blue 取值范围是0~255之间
- rgba(red, green, blue,alpha) 透明度0~1
拓展:
- 透明 transparent
- rgba() 只针对于某一个属性
- opacity 0~1 针对于当前元素中所有属性
7.背景属性
1.背景颜色 background-color/background
属性值:与文本颜色一样
2.背景图片
属性:background-image
属性值:url()
- 当容器大小大于背景图片的时候 背景图片会默认平铺到容器
- 当容器大小等于背景图片的时候 背景图片会默认会铺满容器
- 当容器大小小于背景图片的时候 背景图片会默认显示一部分
注意:使用背景图片或者背景颜色前提条件是容器一定要有宽高大小
- img图片引入方式和背景图片的区别?
- img占位置 背景图片不占位置
3.背景平铺属性
属性:background-repeat(重复)
属性值:
- no-repeat 不平铺
- repeat 平铺
- repeat-x/y
4.背景图片定位
属性:background-position
属性值
- 水平方向
- 法定的属性值:left right center
- 常规的属性值:数值+单位
- 垂直反向
- 法定的属性值:top bottom center
5.背景图片的固定
属性:background-attachment
属性值
- scroll 滚动
- fixed 固定
6.简写属性
属性:background
属性值:颜色 图片 平铺 位置 固定
8.列表属性
1.设置列表的默认样式
属性:list-style-type
- disc默认值 实心圆
- circle 空心圆
- square 实心方块
- none 清除列表的符号样式（列表的符号是有兼容问题的）
2.设置图片作为列表符号样式
属性:list-style-image
属性值:url()
3.定义列表符号位置
属性:list-style-position(位置、定位)
属性值:inside、outside
4.简写
list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position
以任何顺序接受一个，二个或者三个关键词
文本溢出
1.overflow属性
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
2.省略号的写法
/* 文本强制性的在一行显示 */
white-space: nowrap;
/* 超出去的文本需要隐藏起来 */
overflow: hidden;
/* 隐藏的文本变成省略号 */
text-overflow: ellipsis
拓展一个属性contenteditable：表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。
值有true/false
元素显示模式
元素类型的分类
- 根据Xhtml的分类:块级元素/块元素/块状元素、行内元素/内联元素、可变元素(转换)
- 根据css2.1分类:块级元素/块元素/块状元素、行内元素/内联元素、行内块元素(从行内里面分出来的一种)
1.块元素:div p h ul li ol dl
- 可以直接设置宽高大小 通常都是以一个矩形形状在浏览器中显示出来
- 块元素会独占一行 默认上下排列
- 作用:块元素用来嵌套行内元素或者其他元素类型作为一个盒子实现网页布局
2.行内元素:a、span、i、em、b、strong
- 不能直接设置宽高大小
- 宽高大小是由内容决定的
- 行内元素会在一行内逐个左右显示
- bug:margin-top/bottom是没有作用的
3.行内块元素:input
- input可以直接设置宽高大小 => 块元素
- input可以在一行内逐个显示 => 行内元素
- 行内块元素具有两个共同的特点
- 所有的行内块都是以基线对齐(布局问题) vertical-align:top、bottom、middle
垂直居中
1.line-height方法
- 文本居中:line-height=height
- 图片居中：使 line-height 可以实现图片的垂直居中，只需要在包含图片的父元素上设置 line-height 然后为图片设置
vertical-align: middle。
2.display:table-cell方法
-
之前已经提到 vertical-align 适用于 table-cell, 因此可以通过将元素转化为table来实现垂直居中。
html
<div id="parent"> <div id="child">Text here</div> </div>css
#parent { display: table; } #child { display: table-cell; vertical-align: middle; }
定位
属性值
- static 默认值 表示静态定位
- relative 相对定位（不脱标）
- absolute 绝对定位（脱标）
- fixed 固定定位（脱标，且相对于浏览器进行定位）
- sticky 粘性定位（- 粘性定位结合了相对定位和固定定位的特点
- 相对定位=>不脱离文档流
- 固定定位=>相对于浏览器定位）
定位的方向值
- top right bottom left
- 百分比 常规的属性值(数值+单位)
拓展：
- 普通流:普通层 正常的网页布局
- 浮动流:浮动层(一层) 浮动属性
- 定位流:定位层(两层)
层叠属性
层叠属性 z-index
属性值: 数字
- 数字越大 层级越高 就会往上面显示
- 还可以使用负数
- 使用层叠属性的前提条件是 必须要在定位环境下
宽高自适应
1.宽度自适应的使用
属性:width
属性值:px、%
- 在网页布局中当前元素是块元素 设置宽度为100%的情况下或者不设置 宽度会沾满浏览器的全屏(通栏效果)
- 如果块元素不设置宽度的时候 默认和父级等宽(浏览器的默认宽度是100%)
- 重点:当元素脱离文档流的时候 宽度由内容决定
=> 设置脱离文档流属性的时候 元素一定记得要设置宽高大小!!!
2. 高度自适应的使用
属性:height
属性值: px %
- 高度不设置或者设置成auto的时候 不显示 由内容撑开(高度自适应)
- height:100%的情况
- 浏览器宽度默认是100% 但是高度默认为0
- html,body{height:100%} 全屏案例、移动端布局前提必要提交
- img{width:100%;height:100%} 图片会拉伸变形
3.最大值，最小值
最大值
- max-width
- max-width:1920px 100%
- max-height
- 评论区 分页效果 折叠
最小值
- min-width
- 重要
- min-height
- 自适应
高度塌陷
造成原因
- 父级没有设置高度 => 做到自适应
- 子级设置脱离文档流的属性 => 不能撑开父级的高度
解决高度塌陷的问题方法
1.给父级添加高度 height:value
总结：可以解决高度塌陷的问题 但是无法做到自适应
2.可以给父级添加overflow:hidden属性
原理:只要使用了文本溢出属性 就会触发BFC(块级格式化上下文) 浮动元素也可以参加高度计算
总结:好用简单 如果子级元素有超出父级区域会被隐藏起来 导致网页布局不全
3.在当前最后一个子级元素后面添加任意标签 设置clear:both
解释:clear清除浮动 left right both
原理:清除浮动 清除上方预留出来的空间
总结:简单 前端中常用 但是添加多余的标签会造成代码冗余 结构错乱
4.万能清除法(将以上方法结合在一起)
使用方法:给出现高度塌陷的父级区域添加类名 clear-fix
.clear-fix::after{
content:‘’;
display:block;
width:100%;
height:0;
overflow:hidden;
clear:both;
visibility:hidden
}
总结:万能清除法不要求理解 只要会用就可以了
BFC布局规则
1、内部的Box会在垂直方向，一个接一个地放置。
- 元素类型:块元素
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 盒模型 margin值
3、每个元素的margin box的左边， 与包含块border box的左边相接触
- 设置margin值的时候 必须要有包含框的接触
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- html就是一个独立的容器 最大的BFC
5、BFC的区域不会与float box重叠。
- 常见的后台布局 两栏布局(左右)
6、计算BFC的高度时，浮动元素也参与计算
- 宽高自适应而引发的bug 高度塌陷(父级没有高度 子级含有浮动属性)
- 使用了overflow:hidden
音频的设置和智能表单
1.音频标签
<audio src="images/晴天.mp3" controls autoplay loop muted></audio>
2.视频标签
<!-- <video src="images/kk.mp4" controls loop muted poster="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.huanghepiao.com%2Fd%2Ffile%2F20210818%2F2d32c1e26447878ff711210852e9e86c.jpeg&refer=http%3A%2F%2Fimage.huanghepiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648712606&t=dc73b068dea80c92d7f5aedee3dbf181"></video> -->
音频标签
标签名称 audio
视频标签
视频标签 video
属性
- src 文件的路径地址
- controls 控件
- autoplay 自动播放
- loop 循环
- muted 静音
- 视频独有的属性 poster 表示当视频还在加载准备中的首张图片
注意
- 当设置了自动播放和静音的时候 在火狐浏览器中会自动播放
- 视频如果设置了自动播放和静音的时候 也会自动播放
3.智能表单
邮件:数字:
地址:
滑块:
搜索:
颜色:
时间:
日期:
月份:
周数:
本地时间:
智能表单的使用
- 需要放在form标签中 并且要有提交按钮
- 如果标签内不写任何内容的时候 可以进行提交
- 如果标签内书写内容的时候 就会检测当前的内容是否符合智能表单要求格式
- 智能表单只能检测当前的格式是否正确 不能检测当前所填内容是否真实存在
属性
- required 强制性 要求的
- min、max 最小 最大
- step 步幅 间距 间隔
4.表单属性
例：
<input type="text" autofocus autocomplete="on" name="history"> <br>
<input type="file" multiple> <br>
1.输入框中提示文本
- value 占位置
aceholder 不占位置
- 关于字体颜色的设置 input::-webkit-inputplaceholder{}
2.autofocus 自动聚焦
- 打开浏览器 光标会自动聚焦到当前的输入框内
- 网页只能有一个自动聚焦
3.autocomplete 历史记录
- 必须要有提交记录
- 打开(on)或者关闭(off)
- 设置name属性 属性值任意
4.novalidate 取消验证
- 写在最大的form上
5.multiple 设置多个值
- file 文件类型
6.验证属性 pattern = "属性值是正则表达式(js)"
- 智能表单只能验证当前的格式 是否正确的 但是这个内容是否真实存在是无法验证
- 考虑用一种方法验证当前填入的个人信息必须要真实点
- 邮箱:符合格式 常见的邮箱 保证qq号码是在一个范围内 (1@qq.com)
c3新增选择器
1.属性选择器
- E[attr =“value”]：指定属性名，并指定了该属性的属性值
- E[attr ~=“value”]：指定属性名，并且具有属性值，其中词列表中包含了一个value
- E[attr ^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的 任意一个字符都可以
- E[attr $=“value”]：指定了属性名，并且有属性值，属性值是以valu结束的 任意一个字符都可以
- E[attr *=“value”]：指定了属性名，并且有属性值，而且属值中包含了value
- E[attr |=“value”]：指定了属性名，并且属性值是value单独存在或者以“value-”开头的值;
2.结构选择器
1.第一种情况:当标签名称都是相同的情况下 会组成一个集合 然后从集合中进行选择
- X:first-child 集合中第一个子级元素
- X:last-child 集合中的最后一个
- X:nth-child(参数:选择的第几个){} 从前往后
- X:nth-last-child(){} 从后往前
- X是标签的集合
- 参数的使用
- 可以是一个数字 表示第几个
- 默认可以填写一个n 表示全部
- 2n 3n 某个数的倍数
- odd/even 奇数/偶数
2.第二种情况:当标签名称不相同的情况下
- 第一件事情 先把相同的标签进行筛选组成一个新的集合
- 第二件事情 在这个集合中选择第几个
- X:first-of-type 集合中第一个子级元素
- X:last-of-type 集合中的最后一个
- X:nth-of-type(参数:选择的第几个){} 从前往后
- X:nth-last-of-type(){} 从后往前
注意点
- of-type的这种写法是先筛选 筛选条件是当前的标签一定是同级元素
3.目标选择器
语法： E:target 匹配锚点链接连接到的那个元素
eg: p:target{display:block;}
当锚点链接连接到p元素时显示
4.ui选择器
1.E:checked 匹配选中状态的单选或复选按钮
eg: input:checked+label{color:red;}
匹配选中状态的input元素后面紧邻的label元素
2.E:disabled 匹配禁用状态的表单元素
eg: input:disabled{background:red;}
3.E:enabled 匹配启用状态的表单元素
eg: input:enabled{border:2px solid green;}
5.否定伪类选择器
语法：E:not(F) 匹配不满足条件F的E元素
eg: li:not([class=“lis”]){background:pink;}
匹配不满足条件class名为lis的li元素
背景
1.背景尺寸 background-size
-
100% 100% 宽度 高度 自适应到父级盒子 两个属性值虽然是相同的但是不可以省略
-
0% auto当宽度自适应到父级的时候 高度就会停止变化
-
cover 覆盖 等比例进行变化 宽高碰到父级区域的时候才会停止 (不会变形)
-
contain 覆盖 宽高哪个先碰到父级边框就会停止变化
2.background-origin
背景图片的定位区域。
3.background-clip
背景的绘制区域。
颜色渐变
1.线性渐变
线性渐变的使用
属性:background
属性值:linear-gradient(多个参数)
- 第一个参数表示方向
- 第二个参数表示颜色值
- 第三个参数表示颜色值
- 第四个参数表示颜色值
- ....
-
标准写法
- 方向值是可以不写的 默认从上到下 - 从一个方向到另一个方向 to 结束的方向值 例子：background: linear-gradient(to right, red,green) - 从一个角到另一个角 to 结束的水平方向 结束的垂直方向 - 角度值 deg 例子：linear-gradient(30deg, red,green)
2.兼容写法(需要在属性值前面添加浏览器前缀的！！！)
- 方向值是可以不写的 默认从上到下
- 从一个方向到另一个方向:不可以使用to 并且要使用开始方向 例： background: -webkit-linear-gradient(right, red,green);
- 从一个角到另一个角:不可以使用to 并且开始的水平方向 开始的垂直方向例： background: -moz-linear-gradient(30deg, red,green);
- 角度值 deg 90-标准写法角度值
2.径向渐变
径向渐变的属性:background
属性值:radial-gradient(多个参数)
\- 第一个参数表示渐变的起点位置
\- 默认值是当前盒子的中心点
\- 法定的属性值:left、right、top、bottom、center
\- 常规的属性值:坐标值 (200px 200px)
\- 第二个参数表示渐变的形状
\- ellipse默认是椭圆形 circle 圆形
\- 第三个参数表示渐变的大小
\- 第四个参数表示渐变的颜色值
\- 第五个参数表示渐变的颜色值
\- ....颜色值
1.兼容写法（径向渐变只有兼容写法）
background: -webkit-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px)
3.重复渐变
重复渐变使用 background
\- 重复线性渐变 repeating-linear-gradient()
\- 重复径向渐变 repeating-radial-gradient()
background: repeating-radial-gradient(50% 50%, circle, #f9f9f9, #cccccc 20px);
过渡
概念:控制元素从初始状态到结束状态的运动方式等 (都是存在的 不可以用display:none和block)
1. transition-property 检索或设置对象中的参与过渡的属性
- 属性值可以使用多个 表示当前参与过渡的属性 之间用空格隔开即可
- 设置成all 表示全部属性都可以参与过渡
- 属性值不设置 默认全部属性都可以参与过渡
2. transition-duration 检索或设置对象过渡的持续时间
- 用户最佳的体验时间是0.8s
- 常用的单位是ms s
3. transition-delay 检索或设置对象延迟过渡的时间
- 常用的单位是ms s
- 了解
4. transition-timing-function 检索或设置对象中过渡的动画类型
5.简写方式
属性：transition
属性值：0.8s linear
/* transition-property: all; /
/ transition-duration: 2s; /
/ transition-delay: 3s; /
/ transition-timing-function: ease-in-out */
transition: 2s linear
2d属性
-
位移
位移属性的使用 transform 属性值:translate(参数) - 参数可以设置两个方向 x和y轴 - 如果只有一个参数表示x轴 - 如果有两个参数，参数需要用逗号隔开 表示x和y轴的距离 - 只设置一个方向 - translateX() - translateY() - 定位是会脱离文档流的,位移不会脱离文档流 例：transform: translateX(100%) transform: translateY(100px) transform: translate(100px,100px) -
缩放
缩放属性的使用 transform 属性值:scale(参数) - 参数的使用 - 参数有两个 逗号隔开 放大缩小x/y 改变宽高 - 参数有一个 宽高相同变化 - 小于0 先缩小(0)后放大 沿着Z轴旋转180度 - 等于0 隐藏 - 大于0 小于1 缩小倍数 - 等于1 保持初始状态 - 大于1 放大倍数 - scaleX()/scaleY() 例：transform: scaleX(-2) transform: scaleY(2) transform: scale(0) -
旋转
旋转属性值:rotate(参数) - 参数只有一个 默认值 沿着Z轴进行旋转 - 参数只能是角度值 角度是正值沿着顺时针旋转 角度值是赋值沿着逆时针旋转 - rotateX() 单杠运动 - rotateY() 钢管舞 例：transform:rotatex(30deg) transform:rotatey(30deg) transform:rotate(30deg) -
倾斜
倾斜属性值:skew() - skew(x,y) 角度值 - skewX() - skewY() 例： transform:skewY(30deg) transform:skewX(30deg) transform:skew(30deg)5.变形原点
变形原点属性: transform-origin:center center 属性值 - x:left、right、center - y:top、bottom、center
6.景深效果
景深效果:近大远小（距离Z=0的位移大小）
两种用法:
- 可以给父级元素添加 perspective:1200px
- 可以给子级元素添加
transform:prespective(1200px)
注意
- 属性值可以设置为100px~1200px之间的任意整百数
- 建议使用1200px 最佳的观察位置
- 建议给父级元素设置景深效果
3D属性
1.形成条件
形成3d空间属性 transform-style 给父级添加
- flat 默认值2d空间
- preserve-3d 形成3d空间(多了z轴)
2.属性
1.位移的使用
- translate() 参数可以设置一个或者两个
- translateX()
- translateY()
- translateZ() 沿着z轴位移
- translate3d(x,y,z) 沿着xyz三个轴向位移
2.旋转的使用
- rotateX()
- rotateY()
- rotateZ() 和 rotate() 效果是一样的
- rotate3d(四个参数)
- 前三个参数是矢量值 0(关闭)/1(打开)
- 第四个参数表示角度值
- rotatex(30deg) rotatey(30deg) rotatez(30deg) => rotate3d(1,1,1,30deg)
3.缩放的使用
- scaleX()
- scaleY()
- scaleZ()和scale3d（）函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果
4.3D没有倾斜
动画
1.动画创建
1.单次运动（从开始到结束 from…to）
例：
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
2.多次运动
@keyframes divMove{
0%{left: 0;top: 0;}
25%{left: 400px;top: 0}
50%{left: 400px;top: 400px}
75%{left: 0;top: 400px}
100%{left: 0;top: 0;}
}
2.调用动画
div{
width: 100px;
height: 100px;
background: green;
position: absolute;
/* animation-name: divMove;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse; */
animation: divMove 2s linear infinite;
}
@keyframes divMove{
0%{left: 0;top: 0;}
25%{left: 400px;top: 0}
50%{left: 400px;top: 400px}
75%{left: 0;top: 400px}
100%{left: 0;top: 0;}
}
3.动画的相关属性
1.animation-name 动画的名字
- 属性值写自己定义的动画名字即可
2.animation-duration 动画持续的时间
- ms s
3.animation-timing-function 运动方式
贝赛尔曲线 - linear（匀速）、ease（低速开始，然后加快，在结束前变慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始结束都慢）
4.animation-delay 延迟
- ms s
5.animation-iteration-count 动画循环的次数
- number 数字 2 3 4 5
- infinite 无限循环
6.animation-direction
- normal 正常的
- reverse 逆时针 反向
7.animation-play-state 控制动画停止
- running 运动
- paused 暂停
8.动画的简写方式
属性:animation
属性值:名字 时间 运动方式;
总结
- 过渡与动画之间的区别是什么(月考) 过渡和动画都是可以控制元素移动位置进行运动 过渡需要人为的控制 比如使用hover或者点击事件等，且过渡不能循环执行 但是动画不需要 动画由浏览器触发 会自动运行
4.拓展:
1.animation-timing-function 运动方式还有一种就是steps
用steps()语法表示就是：steps(number, position),
number：这个很好理解，表示把我们的动画分成了多少段。
position关键字。表示动画是从时间段的开头连续还是末尾连续。支持start和end两个关键字，含义分别如下：
start：表示直接开始。end：表示戛然而止。是默认值。
2.它与贝赛尔曲线的区别如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H3z5FTQX-1652073220333)(C:\Users\23814\AppData\Roaming\Typora\typora-user-images\image-20220310223616508.png)]
弹性布局
1.加父元素属性
1.弹性盒中默认的主轴是X轴 控制主轴的默认排列方向
属性:flex-direction
属性值
- row 主轴是X轴 侧轴是Y轴 默认值
- column 主轴是Y轴 侧轴是X轴
2.主轴上的对齐方式
属性:justify-content
属性值
- flex-start 起始位置对齐
- flex-end 结束位置
- center 居中显示
- space-between 两端对齐 其余空间自动分配
- space-around 所有的空间都是自动分配的
- space-evenly
3.侧轴上的对齐方式
属性:align-items
属性值
- flex-start 起始位置对齐
- flex-end 结束位置
- center 居中显示
- baseline 基线对齐(了解)
- 默认情况下和flex-start效果是一样的
4.弹性盒中当子级元素超过父级元素的宽度时候 不会掉下去折行显示 只会进行挤压
换行属性:flex-wrap
- nowrap 不换行 默认值
- wrap 换行
5.换行之后的行与行之间的间距设置
属性:align-content
属性值
- flex-start 起始位置对齐
- flex-end 结束位置
- center 居中显示
- space-between 两端对齐 其余空间自动分配
- space-around 所有的空间都是自动分配的
2.加子元素的属性
1.align-self 控制单个子级元素在侧轴上的对齐方式
属性值
- flex-start
- flex-end
- center
- auto 自动 默认值 根据父级元素设置的侧轴与对齐方式 继承
- stretch 表示拉伸
2.order 优先级
- 属性值设置为一个数字 数字越大就会往后排列 可以使用负数
- 默认值是0
flex:1是由多个属性复合而成的 表示占据主轴剩下空间并且当子级内容较多的时候会自动撑开
1.flex-grow:一个数字，规定项目将相对于其他灵活的项目进行扩展的量
- 属性值可以设置数字
- 0 正常显示
- 1 自动分配空间
2.flex-shrink:一个数字，规定项目将相对于其他灵活的项目进行收缩的量
- 0 正常显示
- 1 自动缩放
3.flex-basis
- 项目的长度 百分比 规定当前元素的长度
- 默认值 auto
总结
- flex的默认值 0 1 auto
- flex常用的属性值是 1 1 0% 简写为flex:1
媒体查询
1.语法
媒体查询的语法: @media 设备类型 修饰符号 (媒体特性-判断条件){css语法}
- @media 表示使用媒体查询 媒介
- 设备类型 手机、电脑、pad、打印机
- 修饰符号 and 连接符
- 媒体特性 检测常用的是用户的屏幕大小 min-width/max-width
例： @media all and (min-width:801px) and (max-width:1000px){
div{
width: 800px;
height: 800px;
background: blue
}
2.注意点
- 媒体查询主要是检测不同屏幕从而设置不同的css样式 后面检测设置的样式要把前面的样式给覆盖掉 所以在设置css样式的时候要把媒体查询写在当前样式的最下面 权重高的、写在后面的样式才会覆盖
- 书写媒体查询的时候 每一个单词之间都要写空格 不然没有效果(css写错了不会报错)
- 检测媒体特性可以使用多个判断条件 如果有多个判断条件的时候 后面加and连接符号继续书写即可
移动端布局
1.媒体查询结合rem计算
第一步:设置不同手机下面的font-size的值
- 小屏手机 @media all and (max-width:320px){html{font-size:12px}}
- 中屏手机 @media all and (min-width:321px) and (max-width:375px){html{font-size:14px}}
- 大屏手机 @media all and (min-width:376px) and (max-width:414px){html{font-size:16px}}
第二步:根据设计图的大小确定dpr是多少 以及计算的html的值是哪个
- 如果当前设计图是640px dpr是2 计算的html{font-size:12px}
- 导航高度88px
- 计算公式: 88px/2/12 = ?rem
- 优点:好理解
- 缺点:计算有误差、做到完美适配需要写很多的媒体查询
2.vw+rem
第一种情况:当设计图的宽度是640px的时候(dpr是2)
- 640px / 2 = 320px
- 100vw = 320px
- 1vw = 3.2px
- 1px = 0.3125vw
- 思考:如果导航的高度是88px 考虑dpr为2 88px/2=44px 用44px*0.3125vw
- 每次量出来的值都要去乘以0.3125就比较麻烦
- 想一个办法: 能不能让量出来的值 自己去乘以0.3125vw
- 给html设置为html{font-size:0.3125vw} 量出来为44px 直接把px改为rem即可
第二种情况:当设计图的宽度是750px的时候(dpr是2)
- 750px / 2 = 375px
- 100vw = 375px
- 1vw = 3.75px
- 1px = 0.2667vw
- html{font-size:0.2667vw}
总结vw的计算方式
- 当设计图宽度是640px的时候,html{font-size:0.3125vw}
- 当设计图宽度是750px的时候,html{font-size:0.2667vw}
- 计算方式: 量出的设计图大小/2 = 值 rem
3.flexible.js插件实现（了解）
- flexible.js 淘宝插件 阿里系软件都在使用这种方法
- 针对于750px的设计图来设计的
- 自动生成dpr 进行计算
用法
- 需要把文件中的视口标签删除掉
- 引入插件 script
- 计算:设计图上量出来的大小/100 即可
网格布局
1.父元素属性
1.display:grid或者display: inline-grid
grid：指明该容器本身是块级元素，块级元素独占一行。
inline-grid ：指明该容器本身是一个行内元素，行内元素可以和其他行内元素共占一行
2.grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高
拓展：
我们除了用绝对单位，还可以使用fr单位 ， 一个 fr 单位代表网格容器中可用空间的一等份。也可以使用百分比，如果你定义了非常多行非常多列，还可以使用repeat()函数。也可以混合写
3.rid-row-gap属性设置行与行的间隔（行间距），
grid-column-gap属性设置列与列的间隔（列间距），grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式
4.justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
值：
start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RcW0oybF-1652073220335)(C:\Users\23814\AppData\Roaming\Typora\typora-user-images\image-20220310232306623.png)]
5.justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bdsnqqG-1652073220335)(C:\Users\23814\AppData\Roaming\Typora\typora-user-images\image-20220310232127707.png)]
浏览器内核：
法: 能不能让量出来的值 自己去乘以0.3125vw
- 给html设置为html{font-size:0.3125vw} 量出来为44px 直接把px改为rem即可
第二种情况:当设计图的宽度是750px的时候(dpr是2)
- 750px / 2 = 375px
- 100vw = 375px
- 1vw = 3.75px
- 1px = 0.2667vw
- html{font-size:0.2667vw}
总结vw的计算方式
- 当设计图宽度是640px的时候,html{font-size:0.3125vw}
- 当设计图宽度是750px的时候,html{font-size:0.2667vw}
- 计算方式: 量出的设计图大小/2 = 值 rem
### 3.flexible.js插件实现（了解）
- flexible.js 淘宝插件 阿里系软件都在使用这种方法
- 针对于750px的设计图来设计的
- 自动生成dpr 进行计算
用法
- 需要把文件中的视口标签删除掉
- 引入插件 script
- 计算:设计图上量出来的大小/100 即可
# 网格布局
### 1.父元素属性
1.display:grid或者display: inline-grid
**grid：指明该容器本身是块级元素，块级元素独占一行。**
**inline-grid ：指明该容器本身是一个行内元素，行内元素可以和其他行内元素共占一行**
2.`grid-template-columns`属性定义每一列的列宽，
`grid-template-rows`属性定义每一行的行高
拓展：
我们除了用绝对单位，还可以使用fr单位 ， 一个 fr 单位代表网格容器中可用空间的一等份。也可以使用百分比，如果你定义了非常多行非常多列，还可以使用**repeat()函数**。也可以混合写
3.`rid-row-gap`属性设置行与行的间隔（行间距），
`grid-column-gap`属性设置列与列的间隔（列间距），`grid-gap`属性是`grid-column-gap`和`grid-row-gap`的合并简写形式
4.`justify-content`属性是整个内容区域在容器里面的水平位置（左中右），`align-content`属性是整个内容区域的垂直位置（上中下）。
值：
start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
例：[外链图片转存中...(img-RcW0oybF-1652073220335)]
5.`justify-items` 属性设置单元格内容的水平位置（左中右），`align-items` 属性设置单元格的垂直位置（上中下）
值：
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
例：[外链图片转存中...(img-4bdsnqqG-1652073220335)]
# 浏览器内核：
[外链图片转存中...(img-SYdyKKtT-1652073220336)]
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
