HTML的格式、内容容器、表格标签

HTMLHyper Text Markup Language,超文本标记语言)超指的是超链接。

 

<html>    --开始标签

  <head>

    网页上的控制信息

<title>页面标题</title>

  </head>

  <body>

    页面显示的内容

  </body>

</html>    --结束标签

代码写在body里面

 

<!--注释内容--> 注释

 

body的属性:

 

bgcolor 页面背景色      text 文字颜色

topmargin 上页边距      leftmargin 左页边距

rightmargin 右页边距    bottomargin 下页边距  background 背景壁纸

一、格式控制标签

<font color="" face="" size=""></font>  控制字体;color="##FF0000";face,字体;size,字体大小

<b></b>                字体加粗

<i></i>                  倾斜

<u></u>                下划线

<strong></strong> 字体加粗(强调,语气加强用)

<em></em>           字体倾斜(强调,语气加强用)

<center></center>  居中(前后有内容时自动换行 内容会单独占据一行)

<br> 或<br />         相当于回车

&nbsp                      表示空格 也可以在设计页面中按ctrl+shift+space

二、内容容器标签

<h1></h1>……<h6></h6>     标题(会自动换行)。

<p></p>                               段落标签(段落之间空行)

<div></div>                          层标签(默认占一行)

<span></span>                     层标签(默认用多大空间占多大空间)

<ol type="1">                       --有序列表,序号为1,2,3……,引号中可以更改序号形式

<li>内容</li>

<li>内容</li>

</ol>                                  --上面“ol”改为“ul”则为无序列表

三、超链接、图片标签

<a href="超链接地址" target=“_blank”>超链接的文字</a>     --href(hyperlink reference);_blank是在新窗口打开。

类似返回顶部或返回特定位置的链接:

第一步:做锚点的标签。<a name=""></a>

第二步:做锚点链接。<a href="目标链接的name的值"></a>

图片:

<img src="图片地址" alt="文字" width="" height="" title="" />     --高跟宽设置一个即可,显示图片会按比例缩放。alt在图片无法加载时,显示文字,title为鼠标指上时显示的介绍文字。

四、表格

<table></table>    表格

width:                   宽度。可以用像素或百分比表示。常用960像素。

border:                边框。常用值0。

cellpadding:         内容跟单元格边框的边距。常用值0。

cellspacing:          单元格之间的间距。常用值0。

align:                    对齐方式

bgcolor:                背景色

background:          背景图片。

 

<tr></tr>         行

align:              一行的内容的水平对齐方式

valign:            一行的内容的垂直对齐方式

height:           行高

bgcolor:           背景色

background:     背景图片

 

 

 

<td></td>         单元格

<th></th>         表头,单元格的内容自动居中、加粗

align:                 单元格的内容的对齐方式

valign:              单元格的内容的垂直对齐方式

width:               单元格宽度

height:              单元格高度

bgcolor:              背景色

background:       背景图片

 

内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。设置单元格行高、列高时,会同时影响对应的行或列

单元格合并:

colspan="n"    合并同一行单元格(后面写代码要减去相对应的列) 

rowspan="n"    合并同一列单元格(从第二行开始减去对应的列)

练习:使用HTML制作简历:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>王潼个人简历</title>
</head>

<body>
<h1 align="center">王潼的个人简历</h1>
<table bgcolor="#FFFFCC" align="center" width="50%" height="850" border="1" cellpadding="0" cellspacing="0">
<tr align="center" height="50">
<td width="70"><b>姓名</b></td>
<td width="100">王潼</td>
<td width="70"><b>性别</b></td>
<td width="100"></td>
<td width="70"><b>民族</b></td>
<td width="100"></td>
<td rowspan="3"><img src="zhaopian.png"/></td>
</tr>
<tr align="center" height="50">
<td><b>籍贯</b></td>
<td>泰安</td>
<td><b>婚姻状况</b></td>
<td>未婚</td>
<td><b>学历</b></td>
<td>本科</td>
</tr>
<tr align="center" height="50">
<td><b>出生年月</b></td>
<td>1992年3月</td>
<td><b>年龄</b></td>
<td>24</td>
<td><b>政治面貌</b></td>
<td>群众</td>
</tr>
<tr align="center" height="50">
<td><b>家庭住址</b></td>
<td colspan="6">山东省淄博市张店区华光路南四巷</td>
</tr>
<tr align="center" height="50">
<td><b>获得证书</b></td>
<td colspan="6">毕业证、驾驶证</td>
</tr>
<tr align="center" height="50">
<td><b>个人技能</b></td>
<td colspan="6">C#基础</td>
</tr>
<tr align="center" height="50">
<td colspan="7"><b>教育或工作经历</b></td>
</tr>
<tr align="center" height="50">
<td colspan="2"><b>起止日期</b></td>
<td colspan="4"><b>在何单位</b></td>
<td><b>职务</b></td>
</tr>
<tr align="center" height="50">
<td colspan="2">2010.9-2014.6</td>
<td colspan="4">滨州学院</td>
<td>学生</td>
</tr>
<tr align="center" height="50">
<td colspan="2">2014.11-2016.8</td>
<td colspan="4">淄博思科电子</td>
<td>技术支持</td>
</tr>
<tr align="center" height="50">
<td colspan="2">2016.9-</td>
<td colspan="4">淄博汉企</td>
<td>实训员工</td>
</tr>
<tr align="center" height="50">
<td><b>期望行业</b></td>
<td colspan="4">IT行业</td>
<td><b>期望薪资</b></td>
<td>4000</td>
</tr>
<tr align="center" height="50">
<td colspan="7"><b>自我评价</b></td>
</tr>
<tr align="center">
<td colspan="7"></td>
</tr>
<tr align="center" height="50">
<td><b>博客地址</b></td>
<td colspan="6"><a href="http://www.cnblogs.com/wt627939556/" target="_blank">http://www.cnblogs.com/wt627939556/</a></td>
</tr>
</table>
</body>
</html>

 

较为简约的版本,使用到了表格以及部分字体设置标签

总结:刚开始HTML部分的学习,感觉内容非常零碎,需要记忆的东西很多,不过许多功能在不同的标签中类似,比如bgcolor都是设置背景颜色,需要勤加练习才能牢记所学内容。

 

 

 

 

posted @ 2016-10-25 11:05  苏迁时  阅读(2606)  评论(1编辑  收藏  举报