HTML 标签与表格
打开DREAMWEAVER,新建HTML,如下图:
body的属性:
bgcolor 页面背景色
background 背景壁纸、图片
text 文字颜色
topmargin 上边距
leftmargin 左边距
rightmargin 右边距
bottommargin 下边距
body属性用法示例:
格式控制标签:
<font color="" face="" size=""></font>
分别控制字体的颜色、字体和大小。
<b></b> 字体加粗
<strong></strong> 字体加粗
<i></i> 倾斜
<em></em> 倾斜
<u></u> 下划线
<center></center> 居中
<br>或<br/> 相当于回车
表示空格,Ctrl+shift+space
格式控制标签使用示例:
内容容器标签:
<h1></h1> 标题,会自动换行。HTML标题是
. . . 通过<h1>到<h6>等标签来定义的。
<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> --在新窗口打开
还可以在当前页找到目录点击目录上的超链接,自动跳转到当页的某一个地方。
示例:
图片标签:
<img src="图片地址" alt="文字" width=“” height=“” title=“描述文字” />
高度跟宽度设置一个即可保持原有比例。
alt在图片无法加载时,显示文字,还可以帮助搜索引擎搜索。
title可以添加图片描述,鼠标放在图片上时可以显示描述。
表格:
<table></table>表格
width:宽度。可以用像素或百分比表示。 常用960像素。
border:边框,常用值为0。
cellpadding:内容跟边框的距离,常用值为0。
cellspacing:单元格与单元格之间的间距,常用值为0。
algin:对齐方式。
bgcolor:背景色。
background:背景图片。
<tr></tr>行
align:一行内容的水平对齐方式。
valign:一行内容的垂直对齐方式。
height:行高。
bgcolor:背景色。
background:背景图片。
<td></td>单元格
<th></th>表头,单元格的内容自动居中、加粗
align:单元格内容的对齐方式。
valign:单元格的内容的垂直对齐方式。
width:单元格宽度。
height:单元格高度。
bgcolor:背景色。
background:背景图片。
内容必须放在单元格里,单元格必须放在行里,行必须放在表格里。
设置单元格行高、列高时,会同时影响对应的行或列。
单元格合并:(建议尽量用表格嵌套)
colspan=“n” 合并同一行的单元格(后面写代码要减去相对应的列)
rowspan=“n” 合并同一列单元格(从第二行开始减去相对应的列)
表格示例:
网页版个人简历制作练习:
<!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 background="PIC_20140303_205001_85C.jpg"> <a name="top"></a> <center> <table width="980" height="1000" cellpadding="0" cellspacing="0" border="1" align="center" background="PIC_20141006_124504_D1E.jpg" align="center"> <tr height="50"> <td width="320" colspan="5" rowspan="2" background="0023.jpg"><h1><center><font><b>个人简历</b></font></center></h1></td> </tr> <tr height="50"> </tr> <tr height="50" align="center"> <td width="196">姓名</td> <td width="196">冯瑶瑶</td> <td width="196">性别</td> <td width="196">女</td> <td width="196" rowspan="6"><img src="PIC_20140308_211545_490.jpg" width="196" /></td> </tr> <tr height="50" align="center"> <td>出生日期</td> <td>1993年11月1日</td> <td>民族</td> <td>汉族</td> </tr> <tr height="50" align="center"> <td>籍贯</td> <td>山东淄博</td> <td>政治面貌</td> <td>团员</td> </tr> <tr height="50" align="center"> <td>毕业院校</td> <td></td> <td>专业</td> <td></td> </tr> <tr height="50" align="center"> <td>学历</td> <td></td> <td>婚姻状况</td> <td></td> </tr> <tr height="50" align="center"> <td>联系电话</td> <td>13070657371</td> <td>邮箱</td> <td>1018502325@qq.com</td> </tr> <tr height="50" align="center"> <td>博客园地址</td> <td colspan="2"><a href="http://www.cnblogs.com/yy01/" target="_blank">yy01</a></td> <td>应聘职位</td> <td></td> </tr> <tr height="50" align="center"> <td>现住址</td> <td colspan="4"></td> </tr> <tr height="50" align="center"> <td colspan="5">工作经历</td> </tr> <tr height="50" align="center"> <td>起始年月</td> <td colspan="2">工作单位</td> <td>岗位</td> <td>离职原因</td> </tr> <tr height="50" align="center"> <td></td> <td colspan="2"></td> <td></td> <td></td> </tr> <tr height="50" align="center"> <td></td> <td colspan="2"></td> <td></td> <td></td> </tr> <tr height="50" align="center"> <td></td> <td colspan="2"></td> <td></td> <td></td> </tr> <tr height="50" align="center"> <td colspan="5">自我评价</td> </tr> <tr height="50" align="center"> <td colspan="5" rowspan="3"></td> </tr> <tr height="50" align="center"> </tr> <tr height="50" align="center"> </tr> <tr height="50" > <td colspan="5" align="right" >年 月 日 </td> </tr> </table> </center> <a href="#top"> <img src="PIC_20140308_011700_89D.jpg" title="返回最顶端" width="50"/></a></body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 如何给本地部署的DeepSeek投喂数据,让他更懂你
· 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· .NET 8.0 + Linux 香橙派,实现高效的 IoT 数据采集与控制解决方案
· .NET中 泛型 + 依赖注入 的实现与应用