web前端 HTML5 CSS3 HTML CSS

每个标签独占一行

标题

p标签是一个文本级标签，里面只能放文字、图片、表单元素，也就是p 标签不能嵌套块级标签

ul的儿子是li
li只能在包裹在ul里面

ol的儿子只能是li

<a>

src属性

span标签是一个文本级标签，里面只能放文字、图片、表单元素

定义表单被提交时发生的动作
提交给服务器处理程序的地址

作用：定义表单提交数据时的方式

取值

编码类型，即表单数据进行编码的方式
允许表单将什么样的数据提交给服务器

取值：1.application/x-www-form-urlencoded
 默认。 允许将 普通字符，特殊字符，都提交给服务器，不允许提交 文件

2.multipart/form-data，允许被将文件提交给服务器

3.text/plain 只允许提交普通字符。特殊字符，文件等都无法提交

input 组元素

textarea 文本区域

select和option选项框

块级标签可以嵌套块级标签和行级标签

行级标签中只能嵌套行级标签

设置边框的线宽

设置边框线的种类

设置边框颜色

设置边框圆形

对标签设置的宽度和高度只包括内容部分

对标签设置的宽度和高度包括边框

normail 正常字体

italic 斜体字体

normal 正常字体 400

bold 粗体 700

bolder 更粗

脱离标准流，飘起来了。、

circle 空心圆

none  无样式

square 正方形

lower-lation 英文abc

表示相邻边框合并在一起

告诉浏览器帮我们进行定位

相对定位：1：相对于自己原来的位置进行定位  2： 当标签移动之后原来的位置会保留，别的标签不能占用，会留白

绝对定位

鼠标在该标签上显示为小手

 li {
         cursor: pointer;
}

去掉输入框的默认的蓝色边框

设置文本域右下角不能拖拽

经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

它只针对于行内元素或者行内块元素有效

该标签要添加到子标签中，最多的是用在图片上

vertical-align : baseline | top | middle | bottom

值解析

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直居中对齐了。

原因

解决办法

normal      连续的空白符会被合并，换行符会被当作空白符来处理，文本超过宽度自动换行

nowrap    连续的空白符会被合并，换行符会被当作空白符来处理，文本超过宽度不进行换行

它规定了当文本溢出其包含元素时以何种方式显示

注意：这个属性只能在设置了white-space:nowrap; 和  overflow: hidden; 时才能起作用，因为文本换行或者父标签允许超出，文本就没有溢出的概念

clip：默认值，将溢出的文本裁减掉

ellipsis：将溢出的文本用省略号(...)来表示

设置圆角

像素

百分比

border-radius:5px;

border-radius:50%;

border-radius:10px /  20px;

border-radius: 10px 20px 30px 40px; / 5px 10px 20px 30px;

为标签盒子添加阴影

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

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

说明

案例样板

教学案例

为标签盒子添加文本阴影

text-shadow: h-shadow v-shadow blur color;

text-shadow: h-shadow v-shadow blur color,  h-shadow v-shadow blur color,  h-shadow v-shadow blur color;

说明

案例样板

教学案例

background: linear-gradient(direction, color-stop1, color-stop2, ...);

方向

角度

从上到下线性渐变

从左到右

从左上角到右下角

按角度设置从上到下

重复的线性渐变

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

说明

background-image: radial-gradient(red 5%, green 15%, blue 60%);

background-image: radial-gradient(circle, red, yellow, green);

background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);

background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);

设置哪个css属性具有过度效果

值

规定完成过渡效果需要多少秒或毫秒

单位

规定速度效果的速度曲线

值

设置过度的延迟时间，也就是过渡效果何时开始，值以秒或毫秒计

复合属性

语法

translate(x,y) 定义 2D 转换。

translate3d(x,y,z) 定义 3D 转换。

translateX(x) 定义转换，只是用 X 轴的值。

translateY(y) 定义转换，只是用 Y 轴的值。

translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

绝对居中

scale(x[,y]?) 定义 2D 缩放转换。

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 通过设置 X 轴的值来定义缩放转换。

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

@keyframe

案例

语法

兼容性好

布局繁琐

不能在移动端很好布局

布局简单，移动端布局应用广泛

pc端浏览器兼容性不太好，IE11或更低版本不支持或仅部分支持

设置标签为伸缩盒子

父标签设置了flex后，子标签的float, clear和vertical-align属性就会失效，块级标签没有了换行的说法

设置主轴方向，伸缩盒子的默认主轴方向是row, 也就是x轴，就是说子标签默认是在同一行进行显示

值

伸缩盒子的子标签的特点

含义

值

含义

值

含义

值

注意

含义

值

含义

案例

含义

值

含义

值

说明

含义

值

含义

值

注意：如果一个子标签设置了flex，就不要再给这个标签设置width这个属性了，不起作用，因为：flex: 1;相当于  flex : 1 1 0px;相当于flex-basis的值设为了0 ，就会覆盖width属性的值

相对单位，相对于父标签的font-size的单位，如果父标签的单位是16px，则1em表示的就是 16px

也是相对单位，相对于html标签的font-size的单位，跟父标签无关，这个用的比较多

开发像素

物理像素

1开发像素  =  2物理像素

图片是设置的开发像素的2倍

用来规定显示器或者其他设备在屏幕尺寸发生变化时，执行的css样式也不一样

@media  not | only  mediatype  and  (media feature) {

}

说明： 

@media only screen and (min-width: 640px) {

html {

font-size: 32px;

background: #8cbc8b; }



body {

width: 640px;

margin: 0 auto; }

}

@media only screen and (min-width: 620px) and (max-width: 640px) {

html {

font-size: 32px; } }

@media only screen and (min-width: 600px) and (max-width: 620px) {

html {

font-size: 31px; } }

@media only screen and (min-width: 580px) and (max-width: 600px) {

html {

font-size: 30px; } }

@media only screen and (min-width: 560px) and (max-width: 580px) {

html {

font-size: 29px; } }

@media only screen and (min-width: 540px) and (max-width: 560px) {

html {

font-size: 28px; } }

@media only screen and (min-width: 520px) and (max-width: 540px) {

html {

font-size: 27px; } }

@media only screen and (min-width: 500px) and (max-width: 520px) {

html {

font-size: 26px; } }

@media only screen and (min-width: 480px) and (max-width: 500px) {

html {

font-size: 25px; } }

@media only screen and (min-width: 460px) and (max-width: 480px) {

html {

font-size: 24px; } }

@media only screen and (min-width: 440px) and (max-width: 460px) {

html {

font-size: 23px; } }

@media only screen and (min-width: 430px) and (max-width: 440px) {

html {

font-size: 22px; } }

@media only screen and (min-width: 420px) and (max-width: 430px) {

html {

font-size: 21.5px; } }

@media only screen and (min-width: 410px) and (max-width: 420px) {

html {

font-size: 21px; } }

@media only screen and (min-width: 400px) and (max-width: 410px) {

html {

font-size: 20.5px; } }

@media only screen and (min-width: 380px) and (max-width: 400px) {

html {

font-size: 20px; } }

@media only screen and (min-width: 360px) and (max-width: 380px) {

html {

font-size: 19px; } }

@media only screen and (min-width: 340px) and (max-width: 360px) {

html {

font-size: 18px; } }

@media only screen and (min-width: 320px) and (max-width: 340px) {

html {

font-size: 17px; } }

@media only screen and (min-width: 300px) and (max-width: 320px) {

html {

font-size: 16px; } }

@media only screen and (max-width: 300px) {

html {

font-size: 15px; } }

1： 假设屏幕的最大尺寸是  750px

2: 将屏幕尺寸分成15等分（也可以是别的，比如10等分）,每一等份就是50px

3: 将html 标签的font-size设置成   50px，按照这个尺寸作为1rem

4: 然后按照这个750个像素的屏幕尺寸进行页面布局，比方有一个div的宽度和高度在屏幕的宽度高度是750px时，是100px,100px，也就是width: 2rem,  height:2rem;

5: 然后通过媒体查询，在不同的尺寸下，都是将页面分成15等份，每一份的宽度作为font-size，也就是1rem，如：如果屏幕的尺寸在500---600px之间，我们安照600px把屏幕分成15等份，每份的宽度就是40px,  @media  screen and (min-width=500px) and  (max-width=600px) {html{font-size:40px}} ，这样  1rem 就等于 40px 了，我们上面那个div的宽度是2rem ，也就是80px的宽度了，这样我们每个标签都会跟着屏幕的变化而变化

声明变量的时候，变量名前面要加两根连词线（--）

它们与color、font-size等正式属性没有什么不同，只是没有默认含义。所以 CSS 变量（CSS variable）又叫做"CSS 自定义属性"（CSS custom properties）。因为变量与自定义的 CSS 属性其实是一回事。

为什么选择两根连词线（--）表示变量？原来css没有变量的概念，所以后来出现了一些css的框架帮我们解决这个问题，
非常出名的两个就是Sass和less，因为$foo被 Sass 用掉了，@foo被 Less 用掉了。为了不产生冲突，官方的 CSS 变量就改用两根连词线了。

变量的命名规范

通过var() 函数读取变量的值

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。

var()函数还可以用在变量的声明。

注意，变量值只能用作属性值，不能用作属性名。

如果变量值是一个字符串，可以与其他字符串拼接

如果变量值是数值，不能与数值单位直接连用

如果变量值带有单位，就不能写成字符串

同一个 CSS 变量，可以在多个选择器内声明。
读取的时候，优先级最高的声明生效。
这与 CSS 的"层叠"（cascade）规则是一致的。

变量的作用域就是它所在的选择器的有效范围。

全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们

CSS是动态的，页面的任何变化，都会导致采用的规则变化，
利用这个特点，可以在响应式布局的media命令里面声明变量，使得不同的屏幕宽度有不同的变量值

body {
     --primary: #7F583F;
     --secondary: #F7EFD2;
}
a {
      color: var(--primary);
      text-decoration-color: var(--secondary);
}
@media screen and (min-width: 768px) {
      body {
             --primary: #F7EFD2;
             --secondary: #7F583F;
      }
}

-webkit-tap-highlight-color:  transparent;

-webkit-appearance: none;

img, a { -webkit-touch-callout: none; }

加法

减法

乘法

除法

取余

自增

自减

等于

等同于（值和类型都相等）

不等于

不等同于（值和类型有一个不相等，或者都不相等）

解析成数字

把几个数组合并

将数组用指定字符串连接起来

移除数组最后一个元素

移除数组第一个元素

数组开头添加一个元素

类似于切片

向数组最后追求一个元素

将数组反转

对数组排序

判断是否为数组

是一个静态方法，通过类名.isArray() 的方式进行调用 

返回指定索引位置的字符

字符串拼接

替换字符串a和b

返回字符串的索引，没有字符串就返回-1

切片

转小写

转大写

向上取整

向下取整

取最大值

取最小值

取随机数

对象

数组

JSON.parse()

JSON.stringify()

每个html标签

html属性

html元素中的文本

按ID查找

按类名查找

按标签查找

parentElement

children

firstElementChildren

lastElementChildren

nextElementSibling

previousElementSibling

document.createElement(标签名)

父节点.appendChild(子标签)

父节点.insertBefore(子标签名,目标标签名)

父节点.removeChild

somenode.replaceChild(newnode, 某个节点);

input

select

textarea

设置属性

查询属性

删除属性

查询类名

增加类名

鼠标点击

鼠标双击

鼠标聚焦

鼠标失去聚焦

区域内容被改变(表单元素)

键盘被按下

键盘按下并松开

键盘松开

页面或图片加载完成

鼠标悬停

鼠标离开

表单提交事件

练习题

包含选择器

父子选择器

查找子标签（find()）

查找父标签（parent()、parents()）

查找兄弟元素（next()、prev()）

过滤（filter()）

html标签中能看到的属性，显示的属性

标签的DOM对象中的属性，隐式的属性

显示和隐藏DOM

--foo的值在 CSS 里面是无效语句，但是可以被 JavaScript 读取。这意味着，可以把样式设置写在 CSS 变量中，让 JavaScript 读取