1 <!doctype html>
2 <html lang="en">
3 <head> <!-- 头部 -->
4 <meta charset="UTF-8">
5 <title>周六巨著</title>
6 <meta name="Keywords" content="关键字">
7 <meta name="Description" content="描述">
8 <style>/*头部引用，类选择器 群组选择器*/
9 .a
10 {
11 text-decoration:none;
12 }
13 .c
14 {
15 color: #2196F3;
16 text-decoration: none;
17 }
18 .d
19 {
20 text-align: center;
21 }
22 .e
23 {
24 width: 30px;
25 }
26 .a,.b
27 {
28 color: black;
29 }
30 .e,.f
31 {
32 height: 30px;
33 }
34 </style>
35 </head>
36 <body><!-- 主体 -->
37 <div><!-- 首行左侧 -->
38 <a href="javascript:;" class="a" class="b">北京，多云23~32°C 轻度污染</a>
39 <span>|</span>
40 <a href="javascript:;" class="a" class="b">新闻</a>
41 <a href="javascript:;" class="a" class="b">视频 </a>
42 <a href="javascript:;" class="a" class="b">图片</a>
43 <a href="javascript:;" class="a" class="b">音乐 </a>
44 <a href="javascript:;" class="a" class="b">地图 </a>
45 <a href="javascript:;" class="a" class="b">百科 </a>
46 <a href="javascript:;" class="a" class="b">更多∇</a>
47 </div>
48 <div style="text-align:right"> <!-- 首行右侧 -->
49 <a href="javascript:;" class="a" class="b">仙灵导航 </a>
50 <a href="javascript:;" class="a" class="b">设为主页</a>
51 <a href="javascript:;" class="a" class="b">设置 </a>
52 <a href="javascript:;" class="a" class="b">换肤 </a>
53 <a href="javascript:;" class="a" class="b">登录</a>
54 <a href="javascript:;" class="a" class="b">注册</a>
55 </div></br></br></br></br></br>
56 <div class="d"><!-- 仙灵logo -->
57 <img src="img/仙灵4.jpg" alt="" width="450" height="250">
58 </div><br><br>
59 <div class="d" > <!-- 输入框 -->
60 <form action="http://www.taobao.com" method="">
61 <table >
62 <tr>
63 <input type="text" name="" value="" style="width:450px ;height:30px;">
64 <input type="submit" name="" value="咻一咻" style="height:35px;">
65 </tr>
66 </table>
67 </form>
68 </div><br><br><br><br><br><br><br><br>
69 <div> <!-- 输入框下方 -->
70 <center>
71 <table>
72 <tr>
73 <td>
74 <a href="javascript:;" class="a">仙灵首页</a>
75 </td>
76 <td>
77 <a href="javascript:;" class="a">意见反馈</a>
78 </td>
79 <td>
80 <a href="javascript:;" class="a">使用帮助</a>
81 </td>
82 <td>
83 <a href="javascript:;" class="a">免责声明</a>
84 </td>
85 <td>
86 <a href="javascript:;" class="a">站长平台</a>
87 </td>
88 <td>
89 <a href="javascript:;" class="a">推广合作</a>
90 </td>
91 <td>
92 <a href="javascript:;" class="a">仙灵四格</a>
93 </td>
94 </tr>
95 </table></center>
96 </div>
97 <div>
98 <div class="d"><!-- 浏览器最后一行 -->
99 <p>
100 <a href="javascript:;" class="c">©2016 360.CN</a>
101 <a href="javascript:;" class="c">奇虎360旗下搜索服务 </a>
102 <a href="javascript:;" class="c">京ICP备08010314号-19</a>
103 <a href="javascript:;" class="c">京公网安备11000002000022号</a>
104 </p>
105 </div>
106 <div class="d"> <!-- 中间大标题 -->
107 <h1>周六巨著</h1>
108 </div>
109 <div> <!-- 块标签和行标签 -->
110 <h2>简单的HTML5标签，主要有两大块</h2>
111 <ol> <!-- 块标签 -->
112 <li>块标签</li>
113 <ol>
114 <li>块标签的特点:</li>
115 </ol>
116 <ul>
117 <li>块标签的特点是独占一行，换行显示</li>
118 </ul>
119 <ul>
120 <li>可以设置宽高和高度</li>
121 </ul>
122 <ul>
123 <li>块标签可以嵌套块标签和行标签</li>
124 </ul>
125 <ul>
126 <li>P标签和H标签不能嵌套块标签</li>
127 </ul>
128 <ol start="2">
129 <li>块标签包括:</li>
130 <ul> <!-- div标签 -->
131 <li>div标签，无定义标签<br>
132 样式：style=:"text-align:center"居中显示<br>
133 style="border:1px solid red"设置边框的宽度，以及颜色<br>
134 style="width:300px;height:300px;"设置宽高<br>
135 style="font-size:12px color:red"设置字体的大小,颜色
136 </li>
137 </ul>
138 <ul> <!-- p标签 -->
139 <li>
140 p标签，段落标签<br>
141 style="text-align:center"居中显示<br>
142 style="border:1px solid red"设置边框的宽度以及颜色<br> style="width:300px;height:300px;"设置宽高
143 </li>
144 </ul>
145 <ul> <!-- h标签 -->
146 <li>
147 h标签，标题标签<br>
148 style="text-align:center"居中显示<br>
149 style="border:1px solid red"设置边框的宽度以及颜色<br>
150 style="width:300px;height:300px;"设置宽高<br>
151 style="color:red"设置字体颜色；
152 </li>
153 </ul>
154 <ul> <!-- dl标签 -->
155 <li>
156 dl,dt，dd标签，定义标签<br>
157 dl:布局<br>
158 dt：需要定义的字词<br>
159 dd：注释文字
160 </li>
161 </ul>
162 <ul> <!-- ol，ul标签 -->
163 <li>
164 ol,ul标签，有序列表和无序列表标签<br>
165 ul：无序标签，前边标志是点。标志可以更改：通过属性type(square方，disc默认的，circle圆)<br>
166 ol:有序标签，前边是数字。前边标志可以更改：通过属性start更改<br>
167 style:list-style="none",可以去除ol，ul前边的标志和数字
168 </li>
169 </ul>
170 <ul> <!-- table标签 -->
171 <li>
172 table，tr,th,td标签，表格标签<br>
173 属性：border="300"设置边框的宽度<br>
174 cellpadding="0"设置单元格边框和单元格内容的边距<br>
175 cellspacing="0"设置单元格间的距离<br>
176 rowspan:跨行<br>
177 colspan:跨列<br>
178 样式：style="border-collapse:collapse"合并单元格
179 </li>
180 </ul>
181 <ul><!-- form标签 -->
182 <li>
183 form标签，嵌套input标签使用<br>
184 method方法：
185 post：后台形式传输，不显示路径。安全，无缓存，容量大<br>
186 get：显示路径，默认的方式。不安全，有缓存，容量小<br>
187 </li>
188 </ul>
189 <ul> <!-- br标签 -->
190 <li>
191 br标签，换行标签<br>
192 </li>
193 </ul>
194 </ol>
195 </ol>
196 <ol start="2"> <!-- 行标签 -->
197 <li>
198 行标签
199 </li>
200 <ol> <!-- 行标签的特点 -->
201 <li>行标签的特点：</li>
202 </ol>
203 <ul>
204 <li>
205 文字大小确定行宽高
206 </li>
207 </ul>
208 <ul>
209 <li>
210 行标签只能嵌套行标签，不能与块并列（input和img除外）
211 </li>
212 </ul>
213 <ol start="2">
214 <li>
215 行标签包括：
216 </li>
217 </ol>
218 <ul> <!-- span标签 -->
219 <li>
220 span标签，无定义标签
221 </li>
222 </ul>
223 <ul> <!-- a标签 -->
224 <li>
225 a标签，超链接标签<br>
226 属性：target:<br>
227 ①-black:新的页面打开<br>
228 ②self：自身页面转到，可以返回<br>
229 地址路径是相对路径<br>
230 ../意思为跳出本文件夹<br>
231 ①两者在同一个文件夹下:b.html<br>
232 ②b所在的文件夹与a同级：img/b.html<br>
233 ③a在一个文件夹,b在一个文件夹：../img/b.html<br>
234 a name="锚点的名字"-->a herf="#锚点的名字"，意思为在文章中插入一个锚点，点击后者会跳转到前面设置的位置，类似于TOP置顶
235 </li>
236 </ul>
237 <ul> <!-- img标签 -->
238 <li>
239 img标签，图片标签<br>
240 地址路径是相对路径<br>
241 alt:图片不显示或者出错误的时候显示的名字<br>
242 title：图片正常显示的时候，鼠标放到图片上显示的对图片的解释
243 </li>
244 </ul>
245 <ul> <!-- 强调标签 -->
246 <li>
247 var，em,strong标签，强调标签
248 </li>
249 </ul>
250 <ul> <!-- 文本框标签textarea -->
251 <li>
252 textarea标签，文本框标签<br>
253 select标签，选择列表<br>
254 option标签，选项标签
255 </li>
256 </ul>
257 <ul> <!-- input标签 -->
258 <li>
259 input标签<br>
260 用户名：input type="text" name="a" value="请输入内容"把value的最新的值赋给name<br>
261 密码：input type="password" name="" value="" 把value的最新的值赋给name<br>
262 按钮：input tyepe="button" name="" value=""<br>
263 复选框：input type="checkbox" name="" value=""<br>
264 单选框：input type="" name="sex" value=""<br> 把value的值赋给name，目的是为了识别选择的是哪一个,value的值并不是真正的值<br>
265 提交：input type="" name="" value=""
266 </li>
267 </ul>
268 <ul> <!-- 其他 -->
269 <li>
270 必不可少的标签：meta标签，和name，content一起使用<br>
271 属性在标签内，样式是指style
272 </li>
273 </ul>
274 </ol>
275 </div>
276 <div> <!-- CSS部分知识 -->
277 <h2>CSS主要包括两部分</h2>
278 <ol>
279 <li>三种引用</li>
280 <ul> <!-- 标签内引用 -->
281 <li>
282 标签内引用：p style=""
283 </li>
284 </ul>
285 <ul> <!-- 外部引用 -->
286 <li>
287 外部引用:建立一个CSS文件，然后使用link rel="stylesheet" herf="yy.css"调用，注意，link要放在head里面
288 </li>
289 </ul>
290 <ul>
291 <li>
292 头部引用:在head里面添加标签，五种选择器
293 </li>
294 </ul>
295 </ol>
296 <ol start="2"> <!-- 五种选择器 -->
297 <li>
298 五种选择器
299 </li>
300 <ul>
301 <li>
302 ID选择器，权重值100
303 </li>
304 </ul>
305 <ul>
306 <li>
307 类选择器，权重值10
308 </li>
309 </ul>
310 <ul>
311 <li>
312 标签选择器，权重值1
313 </li>
314 </ul>
315 <ul>
316 <li>
317 群组选择器
318 </li>
319 </ul>
320 <ul>
321 <li>
322 后代选择器
323 </li>
324 </ul>
325 </ol>
326 </div>
327 <div class="d">
328 <h2>附录：求职简历</h2>
329 </div>
330 <div>
331 <p>
332 填表时间 月 日
333 </p>
334 <center>
335 <table cellpadding="0" cellspacing="0" border="1" style="border-collapse:collapse; background-color:pink;" >
336 <tr><!-- 第一行 姓名 -->
337 <td rowspan="2" width="95">姓名</td>
338 <td rowspan="2" width="105"></td>
339 <td width="80" height="30">性别</td>
340 <td width="90"></td>
341 <td width="80">文化</td>
342 <td width="90"></td>
343 <td width="160" rowspan="4">
344 <img src="img/人物1.jpg" alt="人物照片" title="人物照片" width="160" height="141">
345 </td>
346 </tr>
347 <tr><!-- 第二行 身高-->
348 <td class="e" class="f">身高</td>
349 <td class="e"></td>
350 <td class="e">政治面貌</td>
351 </tr>
352 <tr><!-- 第三行 籍贯-->
353 <td class="e" class="f">籍贯</td>
354 <td class="e" colspan="3"></td>
355 <td class="e">出生年月</td>
356 <td class="e"></td>
357 </tr>
358 <tr><!-- 第四行 户口所在地-->
359 <td class="e" class="f">户口所在地</td>
360 <td class="e"></td>
361 <td class="e">婚否</td>
362 <td class="e"></td>
363 <td class="e">民族</td>
364 <td class="e"></td>
365 </tr>
366 <tr><!-- 第五行 身份证号码-->
367 <td class="e" class="f">身份证号码</td>
368 <td class="e" colspan="3"></td>
369 <td class="e">现在居住地</td>
370 <td class="e" colspan="2"></td>
371 </tr>
372 <tr><!-- 第六行 毕业学校-->
373 <td class="e" class="f">毕业学校</td>
374 <td class="e" colspan="3"></td>
375 <td class="e">毕业时间</td>
376 <td class="e" colspan="3"></td>
377 </tr>
378 <tr><!-- 第七行 学习专业-->
379 <td class="e" class="f">学习专业</td>
380 <td class="e"></td>
381 <td class="e">爱好特长</td>
382 <td class="e" colspan="4"></td>
383 </tr>
384 <tr><!-- 第八行 -->
385 <td class="e" class="f"></td>
386 <td class="e" colspan="7"></td>
387 </tr>
388 <tr><!-- 第九行 就学时间-->
389 <td class="e" class="f">就学时间</td>
390 <td class="e" colspan="2">学校</td>
391 <td class="e">学年</td>
392 <td class="e">学历</td>
393 <td class="e">专业</td>
394 <td class="e">担任职务</td>
395 </tr>
396 <tr><!-- 第十行 填表-->
397 <td class="e" class="f"></td>
398 <td class="e" class="f" colspan="2"></td>
399 <td class="e" class="f"></td>
400 <td class="e" class="f"></td>
401 <td class="e" class="f"></td>
402 <td class="e" class="f"></td>
403 </tr>
404 <tr><!-- 第十一行 填表-->
405 <td class="e" class="f"></td>
406 <td class="e" class="f" colspan="2"></td>
407 <td class="e" class="f"></td>
408 <td class="e" class="f"></td>
409 <td class="e" class="f"></td>
410 <td class="e" class="f"></td>
411 </tr>
412 <tr><!-- 第十二行 填表-->
413 <td class="e" class="f"></td>
414 <td class="e" class="f" colspan="2"></td>
415 <td class="e" class="f"></td>
416 <td class="e" class="f"></td>
417 <td class="e" class="f"></td>
418 <td class="e" class="f"></td>
419 </tr>
420 <tr><!-- 第十三行 填表-->
421 <td class="e" class="f"></td>
422 <td class="e" class="f" colspan="2"></td>
423 <td class="e" class="f"></td>
424 <td class="e" class="f"></td>
425 <td class="e" class="f"></td>
426 <td class="e" class="f"></td>
427 </tr>
428 <tr><!-- 第十四行 英语应用水平-->
429 <td class="e" class="f">英语应用水平</td>
430 <td class="e" colspan="4"></td>
431 <td class="e">职业期望</td>
432 <td class="e"></td>
433 </tr>
434 <tr><!-- 第十五行 计算机应用水平-->
435 <td class="e" class="f">计算机应用水平</td>
436 <td class="e" colspan="4"></td>
437 <td class="e">住宿要求</td>
438 <td class="e"></td>
439 </tr>
440 <tr><!-- 第十六行 工作经历-->
441 <td class="e" class="f" rowspan="4">工作经历</td>
442 <td class="e">时间</td>
443 <td class="e" colspan="2">工作地点</td>
444 <td class="e" colspan="3">职务</td>
445 </tr>
446 <tr><!-- 第十七行 填表-->
447 <td class="e" class="f"></td>
448 <td class="e" height="20" colspan="2"></td>
449 <td class="e" height="20" colspan="3"></td>
450 </tr>
451 <tr><!-- 第十八行 填表-->
452 <td class="e" class="f"></td>
453 <td class="e" height="20" colspan="2"></td>
454 <td class="e" height="20" colspan="3"></td>
455 </tr>
456 <tr><!-- 第十九行 填表-->
457 <td class="e" class="f"></td>
458 <td class="e" height="20" colspan="2"></td>
459 <td class="e" height="20" colspan="3"></td>
460 </tr>
461 <tr><!-- 第二十行 待遇要求-->
462 <td class="e" class="f">待遇要求</td>
463 <td class="e" colspan="7"></td>
464 </tr>
465 <tr><!-- 第二十一行 联系方式-->
466 <td class="e" class="f" rowspan="2">联系方式</td>
467 <td class="e">手机</td>
468 <td class="e"></td>
469 <td class="e">固定电话</td>
470 <td class="e" colspan="3"></td>
471 </tr>
472 <tr><!-- 第二十二行 联系方式-->
473 <td class="e" class="f">邮编</td>
474 <td class="e"></td>
475 <td class="e">地址</td>
476 <td class="e" colspan="3"></td>
477 </tr>
478 </table>
479 </center>
480 </div>
481 </body>
482 </html>
