【手把手】制作一个简单的HTML网页

最新推荐文章于 2024-08-22 21:22:47 发布

2401_84091993

最新推荐文章于 2024-08-22 21:22:47 发布

阅读量2k

点赞数 9

分类专栏：程序员文章标签： html 前端

本文链接：https://blog.csdn.net/2401_84091993/article/details/137510814

版权

程序员专栏收录该内容

171 篇文章 0 订阅

订阅专栏

文章介绍了HTML中的基本元素如h1,img,alt,width和src属性，强调了相对路径和绝对路径的区别。作者通过实例演示了如何处理图片显示问题，并讲解了CSS布局和颜色设置。此外，还分享了前端开发的学习资源，鼓励读者付诸实践以提升技能。

摘要由CSDN通过智能技术生成

好的，接下来开始今天的课程，我们来做一个简单的小页面。

我已经把图片都拿过来了。

index.html里面是这样子的：

接下来，我把必要的元素都放进去。

OK，我们一个一个来说，首先是h1元素，这个就和word一样的，属于标题元素，h1，就是最大的那种标题。接下来看img元素，这个元素的使用频率是非常高的，现在的网页几乎不可能说没有img元素的，这一点要明确。img元素有一个alt属性，它的意思就是说，当我鼠标画上这张的时候，会有一个小提示。width属性，这个不用多说了吧，设置图片的宽度。src属性，就是这张图片的地址，在我们这个项目中，图片被放在了上级目录的img文件夹下，所以，…/ 的意思就是去上级目录，这个属于相对路径，相对于当前文件的路径。在这段代码中，其他元素应该都很好理解了。p元素表示里面的文字是一个段落，h2元素就是二级标题，这些元素都是块级元素。还记得块级元素是什么意思吗？对了，它是不是会默认占满一整行啊。以这个例子来说，他们的父元素就是body，所以，他们会默认占满body的宽度。让我们来看一下效果吧。

把项目跑起来：

访问：http://localhost/Base/ch03/index.html

哎呀，图片没有显示，这是怎么回事呢，不要急，我们再来看一下目录结构：

看到了吗，同学们，我们的index.html页面和img文件夹是不是平级的呀？而我们的代码是这样写的：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

…/ 表示退到上一个目录，也就是这里的ch03文件夹所在的目录：

这样吧，我把文件夹都闭合了。

ch03文件夹所在的目录是哪里呢，是不是WebContent目录呀？那么，在这个目录下，有没有一个叫做img的文件夹呢，是不是没有呀？所以，我们这里就不需要写…/了。直接把…/去掉：

刷新页面：

这样的话，图片是不是就显示出来呀？好的，其实，我们这种src连接的路径，叫做相对路径，在你们学习的过程中，或者从网上，或者从书本上，是不是还听说过一个名词叫做绝对路径啊？那到底什么是绝对路径呢，在本文中，我就给你解释清楚，到底什么是绝对路径？现在，我给img的前面加一个反斜杠：

大伙猜一猜，如果我再次刷新页面，图片能不能显示出来呢？好的，见证奇迹的时刻到了，我刷~

图片是不是又没有了呀？让我们打开F12，发现报错了。

他来了个404错误，404就是找不到资源，也就是说找不到图片。我们看一下，他去哪里找的：http://localhost/img/1.jpg 。看不出来？那我再写一点东西，你自己猜一下，前面这个反斜杠是什么意思。

刷新一下：

图片是不是又出来了呀，这个就叫做绝对路径，他和相对路径的区别就是，前面要加一个反斜杠。只要我加了反斜杠，浏览器就会认为我这个是绝对路径。Base是我们的项目发布名称，这个可以去server.xml里面改的。然后：

这一串，对于Web项目来说，他会去你的发布目录的根目录找，也就是WebContent。我们这个项目，是用eclipse生成的，我知道，你们很多人都喜欢用MyEclipse，那么发布目录是不是叫做WebRoot啊。其实啊，这只是一个文件夹的名字而已，我们也完全可以叫其他的名字。现在，我来手动改一下。

我现在把WebContent的名字改成了target，那么，会怎么样呢？我先卖个关子，接下来，我把tomcat关掉，重新启动一下，请问，同学们，你们觉得我还能不能访问到这个页面？

不好意思，启动报错：

java.lang.IllegalArgumentException: Document base E:\Java培训\software\eclipse-mars\workspace\Base\WebContent does not exist or is not a readable directory

它说E:\Java培训\software\eclipse-mars\workspace\Base\WebContent这个目录不存在或者不是一个可以读取的目录？我们刚才是不是把WebContent目录的名字改掉了呀，可是tomcat还是认为我们的发布目录名字叫做WebContent，所以就报错了。解决方法，就是手动改一下发布目录,打开server.xml,把那个目录给改掉：

然后，重启tomcat，访问http://localhost/Base/ch03/index.html

OK了吧，我只是给你们演示一下，各位就不要去改WebContent了，不然的话和服务器上的文件又不一样了。

这个页面有点美中不足的是，有一块溢出了：

可以看到，巧克力蛋糕的说明超出了body的范围，这是因为我们给body设置了一个固定的高度，解决办法就是把高度设置为auto（自适应）

稍微好看一点了，接下来，我要把body元素中所有的字体改成微软雅黑。

然后，给所有的元素来个居中显示：

现在，我又有一个需求，我希望把某些文字设置为不同的颜色，如何做呢？比如，我要把应季水果几个字变成粉红色。同学么，咋办？一个比较好的思路，就是专门用一个元素，把它包进去，比如：

在这里，我们是不是只能用行内元素呀，因为如果我们用div，p等块级元素，那么是不是就要换行啦。虽然，我们可以给它设置dispaly:inline-block，或者inline,强制它不换行，可是那样的话，是不是很麻烦呀。所以，为什么不直接使用行内元素呢，比如说font。然后，我们可以给font绑定一个class属性。