<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>大前端系统学习记录</title>
<!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="/js/index.js"></script>
<style type="text/css">
@import url("index.css");
</style>
</head>
<body>
<a href="#button">跳到底部</a>
<center>
一:pc端页面制作与动画特效<br/>
我的第一个网页<br/>
hello world<br/>
铜鼓一响，<br/>
黄金万两。
<p> 1、xmp标签:会把内部的html片段当作字符串输出<br/>
2、code标签:标签是一个短语标签，用来定义计算机代码文本。<br/>
3、pre标签:可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。<br/>
4.center标签:居中
</p>
</center>
<pre>
基本结构：
<html>
<head>
<title > </title>
<script > </script>
</head>
<body>
<script type="text/javascript"> </script>
</body>
</html>
文档声明：<!DOCTYPE ****>
html lang属性:<html lang="zh-CN"> en代表英语 zh-CN代表中文 ja-jp代表日文
字符编码：<meta charset="UTF-8"> ASCII-美国信息交换标准代码 ISO-8859-1 拉丁字母表的字符编码 GB-2312 汉字编码字符集 UTF-8 unicode万国码字符编码
</pre><hr/>
html语义化标签:<br/>
html常用标签:
<pre>1.<h>标题(1-6)</pre>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<pre>2.<p>段落</pre>
<p>我是一个段落</p>
<pre>3.<br/>回车</pre>
<pre>4.<hr/>水平线</pre>
<hr/>
<pre>5.<b>加粗</pre><b>加粗</b>
<pre><strong>突出（推荐使用）</pre><strong>突出</strong>
<pre>6.<em>倾斜（推荐使用）</pre><em>倾斜</em>
<pre><i>倾斜</pre><i>倾斜</i>
<pre>7.<del>删除线（推荐使用）</pre><del>删除线</del>
<pre><s>删除线</pre><s>删除线</s>
<pre>8.<u>下划线（推荐使用）</pre><u>下划线</u>
<pre><sup>上标</pre>上标<sup>上标</sup>
<pre><sub>下标</pre>下标<sub>下标</sub>
<hr/>
<p>hr详细:</p>
<p>颜色 color=""</p>
<hr color="green"/>
<hr color="yellow"/>
<hr color="red"/>
<p>宽度 witch=""</p>
<hr width="300"/>
<hr width="400"/>
<hr width="500"/>
<p>对齐方式 align=""</p>
<hr align="left" width="300"/>
<hr align="right" width="300"/>
<p>去阴影 noshade</p>
<hr noshade/>
Lorem 随机生成一系列单词ipsum dolor sit amet consectetur, adipisicing elit. Enim odit omnis sapiente commodi consequatur. Atque tenetur, ducimus, ipsam vero nulla accusantium aut illo excepturi sequi provident distinctio? Cumque, consequatur quod?
<p>特殊符号：略</p>
😀😁😂😃❤😊🃏
<p><div>划分页面区域</p>
<p><span>独立修饰</p>
<p>列表</p>
<p>有序列表：<ol><li></li></ol></p>
<ol>
<li>7</li>
<li>8</li>
<li>9</li>
<li><!--注释--></li>
</ol>
<p>type 属性 type="" 有1,a,A,i,I可选</p>
<ol type="I">
<li>7</li>
<li>8</li>
<li>9</li>
<li><!--注释--></li>
</ol>
<p>start 属性 设置开始值(阿拉伯数字)</p>
<ol type="I" start="6">
<li>7</li>
<li>8</li>
<li>9</li>
<li><!--注释--></li>
</ol>
<p>无序列表<ul><li></li></ul></p>
<ul type="circle">
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
<p>type属性 disc circle square none</p>
<p>自定义列表<dl><dt></dt><dd></dd></dl></p>
<dl>
<dt>我是图片</dt>
<dd>我是文字</dd>
</dl>
<p>图片标签<img></p>
<img src="/img/a.PNG" width="300"/>
<img src="/img/b.png" title="提示信息" width="300"/>
<p>img相关属性:title鼠标悬停提示alt加载失败的提示信息width height</p>
<img src="1.png" alt="我加载失败了"/>
<p><a>超链接标签,里面不只可以放文字</p>
<a href="http://www.waibao21.asia" title="提示标题" target="_blank">超链接</a>
<P>相关属性title:提示信息target:在何处打开:_self:在本页面打开_blank:在新窗口打开</P>
<p>table表格</p>
<xmp>
<table>
<tr>行
<td>1</td>单元格
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</xmp>
<table border="1" width="600" align="center" cellspacing="0" cellpadding="50">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<p>相关属性:border:外边框 width height align:对齐方式bordercolor:外边框颜色bgcolor:背景颜色cellspacing单元格与单元格之间的间距cellpadding:单元格与内容的间距</p>
<p>tr属性:height高度bgcolor背景颜色align水平对齐方式(right,left.center)valign垂直对齐方式(top,middle,bottom)</p>
<table border="1" width="600" align="center" cellspacing="10" cellpadding="0" bgcolor="yellow" height="400">
<tr bgcolor="orange" height="200" align="center" valign="middle">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<p>td属性:width宽度 height高度 gbcolor背景颜色 align水平对齐方式(right,left.center)valign垂直对齐方式(top,middle,bottom)</p>
<table border="1" width="400" align="center" cellspacing="10" cellpadding="0" bgcolor="yellow" height="400">
<tr bgcolor="orange" align="center" valign="middle">
<td width="50%" bgcolor="green" height="200">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td bgcolor="white">1</td>
<td height="50%" align="right" valign="top">2</td>
</tr>
</table>
<p>表格合并列Colspan表格合并行Rowspan</p>
<table border="1" width="400" align="center" cellspacing="10" cellpadding="0" bgcolor="yellow" height="400">
<tr bgcolor="orange" align="center" valign="middle">
<td width="50%" bgcolor="green" height="200" rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td bgcolor="white">1</td>
<td height="50%" align="right" valign="top" colspan="2">2</td>
</tr>
</table>
<p>案例</p>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50" align="center">
<td width="100">会员姓名</td>
<td width="150"></td>
<td width="100">出生日期</td>
<td width="150"></td>
</tr>
<tr height="50" align="center">
<td>身份证号</td>
<td Colspan="3"></td>
</tr>
<tr height="50" align="center">
<td>通信地址</td>
<td Colspan="3"></td>
</tr>
<tr height="50" align="center">
<td>联系电话</td>
<td Colspan="3"></td>
</tr>
<tr height="50" align="center">
<td>会员卡号</td>
<td Colspan="3"></td>
</tr>
</table>
<p>表单标签:属性action method提交地址type(text,password,submit,reset,button) placeholder value name</p>
<form action="" method="POST">
用户信息：<input type="text" placeholder="我是提示信息" name="user"><br/>
密码：<input type="password" name="password">
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
<hr/>
<p>css样式表:</p>
<p>注释/**/</p>
<div class="red">我是红色的</div>
<div class="green">我是绿色的</div>
<p>优先级:就近原则(可用!important提高优先级</p>
<p>选择器:</p>
<p>标签/类型选择器: div{}</p>
<P>类选择器:.class{}</P>
<p>id选择器:#id{}</p>
<p>通配符/通配选择器：*{}(可用于把所有元素的内外边距清零)</p>
<p>群组选择器:div,p,h1{}</p>
<p>后代/包含选择器:div p{}</p>
<p>子代选择器：div>ul>li</p>
<P>伪类选择器(主要用于超链接):a:link-visited-hover-active</P>
<p>新闻导航案例:</p>
<div class="new">
<a href="" class="home">国内</a><a href="">国际</a><a href="">军事</a><a href="">体育</a><a href="">财经</a><a href=""></a>
</div>
<p>选择器权重:!important(10000)>内联样式(1000)>id(0100)>class(0010)>元素(0001)</p>
<p>包含选择器权重为选择符权重之和</p>
<p>文本属性:</p>
<P>font-size:字体大小,默认16,设计图中是12</P>
<P>font-family:设置字体,默认微软雅黑</P>
<p>color:颜色(英文/rgb()/十六进制#</p>
<p>font-weight:粗细(100-900,100lighter细体400normal正常700bold粗体900bolder更粗</p>
<p>font-style:倾斜,italic/oblique倾斜,normal正常</p>
<p>text-align:水平对齐方式,left,right,center,justify(两端对齐)</p>
<p>line-height:行高</p>
<p>letter-spacing:字符间距</p>
<p>word-spacing:词间距</p>
<p>text-indent:首行缩进(可用em单位,em为字体大小)</p>
<p>text-decoration:文本修饰,none没有,underline下划线,overline上划线,line-through删除线</p>
<p>text-transform:大小写转化,capitalize首字母大写,lowercase全部小写,uppercase全部大写</p>
<p>font是font-style font-weight (font-size)/line-height (font-family)的简写,括号中不可省</p>
<p>默认字体大小</p>
<p class="font1">我的字体大小是36</p>
<p class="font2">我是华文行楷</p>
<p class="font3">我是微信色~</p>
<p class="font4">我加粗了</p>
<p class="font5">我倾斜了</p>
<p class="font6">我居中且行高为36</p>
<p class="font7">我的字符间距为16px</p>
<hr/>
<p>列表属性</p>
<p>list-style-type:符号样式,disc实心圆,circle空心圆,square实心方块,none没有</p>
<p>list-style-image:将图片设置为符号样式url(路径)</p>
<p>list-style-position:符号的位置outside,inside</p>
<p>list-style:简写</p>
<hr/>
<p>背景属性：</p>
<p>background-color:red|rgb|rgba|#</p>
<p>background-image:url()</p>
<p>background-repeat:repeat|reeat-x|repeat-y|no-repeat</p>
<p>background-position:20px 20px|10% 10%|left center right top center bottom</p>
<P>background-size:20px 20px|100% 100%|cover(等比例覆盖）|contain(尽力放大)</P>
<p>background-attachment:scroll|fixed(实现视差效果)</p>
<P>背景属性：复合写法background：</P>
<p>浮动属性：float:left|right|none 浮动后高度塌陷</p>
<div >
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div style="Clear:both;"></div>
</div>
<p>清浮动：Clear:left|right|none|both 加在后面的元素 overflow：hidden BFC 让浮动元素计算高度</p>
<P>盒子模型：margin外边距padding内边距border边框，背景色蔓延到内边距</P>
<p>边框：border:15px solid|double|dashed|dotted red(背景色蔓延到边框)</p>
<P>外边距：margin:15px 可负值 屏幕居中：margin:0 auto</P>
<P>外边距特性：兄弟元素：垂直方向：取最大值 水平方向：合并相加 父子元素：</P>
<p>PS:相关</p>
<P>缩放：ctrl++ ctrl+- Alt+鼠标中键</P>
<p>移动：空格+鼠标</p>
<P>标尺：ctrl+r</P>
<p>截图：框选：框选+ctrl+c+ctrl+n+ctrl+v(一次一张)/切片(一次多张)</p>
<p>溢出属性</p>
<p>overflow:visibale|hidden|scroll|auto|inherit</p>
<p>overflow-x: overflow-y:</p>
<p>空余空间:white-space:normal|nowrap|pre|pre-wrap|pre-line|inherit</p>
<p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil repellendus officiis ullam quaerat odit illum pariatur est voluptate optio earum nam quis, ratione quod hic quasi reiciendis rem illo tempore.</p>
<pre>
溢出省略号：
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
</pre>
<div style="overflow:auto;width: 400px;height: 200px;font-size:36px">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt error odit ipsam vitae suscipit provident dignissimos aspernatur eius, accusamus tenetur sunt ratione autem dolore alias perspiciatis quae cumque facilis maxime!</div>
<p>元素显示属性display：块block，行内inline，行内块inline-block，隐藏none;</p>
<p>行内元素只有左右边距</p>
<p>二级菜单:</p>
<div class="menu">
<ul>
<li class="menu-item">编程语言
<ul>
<li>C</li>
<li>Java</li>
<li>JavaScript</li>
<li>Python</li>
<li>C++</li>
<li>PHP</li>
</ul>
</li>
<li class="menu-item">前端三剑客
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li class="menu-item">前端框架
<ul>
<li>Vue</li>
<li>React</li>
<li>Bootstrap</li>
</ul>
</li>
</ul>
</div>
<input type="color">
<input type="range">
<input type="week">
<input type="date">
<a href="index-anli.html" target="_blank">安利首页</a>
<p>定位：</p>
<p>static静态默认</p>
<p>absolute绝对定位</p>
<p>relative相对定位</p>
<P>fixed固定定位</P>
<p>sticky粘性定位（可实现吸顶效果，css3.0新增，兼容不好）</p>
<p>三角形：</p>
<div style="width:0;height:0;border:10px solid transparent;border-top:10px solid red;"></div>
<div style="width:0;height:0;border:10px solid transparent;border-right:10px solid red;"></div>
<div style="width:0;height:0;border:10px solid transparent;border-bottom:10px solid red;"></div>
<div style="width:0;height:0;border:10px solid transparent;border-left:10px solid red;"></div>
<div class="nav">导航
<span class="triangle"></span>
</div>
<p>层级z-index</p>
<p>行内转块：display:block position:absolute float:left</p>
<p>水平垂直居中</p>
<p>float:半脱离文档流，有文字环绕效果</p>
<p>absolute:全脱离</p>
<P>锚点：</P>
<pre>
href="#锚点名字" id="锚点名字"
</pre>
<p>精灵图：雪碧图 应用于多个小图标整合，节省访问服务器次数，提高效率</p>
<p>宽高自适应:min-hieght max-width</p>
<p>浮动父元素宽高自适应：清浮动</p>
<pre>
1.父元素overflow:hidden
2.添加空块元素 clear:both height:0 overflow:hidden
3.::after{
content:""
clear:both,
display:block,
height:0,
visiblity:hidden,
}
</pre>
<p>伪元素::first-letter ::first-line ::before ::after</p>
<p>display:none不占位隐藏 visiblity:hidden</p>
<p>窗口自适应 html,body{height:100%;}</p>
<p>两栏布局 calc(1px + 1%)动态计算函数，符号前后留空格</p>
<p>三栏布局</p>
<p>单选框</p>
<input type="radio" name="aaa" id="man" checked>
<label for="man">男</label>
<input type="radio" name="aaa">
<input type="radio" name="aaa">
<input type="radio" name="aaa">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="file">
<input type="button" value="按钮">
<input type="submit">
<button>666</button>
<input type="button" disabled value="禁用">
<p>禁用disabled 只读readonly</p>
<p>下拉菜单 select size显示几个 multiple</p>
<p >option selected 默认选中</p>
<select size="1">
<option>66</option>
<option>662</option>
<option>626</option>
<option selected>666</option>
</select>
<select size="2" multiple>
<option>66</option>
<option>662</option>
<option>626</option>
<option>662</option>
</select>
<p>文本域textarea cols列 rows行 placeholder提示 无value 设置大小css: resize:vertical horizontal none</p>
<textarea></textarea>
<p>字段集fieldset</p>
<fieldset>
<legend>legend</legend>
</fieldset>
<p>音频audio 控制controls 循环loop 自动播放autoplay 静音muted</p>
<audio controls></audio>
<p>视频video 控制controls 循环loop 自动播放autoplay 静音muted 海报poster width height</p>
<video controls></video>
<P>滑块range min max value step</P>
<p>数字number step value </p>
<p>搜索search</p>
<p>日期date 月month 周week 本地时间datetime-local</p>
<p>增强表单</p>
<form action="">
<input type="color" name="color">
<input type="email">
<input type="url">
<input type="tel">
<input type="range">
<input type="submit">
<input type="number">
<input type="date">
</form>
<p>选项列表datalist option input->list</p>
<p>表单属性 自动聚焦autofocus 不能为空required 可多个multiple</p>
<p>css3:渐进增强 优雅降级</p>
<p>层级选择器 +后面的第一个兄弟 ~后面所有的兄弟</p>
<P>属性选择器 [属性=value] ~=包含匹配 模糊匹配^= $= *=</P>
<p>结构伪类选择器 :first-child :last-child :nth-child() 2n偶数even 2n+1 2n-1奇数odd :only-child :empty :root</p>
<P>目标伪类选择器 :target</P>
<p>UI状态伪类选择器 :enable :disable :focus :checked ::selection</p>
<p>checkbox清除默认样式 appearence:none</p>
<p>否定伪类选择器 :not() </p>
<p>动态伪类选择器 :link未被访问过的超链接 :visit被访问过的超链接 :active被激活 :hover鼠标悬停</p>
<p>文本阴影 text-shadow:(水平方向位移 竖直方向位移 模糊程度 颜色),()</p>
<p style="text-shadow:10px 10px 2px red;">阴影</p>
<p>盒子阴影 box-shadow:(水平方向位移 竖直方向位移 模糊程度 [扩展大小] 颜色 [内阴影inset]),()</p>
<p>圆角边框 border-radius border-top-left-radius 30px/60px</p>
<p>字体引入@font-face{font-family: src:}</p>
<p>怪异盒模型 box-sizing:content-box|border-box</p>
<p>弹性盒 display:flex</p>
<p>主轴方向：flex-direction:row culumn row-reverse culumn-reverse</p>
<p>主轴对齐方式 justify-content:flex-start flex-end center space-between spacn-around</p>
<p>侧轴对齐方式 align-items:center flex-start flex-end</p>
<p>折行与行间距 flex-wrap:wrap;align-content:flex-start flex-end center space-between spacn-around</p>
<p>项目对齐方式 align-self:flex-start flex-end center baseline stretch</p>
<p>项目调整顺序 order:</p>
<p>项目剩余宽高 flex:</p>
<div class="box">
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
<div class="box-item"></div>
</div>
<a href="./zhifubao.html">支付宝</a>
<p>移动端</p>
<p>chrome内核浏览器消除滚动条
::-webkit-scrollbar{
display: none;
}
</p>
<p>瀑布流实现</p>
<p>column-count列数 column-gap列间距 column-rule列边框 column-fill:balance|auto列高度统一 column-width调整列宽 column-span:none|all|</p>
<p>禁止打断折行 break-inside:avoid;</p>
<p>响应式布局 媒体查询 横竖屏检测</p>
<p>em rem</p>
<p>em 相对单位 相对于父元素的字体大小</p>
<P>rem 相对单位 相对于根元素（html）的字体大小 常用</P>
<p>rem布局</p>
<p>vw vh 100vw 100vh</p>
<p>线性渐变 linear-gradient(to top right,red,green) to top to buttom to left to right</p>
<p>任意角度 90deg</p>
<div style="width:200px;height:200px;border:1px solid gray; background: linear-gradient(to top right,red, green);"></div>
<p>径向渐变 radial-gradient(red 10%,yellow 90%)</p>
<div style="width:200px;height:200px;border-radius:50%;background:radial-gradient(red,yellow)"></div>
<div style="width:400px;height:200px;background:-webkit-radial-gradient(90% 60%,closest-side,red,yellow)"></div>
<div>形状circle ellipsis</div>
<div>中心点 60% 40%</div>
<div>渐变停止：closest-side forthest-side losest-corner forthest-corner</div>
<div>chorme内核-webkit- 火狐-moz-</div>
<div>重复渐变 background:repeating-linear-gradient()</div>
<div style="width:200px;height:400px;background:repeating-linear-gradient(red 0%,green 20%)"></div>
<div>太极案例</div>
<div class="taichi"></div>
<p>动画过渡属性 transition</p>
<p>动画效果 linear匀速 ease逐渐慢下来 ease-in加速 ease-out减速 ease-in-out先加速后减速 cubic-bezier()贝塞尔曲线</p>
<p>延迟</p>
<p>单一属性 transition-property transition-duration transition-timing-function transition-delay</p>
<div class="transition-box"></div>
<p>opacity不透明度</p>
<p>2d属性-transform</p>
<p>动画</p>
<p>translateX translateY translate()</p>
<div id="translate-box"></div>
<p>scale缩放 scaleX scaleY transform-origin</p>
<div id="scale-box">
<img src="https://i0.hdslb.com/bfs/face/2f4a097795dafce7943d9067e4a5e946b4039c12.jpg@240w_240h_1c_1s.webp">
</div>
<p>旋转rotate 正值顺时针 rotateX rotateY transform-origin</p>
<div class="taichi2"></div>
<p>倾斜 skew skewX skewY</p>
<p>案例</p>
<div class="anli-box">
<img src="https://i0.hdslb.com/bfs/face/2f4a097795dafce7943d9067e4a5e946b4039c12.jpg@240w_240h_1c_1s.webp">
<h2>花哨花哨</h2>
<p>1111</p>
<p>22222</p>
<p>333333</p>
</div>
<p>关键帧动画 animation</p>
<div class="taichi3"></div>
<p>单一属性animation-name动画名称 animation-durationn动画持续时间
animation-timing-function动画过渡类型 animation-delay延迟时间
animation-iteration-count循环次数 animation-direction是否反向运动:normal reverse alternate alternate-reverse
animation-play-state动画状态:running paused
</p>
<p>animation-fill-mode:none|forwards</p>
<p>轮播案例</p>
<div class="swipe-container">
<div class="swipe-wrapper">
<div class="swipe-slider">
<img src="https://i0.hdslb.com/bfs/banner/9898c0a646da050fcb92274ad7cf6589f5bcefef.png@976w_550h_1c.webp">
</div>
<div class="swipe-slider">
<img src="https://i0.hdslb.com/bfs/banner/3d2416f65593205263fa745efccde7468b027abd.jpg@976w_550h_1c.webp">
</div>
<div class="swipe-slider">
<img src="https://i0.hdslb.com/bfs/banner/989c3fb2022cfb8164cd57c1619c6cccaa7e19d3.jpg@976w_550h_1c.webp">
</div>
<div class="swipe-slider">
<img src="https://i0.hdslb.com/bfs/banner/3f3311aac8d8a68d365999045fbcd4f15e99eb21.jpg@976w_550h_1c.webp">
</div>
<div class="swipe-slider">
<img src="https://i0.hdslb.com/bfs/banner/9898c0a646da050fcb92274ad7cf6589f5bcefef.png@976w_550h_1c.webp">
</div>
</div>
</div>
<p>逐帧动画 step-start step(1,start)保留下一帧，看不到第一帧
step-end step(1,end) 保留当前帧，看不到最后一帧</p>
<p>3d transform-style:preserve-3d
</p>
<p>设置景深 perspective:900px(父元素）（建议） transform:perspective(1200px)子元素 </p>
<p>观察角度 perspective-origin:left top</p>
<p>平移 transform:translate3d(0,0,1) translateZ(1px)</p>
<P>旋转 transform:rotate3d(0,0,1,30deg)</P>
<p>缩放 transform:scale3d(1,1,10) </p>
<p>立方体</p>
<div class="cube">
<div class="cube-item">1</div>
<div class="cube-item">2</div>
<div class="cube-item">3</div>
<div class="cube-item">4</div>
<div class="cube-item">5</div>
<div class="cube-item">6</div>
</div>
<p>网格布局 display:grid</p>
<p>grid-template-rows:200px 200px 200px grid-template-columns</p>
<p>repeat(3(auto-fill),33.33%)</p>
<p>片段 fr</p>
<p>minmax(100px,300px)</p>
<p>auto</p>
<p>间距 grid-gap (grid-)row-gap (grid-)column-gap</p>
<p>区域命名与合并</p>
<p>grid-template-area:'a,b,c'
'a,b,c'
'a,b,c';
</p>
<p>项目属性
grid-column-start:1
grid-column-end:2
grid-column:1/2
grid-row-start
grid-row-end
</p>
<p>javascript</p>
<p>变量 var 只能由数组字母下划线美元符组成 不能使用关键字 区分大小写 不能数字开头</p>
<p>0x十六进制 0o八进制 0b二进制</p>
<p>空类型 null有值 一个空值 undefine无值</p>
<p>typeof 检测数据类型 typeof a</p>
<p>数据类型转化</p>
<p>Number() parseInt() parseFloat()</p>
<p>String() a.toString()</p>
<p>Boolean()</p>
<p>作用域</p>
<p>对象数据类型 对象：键值对的集合 a.name a['name'] delete a.name</p>
<p>数组：有序的数据的集合 arr.length</p>
<p>数组的常用方法 push追加到末尾，返回长度 pop删除最后一个，返回被删除的数据 unshift在最前面添加数据，返回长度 shift删除第一个数据并返回 reverse反转数组 splice(开始的索引，多少个，插入的新数据)返回被删除的数据 sort排序</p>
<p>sort(function(a,b){return a-b}) sort(function(a,b){return b-a})</p>
<p>join('-')连接成字符串 concat拼接数组 slice(1,2)截取数组 indexOf查询下标</p>
<p>forEach(function(item,index,arr){}</p>
<p>map(function(item,index,arr){})映射</p>
<p>filter(function(item,index,arr){}过滤数组</p>
<p>every(function(item,index,arr){})</p>
<p>some(function(item,index,arr){}</p>
<p>字符串常用方法</p>
<p>charAt() toLowerCase() toUpperCase() replace(换下内容，换上内容) trim()去除首尾的空格 split('-') </p>
<p>substr(开始索引，多少个) substring(开始索引，结束索引) slice(开始索引，结束索引) 包前不包后</p>
<p>数字常用方法</p>
<p>Math.random()获取0~1之间的随机小数</p>
<p>Math.round(数字)四舍五入</p>
<p>Math.ceil Math.floor 向上，下取整</p>
<p>Math.pow(2,5)</p>
<p>Math.sqrt()二次方根 abs取绝对值 max(a,b,c)取最大值 min() PI </p>
<P>时间常用方法</P>
<p>getMonth() </p>
<p>BOM操作</p>
<p>width.innerWidth</p>
<p>width.innerHeight</p>
<p>alert提示框 comfirm询问框 prompt输入框</p>
<p>window.open('地址') window.close()</p>
<p>浏览器事件 window.onload window.onresize window.onscroll</p>
<p>浏览器的历史纪录操作 window.history.back() window.history.foward()</p>
<p>浏览器卷去的尺寸 高度document.documentElement.scrollTop(有DOCTYPE标签) document.body.scrollTop</p>
<p>浏览器卷去的尺寸 宽度document.documentElement.scrollLeft(有DOCTYPE标签) document.body.scrollLeft</p>
<p>或运算输出第一个真值 否则最后一个假值</p>
<p>浏览器滚动到 window.scrollTo(top,left) window.scrollTo({
left:;
top:;
behavior:'smooth';
})</p>
<p>定时器 间隔定时器 延时定时器 setInterval(函数，时间) setTimeout(函数,时间)返回值为当前页面第几个定时器</p>
<p>关闭定时器 clearInterval cleatTimeout</p>
<p>DOM操作</p>
<p>获取元素</p>
<p>document.getElementById document.getElementsByClassName document.getElementsByTagName document.querySelector('选择器') document.querySelectorAll('选择器')</p>
<p>操作元素</p>
<p>文本 innerText</p>
<p>超文本 innerHTML</p>
<p>操作元素属性 原生属性 元素.属性名 自定义属性 元素.getAttribute setAttribute('属性名','属性值'） removeAttribute('属性名')</p>
<p>类名 元素.className ='' 行内样式 元素.style=''中划线改驼峰 获取行内与非行内样式window.getComputedStyle(元素).样式表</p>
<p>节点操作</p>
<p>创建节点 document.createElement('标签名称')</p>
<p>插入节点 父节点.appendChild() 父节点.insertBefore(要插入的子节点，哪个子节点前面)</p>
<p>删除节点 父节点.removeChild() 节点.remove()</p>
<p>替换节点 父节点.repalace(换上的节点,换下的节点)</p>
<p>克隆节点 节点.clone(是否克隆后代节点) M </p>
<p>获取元素尺寸 元素.offsetHeight 元素.offsetWidth(包括border) 元素.clientHeight 元素.clientWidth</p>
<p>鼠标事件对象关键信息 offserX Y clientX Y pageX pageY</p>
<p>键盘事件对象关键信息 keyCode</p>
<p>阻止事件事件对象.stopPropagation</p>
<p>事件委托</p>
<p>面向对象</p>
<p>字面量创建对象 内置构造函数创建对象 工厂函数创建对象 自定义函数构造创建对象</p>
<p>原型与原型链 prototype __proto__</p>
<p>ES6语法 ES2015</p>
<p>定义变量 let const</p>
<p>var 会进行预解析 可重名 没有块级作用域</p>
<p>箭头函数 ()=>{} 只有一个形参可省略括号 只有一个语句可省略{} 没有arguments 没有this</p>
<p>函数默认值</p>
<p>解构赋值 let [a,b]=['hello','world']; let {name:a,age:b}=obj</p>
<p>模板字符串 ``可换行 ${变量}</p>
<p>展开运算符...</p>
<p>类语法 class 类名{constructor(){构造函数体}原型上的方法} 必须和new连用 静态属性与静态方法static a=100 static go(){}</p>
<p>前后端交互</p>
<p>ajax</p>
<p>window.location.href=''</p>
<p>jQuery $</p>
<p>jQuery选择器 $('选择器')</p>
<p>jQuery筛选器 .first() .last() .eq(索引) .next() .nextAll() .prev() .prevAll() .parent() ,parents() .siblings()所有兄弟元素 .find(选择器)在后代中找</p>
<p>操作文本内容 html() text() val()</p>
<p>操作元素类名 addClass() removeClass() toggleClass()</p>
<p>操作样式 css('width') css('width',300) px可省略 css({width:200,height:300,'background-color':'red'})</p>
<p>操作属性 attr(属性名)一般用于自定义属性 .removeAttr() .prop()响应在对象上 .removeProp()</p>
<p>获取元素尺寸height() width()内容区域的尺寸 innerWidth innerHeight包括padding outerWidth outerHeight 包括边框 outerWidth(true) outerHeight(true) 包括margin 隐藏也可获取</p>
<p>获取偏移量 offset()页面左上角,返回对象 position定位位置 </p>
<p>事件绑定 on('事件类型'，处理函数) 事件委托on('事件类型',选择器，处理函数) 批量写法on({事件1：处理1,事件2：处理2})</p>
<p>one() 只触发一次 同上</p>
<p>hover(移入触发，移出触发) 一个为都执行</p>
<p>常用事件函数 click() mouseover() mouseout() change()...</p>
<p>事件的解绑和触发</p>
<p>off(事件类型)全部解绑 off(事件类型，要解绑的函数名)</p>
<p>代码触发事件 trigger(事件类型)</p>
<p>jQuery动画函数 show() hide() toggle(时间，曲线，回调) </p>
<p>折叠动画 slideDown slideUp slideToggle</p>
<p>渐隐渐显动画 fadeIn fadeOut fadeToggle fadeTo</p>
<p>综合动画 animate()</p>
<p>运动结束函数 stop finish</p>
<p>ajax请求 $.ajax({url,method,data,async,success,error})</p>
<a href="./jquery.html">电商案例</a>
<p>vue框架</p>
<img src="img/vue-logo.svg" width="100" >
<div id="myapp">10+36={{10+36}} {{myname}}
<p>vue模板语法:</p>
{{count}}
<button @click="change" >++</button>
<p>@click绑定点击事件</p>
<P>:class="{{}}"</P>
<img :src="srcc">
<button @click="show">点击查看大佬</button>
<p>Vue语法糖：</p>
<ul >
<li v-for="data in graList">{{data}}</li>
</ul>
<p v-show="isshow">显示成功！！</p>
<P v-if="isshow">创建成功！！</P>
<button @click="show1" >{{isshow?'删除':'创建/显示'}}</button>
<ul>
<li v-for="(data,index) in list">{{data}}--{{index}}</li>
</ul>
<p>todolist</p>
<input type="text" v-model="value"/>
<button @click="handleAdd">add</button>
{{value}}
<ul>
<li v-for="(data,index) in datalist">{{data}}<button @click="handleDel(index)">Delete</button></li>
</ul>
<div v-if="!datalist.length">你的todolist空空如也</div>
<p>v-html指令</p>
<p>点击变色：</p>
<div class="color-box">
<div @click="colorItemClicked(index)" :class="currentColorItem===index?'color-box-item':'color-box-item-active'" v-for="(data,index) in colorBoxList" >{{index}}</div>
</div>
<div style="Clear:left;">
<p>vue2:class&style</p>
<pre>
<div :class="classobj" :style="style">1</div>
data:{
classobj:{
aa:true;
},
classobj2:['aa','bb'],
style:{
backgroundColor:'red',
}
}
Vue.set(对象，属性，true)
vue3:class&style
var obj={
//函数式
data(){
return{
myname:huashao,
arr:['6','6'],
}
};
methods:{
xxx(){
}
}
}
Vue.createApp(obj).mount('#myapp')
</pre>
</div>
<p>条件渲染：v-if v-else v-else-if template</p>
<p>列表渲染：（item,key) of obj</p>
<p>key设置：</p>
<p>虚拟dom:js对象描述节点 diff算法 patch补丁 item.id</p>
<p>检测数组变动</p>
<pre>
a.使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reserve()
b.以下不行
filter() concat() slice() map() 解决方法：新数组替换旧数组
c.不能检测以下变动的数组
aa[0]=0;
解决方法：(1)Vue.set(aa,0,1)
(2)aa.splice(0,1,1)
</pre>
<div>模糊查询1-双数组</div>
<input @input="check_input" v-model="checkData"></input>
<ul>
<li v-for="data in checkDataList_new">{{data}}</li>
</ul>
<div>模糊查询2-函数表达式</div>
<input @input="check_input" v-model="checkData"></input>
<ul>
<li v-for="data in checkreturn()">{{data}}</li>
</ul>
<div>事件处理器 handel($event)</div>
<div>事件修饰符 stop阻止冒泡 self本身触发 once一次 prevent阻止跳转</div>
<div>按键修饰符 @keyup.enter .esc .up .down .left .right .shift .ctrl</div>
<div>表单控件绑定</div>
<div>购物车</div>
</div>
<script>
const myapp=new Vue({
el:"#myapp",
data:{
myname:'huashao',
count:0,
heightt:30,
srcc:"",
isshow:false,
list:['名称','价格','数量'],
graList:['指令','v-lind动态绑定属性 简写：','v-if动态创建/删除','v-show动态显示/隐藏','v-on:click动态绑定事件 缩写@click','v-for遍历','v-model双向绑定表单'],
datalist:[],
value:'我是value',
colorBoxList:["6",'6','6','6','6','6','6'],
checkData:'',
checkDataList:['aa','abc','ccc','ggg','中国'],
checkDataList_new:['aa','abc','ccc','ggg','中国'],
currentColorItem:0,
classobj:{
aa:true,
},
classobj2:['aa','bb'],
style:{
backgroundColor:'red',
}
},
methods:{
change(){
this.count++;
},
show(){
this.srcc="https://avatars.githubusercontent.com/u/499550?v=4";
},
show1(){
this.isshow=!this.isshow;
},
handleAdd(){
this.datalist.push(this.value)
this.value=''
},
handleDel(index){
this.datalist.splice(index,1)
},
colorItemClicked(index){
this.currentColorItem=index;
},
check_input(){
//console.log(this.checkData)
var a=this.checkData
this.checkDataList_new=this.checkDataList.filter(item=>item.includes(this.checkData))
},
checkreturn(){
return this.checkDataList.filter(item=>item.includes(this.checkData))
}
}
})
</script>
<a name="button"></a>
</body>
</html>
3449
03-21
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
