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删除的属性，但是却无法进行这项操作，就是因为代码已经编译完成，我们又人为的添加了数据，所有编译完成后的网页并没有这项功能，所以我们就要在事件发生时将这个情况作出处理。
前端标签--js--css大致思路
原文地址：http://www.cnblogs.com/gaoshengyue/p/7827534.html