前端之简单知识
1 前端<!----> 2 <!DOCTYPE html> 定义文件html版本 3 <h1>标题1</h1> 标题类型只能是1~6 4 <hr/> 水平线 5 6 font标签常用属性： 7 1.color:颜色 8 2.size:大小1~7 9 3.face:字体 10 11 <!---meta网站的配置信息--> 12 charset<!--指定浏览器打开页面的编码方式--> 13 14 <!-- 15 strong：加粗标签，类似b只是带有语义(语音阅读会加重) 16 em：斜体，类似i只是带有语义 17 --> 18 19 <img src="../img/mao.jpeg" width="200px" height="300px"/>插入图片，如果只指定一个则另一个会自动缩放 20 （img的alt属性，定义图片加载失败时显示的内容） 21 路径中：./代表写这个路径的文件路径即当前路径 22 ../代表上一级路径 23 ../../代表上上一级路径 24 25 <ul type=""><!--无序表--> 26 <li>列表项</li><!--type属性：小圆圈，小方框，小黑点（默认）--> 27 </ul> 28 29 <ol type="" start=""><!--有序表 指定序号类型，指定从几开始（必须是数字）--> 30 <li>列表项</li> 31 </ol> 32 33 34 <!-- 35 table标签的属性： 36 border:指定边框 37 height:高度 38 width:宽度 39 align:对齐方式 40 在table中加时，是整个表格居中，， 41 在行中加是这行中文字居中 42 在td中是该项居中，， 43 --> 44 <!--表格的合并 45 td中使用colspan="2"合并一行中的两列，不能写被合并的第二列的td; 46 td中使用rowspan="2"合并一列中的两行，另一个被合并的地方不能写td; 47 <td colspan="2" rowspan="2">实现四个单元格合并，要有三个td不能写; 48 --> 49 50 <!--超链接 51 <a href="http://www.baihe.com" target="_blank">超链接文字</a> 52 href需要加上http协议，访问本网站的html文件，可以直接写文件路径 53 target:以什么方式打开 54 _self:默认在当前窗口打开 55 _blank:新起一个标签页打开页面 56 -->
表单
1 <body> 2 <form action="../网站首页/IndexPage.html"> 3 <!--action:指定提交地址 4 method： 5 get方式：默认提交方式，会将参数拼接到连接后面，有大小限制，4k 6 post方式：会将参数封装在请求中，没有空间限制 7 8 9 --> 10 11 12 <!--隐藏域 13 主要是用来存放页面上一些ID信息 14 页面跳转默认携带一些信息 15 --> 16 <input type="hidden" value="ffffffffff" name="uid"> 17 <!--文本框 --> 18 <!--placeholder用于显示文本框中的提示信息--> 19 姓名：<input type"text" name="username" placeholder="请输入用户名"><br /> 20 手机号码:<input type="tel"> 21 手机号码2：<input type="number"> 22 <!--单选按钮--> 23 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<input type="radio" name="sex"/>妖<br /> 24 密码：<input type="password"/><br /> 25 爱好：<input type="checkbox"/>抽烟<!--复选框--> 26 <input type="checkbox"/>喝酒 27 <input type="checkbox"/>烫头 28 <input type="checkbox"/>撸代码 29 靓照：<input type="file"/><br /> 30 择偶要求：<textarea cols="40" rows="4"></textarea><br /> 31 籍贯：<select> 32 <option>--请选择--</option> 33 <option>--江苏--</option> 34 <option>--湖北--</option> 35 <option>--内蒙古--</option> 36 </select><br /> 37 出生日期：<input type="date"/><br /> 38 <!--提交按钮中value是设置按钮文本--> 39 <input type="submit" value="提交"/> 40 <input type="button"value="普通按钮"/> 41 <input type="reset"value="重置按钮"/> 42 </form> 43 </body>
1 <!--使用frameset要将body去掉--> 2 <frameset rows="15%,*"> 3 <frame src="part1.html"/> 4 <frameset cols="15%,*"> 5 <frame src="part2.html"/> 6 <frame src="part3.html" name="rightFrame"/> 7 </frameset> 8 9 </frameset> 10 11 //part2.html 12 <body bgcolor="white"> 13 <a href="data.html" target="rightFrame">收件箱</a><br /> 14 <a href="#">发件箱</a><br /> 15 <a href="#">垃圾箱</a><br /> 16 </body>
//CSS
1 使用表格的缺陷 2 1.嵌套太多，容易混乱 3 2.不够灵活，牵一发动全身 4 5 css概述： 6 Cacading Style Sheets:层叠样式表 7 主要作用：美化页面 8 9 元素选择： 10 元素名称{ 11 属性名称；属性值 12 属性名称；属性值 13 } 14 ID选择器:以#号开头 15 #ID选择器名称{//是在块标签的id且块标签的id最好唯一，否则会有问题 16 属性名称；属性值 17 属性名称；属性值 18 } 19 类选择器：以. 开头 20 21 引入样式： 22 外部引用：将公用的css代码，放到一个css文件中，通过link标签引入 23 内部样式：将css代码写到head标签内的style标签中 24 行内样式：在div中直接使用style属性，然后在其中配置 25 26 27 <body> 28 <!--CSS浮动：浮动元素会脱离正常的文档流，在正常的文档中不占空间。 29 就是浮动的相当于不存在，显示在上面，像word中的悬浮 30 用float属性 31 left,right; 32 使用clear属性清除浮动 33 both:两边都不浮动 34 left:左边不允许浮动 35 right:右边不允许浮动 36 --> 37 <div style="float:left; height:300px;width:300px;background-color:red;"></div> 38 <div style="float:left;height:300px;width:300px;background-color:blue;"></div> 39 <div style="float:left;height:300px;width:300px;background-color:yellow;"></div> 40 <div style="float:left;height:300px;width:300px;background-color:yellow;"></div> 41 <div style="float:left;height:300px;width:300px;background-color:yellow;"></div> 42 <div style="clear:both"></div> 43 <div style="height:400px;width:1000px;background-color:green;"></div> 44 <div style="height:400px;width:400px;background-color:pink;"></div> 45 <div style="height:400px;width:400px;background-color:darkred;"></div> 46 </body>
选择器的优先级(按照选择器的精确度来编写)
行内样式>ID选择器>类选择器>元素选择器
如果属于多个类，则使用最近的类选择器
1 <head> 2 <meta charset="UTF-8"> 3 <title>高度之本</title> 4 <style> 5 div{ 6 width:200px; 7 background-color:red; 8 height:30px;/*设置div的高度*/ 9 10 } 11 .box1{ 12 font-size:30px; 13 line-height:200px;/*设置文字的行高*//*如果没有设置div的高度,则使用行高作为默认(猜的)*/ 14 15 } 16 17 </style> 18 19 </head> 20 <body> 21 <div class="box1">哈哈哈</div> 22 23 </body>
//CSS中的常见属性
1 .logo{ 2 float:left; 3 width:33%; 4 height:80px; 5 /*border-width:1px; 6 border-style:solid; 7 border-color:red; */ 8 border:1px solid red; 9 line-height:80px;/*文字的行高*/ 10 text-align:center;/*文字居中*/ 11 } 12 .amenu{ 13 color:white; 14 font-size:20px; 15 text-decoration:none;/*文字中的下划线*/ 16 }
//其他类型选择器
1 <head> 2 <meta charset="UTF-8"> 3 <title>分组选择器</title> 4 <style type="text/css"> 5 h1,h2,h3{ 6 color:red; 7 } 8 </style> 9 </head> 10 <body> 11 12 <h1>标题1</h1> 13 <h2>标题2</h2> 14 <h3>标题3</h3> 15 </body> 16 17 ------------------------------------------------------- 18 <head> 19 <meta charset="UTF-8"> 20 <title>后代选择器</title> 21 <style type="text/css"> 22 /*后代选择器： 23 爷爷选择器 子孙选择器{属性名称：属性值} （选择所有子孙后代） 24 * 爷爷选择器>子选择器{属性名称：属性值} （选择儿子） 25 * */ 26 27 /*h1 em{ 28 color:red; 29 }*/ 30 h1>em{ 31 color:red; 32 } 33 </style> 34 </head> 35 <body> 36 <h1> 37 This is<em>儿子</em> 38 <strong> 39 <em>孙子</em> 40 </strong> 41 </h1> 42 </body> 43 44 45 ------------------------------------------------ 46 47 <head> 48 <meta charset="UTF-8"> 49 <title>属性选择器</title> 50 <style type="text/css"> 51 /*a[title]{ 52 color:red; 53 }*/ 54 /*a[title][href="abc"]{ 55 color:red; 56 57 }*/ 58 59 60 </style> 61 </head> 62 <body> 63 64 <a href="abc" title="aaa">第一个</a> 65 <a href="#" title="bbb">第二个</a> 66 </body> 67 68 69 70 -------------------------------------------------- 71 72 <head> 73 <meta charset="UTF-8"> 74 <title>伪类选择器</title> 75 <!--通常用在a标签上--> 76 <style type="text/css"> 77 a:link {color: #FF0000} /* 未访问的链接 */ 78 a:visited {color: #00FF00} /* 已访问的链接 */ 79 a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ 80 a:active {color: #0000FF} /* 选定的链接 */ 81 82 </style> 83 </head> 84 <body> 85 <a href="#">超链接</a> 86 87 </body>
//盒子模型
1 <head> 2 <meta charset="UTF-8"> 3 <title>盒子模型</title> 4 </head> 5 <body> 6 <!--内边距：（就是盒子中的泡沫） 7 padding-top: 8 padding-right: 9 padding-bottom: 10 padding-left: 11 padding:10px; 上下左右都是10px 12 padding:10px 20px;上下是10px,左右是20px 13 padding:10px 20px 30px;上10右20下30左20 14 padding:10px 20px 30px 40px;上右下左的顺序 15 --> 16 <div style="border:3px solid red;width:400px;height:400px;"> 17 <div style="border:1px solid yellow;width:100px;height:100px;padding: 10px 20px 30px 40px;"> 18 中国 19 </div> 20 <!--外边距： 21 margin-top: 22 margin-right: 23 margin-bottom: 24 margin-left: 25 --> 26 </div> 27 </body>
//JS
1 <script type="text/javascript"> 2 //setInterval和setTimeout 3 var timeID; 4 function startClock(){ 5 //timeID=setInterval("hello()",3000); 6 timeID=setTimeout("hello()",3000) 7 } 8 function stopClock(){ 9 //clearInterval(timeID); 10 clearTimeout(timeID); 11 } 12 function hello(){ 13 console.log("setInterval调用了"); 14 15 } 16 //window.setInterval("hello()",3000); 17 </script> 18 </head> 19 <body> 20 <input type="button" value="开启" onclick="startClock()" /> 21 <input type="button" value="取消" onclick="stopClock()"/> 22 </body>
1 <title>提交数据验证</title> 2 <script> 3 function checkFunc(){ 4 var input_username=document.getElementById("username"); 5 if(input_username.value.length>=6){ 6 7 }else{ 8 alert("用户名长度太短"); 9 return false; 10 } 11 var input_email=document.getElementById("email"); 12 if(/^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/.test(input_email.value)){ 13 alert("格式正确"); 14 }else{ 15 alert("邮箱格式不对"); 16 return false; 17 } 18 return true; 19 } 20 21 </script> 22 </head> 23 <body> 24 <form action="../网站首页优化/IndexPageImprove.html" onsubmit="return checkFunc()"> 25 姓名：<input type="text" id="username" /><br /> 26 密码：<input type="password" id="password" /><br /> 27 邮箱 ：<input type="text" id="email"><br /> 28 <input type="submit" value="提交"><br /> 29 30 </form> 31 32 </body>
1 <title>数据校验</title> 2 <script type="text/javascript" src="../js/regutils.js"></script> 3 <script type="text/javascript"> 4 function showTips(span_name,msg){ 5 var span=document.getElementById(span_name); 6 7 span.innerHTML="<font color='red' size='2'>"+msg+"</font>"; 8 //span.innerHTML=msg; 9 } 10 function checkUsername(){ 11 var input_username_value=document.getElementById("input_username").value; 12 var span_username=document.getElementById("span_username"); 13 if(input_username_value.length<6){ 14 span_username.innerHTML="<font color='red' size='2'>用户名失败，太短</font>" 15 return false; 16 }else{ 17 span_username.innerHTML="<font color='red' size='2'>用户名成功，恭喜</font>" 18 return true; 19 } 20 } 21 //校验密码 22 function checkPassword(){ 23 var input_password_value=document.getElementById("input_password").value; 24 var span_password=document.getElementById("span_password"); 25 if(input_password_value.length<6){ 26 span_password.innerHTML="<font color='red' size='2'>密码长度不能小于6</font>"; 27 return false; 28 }else{ 29 span_password.innerHTML="<font color='red' size='2'>密码长度合适</font>"; 30 return true; 31 } 32 } 33 //校验确认密码 34 function checkRePassword(){ 35 var input_password_value=document.getElementById("input_password").value; 36 var input_repassword_value=document.getElementById("input_repassword").value; 37 var span_repassword=document.getElementById("span_repassword"); 38 if(input_password_value!=input_repassword_value){ 39 span_repassword.innerHTML="<font color='red' size='2'>密码需要保持一致</font>"; 40 return false; 41 }else{ 42 span_repassword.innerHTML="<font color='red' size='2'>密码已经保持一致</font>"; 43 return true; 44 } 45 } 46 //校验邮箱 47 function checkMail(){ 48 var input_email_value=document.getElementById("input_email").value; 49 var span_email=document.getElementById("span_email"); 50 var flag=checkEmail(input_email_value); 51 52 if(flag){ 53 span_email.innerHTML="<font color='red' size='2'>邮箱格式正确</font>"; 54 return true; 55 }else{ 56 span_email.innerHTML="<font color='red' size='2'>邮箱格式错误</font>"; 57 return false; 58 } 59 } 60 //校验手机号 61 function checkMobileF(){ 62 var input_mobile=document.getElementById("input_mobile").value; 63 var span_mobile=document.getElementById("span_mobile"); 64 if(checkMobile(input_mobile)){ 65 span_mobile.innerHTML="<font color='red' size='2'>手机号格式正确</font>"; 66 return true; 67 }else{ 68 span_mobile.innerHTML="<font color='red' size='2'>手机号格式错误</font>"; 69 return false; 70 } 71 } 72 //校验所有表单是否都填好 73 function checkForm(){ 74 return checkUsername()&&checkPassword()&&checkRePassword()&&checkMail()&&checkMobileF(); 75 } 76 77 </script> 78 </head> 79 <body> 80 <form action="轮播图2.html" onsubmit="return checkForm()"> 81 <!--获得焦点事件，失去焦点事件，按键抬起事件--> 82 姓名：<input id="input_username" type="text" onfocus="showTips('span_username','姓名长度不小于6')" onblur="checkUsername()" onkeyup="checkUsername()"/> 83 <span id="span_username"></span><br /> 84 密码：<input id="input_password" type="password" onfocus="showTips('span_password','密码长度不小于6') " onblur="checkPassword()" onkeyup="checkPassword()" /> 85 <span id="span_password"></span><br /> 86 确认密码：<input id="input_repassword" type="password" onfocus="showTips('span_repassword','确认密码保持一致') " onblur="checkRePassword()" onkeyup="checkRePassword()" /> 87 <span id="span_repassword"></span><br /> 88 邮箱：<input id="input_email" type="text" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" onkeyup="checkMail()"/> 89 <span id="span_email"></span><br /> 90 91 手机号：<input id="input_mobile"type="text" onfocus="showTips('span_mobile','手机号格式必须正确')"onblur="checkMobileF()" onkeyup="checkMobileF()"/> 92 <span id="span_mobile"></span><br /> 93 <input type="submit" value="提交" /> 94 </form> 95 </body>
1 <title>点击事件</title> 2 <script type="text/javascript"> 3 function dianwo(){ 4 5 alert("我被点击了"); 6 } 7 function tihuan(){ 8 var div=document.getElementById("div1"); 9 //div.innerHTML="<font color='red'>内容已经被替换</font>"//innerHTML能够解析替换内容中的html标签 10 div.innerText="<font color='red'>内容已经被替换</font>"//innerText直接替换 11 } 12 </script> 13 </head> 14 <body> 15 <input type="button" value="点我" onclick="dianwo()"> 16 <input type="button" value="替换文本" onclick="tihuan()"> 17 <div id="div1"> 18 hello world!! 19 </div> 20 </body>
1 <title>轮播图</title> 2 <script type="text/javascript"> 3 imgIndex=0; 4 function init(){ 5 setInterval("changeImg()",3000); 6 7 } 8 function changeImg(){ 9 changeImgIndex=imgIndex%3+2; 10 var img1= document.getElementById("img1"); 11 img1.src="../img/"+changeImgIndex+".jpg"; 12 imgIndex+=1; 13 } 14 </script> 15 16 </head> 17 <body onload="init()"> 18 <img src="../img/2.jpg" width="100%" id="img1"/> 19 20 </body>
1 <title>弹出广告</title> 2 <script type="text/javascript"> 3 function hideImg(){ 4 var img1=document.getElementById("img1"); 5 img1.style.display="none"; 6 7 } 8 function showImg(){ 9 //这个变量不能提出去，因为文档加载顺序，这里id即img1还没有出现 10 var img1=document.getElementById("img1"); 11 img1.style.display="block"; 12 setTimeout("hideImg()",3000); 13 } 14 function init(){ 15 setTimeout("showImg()",3000); 16 17 } 18 </script> 19 </head> 20 <body onload="init()"> 21 <img id="img1" src="../productsImg/1/cs20009.jpg"width="100%" style="display:none"/> 22 </body>
1 <title>隐藏图片</title> 2 <script type="text/javascript"> 3 function showImg(){ 4 var img=document.getElementById("img1"); 5 img.style.display="block"; 6 } 7 function hideImg(){ 8 var img=document.getElementById("img1"); 9 img.style.display="none"; 10 11 } 12 </script> 13 </head> 14 <body> 15 <input type="button" value="显示" onclick="showImg()" /><br /> 16 <input type="button" value="隐藏" onclick="hideImg()" /><br /> 17 <img src="../img/10.jpg" id="img1" style="display:block"/> 18 </body>
1 <title>表格隔行换色&&全选和全不选</title> 2 <script type="text/javascript"> 3 function changeRowsColor(){ 4 var table_fenlei=document.getElementById("table_fenlei"); 5 var rows=table_fenlei.rows; 6 7 for(var i=0;i<rows.length;i++){ 8 if(i%2==0){ 9 rows[i].bgColor="red"; 10 }else{ 11 rows[i].bgColor="yellow"; 12 } 13 } 14 15 } 16 function init(){ 17 changeRowsColor(); 18 } 19 //实现全选和全不选 20 function checkAll(){ 21 var check1=document.getElementById("check1"); 22 var checked=check1.checked; 23 var checks=document.getElementsByName("check_e"); 24 for(var i=0;i<checks.length;i++){ 25 checks[i].checked=checked; 26 } 27 } 28 </script> 29 </head> 30 <body onload="init()"> 31 <table border="1px" width="600px" id="table_fenlei"> 32 <tr> 33 <td><input type ="checkbox" onclick="checkAll()" id="check1"/></td> 34 <td>分类ID</td> 35 <td>分类名称</td> 36 <td>分类商品</td> 37 <td>分类描述</td> 38 <td>操作</td> 39 </tr> 40 <tr> 41 <td><input type ="checkbox" name="check_e"/></td> 42 <td>分类ID</td> 43 <td>分类名称</td> 44 <td>分类商品</td> 45 <td>分类描述</td> 46 <td><a href="#">修改</a>|<a href="#">删除</a></td> 47 </tr> 48 </table> 49 </body>
1 <title>dom操作</title> 2 <script type="text/javascript"> 3 function addText(){ 4 var div_text=document.getElementById("div_text"); 5 //创建一个P元素节点和文本节点 6 //普通标签是元素节点，其中属性是属性节点，还有文本节点 7 var element_p=document.createElement("p"); 8 var Node_text=document.createTextNode("这里是添加的文本"); 9 //将p和文本内容关联起来 10 element_p.appendChild(Node_text); 11 //将p添加到div中 12 div_text.appendChild(element_p); 13 } 14 </script> 15 </head> 16 <body> 17 <input type="button" value="点击添加文本" onclick="addText()"/> 18 <div id="div_text"></div> 19 </body>
1 <title>省市联动</title> 2 <script type="text/javascript"> 3 var city_infos=[ 4 ['连云港','盐城市','宿迁市','江阴市'], 5 ['青岛市','临沂市','牛栏山','大海边'], 6 ['义乌市','哈哈市','哦哦市','嘻嘻市'] 7 ]; 8 function changeProvince(){ 9 var select_province_value=document.getElementById("select_province").value; 10 var select_city=document.getElementById("select_city"); 11 var citys=city_infos[select_province_value]; 12 select_city.options.length=0; 13 for(var i=0;i<citys.length;i++){ 14 //创建option节点，文本节点 15 var element_option=document.createElement("option"); 16 var node_text=document.createTextNode(citys[i]); 17 //将option和文本关联起来,将option和select关联起来 18 element_option.appendChild(node_text); 19 select_city.appendChild(element_option); 20 } 21 } 22 </script> 23 </head> 24 <body> 25 <select id="select_province" onchange="changeProvince()"> 26 <option value="-1">--请选择--</option> 27 <option value="0">江苏省</option> 28 <option value="1">山东省</option> 29 <option value="2">安徽省</option> 30 </select> 31 <select id="select_city"> 32 33 </select> 34 </body>
1 <title>左右移动元素</title> 2 <script type="text/javascript"> 3 function selectLeftOne(){ 4 var select_left=document.getElementById("select_left"); 5 var select_right=document.getElementById("select_right"); 6 var options=select_left.options; 7 for(var i=0;i<options.length;i++){ 8 if(options[i].selected){ 9 select_right.appendChild(options[i]); 10 } 11 } 12 } 13 function selectLeftAll(){ 14 var select_left=document.getElementById("select_left"); 15 var select_right=document.getElementById("select_right"); 16 var options=select_left.options; 17 for(var i=options.length-1;i>=0;i--){ 18 select_right.appendChild(options[i]); 19 } 20 } 21 </script> 22 </head> 23 <body> 24 <table border="1px" width="400px" align="center"> 25 <tr> 26 <td>分类名称</td> 27 <td><input type="text" value="手机数码"></td> 28 </tr> 29 <tr> 30 <td>分类描述</td> 31 <td><input type="text" value="这里都是手机数码"></td> 32 </tr> 33 <tr > 34 <td>分类商品</td> 35 <td> 36 <div style="float:left"> 37 已有商品<br /> 38 <select multiple="multiple" id="select_left" ondblclick="selectLeftOne()"> 39 <option value="">苹果</option> 40 <option value="">华为</option> 41 <option value="">荣耀</option> 42 <option value="">vivo</option> 43 44 </select><br /> 45 <a href="#" onclick="selectLeftOne()">>></a><br /> 46 <a href="#" onclick="selectLeftAll()">>>></a> 47 </div> 48 <div style="float:right"> 49 未选商品<br /> 50 <select multiple="multiple" id="select_right"> 51 <option value="">诺基亚</option> 52 <option value="">中兴</option> 53 <option value="">蓝莓</option> 54 <option value="">魅族</option> 55 56 </select><br /> 57 <a href="#"><<</a><br /> 58 <a href="#"><<<</a> 59 </div> 60 </td> 61 </tr> 62 <tr> 63 <td colspan="2"><input type="submit" value="提交" /></td> 64 65 </tr> 66 </table> 67 </body>
