WEB基础---HTML，Css，js用法最全汇总
1.HTML
基本结构：
hello html！ head标签里可写：
mypage body标签：
你好！！！！
林富豪 a<b c>d <!--
用于换行 加粗ad <小于 >大于 1. 2.&ensp；比 空格数多一点 3. 空格更多一点 -->页内布局常用标签：
我的标题
我的标题
我的标题
我的标题
我的标题
我的标题
我的段落
我的div 普通文本
行内结构排布常用标签：
普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本
自定义列表：
- 列表标题
- 列表内容
有序列表：
- 新闻1
- 新闻2
- 新闻3
无序列表：
- 新闻1
- 新闻2
- 新闻3
a标签：
我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接
相对路径./与../区别_imyujh的博客-CSDN博客_相对路径
a标签做锚点：
我的文本我的超链接 我的标题
回到顶部 回到顶部 指定跳转
a标签其它属性：
我的文本我的超链接
img标签：
![图片]()
一些常用的网站：w3school w3cschool 这些网站里有一些完整的html标签。
表格标签：
用户信息表 姓名 性别 年龄 小明 男 15 小白 女 18
表单标签：
表单元素标签：
性别： 女 女装大佬
兴趣：爬山 蹦极 游泳 喝水
<!-- 下拉列表select，配合option标签使用。name属性在select里.且一般传输是传码，不传文本，故在option里加value属性。下拉列表框默认选中第一个值，即下面的北京，可用selected="selected"调整.multiple="multiple"可将单选变为多选 --> 北京 上海 深圳
页面嵌套标签（已过时）（这是不用body标签）：
iframe标签(还在用)：
新页面
2.Css
引入Css代码方式（最常用的）：
元素标签选择器：
测试文本
测试文本二
class选择器（style里推荐）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
id选择器（css里不建议使用）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
class允许多值：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
并集选择器（同时选多个元素和其它选择器，逗号隔开）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
交集选择器（之间无任何标点 ）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
后代选择器（父元素+空格+子元素，指所有满足条件的后代，子，孙，...）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
子代选择器：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
属性选择器（[属性=属性值]）：
通用选择器（可被其它选择器轻易覆盖）：
咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
css常用样式属性：
悯农--李绅
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
超链接我的文本 <!-- 测试文字
--> - 项目1
- 项目2
- 项目3
display属性：
盒子模型相关属性：
块嵌套：
案例：打地鼠
案例：div+css替代frameset或farme做页面嵌套
伪类选择器：
/*伪类选择器，用于选取元素的状态，比较常见的两个状态：hover鼠标悬停，active鼠标点击（点击但没松开），只要是页面里能看到的元素都有状态，都可以修改*/ a:hover{ /* 悬浮状态 */ color:lightcoral; /* 修改文字颜色 */ font-size:x-large; /* 修改文字大小 */ } a:active{ /* 点击效果 */ color:purple; } .mydiv{ width:100px; height:100px; border:1px solid black; background-color:lightgreen; } .mydiv:hover{ background-color:lightblue; cursor:pointer; /* 鼠标变成手也是样式效果 */ } .mydiv:active{ background-color:olive; } 超链接
定位属性-position：
导航条制作（行业内用ul和li去做）：
3.javascript
javascript引入（最常用）：
页面中使用script标签，编写js代码 console.log("hello world!!!!")
js基本语法：
类型转换函数：
比较运算符：
var myNum1 = 10; var myStr1 = "10"; console.log(myNum1==myStr1); //true js里有一些内置转换，会先将字符型数字和数字做一次转换，若转换成功， //就直接当做数字用 console.log(myNum1===myStr1); //false 希望直接比较，不用内置转换，就用=== //其它内置转换的情况var mybol1 = true;var myNum2 = 1;console.log(mybol1==myNum2); //trueconsole.log(mybol1===myNum2); //false
逻辑运算符：
console.log(!0); //true ！的一个特殊用法：将数值类型转成布尔类型
小数相加问题：
var myNumber1 = 0.1;var myNumber2 = 0.2;//console.log(myNumber1 + myNumber2 ); //0.30000000000000004 精度丢失 //用toFixed保留指定位数的小数，转成的是字符串类型。想要数字再转一下，用parseFloat()console.log(（myNumber1 + myNumber2）.toFixed(1) ); //0.3
条件语句：
//if-else var mySource = 100; if(mySource>80){ console.log("良好"); }else if(mySource>60){ console.log("及格"); }else{ console.log("差劲"); } //switch-case var myGrade = 'g'; switch(myGrade){ case 'g':console.log("奖励一袋零食");break; case 'a':console.log("奖励一颗糖");break; case 'x':console.log("奖励一巴掌");break; default:console.log("啥都没有");break; }
循环语句：
//for var myarr = [1,4,5,2,4,5]; //js里定义数组，直接[] //遍历数组 for(var i=0;i<myarr.length;i++){ console.log(myarr[i]); } //for-in循环 var myarr1 = [1,4,5,2,4,5]; for(var x in myarr1){ console.log(myarr1[x]); //x是索引 } //while var myflag = true; while(myflag){ if(xxx){ myflag = false; } } //do-while do{ //循环体 }while(myflag)
课堂练习：
1.将1549各个位都摘出来，再相加，并输出相加后的结果。
var myNum = 1549; var myGe = myNum%10; var myShi = parseInt(myNum/10)%10; var myBai = parseInt(myNum/100)%10; var myQian = parseInt(myNum/1000); var mySum = myGe + myShi + myBai + myQian; console.log(mySum);
2.0-6分别表示周日，周一到周六。在控制台输出工作日（一到五）和周末（六和日）
var myDay=0; switch(myDay){ case 0: case 6:console.log("周末");break; case 1: case 2: case 3: case 4: case 5:console.log("工作日");break; default:console.log("输入不合法");break; }
3.输出乘法口诀表，但不输出到控制台，输出到页面。用document.write("
abc
"); //可带标签
for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(j+"x"+i+"="+j*i ); document.write(" "); if(j*i<10){ //如果不是两位，补一个空格 document.write(" "); } } document.write("
"); }
系统函数：
console.log(isNaN("abc")); //true console.log(!isNaN("10")); //true//evalvar mystr = "1+5*3";console.log(mystr); //1+5*3//如果字符串是一个算式，eval可将结果运算出来（把字符串当脚本运行，返回结果）console.log(eval(mystr)); //16
自定义函数：
function myfun(){ //不带形参的函数 console.log("运行了自定义函数"); } myfun(); //函数的调用 function myfun1(a,b){ //带参数的函数，参数在js里是弱类型，不需要指明类型.多个参数用逗号隔开 var mySum = a+b; console.log(mySum); //可打印出运算结果 } myfun1(1,3); //调用要给实参 function myfun2(a,b){ var mySum = a+b; return mySum; //可返回数据，比java少了返回值类型的定义 没返回值则不用加return } var myNum = myFun2(1,3); //接收返回值，可自己定义一个变量 console.log(myNum); //匿名函数的写法，不用加函数名 var myFun2 = function(a,b){ return a-b; } console.log(myFun2(3,1)); //2
鼠标点击 onclick事件：
鼠标悬浮onmouseover事件：
参数内容相同可简化：
当效果变化的元素和触发事件的元素是同一个元素，可简化代码：
点击一个元素，使另一个元素触发效果，还是用id去写：
onfocus获取焦点事件：
onchange内容改变事件：
也可以改变下拉列表的选项使div块发生改变：
页面载入onload事件（此事件可用script标签放到最下面替换）：
onload也可用元素绑定事件去写：
innerHTML属性：
我的标题
//操作元素的通用方法：找到元素，再点元素的属性。比如改文本框，按钮的值 //对双标签里的内容,用什么属性合适？ 用innerHTML，代表双标签里的内容 document.getElementById("mytitle").innerHTML = "new title";
键盘按键 onkeyup事件：
案例：手机号输入效验：
网上的效果，正确给个对勾图片，错误给个叉叉图片：
var myreg = /^1(3|4|5|7|8)\d{9}$/; function checkText(){ if(myreg.test(document.getElementById("mytext").value)){ document.getElementById("myimg").style.display = "inline"; /* 操作显示图片 */ document.getElementById("myimg").src = "./对勾.png"; }else{ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./false.png"; } }
表单提交 onsubmit事件：
var myreg = /^1(3|4|5|7|8)\d{9}$/; function checkText(){ var flag = false; if(myreg.test(document.getElementById("mytext").value)){ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./对勾.png"; flag = true; }else{ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./false.png"; flag = false; } return flag; } function checkMail(){ return true; } function mySubmit(){ //效验其它所有结果，所有结果都为true才返回true return checkText()&&checkMail(); }
BOM浏览器对象模型：
windows对象：
console.log(window.document); //用document可在控制台看到完整的代码 //document属于window对象，windows可省略不写 //以下全部过时，了解： //alert("警告框"); //prompt("请输入"); //confirm("确定离开么 还有xx分钟就可以领取大奖")
History对象：
//浏览器历史记录的按钮实际上就是前进和后退按钮， function myBack(){ //history.back(); 加载上一个浏览的文档(浏览器里的后退) //history.forward(); 加载下一个浏览过的文档（浏览器里的前进） history.go(0); //刷新页面，相当于在第0个历史记录里跳转 }
Location对象：
function myHREF(){ //页面跳转 location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=123&fenlei=256&rsv_pq=b3903db40004d883&rsv_t=26dfCMNmJN8OLu8M%2F6R0rmWsUMQJPAWUKGi369qTEIZJP7hLs1UlUXlvnmI&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=1073&rsv_sug4=1297" } //浏览器的刷新按钮通过location对象调用reload属性 function myRefresh(){ location.reload(); //刷新当前页面 }
Document对象:
div1 div2 span1
鹅鹅鹅
曲项向天歌
拔毛浮绿水
红掌拨清波
//document对象属于windows对象，代表当前文档 document.title="mypage"; //操作title标签（页面左上角的标题） console.log(document.getElementById("mytext")); //通过id找到唯一的一个元素 console.log(document.getElementsByTagName("div")); //通过标签名查找元素 console.log(document.getElementsByName("hobby")); // 通过name属性查找元素 console.log(document.getElementsByClassName("mycls")); //通过class的值查找元素 console.log(document.getElementById("mydiv").getElementsByTagName("p")); //在某个元素中查找元素 //让文本框1,2,3的颜色改变 通过元素属性筛选元素 var eles = document.getElementById("aimdiv").getElementsByTagName("input"); //找到5个input标签 for(var i = 0;i<eles.length;i++){ if(eles[i].type=="text"){ //判断type是否为text，是则变为红色 eles[i].style.color="red"; } }
Window对象常用方法:
//打开新窗口open。传入参数：1.打开窗口的地址 2.窗口名字 //3.一些可选项，比如窗口大小，所在位置，是否要滚动条，工具栏等 后两个参数选填，第一个必填 /* function myOpen(){ window.open("2history对象.html","",""); } */ //关闭窗口，没有参数。谁调用，就关谁（windows对象调用的，windows对象代表当前窗口） /* function myClose(){ window.close(); } */ //关闭新窗口，不是当前窗口，只要获得新窗口对象，就可关闭。 //新窗口对象通过open的返回值获取 //函数内定义的变量只能在自己函数中生效，应用全局变量 //注：全局只针对当前页面生效 var newWin; function myOpen(){ newWin = window.open("2history对象.html","",""); } function myClose(){ newWin.close(); //此时关闭的是新窗口 }
定时函数:
//两个定时函数： 1.setInterval（fun,time）定时重复不断地执行 clearInterval 停止 //两个参数，1.要执行的函数对象 2.间隔多长时间去执行，是毫秒数 //2.setTimeout（fun,time）定时执行一次 clearTimeout 停止 function myLog(){ console.log("1"); } setInterval（"myLog()",1000); //页面加载结束后触发该定时函数，该定时函数每隔一秒执行一次myLog()函数。第一种写法，引号里加函数名加括号 //setInterval（myLog,1000); 第二种写法，不推荐 /* setInterval（function(){ 第三种写法，用匿名函数 console.log("1"); } ,1000); */ //通常定时函数通过按钮触发，故写法上会套在一起 function myStart(){ setInterval（function(){ console.log("1"); },1000);//但要注意，按钮点完之后马上禁用，不然定时重复不断地执行。
function myStart(myObj){ myObj.disabled = true; //按钮禁用 setInterval(function(){ console.log("1"); },1000);
//setTimeout用法和setInterval一样 setTimeout(function(){ console.log(3); },1000); var taskid; function myStop(){ clearInterval(taskid); //参数是Interval的id，其id从开启的返回值获得。同样提升作用域 //clearTimeout() 是停掉setTimeout定时，参数是Timeout的id } function myStart(myObj){ myObj.disabled = true; taskid = setInterval(function(){ console.log("2"); },1000); }
案例：页面定时跳转
案例：图片隐藏
案例：随机数
案例：生成界面
文档对象模型（dom树结构）：
获取元素节点：
我的标签1 我的标签2 我的标签3 console.log(document.getElementById("mydiv")); //通过id获取元素 console.log(document.getElementsByTagName("div")); //通过标签名获取元素 console.log(document.getElementsByClassName("mydiv")); //通过class属性获取元素
根据节点层次关系获取节点（属性不加括号）：
我的标签1 我的标签2 我的标签3 console.log(document.getElementsByClassName("mydiv")[0].parentNode); //第一个class属性为mydiv的节点的父节点。 console.log(document.getElementById("aimdiv").childNodes); //返回子节点集合（注：div标签间会有一些空白，属于文本节点） console.log(document.getElementById("aimdiv").lastElementChild); //获取最后一个元素子节点 console.log(document.getElementById("aimdiv").lastChild); //获取最后一个子节点 console.log(document.getElementById("mydiv").previousElementSibling); //获取上一个元素节点
节点属性操作：
//之前的对元素属性的操作方法： //document.getElementById("mytext").value = "123"; //使用方法的方式 getAttribute() 获取属性 setAttribute() 设置属性值 document.getElementById("mytext").setAttribute("value","123456"); document.getElementById("mytext").getAttribute("value"); //取值只需传入属性名
文本节点操作：
我的标签1 我的标签2 我的标签3 //.innerHTML 可解析html标签 //.innerText 不能解析html标签，纯文本 //document.getElementById("mydiv").innerHTML = "test
"; 可带标签，将文本替换 //（我的标签2被修改为test，并增加了标签h1的效果） document.getElementById("mydiv").innerText = "test
"; //将"我的标签2"替换为" test
"
Dom动态操作相关方法：
-
function addEle(){ //功能：点击添加元素按钮，在无序列表中增加一条新闻 //添加新元素流程：1.创建元素createElement 2.把元素填入页面中appendChild，参数是新创建的元素 /* var newEle = document.createElement("li"); 1.创建元素 newEle.innerHTML="男足(没有)夺冠"; */ //3.写文本，用innerHTML属性 //document.getElementById("myul").appendChild(newEle); 2.把元素填入页面中appendChild，参数是新创建的元素，但此时只多出一个点，没有文本 //想把新添加的新闻放到女足新闻前面，用insertBefore //document.getElementById("myul").insertBefore(newEle,document.getElementById("myli")); //将女足新闻做成按钮，新添加的新闻也做成按钮：（多了一层嵌套效果） var newEle = document.createElement("input"); //1.创建input标签 newEle.setAttribute("type","button"); //6.input标签通过type属性决定各种类型（也可newEle.type = "button"）; newEle.value="男足(没有)夺冠"; //2.写标签内容 var newli = document.createElement("li"); //3.创建li元素 newli.appendChild(newEle); //4.将input放在li里 document.getElementById("myul").appendChild(newli); //5.将准备好的li整个放到ul里 } function addEle2(){ //cloneNode(bol) 克隆方法，参数为布尔值。bol决定子元素是否一起复制。若为false，则指复制了列表的图标。 //不写布尔值，默认false var newEle = document.getElementById("myli").cloneNode(true); document.getElementById("myul").appendChild(newEle); } function delEle(){ //removeChild删除节点 //通过元素结构 找到需要删除的子节点 //删除最后一个 document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild); }
dom动态操作简单的方法：
-
/* 添加或者替换时 把元素当文本操作 删除时 使用动态dom的删除方式 */ function addEle(){ document.getElementById("myul").innerHTML += ' '; } function delEle(){ document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild); }
Dom操作表格相关方法：
用户信息表 编号 姓名 年龄 1 小明 25 2 小白 25 3 小光 29
function addNewRow(){ /*把table描述成二维数组 rows 行 cells 单元格 insertRow() insertCell() 参数都是索引 */ console.log(document.getElementById("mytable").rows[3].cells[1].innerHTML); //4行2列----小光 //var newTR = document.getElementById("mytable").insertRow(0); 第1行添加 //var newTR = document.getElementById("mytable").insertRow(4); 最后一行添加 //但再想在最后一行添加要改索引，不方便，可用document.getElementById("mytable").rows.length。 var newTR = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length); //列一般定死，不会再扩 var newTd1 = newTR.insertCell(0); var newTd2 = newTR.insertCell(1); var newTd3 = newTR.insertCell(2); newTd1.innerHTML="test"; newTd2.innerHTML="test"; newTd3.innerHTML="test"; }
Dom操作表格简单方法：
用户信息表 编号 姓名 年龄 1 小明 25 2 小白 25 3 小光 29
function addNewRow(){ var myCode = document.getElementById("myCode").value; var myName = document.getElementById("myName").value; var myAge = document.getElementById("myAge").value; document.getElementById("mytbody").innerHTML+='' +''+myCode+' ' +''+myName+' ' +''+myAge+' ' +' ' } function delRow(){ //删除最后一行 //document.getElementById("mytable").rows.length-1 数组长度-1 正好是最后一条数据的idx document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1); }
Js常用对象：
String：
var myStr = "abc123efcg"; //indexOf() console.log(myStr.indexOf("c")); //2 //lastIndexOf() 若找不到返回-1 console.log(myStr.lastIndexOf("ca")); //-1 //substring() 截取 两个参数:起，止的索引，包头不包尾 console.log(myStr.substring(2,4)); //c1 //substr() 两个参数：起,个数 console.log(myStr.substr(2,4)); //c123 //replace() 将第一个参数替换为第二个参数 console.log(myStr.replace("ef","oo")); //abc123oocg //split()分割 通常用在有格式的字符串 var myStr2 = "id=5;name=jack;age=15"; var kvs = myStr2.split(";"); console.log(kvs); //Array(3) 0: "id=5" 1: "name=jack" 2: "age=15" //将name=jack的值取出 for(var i = 0;i<kvs.length;i++){ var kandv = kvs[i].split("="); //console.log(kandv[0]+'---'+kandv[1]); id---5 name---jack age---15 if(kandv[0]=="name"){ console.log(kandv[1]); } }
Math：
var myNum = 10.1; console.log(Math.ceil(myNum)); //11 ceil()向上取整 console.log(Math.floor(10.9)); //10 floor()向下取整 console.log(Math.round(10.4)); //10 round() 四舍五入 console.log(Math.abs(-10)); //10 绝对值 // 产生1-10间的整数,含1和10 console.log(Math.floor(Math.random()*10)+1); //Math.random() 0-1间的随机小数（包头不包尾）
Date：
/* 日期对象，在js里较简单.没有格式化，没有日期转换 传入常用日期格式字符串，主要有两种 1.2022-12-12 12:12:12 2.2022/12/12 12:12:12 */ var nowTime = new Date(); //获取当前时间 console.log(nowTime); var myDate = new Date("2022/12/12 12:12:12"); //需要获取年月日时分秒，传入常用日期格式字符串 console.log(myDate);
Array对象：
var myarr = new Array(5); //获取数组对象，可传参，参数为长度 var myarr2 = [1,"2",true,new Date(),[1,2,3]]; //也是定义数组， console.log(myarr2.length); // 5 数组常用的属性，就这一个 //数组常用的方法： //console.log(myarr2.join("_")); 将内容用‘-’拼成字符串 //1_2_true_Thu Mar 31 2022 16:16:13 GMT+0800 (中国标准时间)_1,2,3 //sort()排序 /* var myarr3 = [4,1,7,6,9]; myarr3.sort(function(a,b){ //需要传入排序规则，降序排列 return b-a; }) */ /* myarr3.push(2); 尾部添加元素 myarr3.unshift(3) 头部添加元素 myarr3.pop(); 尾部删除元素 myarr3.shift(); 头部删除元素 */ //替换元素 splice (索引 ,几个,...(替换成xxx)) 第三个参数为可变参数 var myarr3 = [4,1,7,6,9]; myarr3.splice(1,2,"a","b"); //第1个索引开始，替换两个，替换成ab console.log(myarr3); //[4,a,b,6,9]