HTML+CSS+JavaScript
一、前端语言
HTML：超文本标记语言，不是编程语言，标签语言，显示数据；有双标签（有开始有结束，<body></body>）和单标签<img src= # />；通过浏览器解析HTML代码，在<body>标签里的数据会被显示出来
二、HTML
1.基本框架
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>标题</title> 5 </head> 6 <body> 7 显示数据 8 </body><!--这里是注释；快速注释：command或ctrl+/-->
9 </html>
2.编译器：VS code Sublime notepad++
3.HTML中常用的标签
1 <h1>--<h6> 标题 2 <h1>这是标题1</h1> 3 <hr> 横线 4 <br> 换行 5 <title></title> 标题头显示 6 <p></p> 段落标签，会自动换行 7 <a href=”http://www.baidu.com”>百度一下</a> 链接标签 8 <img src=””>可以是本地路径，也可以是网络链接 图片链接标签 9 <img src=”#” width=”100” height=”100” /> 10 <table></table> 表格 11 <tr></tr> 表示行 12 <td></tr> 表示列 13 <th></th> 表头，内容加粗居中 14 <ul></ul> 无序列表 15 <ol></ol> 有序列表 16 <form></form> 表单 17 <div></div>：块级元素，用于组合其他元素，方便统一设置属性或样式
4.HTML的元素分类
- 块级元素：标签元素会以新行开始或结束，如<h1><p><table>等等，当前元素标签要独占一行
- 内联元素：显示数据时不会以新行开始，如<a><img><td>等等，元素会堆积在一起
5.HTML的布局：设计网页时，考虑到页面的美观，会设置页面局部或整体的一个布局
- 使用<table></table>或<div></div>来布局
6.HTML的事件：
需要触发某些动作的发送，需要事件的支持
7.用HTML制作简单的网页
- 表格：样图如下
代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>受理员业务统计表</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <table width="100%" style="font-synthesis: 微软雅黑;"> 9 <tr> 10 <td align="center" 11 style=" 12 font-synthesis: 微软雅黑; 13 font-size: 26px; 14 color: #255e95; 15 border-bottom: 1px dashed #cccccc"> 16 受理员业务统计表 17 </td> 18 </tr> 19 <tr> 20 <td align="right" height="50"> 21 2017-01-02---2017-05-02 22 </td> 23 </tr> 24 </table> 25 <table width="100%" align="center" border="1" cellspacing="0" cellpadding="10"> 26 <tr bgcolor="#84C1FF"> 27 <th rowspan="2" colspan="2">受理员</th> 28 <th rowspan="2" colspan="2">受理数</th> 29 <th rowspan="2" colspan="2">自办数</th> 30 <th rowspan="2" colspan="2">直接解答</th> 31 <th colspan="2">拟办意见</th> 32 <th colspan="2">返回修改</th> 33 <th colspan="3">工单类型</th> 34 </tr> 35 <tr bgcolor="#84C1FF"> 36 <td align="center">同意</td> 37 <td align="center">比例</td> 38 <td align="center">数量</td> 39 <td align="center">比例</td> 40 <td align="center">建议件</td> 41 <td align="center">诉求件</td> 42 <td align="center">咨询件</td> 43 </tr> 44 <tr> 45 <td align="center" rowspan="8" bgcolor="#C4E1FF">受理处</td> 46 <td bgcolor="#FFFFAA">王艳</td> 47 <td colspan="2"> </td> 48 <td colspan="2"> </td> 49 <td colspan="2"> </td> 50 <td> </td> 51 <td> </td> 52 <td> </td> 53 <td> </td> 54 <td> </td> 55 <td> </td> 56 <td> </td> 57 </tr> 58 <tr> 59 <td bgcolor="#FFFFAA"> </td> 60 <td colspan="2"> </td> 61 <td colspan="2"> </td> 62 <td colspan="2"> </td> 63 <td> </td> 64 <td> </td> 65 <td> </td> 66 <td> </td> 67 <td> </td> 68 <td> </td> 69 <td> </td> 70 </tr> 71 <tr> 72 <td bgcolor="#FFFFAA"> </td> 73 <td colspan="2"> </td> 74 <td colspan="2"> </td> 75 <td colspan="2"> </td> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 <td> </td> 80 <td> </td> 81 <td> </td> 82 <td> </td> 83 </tr> 84 <tr> 85 <td bgcolor="#FFFFAA"> </td> 86 <td colspan="2"> </td> 87 <td colspan="2"> </td> 88 <td colspan="2"> </td> 89 <td> </td> 90 <td> </td> 91 <td> </td> 92 <td> </td> 93 <td> </td> 94 <td> </td> 95 <td> </td> 96 </tr> 97 <tr> 98 <td bgcolor="#FFFFAA"> </td> 99 <td colspan="2"> </td> 100 <td colspan="2"> </td> 101 <td colspan="2"> </td> 102 <td> </td> 103 <td> </td> 104 <td> </td> 105 <td> </td> 106 <td> </td> 107 <td> </td> 108 <td> </td> 109 </tr> 110 <tr> 111 <td bgcolor="#FFFFAA"> </td> 112 <td colspan="2"> </td> 113 <td colspan="2"> </td> 114 <td colspan="2"> </td> 115 <td> </td> 116 <td> </td> 117 <td> </td> 118 <td> </td> 119 <td> </td> 120 <td> </td> 121 <td> </td> 122 </tr> 123 <tr> 124 <td bgcolor="#FFFFAA"> </td> 125 <td colspan="2"> </td> 126 <td colspan="2"> </td> 127 <td colspan="2"> </td> 128 <td> </td> 129 <td> </td> 130 <td> </td> 131 <td> </td> 132 <td> </td> 133 <td> </td> 134 <td> </td> 135 </tr> 136 <tr align="center" bgcolor="#FFFFAA"> 137 <td>总计</td> 138 <td colspan="2">20</td> 139 <td colspan="2">20</td> 140 <td colspan="2">20</td> 141 <td>20</td> 142 <td>20</td> 143 <td>20</td> 144 <td>20</td> 145 <td>20</td> 146 <td>20</td> 147 <td>20</td> 148 </tr> 149 <tr> 150 <td align="center" rowspan="8" bgcolor="#C4E1FF">话务组</td> 151 <td bgcolor="#FFFFAA">王艳</td> 152 <td colspan="2"> </td> 153 <td colspan="2"> </td> 154 <td colspan="2"> </td> 155 <td> </td> 156 <td> </td> 157 <td> </td> 158 <td> </td> 159 <td> </td> 160 <td> </td> 161 <td> </td> 162 </tr> 163 <tr> 164 <td bgcolor="#FFFFAA">王艳</td> 165 <td colspan="2"> </td> 166 <td colspan="2"> </td> 167 <td colspan="2"> </td> 168 <td> </td> 169 <td> </td> 170 <td> </td> 171 <td> </td> 172 <td> </td> 173 <td> </td> 174 <td> </td> 175 </tr> 176 <tr> 177 <td bgcolor="#FFFFAA">王艳</td> 178 <td colspan="2"> </td> 179 <td colspan="2"> </td> 180 <td colspan="2"> </td> 181 <td> </td> 182 <td> </td> 183 <td> </td> 184 <td> </td> 185 <td> </td> 186 <td> </td> 187 <td> </td> 188 </tr> 189 <tr> 190 <td bgcolor="#FFFFAA">王艳</td> 191 <td colspan="2"> </td> 192 <td colspan="2"> </td> 193 <td colspan="2"> </td> 194 <td> </td> 195 <td> </td> 196 <td> </td> 197 <td> </td> 198 <td> </td> 199 <td> </td> 200 <td> </td> 201 </tr> 202 <tr> 203 <td bgcolor="#FFFFAA"> </td> 204 <td colspan="2"> </td> 205 <td colspan="2"> </td> 206 <td colspan="2"> </td> 207 <td> </td> 208 <td> </td> 209 <td> </td> 210 <td> </td> 211 <td> </td> 212 <td> </td> 213 <td> </td> 214 </tr> 215 <tr> 216 <td bgcolor="#FFFFAA"> </td> 217 <td colspan="2"> </td> 218 <td colspan="2"> </td> 219 <td colspan="2"> </td> 220 <td> </td> 221 <td> </td> 222 <td> </td> 223 <td> </td> 224 <td> </td> 225 <td> </td> 226 <td> </td> 227 </tr> 228 <tr> 229 <td bgcolor="#FFFFAA"> </td> 230 <td colspan="2"> </td> 231 <td colspan="2"> </td> 232 <td colspan="2"> </td> 233 <td> </td> 234 <td> </td> 235 <td> </td> 236 <td> </td> 237 <td> </td> 238 <td> </td> 239 <td> </td> 240 </tr> 241 <tr align="center" bgcolor="#FFFFAA"> 242 <td>总计</td> 243 <td colspan="2">20</td> 244 <td colspan="2">20</td> 245 <td colspan="2">20</td> 246 <td>20</td> 247 <td>20</td> 248 <td>20</td> 249 <td>20</td> 250 <td>20</td> 251 <td>20</td> 252 <td>20</td> 253 </tr> 254 </table> 255 </body> 256 </html>
- 简单的搜索栏：样图如下
- 代码如下
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
