zkq5168的专栏

这只是一个基本的HTML结构，实际上，要使文件上传功能更加完善，还需要使用后端技术来处理文件的接收和存储。另外单文件上传还可以结合JavaScript语言来实现，以下是一个简单的例子，演示如何使用JavaScript结合HTML实现文件上传，并通过Ajax发送文件到服务器。随着Web应用的普及，文件上传功能成为许多网站和应用不可或缺的一部分。在早期的html应用中，都是使用form标签中嵌套来实现文件上传的，具体代码如下。本人这里也提供一个基于Vue3的文件上传实现，代码如下。'% 上传中...'

接下来看看“\”，这个符号表示转移，就是说如果需要匹配类似[,],^,+等有特殊含义的字符，可以用"\"做转义。JavaScript的正则表达式有两种写法，一种是字面量模式的写法，一种是构造函数模式的写法。先后输入hi，this，what等字符串，发现hi和this可以匹配，what不能匹配。再来看比较类似的表达式“{x,y}”，表示前一模式可以被重复x到y次。接下来看另外一个表达式"{x}"，该表达式表示前一模式可以被重复x次。接下来看下"()"，这个表示可以指定一堆字符来匹配一个模式。

返回一个新的数组，包含从start到end（不包含该元素）的数组。运行结果：red,blue,green以逗号分隔的字符串。将所有数组元素结合为一个字符串，可以自定义分隔符。删除数组首个元素，并把所有其他元素向前位移。从数组中删除最后一个元素。向数组的开头添加新元素。向数组末尾添加新元素。

合并两个对象的属性，返回合并后的对象，不改变原对象的值，如果对象的属性重复，后面对象属性的值覆盖前面对象的属性值。获取对象的每一项属性的键和值，包装成一个数组，并返回一个二维数组。如果对象存在该属性则返回true，否则返回false。获取对象的所有键并返回键的数组。获取对象的所有值并返回值的数组。检测对象是否拥有某个属性。为对象动态设置多个属性值。

看完上面的解释如果还是觉得难以理解的话，我们可以简单的认为在平面上的物体由于距离的远近而显示出不一样的效果，同时让人眼感觉是一个三维立体的存在。这里我们说明一下，transform属性的执行顺序是从右向左执行的，所以上述的执行顺序是先按y轴旋转90度，再向右侧移动150像素。至此，3d效果的正方体就制作完成了，当然还是有一些问题，比如3、4、5面的数值显示方向有误，主要是旋转方向的问题，我们调整一下。数值为2的div块，我们让他往屏幕右侧移动150像素，再沿着y轴旋转90度，设置值如下，

我们会看到属性值的顺序会引起不一样的效果，这里我们总结一下，transform属性的执行顺序是从右到左依次执行，比如第一个组合就是先触发旋转动作，再触发位移动作，第二个是先触发位移动作，再触发旋转动作，所以最终的效果不同。另外transform属性的函数可以混合使用，让我们看一下把transform的属性改为如下。上述效果实现鼠标移入元素时触发元素的旋转，正数顺时针，负数逆时针。3d转换指在x轴、y轴和z轴组成的3维空间中发生的转换。上图效果实现鼠标移入元素时触发元素的缩放效果。转换分为2d和3d转换。

degree2：从degree2到100%的部分都用color2填充，跟color1没有有重叠的部分进行渐变，也就是degree1到degree2部分进行渐变，取值可以是百分比或具体的像素值。基础径向渐变：需设置两个及两个以上的颜色，颜色之间用","间隔，颜色会平均分配，根据设置颜色的顺序，进行渐变。上述的例子是基础线性渐变的例子，其实就是进阶渐变的默认模式，设置两个颜色，默认从起点色标渐变到终点色标。位置，表示渐变中心点的坐标。可以发现从0~70%都是纯色的红色，从70%到100%是红色到黑色的渐变。

table布局在早期是很流行的，因为使用table布局的表格结构清晰，易于理解，表格结构支持行列跨度，可以实现复杂的布局，但是他也有缺点，不利于SEO，复杂的页面代码也非常复杂，难以维护，不支持响应式布局，在移动端上不能很好的适配。浮动布局让程序员可以更加自由的去定制页面，他可以让元素浮动起来实现任意位置的布局，但是浮动布局也有一些场景使用起来不是很方便，比如横向浮动时经常会有空白间隙的问题，还有高度塌陷的问题等等。效果：可以看到就算项目合起来的宽度超过了父元素的宽度，也不会换行，会将项目的宽度进行压缩。

属性选择器专门用于通过元素的属性及其值匹配页面中的元素，当类，id和元素选择器无法区分元素时，就可用属性选择器按属性的差异来区分元素，属性选择器可用任何属性作为条件，且支持模糊匹配，所以应用及其广泛，格式如下。E[attribute |= val]选择器：选择属性attribute的值是用连字符“-”分隔的单词，并以val开头的E元素，主要用于lang属性，比如”en”、“en-us”、“en-gb”等。伪元素选择器专门匹配元素中的内容，而不是匹配元素，常见的如下。

可以发现文字不是在新的一行，而是紧跟着html元素，这就导致布局无法按照我们预期的方式展现，这就是接下来我们要说的高度塌陷问题，那这个问题该如何解决呢，以及解决方式都有哪些，接下来我将罗列目前已知的几种处理方式，大家可以根据实际情况选择使用。发现box1脱离了普通文档流，因box2还是属于普通文档流，所以直接顶上去，占据了box1元素原先的位置，接下来我们设置box1右浮动。可以看到效果一致，但是为了清除浮动，在html页面上增加一个元素，就显得多余，而且还会影响文档结构，也不推荐。

一、定位概念HTML的定位默认从上到下，垂直排列，也有水平排列的布局这就是普通的文档流采用的定位方式，块元素默认占满一行，块元素之间从上到下排列，垂直排列，块元素有div，p，h1等，如下图，6个div，每个div占满一行