html求制作一个简单网页代码，只需要一些文字加张图片
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html求制作一个简单网页代码，只需要一些文字加张图片相关的知识，希望对你有一定的参考价值。
具体步骤如下：
静态网页现阶段主要采用DIV+CSS+javascript来实现,
第一步:在桌面上创建一个文本文件;
第二步:将文本名改为"test.html"(扩展名为.html或者.htm即可,看不见扩展名可以到);
第三步:文件名改好后,右击打开方式,选择记事本;
第四步:写代码。
html代码写成下图这样即可:
2.css代码写在下图区域内:
3.javascript代码写在下图区域内:
第五步:在这些代码区域内写上你的代码;
第六步:保存该文本文件;然后右击打开选择一个浏览器打开;如果出现“已限制网页运行脚本。。。”点击允许。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<img src="这里填你的图片名字，例如1.jpg，图片跟html放在同一个文件夹下面就行">
<img src="2.jpg">
<img src="3.jpg">
<p>这里输入你想要输入的文字</p>
</body>
</html>
参考技术A 完整的代码如下：<html>
<head>
<title>简单网页制作练习</title>
</head>
<body>
<p>1.文字内容，直接输入文字即可。。。。。如果想设置其相关属性可以使用font标签
<font size="18" color="red" >红色18号文字</font> </p>
<p> 2.添加图片 <img src="图片名称.属性" id=“图片简介”>
<img src="1.jpg" id=" 加入图片练习"> </p>
</body>
</html>
楼主，如果不明白可以HI联系我。。。。
参考资料：网站、网页制作（团队）
本回答被提问者采纳 参考技术B 完整的代码如下：<html>
<head>
<title>简单网页制作练习</title>
</head>
<body>
<p>1.文字内容，直接输入文字即可。。。。。如果想设置其相关属性可以使用font标签
<fontsize="18"color="red">红色18号文字</font></p>
<p>2.添加图片<imgsrc="图片名称.属性"id=“图片简介”>
<imgsrc="1.jpg"id="加入图片练习"></p>
</body>
</html>
楼主，如果不明白可以HI联系我。。。。 参考技术C <html>
<head>
</head>
<body>
你的文字
<img src="你的图片地址"/>
</body>
<html> 参考技术D <html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 网页编码（一般网站分为UTF-8和GBK2312） -->
<title>这是我的网页</title><!-- 这是网站标题如（源码家园） -->
<meta name="keywords" content="这是我的网页"><!-- 这是网站关键词如（百度,百度文库,百度站长） -->
<meta name="description" content="这是我的网页"><!-- 这是网站描述如（源码家园是一个专业下载网站源代码的www.linxincn.com） -->
</head>
<!-- 以上是网站头部代码，也就是网站标题、网站关键词、网站描述，一般的网站还会在头部加上CSS和JS文件来控制网站样式 -->
<!-- 以下是body部分，通俗的来讲就叫它网站中间部分 -->
<body bgcolor="#808080">
<p class="mb"><img src="这里是图片地址 比如（https://www.baidu.com/img/bd_logo1.png）" alt="这个是图片名称（当用户鼠标指到它就会出现）"/></p>
<h1><p class="p1"><a href="这里是文章的链接（意思就是说用户点击标题后就会跳转到文章阅读页面）" target="_blank">这里是文章标题</a></p></1h>
</body>
</html>
当然一个HTML网页是少不了CSS文件来控制网页样式的，如下图
使用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个。前两个为圆形的坐标，最后一个为半径。
当然，还有许多其他的，就不列举了，所谓边越多，则坐标越多，不难理解吧。 参考技术A 3个页面添加一个超链接就可以了<a href=""></a> 参考技术B 什么鬼？框架？还是迷宫式的网页 参考技术C js课程作业吗...
以上是关于html求制作一个简单网页代码，只需要一些文字加张图片的主要内容，如果未能解决你的问题，请参考以下文章
[html语言]网页制作/如何在已切片图片的某一固定区域上，让图片和文字从下至上滚动？