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

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

新建一个html文件:

30.png

我要给body添加一些样式,就在head元素上挂载一个style元素。

31.png

然后,写样式表:

32.png

效果:

33.png

这样的话,我们就可以看到body部分了。现在,我给body添加一点padding。

34.png


页面上看不出区别,让我们打开F12,看一下现在的body变成了什么样子。

35.png


示意图:

36.png

从图中可以看出,body元素分为三层,最里面的一层,就是520 x 500的那部分,这个叫做内部真实空间,也就是说,你可以在里面添加其他元素,比如div元素,p元素,a元素等等。然后中间的一层就是padding了,如果你没有加padding,那么这一层就相当于一层薄薄的保鲜膜,其实它没有厚度,就是0px。最外面的一层就是border,在我们这个例子中,body的border部分就只有2px,薄薄的一层。现在,我给body加一个背景色:

37.png38.png


奇怪的是,怎么外面也变成orange了?外面一层是什么啊,是不是html元素啊,那么我们给html元素加一个白色的背景。

39.png

效果:

40.png

OK,我们接下来在body元素上挂载一个div元素。

41.png

注意哦,我现在给这个div元素绑定了一个class属性,属性值叫"wrap",这个class就叫做类,多个元素都可以绑定一个相同的class,通过这个class,我们可以设置一些通用的样式表。以后,但凡是绑定了这个class的元素,都能够拥有相同的样式效果。


现在,我给wrap添加一些样式:

42.png

注意哦,给class属性设置样式的时候,前面要加一个. ,在上一讲中,我们还说过,给id属性设置样式的时候,前面要加一个#,一样的意思,反正就是这么规定的。

效果:

43.png


我现在把高度改成100%,那么就会自动沾满父容器,也就是这里的body

44.png

效果:

45.png

那么,蓝色的部分,就是body最里面的那一层,我称之为内部真实空间。中间橘黄色的一层就是padding,最外面那一层薄薄的边界就是border,明白了吗?

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


46.png

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

index.html里面是这样子的:

47.png

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

48.png


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


把项目跑起来:


49.png

49.png


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

50.png

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

51.png


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

52.png


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

53.png

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

54.png

刷新页面:

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

55.png

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

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

56.png


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


57.png

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


58.png

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


59.png

59.png


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

不好意思,启动报错:


60.png


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,把那个目录给改掉:


61.png


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

62.png

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

63.png

然后,给所有的元素来个居中显示:

64.png


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

65.png

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

66.png

然后在style元素中添加一个类选择器

67.png

然后,我们把颜色复制过来:

6868.png

就是这么简单。

相关文章
|
1天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
1天前
|
人工智能
大字体学生出勤记录系统网页HTML源码
源码介绍 上课需要一个个点名记录出勤情况,就借助AI制作了一个网页版学生出勤记录系统, 大字体显示学生姓名和照片,让坐在最后排学生也能看清楚,显示姓名同时会语音播报姓名, 操作很简单,先导入学生姓名和照片,点击到课或未到课就能自动下一位, 并且记录出勤情况,点击导出记录就能导出文件。
7 0
大字体学生出勤记录系统网页HTML源码
|
14天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
14天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
14天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
14天前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
|
14天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
14天前
|
运维 前端开发 JavaScript
【专栏:HTML进阶篇】HTML与Web标准:构建可访问与可维护的网页
【4月更文挑战第30天】本文探讨了HTML与Web标准的关系,强调遵循标准对创建高质量、可访问、可维护网页的重要性。通过使用语义化标签、提供文本替代、合理使用表格和列表,可提升网页可访问性;通过结构化文档、添加注释、分离结构与表现,能增强网页可维护性。遵循Web标准,可确保网页在不同设备上的兼容性,并满足各类用户需求。
|
14天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如<template>元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
14天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的<div>和<span>。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。