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>