a标签,img标签,表格
<a></a> a标签,超链接标签 ,引入超链接方式: src="...." target="blank" 打开方式--新页面打开
用a标签制作锚点方式:首先需要在某个地点设置锚点: <a name="maodian">锚点</a>
然后在某个地点设置超链接跳转: <a src=#maodian>跳转到锚点</a>
<img /> 图片标签,引入图片方式 src=".../" ,标签属性:width=""宽,height=""高,name=""名字,ale=""当找不到图片时或者无法加载时图片位置显示的文字
用图片制作超链接方式:<a src="http://www.hao123.com"><img src="..." width="" height="" /></a>
* 制作表格:
<table> 表格的属性:border=""边框的值,cellpadding=""内容与单元格边框的边距,cellspacing=""单元格之间的间距,align=""对齐方式,bgcolor=""背景颜色 bgckground=""背景图片
<tr>
<td></td>
</tr>行 行的属性:align=""对齐方式,bgcolor=""背景颜色,height=""高度,width=""宽度
<tr>
<td></td>列 列的属性: alig=""对齐方式,width=""宽度
</tr>
<tr>
<td></td>
</tr>
合并单元格: colspan合并行,rowspan合并列 合并行或者列的时候要注意去掉后面行或者列的代码
</table>
下面是一张简易的简历表的全部制作代码: 附上效果图
<!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 bgcolor="#CCFF99" topmargin="50"><a name="ding"></a>
<font size="+2" face="楷体" color="#FF0000"> <h1><center>个人简历表</center></h1>
</font>
<table border="1" cellpadding="0" cellspacing="0" width="960" height="1200" align="center">
<tr height="400">
<td> <table border="1" cellpadding="0" cellspacing="0" width="960" height="400">
<tr>
<td colspan="5" height="30" bgcolor="#CCCCCC" align="center">基本情况</td>
</tr>
<tr>
<td width="192" align="center">姓名</td>
<td width="192"></td>
<td width="192" align="center">性别</td>
<td width="192"></td>
<td width="192" rowspan="6"><img src="../../../4ab00e17d7d23c82b912.jpg" name="头像" alt="相片"/></td>
</tr>
<tr>
<td align="center">民族</td>
<td></td>
<td align="center">出生日期</td>
<td></td>
</tr>
<tr>
<td align="center">政治面貌</td>
<td></td>
<td align="center">健康状况</td>
<td></td>
</tr>
<tr>
<td align="center">籍贯</td>
<td></td>
<td align="center">学历</td>
<td></td>
</tr>
<tr>
<td align="center">电子信箱</td>
<td></td>
<td align="center">联系电话</td>
<td></td>
</tr>
<tr>
<td align="center">专业</td>
<td colspan="3"></td>
</tr>
<tr>
<td align="center">毕业院校</td>
<td colspan="4"></td>
<td></td>
</tr>
<tr>
<td align="center">求职意向</td>
<td colspan="4"></td>
</tr>
</table>
</td>
</tr> <tr height="380">
<td>
<table border="1" cellpadding="0" cellspacing="0" width="960" height="380">
<tr>
<td colspan="4" bgcolor="#FFFFFF" height="30" align="center">教育情况</td>
</tr>
<tr height="30">
<td width="240" align="center">时间</td>
<td width="240" align="center">院校名称</td>
<td width="240" align="center">专业</td>
<td width="240" align="center">学历</td>
</tr>
<tr>
<td height="30"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4" height="30" bgcolor="#FFFFFF" align="center">培训经历</td>
</tr>
<tr>
<td height="30" align="center">时间</td>
<td align="center">培训机构</td>
<td align="center">课程</td>
<td align="center">证书</td>
</tr>
<tr>
<td height="30"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td height="30" colspan="4" align="center" bgcolor="#FFFFFF">技能特长</td> </tr>
<tr>
<td colspan="4"></td>
</tr>
</table>
</td>
</tr> <tr>
<td>
<table border="1" cellpadding="0" cellspacing="0" width="960" height="420">
<tr>
<td align="center" bgcolor="#FFFFFF" height="25" colspan="4">工作经验</td>
</tr> <tr height="30">
<td width="160" align="center">时间</td>
<td width="200" align="center">公司名称</td>
<td width="160" align="center">职位</td>
<td align="center">工作内容</td>
</tr> <tr height="30">
<td></td>
<td></td>
<td></td>
<td></td>
</tr> <tr height="30">
<td bgcolor="#FFFFFF" align="center" colspan="4">英文、计算机水平</td>
</tr> <tr height="50">
<td colspan="4"></td>
</tr> <tr height="30">
<td colspan="4" align="center" bgcolor="#FFFFFF">奖励荣誉</td>
</tr> <tr height="50">
<td colspan="4"></td>
</tr> <tr height="30">
<td colspan="4" bgcolor="#FFFFFF" align="center">自我评价</td>
</tr> <tr height="50">
<td colspan="4"></td>
</tr> <tr height="30">
<td colspan="4" align="center">博客地址:<a href="http://www.cnblogs.com/zhaotiancheng/">http://www.cnblogs.com/zhaotiancheng/</a></td>
</tr>
</table> </td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<center><a href=#ding>回到最顶</a></center> </body>
</html>
a标签,img标签,表格的更多相关文章
- html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格
表格在网站中应用得非常广泛,使用它可以方便.灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局.表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.在H ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- java-自定义标签&&JSTL标签库详解
自定义标签是Jav aWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面就来看一下自定义标签的简介: ...
- javaEE(7)_自定义标签&JSTL标签(JSP Standard Tag Library)
一.自定义标签简介 1.自定义标签主要用于移除Jsp页面中的java代码,jsp禁止出现一行java脚本. 2.使用自定义标签移除jsp页面中的java代码,只需要完成以下两个步骤: •编写一个实现T ...
- JavaWeb学习篇之----自定义标签&&JSTL标签库详解
今天来看一下自定义标签的内容,自定义标签是JavaWeb的一部分非常重要的核心功能,我们之前就说过,JSP规范说的很清楚,就是Jsp页面中禁止编写一行Java代码,就是最好不要有Java脚本片段,下面 ...
- 12 自定义标签/JSTL标签库/web国际化/java web之设计模式和案例
EL应用 自定义一个标签,实现两个字符串的相加 1回顾 1.1servlet生命周期 init(ServletConfig) service ...
- JSP自定义标签/自定义标签打包
有这样一个业务需求: 当我们在编辑某个用户时,需要设置该用户的角色,在转到编辑页面时,就需要自动勾选上该用户已经选择的角色,如下图: 当我们点击编辑时,会查询用户详细信息,以及角色集合传到编辑页面. ...
- cocos2d-x之 利用富文本控件解析xhml标签(文字标签,图片标签,换行标签,标签属性)
执行后效果: 前端使用: 后台SuperRichText解析code void SuperRichText::renderNode(tinyxml2::XMLNode *node){ while (n ...
- 推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
前言 今天利用中午午休时间,给大家分享推荐一款基于Angularjs的自动完成(Autocomplete)标签及标签组插件--ngTagsInput,功能超强大的.不信,你试试就知道^_^... Au ...
随机推荐
- 前端chrome浏览器调试总结
引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...
- oracle 表类型变量的使用
转载于:http://www.itxuexiwang.com/a/shujukujishu/oracle/2016/0216/89.html?1455872314 使用记录类型变量只能保存一行数据,这 ...
- Atitti.数字证书体系cer pfx attilax总结
Atitti.数字证书体系cer pfx attilax总结 一.数字证书常见标准 1 数字证书文件格式(cer和pfx)的区别: 1 二.数字证书存储内容 2 X.509是一种非常通用的证书格式. ...
- Atitit intellij idea的使用总结attilax
Atitit intellij idea的使用总结attilax 1. ideaIC-2016.2.4.exe1 1.1. Ij vs eclipse市场份额1 1.2. Ij的优点(方便的支持gro ...
- 学习ASP.NET MVC(四)——我的第一个ASP.NET MVC 实体对象
今天我将根据数据库中的表结构添加一些类.这些类将成为这个ASP.NET MVC应用程序中“模型”的一部分. 我们使用Entity Framework(实体框架)来定义和使用这些模型类,并且 ...
- Liferay7 BPM门户开发之47: 集成Activiti待办已办任务清单和流程启动
首先增加两个Portlet,分别用于待办处理.流程启动.待办是别人发起的流程,流到自己这里的流程:流程启动用于发起新的流程. 程序文件放置于 在ACtivit中待办概念分两种,1是指派给你的,专门的指 ...
- HTTP学习四:SPDY和HTTP/2.0
1 HTTP1.0/1.1与HTTPS的不足 1.1 HTTP1.0/1.1不足 单路连接 HTTP 协议的最大弊端就是每个 TCP 连接只能对应一个 HTTP 请求,即每个 HTTP 连接只请求一个 ...
- python+selenium运行报错UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128)
使用python+selenium运行自动化脚本时,打印某一段文字出现UnicodeEncodeError: 'ascii' codec can't encode characters in posi ...
- 在configure distribution时遇到错误,不能打开sql agent
今天在配置Distribution时,遇到一个错误,不能打开sql agent,详细错误信息如下: SQL Server blocked access to procedure 'dbo.sp_set ...
- 【解决方案】安装vssdk_full.exe遇到的问题
Stop Block: CompatibilityMode : Windows Program Compatibility mode is on. Turn it off and then try S ...