Grunt自动化构建工具 安装npm install grunt -D npm install grunt-cli -g

前端基础回顾再整理 HTML{alert type="info"}<!--描述 HTML 文档的元数据:每三十秒刷新界面--> <meta http-equiv="refresh" content="2" /><!--网站图标--> <link rel="shortcut icon" href="图片地址" type="image/x-icon" /><!--规定页面上所有链接的默认 URL 和默认目标 置于头部之内--> <base href="..." target="_blank">/*media属性:对两种不同媒介类型使用不同样式表*/ <style type="text/css" media="print"> <style type="text/css" media="screen and (max-height:700px)"> /*应用样式到元素的父元素及其子元素。*/ <style type="text/css" scoped>{card-list}{card-list-item}MDN参考文档{/card-list-item}{card-list-item}Media Types文档参照{/card-list-item}{/card-list}img、、 图像映射<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>属性表述属性表述border显示框线bgcolor表格背景cellspacing单元格之间的距离cellpadding单元格内容与其边框之间的空白<!--type: a A i I 1 --> <ol start="50" type="I" > <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>iframe<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200" frameborder="0" scrolling="auto"> </iframe>{/alert}HTML5{callout color="#70c8ff"}HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。{/callout} {alert type="info"}<!--画布 --> <canvas id="myCanvas" width="200" height="100"></canvas>canvas基本了解表单属性required ： 必填placeholder ： 提示autofocus ： 自动聚焦autocomplete ： 自动填充 on/offformaction ： 表单提交的URL地址.覆盖form的action属性 与type="submit"配合使用formenctype ： 提交到服务器的数据编码 与type="submit"配合使用 “ multipart/form-data ”全局属性hidden : 隐藏contenteditable : 元素是否可编辑accesskey : 配合Alt实现快捷访问超链接{/alert}CSS/CSS3引入和@import引入差别{card-list}{card-list-item}1.本质的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。{/card-list-item}{card-list-item}2.加载顺序的差别： 当一个页面被加载的时候（就是被浏览者浏览的时候) ，link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。{/card-list-item}{card-list-item}3.兼容性的差别: @import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。{/card-list-item}{card-list-item}4.使用 dom(document o bject model文档对象模型 )控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的。{/card-list-item}{/card-list}文本{alert type="success"}对齐方式 ： text-aligncenter ： 居中right ： 居右justify : 两端对齐文本修饰 : text-decoration: text-decoration-line text-decoration-color text-decoration-styleoverline : 上划线 red dotted/wavyline-through ： 管穿线 red dotted/wavyunderline ： 下划线 red dotted/wavy文本转换 ： text-transformuppercase ： 大写lowercase ： 小写capitalize ： 首字母大写段落中的文本换行 : white-spacenormal ： 默认。空白会被浏览器忽略。nowrap ： 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。inherit ： 规定应该从父元素继承 white-space 属性的值。pre : 空白会被浏览器保留。其行为方式类似 HTML 中的 标签。pre-wrap : 保留空白符序列，但是正常地进行换行。pre-line : 合并空白符序列，但是保留换行符。单词、汉字间隔 : word-spacing字母、汉字 : letter-spacing文本方向 ： direction : rtl设置元素的垂直对齐 : vertical-align 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 使元素及其后代元素的底部与整行的底部对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length 将元素升高或降低指定的高度，可以是负数。 % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。 边框合并 ： border-collapse:collapse;隐藏元素 ： visibility:hidden控制内容溢出元素框时显示的方式 : overflowvisible : 默认值。内容不会被修剪，会呈现在元素框之外。hidden ： 内容会被修剪，并且其余内容是不可见的。scroll ： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto ： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit ： 规定应该从父元素继承 overflow 属性的值。文本溢出显示 ： text-overflowellipsis ： 显示省略符号 ... 来代表被修剪的文本clip ： 剪切文本string ： 使用给定的字符串来代表被修剪的文本允许长的内容可以自动换行 ： word-wrap:break-word ;元素的总高度和宽度包含内边距和边框 : box-sizing: border-box;box-shadow: h-shadow/水平阴影位置 v-shadow/垂直阴影位置 blur/模糊距离 spread/阴影大小 color/颜色 inset;{callout color="#f4ddbe"}标注内容{/callout}mediatype : all/全部 ; print/打印机，screen/用于电脑屏幕，平板，智能手机等,speech/用于屏幕阅读器not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。only: 用来定某种特别的媒体类型。all: 所有设备，这个应该经常看到。and ：and 操作符用于将多个媒体查询规则组合成单条媒体查询，{/alert}多媒体查询{alert type="info"}1. 在中使用/* 多媒体查询语法 */ @media not|only mediatype and (mediafeature and|or|not mediafeature) { CSS 代码...; } /* 代码一 */ @media screen and (max-width: 600px) { div.example { display: none; } } /* 代码二 */ @media screen and (max-width: 699px) and (min-width: 520px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } ul li a:before { content: "Email: "; font-style: italic; color: #666666; } } /* 代码三 */ @media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) { ul li a { padding-left: 30px; background: url(email-icon.png) left center no-repeat; } }2. 在中使用<!-- 多媒体查询语法 --> <link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css"> <!-- 代码 --> <link rel="stylesheet" media="screen and (min-width:300px)" href="print.css">3. 在@import中使用/* 多媒体查询语法 */ @import url('landscape.css') screen and (orientation:landscape); /* 代码 */ @import url('landscape.css') only screen and (min-width:400px);{/alert}JavaScript标签{alert type="warning"}可以为代码块设置标签，使用break跳出指定代码框cars=["BMW","Volvo","Saab","Ford"]; list: { document.write(cars[0] + "<br>"); document.write(cars[1] + "<br>"); document.write(cars[2] + "<br>"); break list; document.write(cars[3] + "<br>"); document.write(cars[4] + "<br>"); document.write(cars[5] + "<br>"); }{/alert}this{alert type="info"}　　all() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。　　两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。{/alert}JavaScript 静态方法{alert type="success"}class Runoob { constructor(name) { this.name = name; } static hello() { return "Hello!!"; } } let noob = new Runoob("菜鸟教程"); // 可以在类中调用 'hello()' 方法 document.getElementById("demo").innerHTML = Runoob.hello(); // 不能通过实例化后的对象调用静态方法 // document.getElementById("demo").innerHTML = noob.hello(); // 以上代码会报错{/alert}JQuery