一周的学习，组合起来的成就 

  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">更多&nabla;</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">&copy;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             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;填表时间&nbsp;月&nbsp;日
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>

 

posted @ 2016-07-10 15:30  舍近求猿  阅读(236)  评论(0)    收藏  举报