HTML常用标签跟表格

<html> --开始标签

<head>

网页上的控制信息

</head>

<body>

页面显示的内容

</body>

</html> --结束标签
注：成对存在

body的属性：

bgcolor 页面背景色 background 背景壁纸、图片 text 文字颜色 topmargin 上边距

leftmargin 左边距 rightmargin 右边距 bottommargin 下边距 background 背景壁纸

一、格式控制标签

<font color="" face="" size=""></font>

<font size="+4" color="#CCFF00">字体格式控制标签：</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……，引号中可以更改序号形式

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

三、超链接、图片标签

<a href="http://www.baidu.com" target="new">百度一下</a><br />
<img src="n0.jpg" alt="zheshiyitouniu" title="这是一头牛" /><br />

四、表格

<table></table> 表格

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

　　　　border：边框。常用值0。

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

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

　　　　align:对齐方式。

　　　　bgcolor:背景色。

background:背景图片。

　　<tr></tr> 行

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

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

　　　　height：行高

　　　　bgcolor:背景色

background:背景图片

　　<td></td> 单元格

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

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

　　　　width：单元格宽度

　　　　height：单元格高度

　　　　bgcolor:背景色

　background:背景图片
　　<th></th> 表头，单元格的内容自动居中、加粗

个人简历练习：

<!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>
<center><img src="QQ图片20161025152150.png" width="400"/></center>
<table align="center" width="840" height="1048" border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="75" height="80">姓名：</td>
<td width="70">张三</td>
<td width="100">性别：</td>
<td width="70">男</td>
<td width="100">出生年月：</td>
<td width="200">1994.01.01</td>
<td rowspan="4"><img src="3.jpg" width="225" height="316" /></td>
</tr>
<tr align="center">
<td height="75">专业：</td>
<td>666</td>
<td>健康状况：</td>
<td>良好</td>
<td>籍贯：</td>
<td>山东省淄博市</td>

</tr>
<tr align="center">
<td height="75">毕业院校:</td>
<td colspan="3">清华大学</td>
<td>联系电话:</td>
<td>13555555555</td>

</tr>
<tr align="center">
<td height="80">邮箱：</td>
<td colspan="3">291378108@qq.com</td>
<td>学历：</td>
<td>院士</td>


</tr>
<tr align="center">
<td height="178">地址：</td>
<td colspan="6">xxxxxxxxxxxxx</td>
</tr>
<tr align="center" height="70">
<td rowspan="2" >工作经历：</td>
<td colspan="6" rowspan="2">xxxxxxxx<br />xxxxxxx<br />xxxxxxxxx<br />xxxxx<br />xx<br /></td>
</tr>
<tr height="70">
</tr>
<tr align="center" height="40">
<td rowspan="2">获奖证书：</td>
<td colspan="6" rowspan="2"></td>
</tr>
<tr height="40">
</tr>
<tr align="center" height="70">
<td>专业技能:</td>
<td colspan="6">xxxxxxxxx<br />xxx<br /></td>
</tr>
<tr align="center" height="100">
<td>个人评价：</td>
<td colspan="6"></td>
</tr>
<tr align="center">
<td></td>
<td colspan="6"><a href="http://www.cnblogs.com/jiuban2391/">博客园</a></td>
</tr>
</table>
</body>
</html>

View Code