随笔分类 - 前端
1
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：<script> // {#获取服务器地址和端口和#} console.log(location.host) // {#获取服务器ip地址#} console.log(location.hostname) // {#获取服务器完整的url#} console.log(location.href) /
阅读全文
摘要：<script> // 定时器：两秒之后执行函数中的内容，2000毫秒，延迟性操作设置之后就算设置延迟0秒，这个函数中的内容也会晚于后面语句执行。 window.setTimeout(function(){ alert('警告！') },2000) // 定时器：每秒执行一次函数中的内容，num+1
阅读全文
摘要：<script> // 仅弹出警告提示框 window.alert('警告！') // 返回False或True var a = window.confirm('你确定要执行次操作吗？') console.log(a) // 返回输入的内容 var name = window.prompt('请输入
阅读全文
摘要：1.获取当前时间 <script> // 获取当前时间 var now = new Date() console.log(now) </script> 结果： 2.自定义时间 <script> // 字符串方式自定义时间 var xmas = new Date('December 25,1998 1
阅读全文
摘要：<script> var str = 'hello world' // 获取字符串的长度 console.log(str.length) // 获取下标为1的字符 console.log(str.charAt(1)) // 获取下标为1的字符的对应的编码 console.log(str.charCo
阅读全文
摘要：1.join()方法 <script> var wdc = [1,2,3,4,5]; // 将数组中的参数用‘+’号连接，并转换为字符串 var qqq = wdc.join('+'); console.log(qqq) </script> 结果： 2.栈(后进先出)方法 push():往数组的最后
阅读全文
摘要：<script> // 用构造函数创建一个空数组，和下面直接创建的空数组效果一样。 var colors1 = new Array(); var colors2 = []; // 向创建的数组中插入值 colors1[0] = 'red'; // 判断colors1是否是一个数组，如果是则返回Tru
阅读全文
摘要：var str = 'hello world' // 获取字符串长度 console.log(str.length) // 获取字符串指定位置的字符 console.log(str.charAt('4')) // 获取字符串指定位置字符的字符编码（Unicode） console.log(str.c
阅读全文
摘要：HTML： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题标签</title> <script src="js/index.js"></script> <script> first(); // 直接调用全局对象window
阅读全文
摘要：1.行内元素垂直居中 display: table-cell; /*设置成单元格格式*/ vertical-align: middle; /*垂直居中*/ 2.块级元素水平垂直居中 /*水平居中*/ margin: 0 auto; 垂直居中： 外面盒子： display: table-cell; /
阅读全文
摘要：1.背景色 background-color: red; /*设置背景色为红色*/ 2.背景图片 background-image: url('../img/1.jpg'); /*设置背景图片（默认平铺）*/ background-repeat: no-repeat; /*不平铺*/ backgro
阅读全文
摘要：1.相对定位 position:relative; （1）不脱离标准文档流，可以调整元素 （2）以原来的位置为参考点 position: relative; /*设置为相对定位*/ top: 30px; /*向下移动30像素*/ left: 100px; /*向右边移动100像素*/ 2.绝对定位
阅读全文
摘要：浮动的现象： 0.文字环绕。 1.脱离了标准标准文档流。 2.浮动元素互相贴靠。 3.浮动元素有收缩现象。 float: left; /*左浮动*/ float: right; /*右浮动*/ 清除浮动： 1.给父元素设置固定高度 缺点：使用不灵活 后期不易维护 应用：网页中盒子固定高度区域，比如固
阅读全文
摘要：1.宽度 width: 200px; /*设置宽度为200像素*/ 2.高度 height: 200px; /*设置高度为200像素*/ 3.内边距 padding: 20px; /*设置内边距为20像素*/ padding: 20px 40px; /*设置上下边距称为20像素，左右边距为40像素*
阅读全文
摘要：元素的分类和特征： 1.块级元素 （1）独自占一行 （2）可以设置宽高，如果不设置宽，默认是父标签的100%的宽 2.行内元素 （1）行内元素在一行内 （2）不能设置宽高 3.行内块元素 （1）在一行内显示 （2）可以设置宽高 /*元素隐藏*/ display:none; /*转为行内块元素*/ d
阅读全文
摘要：1.字体 font-family:"字体1", "字体2"，……; /*从左到右依次选择用户电脑中的字体*/ 2.字体大小 font-size: 100px; /*设置字体大小为100像素*/ 3.字体颜色 /*rgb表示法：*/ color:rgb(125,45,199); /*rgba表示法：a
阅读全文
摘要：一、基础选择器 标签（元素）选择器 标签名{ 样式； }/*选择所有标签名的所有元素。*/ 类（class）选择器 .类名{ 样式； } /*选择类名相同的所有元素*/ id（身份证）选择器 #id号{ 样式； } /*选择对应id的原色*/ 二、高级选择器 后代选择器 父代标签 子代标签{ 样式；
阅读全文
摘要：<form> <!-- 默认为text：明文显示 --> <input type="text" name=""> <br> <!-- 换行 --> <!-- password:密文输入框 --> <input type="password" name=""> </form> <!-- value:设
阅读全文
摘要：<!-- src:图片地址 width:宽度 height:高度 alt:当图片加载失败时显示的文字 title:鼠标放到图片上时显示的提示 --> <img src="1.jpg" width="200" height="200" alt="柴犬" title="小狗">
阅读全文
1
