HTML+CSS+JavaScript

最新推荐文章于 2024-02-18 13:39:11 发布

M642019753

最新推荐文章于 2024-02-18 13:39:11 发布

阅读量271

点赞数

文章标签： javascript 前端人工智能 ViewUI

原文链接：http://www.cnblogs.com/zhanghaozsnow/p/11575318.html

版权

一、前端语言

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">&nbsp;</td>
 48             <td colspan="2">&nbsp;</td>
 49             <td colspan="2">&nbsp;</td>
 50             <td>&nbsp;</td>
 51             <td>&nbsp;</td>
 52             <td>&nbsp;</td>
 53             <td>&nbsp;</td>
 54             <td>&nbsp;</td>
 55             <td>&nbsp;</td>
 56             <td>&nbsp;</td>
 57         </tr>
 58         <tr>
 59             <td bgcolor="#FFFFAA">&nbsp;</td>
 60             <td colspan="2">&nbsp;</td>
 61             <td colspan="2">&nbsp;</td>
 62             <td colspan="2">&nbsp;</td>
 63             <td>&nbsp;</td>
 64             <td>&nbsp;</td>
 65             <td>&nbsp;</td>
 66             <td>&nbsp;</td>
 67             <td>&nbsp;</td>
 68             <td>&nbsp;</td>
 69             <td>&nbsp;</td>
 70         </tr>
 71         <tr>
 72             <td bgcolor="#FFFFAA">&nbsp;</td>
 73             <td colspan="2">&nbsp;</td>
 74             <td colspan="2">&nbsp;</td>
 75             <td colspan="2">&nbsp;</td>
 76             <td>&nbsp;</td>
 77             <td>&nbsp;</td>
 78             <td>&nbsp;</td>
 79             <td>&nbsp;</td>
 80             <td>&nbsp;</td>
 81             <td>&nbsp;</td>
 82             <td>&nbsp;</td>
 83         </tr>
 84         <tr>
 85             <td bgcolor="#FFFFAA">&nbsp;</td>
 86             <td colspan="2">&nbsp;</td>
 87             <td colspan="2">&nbsp;</td>
 88             <td colspan="2">&nbsp;</td>
 89             <td>&nbsp;</td>
 90             <td>&nbsp;</td>
 91             <td>&nbsp;</td>
 92             <td>&nbsp;</td>
 93             <td>&nbsp;</td>
 94             <td>&nbsp;</td>
 95             <td>&nbsp;</td>
 96         </tr>
 97         <tr>
 98             <td bgcolor="#FFFFAA">&nbsp;</td>
 99             <td colspan="2">&nbsp;</td>
100             <td colspan="2">&nbsp;</td>
101             <td colspan="2">&nbsp;</td>
102             <td>&nbsp;</td>
103             <td>&nbsp;</td>
104             <td>&nbsp;</td>
105             <td>&nbsp;</td>
106             <td>&nbsp;</td>
107             <td>&nbsp;</td>
108             <td>&nbsp;</td>
109         </tr>
110         <tr>
111             <td bgcolor="#FFFFAA">&nbsp;</td>
112             <td colspan="2">&nbsp;</td>
113             <td colspan="2">&nbsp;</td>
114             <td colspan="2">&nbsp;</td>
115             <td>&nbsp;</td>
116             <td>&nbsp;</td>
117             <td>&nbsp;</td>
118             <td>&nbsp;</td>
119             <td>&nbsp;</td>
120             <td>&nbsp;</td>
121             <td>&nbsp;</td>
122         </tr>
123         <tr>
124             <td bgcolor="#FFFFAA">&nbsp;</td>
125             <td colspan="2">&nbsp;</td>
126             <td colspan="2">&nbsp;</td>
127             <td colspan="2">&nbsp;</td>
128             <td>&nbsp;</td>
129             <td>&nbsp;</td>
130             <td>&nbsp;</td>
131             <td>&nbsp;</td>
132             <td>&nbsp;</td>
133             <td>&nbsp;</td>
134             <td>&nbsp;</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">&nbsp;</td>
153             <td colspan="2">&nbsp;</td>
154             <td colspan="2">&nbsp;</td>
155             <td>&nbsp;</td>
156             <td>&nbsp;</td>
157             <td>&nbsp;</td>
158             <td>&nbsp;</td>
159             <td>&nbsp;</td>
160             <td>&nbsp;</td>
161             <td>&nbsp;</td>
162         </tr>
163         <tr>
164             <td bgcolor="#FFFFAA">王艳</td>
165             <td colspan="2">&nbsp;</td>
166             <td colspan="2">&nbsp;</td>
167             <td colspan="2">&nbsp;</td>
168             <td>&nbsp;</td>
169             <td>&nbsp;</td>
170             <td>&nbsp;</td>
171             <td>&nbsp;</td>
172             <td>&nbsp;</td>
173             <td>&nbsp;</td>
174             <td>&nbsp;</td>
175         </tr>
176         <tr>
177             <td bgcolor="#FFFFAA">王艳</td>
178             <td colspan="2">&nbsp;</td>
179             <td colspan="2">&nbsp;</td>
180             <td colspan="2">&nbsp;</td>
181             <td>&nbsp;</td>
182             <td>&nbsp;</td>
183             <td>&nbsp;</td>
184             <td>&nbsp;</td>
185             <td>&nbsp;</td>
186             <td>&nbsp;</td>
187             <td>&nbsp;</td>
188         </tr>
189         <tr>
190             <td bgcolor="#FFFFAA">王艳</td>
191             <td colspan="2">&nbsp;</td>
192             <td colspan="2">&nbsp;</td>
193             <td colspan="2">&nbsp;</td>
194         <td>&nbsp;</td>
195             <td>&nbsp;</td>
196             <td>&nbsp;</td>
197             <td>&nbsp;</td>
198             <td>&nbsp;</td>
199             <td>&nbsp;</td>
200             <td>&nbsp;</td>
201         </tr>
202         <tr>
203             <td bgcolor="#FFFFAA">&nbsp;</td>
204             <td colspan="2">&nbsp;</td>
205             <td colspan="2">&nbsp;</td>
206             <td colspan="2">&nbsp;</td>
207             <td>&nbsp;</td>
208             <td>&nbsp;</td>
209             <td>&nbsp;</td>
210             <td>&nbsp;</td>
211             <td>&nbsp;</td>
212             <td>&nbsp;</td>
213             <td>&nbsp;</td>
214         </tr>
215         <tr>
216             <td bgcolor="#FFFFAA">&nbsp;</td>
217             <td colspan="2">&nbsp;</td>
218             <td colspan="2">&nbsp;</td>
219             <td colspan="2">&nbsp;</td>
220             <td>&nbsp;</td>
221             <td>&nbsp;</td>
222             <td>&nbsp;</td>
223             <td>&nbsp;</td>
224             <td>&nbsp;</td>
225             <td>&nbsp;</td>
226             <td>&nbsp;</td>
227         </tr>
228         <tr>
229             <td bgcolor="#FFFFAA">&nbsp;</td>
230             <td colspan="2">&nbsp;</td>
231             <td colspan="2">&nbsp;</td>
232             <td colspan="2">&nbsp;</td>
233             <td>&nbsp;</td>
234             <td>&nbsp;</td>
235             <td>&nbsp;</td>
236             <td>&nbsp;</td>
237             <td>&nbsp;</td>
238             <td>&nbsp;</td>
239             <td>&nbsp;</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>

tongjibiao.html

简单的搜索栏：样图如下

代码如下

按 Ctrl+C 复制代码

<!DOCTYPE html> <html> <head> <title>搜索</title> </head> <body> <font size="1px"> <table width="410px" align="center" border="0" width="50%" align="center" cellspacing="0" cellpadding="3" bgcolor="#FFFFAA"> <tr> <td align="center" height="30px"> <form action="https://www.baidu.com/" method="get"> <input type="text" name="sousuo" ><input type="submit" name="submit" value="搜索"> </form> </td> </tr> <tr> <th align="center"> <a href="https://www.baidu.com/">百度一下</a> <a href="http://www.4399.com/">4399小游戏</a> <a href="https://www.qq.com/">腾讯网</a> <a href="https://www.1688.com">阿里巴巴</a> <a href="https://www.ichunqiu.com/">i春秋</a> </th> </tr> </table> <table width="280px" border="0" align="center" cellspacing="2" cellpadding="5" bgcolor="#FFFFAA"> <tr height="80px"> <td align="center" width="100px"> <a href="https://www.ichunqiu.com/"> <img src=https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568917629619&di=a8fa37f1ba9e5a1743cec1c1108859a0&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2503653465%2C1244416513%26fm%3D214%26gp%3D0.jpg width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="https://www.1688.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568917755353&di=186b9fa93c6b2fd50d290b20400040bb&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw732h452%2F20180109%2Fd0ac-fyqnici7800123.png" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="http://www.4399.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918606812&di=92c44223d1ba24bf1658ef95ed6a6d4d&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F62294bd165e4904b5684ed64b00df850874ebf6a26eb8-OqUGIc_fw658" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="http://www.4399.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568917805429&di=f62c9338b3db2c1a9e8b9f155ed2d71c&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fd01373f082025aafa6bfa83ef0edab64024f1ab1.jpg" width="90px" height="70px"> </a> </td> </tr> <tr height="80px"> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3489346721,70473151&fm=26&gp=0.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="https://www.qq.com/"> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3765530916,928811954&fm=26&gp=0.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569513215&di=813aecce2c1dc62c3c8e34bba19f6908&imgtype=jpg&er=1&src=http%3A%2F%2Fdown.admin5.com%2Fdemo%2Fcode_pop%2F33%2F80%2Fimages%2Flogo2.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="http://www.4399.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918521592&di=c32c15b6989b5b451f08dab195f47108&imgtype=0&src=http%3A%2F%2Fwww.downxia.com%2Fuploadfiles%2F2016%2F1220%2F20161220043406418.jpg" width="90px" height="70px"> </a> </td> </tr> <tr height="80px"> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569513276&di=df9e3046bdba74be7fab06dec77b2e29&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.25pp.com%2Fuploadfile%2Fsoft%2Fimages%2F2015%2F0806%2F20150806102146920.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918581621&di=41f595b2f8e45b155eb0a452cffb5f2b&imgtype=0&src=http%3A%2F%2Fpic.yhouse.com%2Flife%2Fimage%2F20150206%2Flife%2F20150206135034_17.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918625761&di=93b7d7e98dcb065d44962577a69c46fb&imgtype=0&src=http%3A%2F%2Fpic2.16pic.com%2F00%2F56%2F07%2F16pic_5607016_b.jpg" width="90px" height="70px"> </a> </td> <td align="center" width="100px"> <a href="www.baidu.com"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918641254&di=1b80d15af5395a656e41d0f513898a3d&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180807%2Fcae694db15aa4e2d92deeff5ab07ace9.jpeg" width="90px" height="70px"> </a> </td> </tr> </table> </font> </body> </html> sousuo.html

按 Ctrl+C 复制代码

转载于:https://www.cnblogs.com/zhanghaozsnow/p/11575318.html