html标签语言在块级和内联标签的基础上进行页面的设计，设计的时候主要是注意标签块间的距离位置等信息，设计盒子的浮动，盒子的位置，盒子之间的联系。
在设计网页之前一定要判断好该设计多少个盒子，什么样的模块该放在哪个盒子里面，各个盒子的位置，一个盒子能够包含多少。在制作时要用好浮动，必要是要使用好清除浮动，标签语言就是工具性的东西，很容易了解使用方法，但是重点在于知道什么时候判断出该使用哪种标签，该对标签进行什么样的属性分类，怎么调度适合他的css。
css设计时最主要的还是关注盒子的位置，盒子间的放置和关联，每个盒子包含了什么子盒子，一个大页面分为多少个大盒子多少个小盒子等等，了解了各个标签的使用方法，还有链接的使用，也会方便很多，样式方法也都是固定的，做出判断就能方便实用。
js是最重要的，记住语法之后，就要熟悉事件的绑定，在绑定事件之后判断好这个事件要做什么，还有会发什么什么样的情况来触发这个事件。
例如要给一个button绑定事件，令它点击后就可以隐藏一个盒子，就要找到这个button并且做好这个button和盒子的联系。查询很重要查询到标签才能做出一定的操作。
实例：
京东简易评论切换页面：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .head{ 12 width: 100%; 13 height: 50px; 14 background-color: #e0e0e0; 15 border-bottom: 2px solid red; 16 17 } 18 .anniu{ 19 float: left; 20 width: 100px; 21 height: 100%; 22 } 23 .an_1{ 24 margin-top: 15px; 25 margin-left:15px ; 26 } 27 .anniu_1{ 28 float: left; 29 width: 100px; 30 height: 100%; 31 margin-left: 15px; 32 } 33 .anniu_2{ 34 float: left; 35 width: 150px; 36 height: 100%; 37 margin-left: 15px; 38 } 39 .an_1:hover{ 40 color: red; 41 } 42 .con{ 43 clear: left; 44 } 45 .hide{ 46 display: none; 47 } 48 .yang{ 49 background-color: red; 50 } 51 .lok{ 52 color: white; 53 } 54 .lok:hover{ 55 color: white; 56 } 57 .as{ 58 color: black; 59 } 60 </style> 61 </head> 62 <body> 63 <div class="head"> 64 <a class="as"href="javascript:void(0);"><div class="anniu item 0 yang"><p class="an_1 lok">商品介绍</p></div></a> 65 <a class="as"href="javascript:void(0);"><div class="anniu_1 item 1"><p class="an_1">规格与包装</p></div></a> 66 <a class="as"href="javascript:void(0);"><div class="anniu_1 item 2"><p class="an_1">售后保障</p></div></a> 67 <a class="as"href="javascript:void(0);"><div class="anniu_2 item 3"><p class="an_1">商品评价(20+)</p></div></a> 68 <a class="as"href="javascript:void(0);"><div class="anniu_2 item 4"><p class="an_1">本店好评商品</p></div></a> 69 </div> 70 <div class="0 con"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0x7u7dhj30r80kptm7.jpg"></div> 71 <div class="1 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xbkwanj30ri0kyjt8.jpg"></div> 72 <div class="2 con hide"><img src="http://wx2.sinaimg.cn/mw690/005B3dfxgy1fld0xdzvjnj30r90l3778.jpg"></div> 73 <div class="3 con hide"><img src="http://wx1.sinaimg.cn/mw690/005B3dfxgy1fld0xfzs6qj30r90l10uu.jpg"></div> 74 <div class="4 con hide"><img src="http://wx3.sinaimg.cn/mw690/005B3dfxgy1fld0xi0t76j30r50l3wwq.jpg"></div> 75 <script> 76 ele_item=document.getElementsByClassName("item"); 77 for(i=0;i<ele_item.length;i++){ 78 ele_item[i].onclick=function () { 79 bian=this.classList[2]; 80 for (k=0;k<ele_item.length;k++){ 81 if (ele_item[k]!=this) { 82 ele_item[k].classList.remove("yang"); 83 el_p=ele_item[k].getElementsByTagName('p')[0]; 84 el_p.classList.remove("lok") 85 } 86 else { 87 this.classList.add('yang'); 88 el_t=this.getElementsByTagName('p')[0]; 89 el_t.classList.add("lok") 90 } 91 } 92 93 ele_con=document.getElementsByClassName('con'); 94 for (j=0;j<ele_con.length;j++){ 95 if (ele_con[j].classList[0]==bian) { 96 ele_con[j].classList.remove("hide") 97 } 98 else { 99 ele_con[j].classList.add("hide") 100 } 101 } 102 } 103 } 104 </script> 105 </body> 106 </html>
运用的代码很简单，熟悉循环，遍历时候进行事件的绑定，并在这个事件触发时候所要做出的行为做出判断。
实例2：
简单表格添加删除：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="dist/css/bootstrap.css"> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script> 8 <script src="dist/js/bootstrap.js"></script> 9 <style> 10 .bei{ 11 background-color: #9d9d9d; 12 position: fixed; 13 top:0; 14 left:0; 15 bottom: 0; 16 right: 0; 17 opacity: 0.5; 18 } 19 .tan{ 20 background-color: white; 21 position: fixed; 22 top:30%; 23 left:30%; 24 width: 500px; 25 height: 300px; 26 /*margin-left: 250px;*/ 27 /*margin-top: 150px;*/ 28 29 } 30 .shu{ 31 margin-top: 20px; 32 margin-left :20px; 33 } 34 .hide{ 35 display: none; 36 } 37 </style> 38 </head> 39 <body> 40 41 <div class="row"> 42 <div class="col-md-6"> 43 <p class="xian" ><input type="button" value="添加"></p> 44 <table class="table table-bordered table-hover" > 45 <thead> 46 <tr> 47 <th>姓名</th> 48 <th>年龄</th> 49 <th>班级</th> 50 <th>操作</th> 51 </tr> 52 </thead> 53 <tbody id="t1"> 54 <tr> 55 <td>张三</td> 56 <td>12</td> 57 <td>s7</td> 58 <td> 59 <button class="del">删除</button> 60 </td> 61 </tr> 62 63 <tr> 64 <td>张三2</td> 65 <td>1223</td> 66 <td>s7</td> 67 <td> 68 <button class="del">删除</button> 69 </td> 70 </tr> 71 72 <tr> 73 <td>张三3</td> 74 <td>122</td> 75 <td>s7</td> 76 <td> 77 <button class="del">删除</button> 78 </td> 79 </tr> 80 81 </tbody> 82 83 </table> 84 </div> 85 </div> 86 87 <div class="bei hide j"></div> 88 <div class="tan hide j"> 89 <form action=""> 90 <p class="shu zl">姓名<input type="text"></p> 91 <p class="shu zl">年龄<input type="text"></p> 92 <p class="shu zl">班级<input type="text"></p> 93 <input type="reset" value="确定" class="shu anq"> 94 <input type="button" value="取消" class="shu an"> 95 </form> 96 </div> 97 98 <script> 99 var ele_an=document.getElementsByClassName("an")[0]; 100 var ele_anx=document.getElementsByClassName("xian")[0]; 101 var ele_c=document.getElementsByClassName("j"); 102 ele_an.onclick=function () { 103 for (k=0;k<ele_c.length;k++){ 104 ele_c[k].classList.add("hide") 105 } 106 }; 107 ele_anx.onclick=function () { 108 console.log(ele_anx); 109 for (o=0;o<ele_c.length;o++){ 110 ele_c[o].classList.remove("hide") 111 } 112 113 }; 114 var ele_anq=document.getElementsByClassName("anq")[0]; 115 ele_anq.onclick=function () { 116 var ele_zl=document.getElementsByClassName("zl"); 117 var ele_tr=document.createElement("tr"); 118 for (p=0;p<ele_zl.length;p++){ 119 var zhi=ele_zl[p].children[0].value; 120 var ele_td=document.createElement("td"); 121 ele_td.innerText=zhi; 122 ele_tr.appendChild(ele_td) 123 } 124 var ele_fu=document.getElementById('t1'); 125 var ele_de=document.createElement("td"); 126 var ele_bu=document.createElement("button"); 127 ele_bu.classList.add("del"); 128 ele_bu.innerText='删除'; 129 ele_de.appendChild(ele_bu); 130 ele_tr.appendChild(ele_de); 131 ele_fu.appendChild(ele_tr); 132 ele_bu.onclick=function () { 133 var t1=document.getElementById("t1"); // 父节点 134 t1.removeChild(this.parentElement.parentElement) 135 136 }; 137 for (k=0;k<ele_c.length;k++) { 138 ele_c[k].classList.add("hide") 139 } 140 }; 141 var eles=document.getElementsByClassName("del"); 142 for(var i=0;i<eles.length;i++){ 143 eles[i].onclick=function () { 144 // 父节点.removeChild(子节点) 145 var t1=document.getElementById("t1"); // 父节点 146 t1.removeChild(this.parentElement.parentElement) 147 148 } 149 150 } 151 </script> 152 153 154 </body> 155 </html>
判断按钮触发的事件和将要进行的事情吗，还有代码进行的顺序。例如新添加的一行表格标签内容，虽然有class删除的属性，但是却无法进行这项操作，就是因为代码已经编译完成，我们又人为的添加了数据，所有编译完成后的网页并没有这项功能，所以我们就要在事件发生时将这个情况作出处理。