1、使用HTML制作网页,要求3个网页互通,每个网页有图有文字有超链接!
说先,做一个普通的网页,并且在网页中插入一张图片。
代码入下:
<!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>
<img src="./test.jpg">
</body>
</html>
2
那么,如何添加超链接呢?这就要用到<a>标签来完成。
那么,如何给图片添加超链接呢?只要把<img>标签放在<a>和</a>之间就可以了。
而a标签又有一个参数:href.该参数用来指定链接的地址,假设我们要链接到百度。那么更改代码如下:
<!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>
<a href="http://www.baidu.com"><img src="./test.jpg"></a>
</body>
</html>
3
保存后点击该网页。之后,点击网页上图片。看,成功连接到了百度。
4
上诉步骤,有一个要点!
href的值不能使www.baidu.com。否则会出错。必须要写绝对地址;http://www.baidu.com才可以!
END
二.热区链接
上诉时最普通的链接方式,其实要有一种更高级的连接方法。
在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>
<img src="./test.jpg" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,20,20" href="http://www.baidu.com" title="梅园">
<area shape="rect" coords="30,30,20,20" href="http://mail.163.com" target="_blank" title="a园">
</map>
</body>
</html>
下面来分析代码:
1)<img src="./test.jpg" usemap="#mymap">
意思是,在该图片中,使用名为mymap的映射图像名称。
2)<map name="mymap">
意思是,定义热区图像,名称为mymap
3)<area shape="rect" coords="0,0,20,20" href="http://www.baidu.com" title="梅园">
意思是,对map的一个热区点进行定义。rect代表矩形,coords代表热区图标,href为需要连接的地址。
OK,剩下的语法都没什么好说的了。
接着,打开网页,可以发现,当把鼠标放在左上角的时候,鼠标会变成“手”的形状。点击,变会进入相应的链接。
当然,下图标的并不太准确,但大概是这么个位置,供参考。
5
这里再补充一点:
shape的取值可以有多个:
1)rect:刚用了,代表矩形,他后面的坐标为4个,前两个为坐上坐标(x,y),后两个为右下坐标
2)circle:圆形的坐标。后面的坐标为3个。前两个为圆形的坐标,最后一个为半径。
当然,还有许多其他的,就不列举了,所谓边越多,则坐标越多,不难理解吧。
2、用最常用的HTML标签制作一个页面?
<! html>
<html>
<head>
<meta charset="utf-8">
<title>新闻中心</title>
<style>
*{padding: 0;margin: 0;border: 0}
.left{width: 40%;float: left;margin: 5%}
.right{width: 40%;float: right;margin: 5%}
h2{color: #e52e24}
ul{margin: 5% 0 2% 0;list-style-type:none;}
ul li{margin-bottom: 10px;border-bottom:1px dashed #d4d4d4}
ul a{text-decoration:none;color: black}
ul a span{float: right}
.message-div{margin-top: 5%}
.message-div input{width: 45%;margin: 1%;float: left;height: 2rem;border: 1px solid #d4d4d4;padding-left: 5px}
.message-div img{width: 20%;height: 40px}
.message-div textarea{border: 1px solid #d4d4d4;width: 90%;margin: 1%;padding: 2%}
.foot{width: 94%;padding: 1%}
.foot b{font-size: 14px;}
.foot span{color: #e52e24;font-size: 14px}
.foot button{color: white;background-color: #e52e24;float: right;width: 100px;height: 30px}
</style>
</head>
<body>
<div class="left">
<h3>NEWS</h3>
<h2>新闻中心</h2>
<ul>
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
</ul>
<i>VIEW MORE</i>
</div>
<div class="right">
<h3>MESSAGE</h3>
<h2>在线留言</h2>
<div class="message-div">
<input type="text" placeholder="你的称呼">
<input type="email" placeholder="你的邮箱">
<input type="text" maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="你的电话">
<input type="text" maxlength="4" placeholder="验证码" style="width: 20%">
<img src="
<textarea rows="13" cols="40" placeholder="您的需求描述?"></textarea>
</div>
<div class="foot"><b>您也可以发送您的需求至邮箱:</b><span>[email protected]</span><button>提交</button></div>
</div>
</body>
</html>
3、网页里的这些东西是用什么标签设计出来的?
span便签是一个内联元素,它可以用于表示没有任何含义的行内内容。什么是专内联元素属?在html或者是xhtml中,所有的元素按照是否换行的性质可以划分为内联元素(inlineelement)与块级元素(blockelement)这两种,如果我们说div是最经典最通用的块级元素,那么span便是最经典最通用的内联元素。
一般来说,span专用于表示没有任何含义的内容,例如文章中正文的某一行,或者是我们用span设计横向的导航菜单。
如果你有过仔细看xhtml的话,你便会发现,xhtml的很多元素都有自己的作用,例如b用于加粗内容,i用于倾斜内容,var用于表示变量,code表示代码,samp表示样本内容……但是,在实际使用时,还是有很多内容不需要我们去标记其作用或为其设置基于内容的说明,那么到了这里,span就会是一种非常通用的最佳选择。。。。。。。
4、css是利用什么XHTML标记构建网页布局
你问的让我很纠结。。。 XHTML是相对HTML来说的,比html更严格,指的是网页结构规范等,css是css,用来美化各部分结构。希望你理解表现与结构相分离是怎么回事。
5、css是利用什么xhtml标记构建网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种样式制作定位。div是html(超文本语言)中的一个元素,div+css是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.div是标签css是层叠样式表(css样式)DIVCSS高级布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。DIV+CSS的特点:1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。3、搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。4、样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。现很多个人站长新建站点都采用了DIV+CSS来构建自己的网站页面,可见DIV+CSS替代table已经不是遥远梦想。5、通过制作发行同样的页面使用TABLE做的页面与DIV+CSS制作的页面大小对比,DIV+CSS的XHTML页面大小至少小TABLE制作页面1/4。从而使的浏览DIV+CSS的页面更加快捷快速。
6、用最常用的HTML标签制作一个单页面
<head>
<title>test</title>
</head>
<body>
<div id="divdown1">
<p>
<h1><a href="">111</a></h1>
</p>
</div>
</body>
</html>
7、制作网页的XHTML语言都有那些标签?和源代码?
太多了,发2个超链接给你吧。 http://www.dream.com/xhtml/common_tags/ http://www.chinaz.com/Design/Pages/0510S432007.html html框架类标签html -- 定义html文档body -- 定义文档体bodyhead -- 定义文档头信息headtitle -- 定义文档的标题 ... -- [[html注释]]标签html图像与链接类标签a -- html链接标签aimg -- html图像标签imghtml文字相关标签h -- 定义标题1至标题6 h1, h2, h3, h4, h5, h6p -- html段落标签pdiv -- html层divstrong -- 定义要强调显示的内容stronghtml列表标签ul -- 定义html列表ulli -- 定义html列表内容lihtml表格类标签table -- 定义html表格tabletr -- 定义表格行trtd -- 定义表格列td
希望采纳
8、HTML 与XHTML 的区别,在网页设计中各有什么用处?
HTML比较松散,比如标来签可以自不以/结尾,属性可以大写,属性值可以不用引号括起来,等等
而XHTML是XML的子集,它除了实现了HTML功能以外,所有的标签都必须按照XML的格式来写
他们在功能上是没有区别的
建议使用XHTML,进行严谨的编码,这样不仅标签规整,不易产生歧义,也可以给读你代码的人带来许多便利
希望对您有帮助~
By Billskate
9、急求!!!网页设计 HTML代码大全
HTML标记_HTML大全_HTML标记大全_超文本标记语言
网页(WebPage)文件主要是用超文本标记语言(HyperText Markup Language,简称HTML)语句来写成。您可以通过IE浏览器的“查看”菜单中的“源文件”看到该页的HTML代码。HTML语言由一系列元素(element)组成,用于组织文件的内容和指导文件的输出格式。元素名称不分大小写。一个元素可以有多个属性,属性及其属性值不分大小写。属性名=属性值合起来构成一个完整的属性,一个元素可以有多个属性,各个属性用空格分开。元素又由标记(tag)的构成,大多数标记是成对出现的,分起始标记< >(start tag)和结尾标记</ >(end tag),以便和页面的内容区分开来。其写成的文件是标准的ASCII文件,不同于一般的编程语言,故称为脚本(Script)更准确一点。其实也很简单,特别是在专门的HTML编辑器的帮助下,您可以迅速地学会HTML,并能很快写出有自己特色的Homepage来。
需要说明的是:各种浏览器对html元素及其属性的解释不完全一样,如NC与IE是有区别的。
标 签 内 容 备 注
基 本 标 签 所有HTML文件都有的
<html>……</html> 表示文件类型为HTML文档
<head>……</head> 设置文档描述及其他不在WEB网页上显示的信息
<body>……</body> HTML文档的主体(页面的实际内容)
标 题 标 签
<title>……</title> 在标题栏中显示的题目(放在<head></head>内)
扩 展 属 性 标 签
<base>
基址标签,为解决相对编址作参考值
<META>
将HTTP命令发给CONTENT=number;url允许,描述不包含在标准HTML里的文档信息。使用详解
<link>
提供将现行文档与其它文档或实体关联起来的信息
<ISINDEX> 指明在服务器上提供文档的可以检索的索引
<style>……</style> 允许包含样式表(CSS)信息
页 面 属 性 标 签 <body>……</body>标签的扩展属性。使用详解
<body bgcolor=#……> 设置背景颜色,用名字或十六进制值
<body text=#……> 设置文本文字颜色,用名字或十六进制值
<body link=#……> 设置链接颜色,用名字或十六进制值
<body vlink=#……> 设置已使用的链接的颜色,用名字或十六进制值
<body alink=#……> 设置正在被击中链接的颜色,用名字或十六进制值
文 本 标 签
<pre>……</pre> 创建预格式化文本
<h1>……</h1> 创建最大的标题
<h6>……</h6> 创建最小的标题
<b>……</b> 创建黑体字
<i>……</i> 创建斜体字
<tt>……</tt> 创建打字机风格的字体
<cite>……</cite> 创建一个引用,通常是斜体
<em>……</em> 加重(通常是斜体加黑体)
<strong>……</strong> 强调(通常是斜体加黑体)
<font size=value></font> 设置字体大小,从1到7
<font color=……></font> 设置字体的颜色,使用名字或十六进制值
链 接
<a href="/URL"></a> 创建一个超链接
<a href="mailto:EMAIL"> </a> 创建一个自动发送电子邮件的链接
<a name="NAME"></a> 创建一个位于文档内部的靶位
<a href="#NAME"></a> 创建一个指向位于文档内部靶位的链接
格 式 排 版
<p> 创建一个新的段落
<p align=……> 将段落按左、中、右对齐
<br> 插入一个回车换行符
<blockquote>……</blockquote> 从两边缩进文本
<dl>……</dl> 创建一个定义列表
<dt> 放在每个定义术语词之前
<dd> 放在每个定义之前
<ol>……</ol> 创建一个标有数字的列表
<li> 放在每个数字列表项之前,并加上一个数字
<ul>……</ul> 创建一个标有圆点的列表
<li> 放在每个圆点列表项之前,并加上一个圆点
<div align=……> 一个用来排版大块HTML段落的标签,也用于格式化表
图 形 元 素
<img src="/name"> 添加一个图像
<img src="/name" align=value> 排列对齐一个图像:左中右或上中下
<img src="/name" border=value> 设置围绕一个图像的边框的大小
<hr> 加入一条水平线
<hr size=value> 设置水平线的大小(高度)
<hr width=value> 设置水平线的宽度(百分比或绝对像素点)
<hr noshade> 创建一个没有阴影的水平线
表 格
<table>……</table> 创建一个表格
<tr>……</tr> 开始表格中的每一行
<td>……</td> 开始一行中的每一个格子
<th>……</th> 设置表格头:一个通常使用黑体居中文字的格子
表 格 属 性
<table border=value> 设置围绕表格的边框的宽度
<table cellspacing=value> 设置表格格子之间空间的大小
<table cellpadding=value> 设置表格格子边框与其内部内容之间空间的大小
<table width=value 或 %> 设置表格的宽度-用绝对像素值或文档总宽度的百分比
<tr align=……> 设置表格格子的水平对齐(左中右)
<tr valign=……> 设置表格格子的垂直对齐(上中下)
<td colspan=value> 设置一个表格格子应跨占的列数(缺省为1)
<td rowspan=value> 设置一个表格格子应跨占的行数(缺省为1)
<td nowrap> 禁止表格格子内的内容自动断行回卷
窗 框
<frameset>……</frameset> 放在一个窗框文档的<body>标签之前,也可以嵌在其他窗框文档中
<frameset rows="value,value"> 定义一个窗框内的行数,可以使用绝对像素值或高度的百分比
<frameset cols="value,value"> 定义一个窗框内的列数,可以使用绝对像素值或宽度的百分比
<frame> 定义一个窗框内的单一窗或窗区域
<noframes>……</noframes> 定义在不支持窗框的浏览器中显示什么提示
窗 框 属 性
<frame src="/URL"> 规定窗框内显示什么HTML文档
<frame name="name"> 命名窗框或区域以便别的窗框可以指向它
<frame marginwidth=value> 定义窗框左右边缘的空白大小,必须大于等于1
<frame marginheight=value> 定义窗框上下边缘的空白大小,必须大于等于1
<frame scrolling=value> 设置窗框是否有滚动栏,其值可以是"yes","no","auto",缺省时一般为"auto"
<frame noresize> 禁止用户调整一个窗框的大小
表 单 对于功能性的表单,一般需要运行一个CGI小程序,HTML仅仅是产生表单的表面样子。
<form>……</form> 创建所有表单
<select multiple name="NAME" size=value>………</select> 创建一个滚动菜单,size设置在需要滚动前可以看到的表单项数目
<option> 设置每个表单项的内容
<select name="NAME">……</select> 创建一个下拉菜单
<textarea name="NAME" cols=value rows=value>……</textarea> 创建一个文本框区域,列的数目设置宽度,行的数目设置高度
<input type="checkbox" name="NAME"> 创建一个复选框,文字在标签后面
<input type="radio" name="NAME" value="x"> 创建一个单选框,文字在标签后面
<input type=text name="……" size=value> 创建一个单行文本输入区域,size设置以字符计的宽度
<input type="submit" value="NAME"> 创建一个submit(提交)按钮
<input type="image" border=0 name="NAME" src="/name.gif"> 创建一个使用图象的submit(提交)按钮
<input type="reset"> 创建一个reset(重置)按钮
附 加 属 性
<PRE>……</PRE> 预置格式风格标签用来显示字体宽度固定的文本块,主要用来在表格格式中显示文本
<TT>……</TT> 打字机风格用来显示打字机字体宽度固定的文本
<SAMP>……</SAMP> 示例风格以单倍距显示文本
<ADDRESS>……</ADDRESS> 地址风格一般用于文档的开始或结尾处,并以斜体格式显示文本。
<DL>……</DL> 定义列表风格用来显示术语及其定义
颜色
#=rrggbb 16 进制 RGB 数值,或者是下列预定义色彩:
Black,Olive,Teal,Red,Blue,Maroon,Navy, Gray,Lime,Yellow,white,Silver,Fuchsia,Purple,Green,Aqua[返回本页首部]
META标签
描述不包含在标准HTML里的文档信息。
<META NAME="keywords" CONTENT="yourkeyword">
<META NAME="description" CONTENT="your homepage's description">
本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字搜索到您的主页,了解你的主页内容。
<META HTTP-EQUIV="refresh" CONTENT="30, URL=new.htm">
浏览器将在30秒后,自动转到new.htm。您可用它制作一个封面,在若干时间后,自动带读者来到您的目录页。如果URL项没有,浏览器就是刷新本页。这就是WWW聊天室定期刷新的实现原理。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
强制性调用网上的最新版本。浏览器为节约时间,在本地硬盘上保存一个临时文件。在重新调用时,便直接显示那个临时文件。如果您想让读者每次都看到最新的版本,可加上句。[返回本页首部]
LINK
显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:
<LINK REL="stylesheet" href="/style.css">REL参数说明两个文档之间的关系,HREF说明目标文档名。关于层叠样式表,将在后面的课程中详述。[返回本页首部]
BASE
本文档的原始地址。语法:<BASE HREF="原始地址">当读者下载您的文档后,由此可以知道是从哪里下载的。[返回本页首部]
BODY
BODY标记有一些属性,用于定义页面内的显示效果。 ALINK、LINK、TEXT、VLINK—— 文字的颜色。
ALINK:当前激活的连接的文字颜色。
LINK:连接的文字颜色。
TEXT:文字的颜色。
VLINK:参观过的文字颜色。
注意:文字的颜色要和背景色有明显的差别,以便读者浏览。
BACKGROUND、BGPROPERTIES、BGCOLOR——页面的背景部分。
BACKGROUND:背景图案,该图案在页面内平铺。背景图案应保持单一色调,以保证页面文字易于阅读。
BGPROPERTIES:设置成FIXED,则背景图案不滚动。(只对INTERNET EXPLORER有效)
BGCOLOR:背景色。
注意:如果你的背景图案是深色调,因之文字颜色为淡颜色,那么由于浏览器调用页面的顺序是“背景色-文字-背景图案”,那么在背景图案没有显示的情况下,你的文字在白颜色下很难阅读,所以应该选用一个跟你的背景图案颜色一致的背景色。
LEFTMARGIN、TOPMARGIN——页边空白。(只对INTERNET EXPLORER有效)
LEFTMARGIN:左边页边空白。
TOPMARGIN:顶端页边空白。
10、请教在div+css的页面设计中,html和xhtml有什么异同? - 技术问答
其实两种来差不多,只不过XHTML的符源合xml的语法规范,xhtml其实就是html向xml的过渡,所以最好还是用xhtml,因为xml语法规范更容易被各种设备解析。两种语法差别不是很大,只是xhtml废弃了一些html中的标签,还有规范了一些标签到这里看下你就明白了http://www.w3school.com.cn/xhtml/