码迷,mamicode.com
首页 > Web开发 > 详细

【2018-01-22】HTML-基础知识及表格嵌套

时间:2018-01-22 19:22:54      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:nav   水平   连接   高度   文件   动画   get   html   相对   

HTML: 网站(站点) - 网页

HTML作为文件后缀名,可以把文件变为网页

HTML是一门编程语言的名字:超文本标记语言
超越了文字的范畴,除了文字还可以有图片、视频、音频、动画特效等其它内容,由标记(<>)组成的一门计算机编程语言

HTML语言的作用:做网页

基本格式:
<html>
<head></head>
<body></body>
</html>

http://tool.oschina.net/commons?type=3

标记:
-文字标记
+ 加粗、倾斜、下划线 <b> <i> <u>
+ 颜色、大小、字体样式 <font color="" size="" face="" ></font>

-图片标记
+ <img src="相对路径" width="200" height="10" title="" />

--------------------------------------------------------------------------
空格标记:&nbsp;
换行标记:<br />
段落标记:<p></p>

表格:
<table>
<tr>
<td></td>
</tr>
</table>

border - 边框粗细
width - 宽度 px %
height - 高度
align - 水平排列格式
valign - 垂直排练格式
bgcolor - 背景颜色
background - 背景图片

cellspacing - 单元格之间的间距 外间距
cellpadding - 内容与单元格之间的间距 内间距


超链接: <a href="连接" target="_blank"> 文字/图片 </a>(target="_blank" 新页面打开)

 

 练习:

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8" />
  5     <title></title>
  6     <style type="text/css">
  7         *{
  8             padding:0px;
  9             margin:0px;
 10         }
 11     </style>
 12 </head>
 13 <body>
 14     <table border="1" width="100%" cellpadding="0">
 15         <!--一级表格第一行-->
 16         <tr height="100" bgcolor="navy">
 17             <td>
 18                 <table width="100%" height="100">
 19                     <tr>
 20                         <td width="40%" align="center">
 21                             <img src="aaa/logo.png" width="360" />
 22                         </td>
 23                         <td align="right">
 24                             <table  width="100%">
 25                                 <tr height="50%" align="right">
 26                                     <td>
 27                                         <font color="white" size="4" face="微软雅黑">
 28                                             山东人才热线:0533-1234567&nbsp;&nbsp;
 29                                             400-400-1234567&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 30                                         </font> 
 31                                     </td>
 32                                 </tr>
 33                                 <tr height="50">
 34                                     <td>
 35                                         <table width="100%" >
 36                                             <tr align="center">
 37                                                 <td><font color="white">基地介绍</font></td>
 38                                                 <td><font color="white">产品展示</font></td>
 39                                                 <td><font color="white">关于我们</font></td>
 40                                                 <td><font color="white">企业合作</font></td>
 41                                                 <td><font color="white">免费咨询</font></td>
 42                                             </tr>
 43                                         </table>
 44                                     </td>
 45                                 </tr>
 46                             </table>                                                    
 47                         </td>
 48                     </tr>
 49                 </table>
 50             </td>
 51         </tr>
 52         <!--一级表格第二行-->
 53         <tr>
 54             <td>
 55                 aaa<br />
 56                 bbb<br />
 57                 ccc<br />
 58                 aaa<br />
 59                 bbb<br />
 60                 ccc<br />
 61                 aaa<br />
 62                 bbb<br />
 63                 ccc<br />
 64                 aaa<br />
 65                 bbb<br />
 66                 ccc<br />
 67                 aaa<br />
 68                 bbb<br />
 69                 ccc<br />
 70             </td>
 71         </tr>
 72         <!--一级表格第三行-->
 73         <tr height="200" bgcolor="black">
 74             <td>
 75                 <table width="100%" height="200" >
 76                     <tr>
 77                         <td width="33%" valign="top" align="center">
 78                             <font color="white">
 79                                 <br />
 80                                 汉企人才定制中心<br />                       
 81                             </font>
 82                             <font color="white" size="1">
 83                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 84                                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 85                                 ——提供IT产业技术与人才专业的解决方案
 86                             </font>
 87                         </td>
 88                         <td width="33%" align="center">
 89                             <font size="1" color="white">
 90                                 北京:0515-449832<br />
 91                                 上海:0515-449832<br />
 92                                 广州:0515-449832<br />
 93                                 深圳:0515-449832<br />
 94                                 青岛:0515-449832<br />
 95                                 济南:0515-449832<br />
 96                             </font>
 97                         </td>
 98                         <td width="1" bgcolor="white" height="80%">
 99 
100                         </td>
101                         <td align="center" valign="top">
102                             <font size="2" color="white">
103                                 <br />
104                                 基地介绍&nbsp;&nbsp;产品展示&nbsp;&nbsp;关于我们<br />
105                                 企业合作&nbsp;&nbsp;免费咨询&nbsp;&nbsp;院校合作
106                             </font>
107                         </td>
108                     </tr>
109                 </table>
110             </td>
111         </tr>
112     </table>
113 
114 </body>
115 </html>

效果图:

技术分享图片

 

【2018-01-22】HTML-基础知识及表格嵌套

标签:nav   水平   连接   高度   文件   动画   get   html   相对   

原文地址:https://www.cnblogs.com/zqyyx/p/8330357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!