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

新建一个html文件:

1488713605137007396.png

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

1488713655277049231.png

然后,写样式表:

1488714003902054281.png

效果:

1488714070605004548.png

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

1488714153418019891.png

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

1488714230777074058.png

示意图:

1488714254871088416.png

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

1488714627059016444.png

1488714814074059044.png

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

1488714899480010892.png

效果:

1488714887918013609.png

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

1488715075871007810.png

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

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

1488715421043034450.png

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

效果:

1488715526855048143.png

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

1488715623855015561.png

效果:

1488715635434016310.png

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

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

1488715948965055477.png

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

index.html里面是这样子的:

1488715991418057077.png

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

1488776257730006639.png

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

把项目跑起来:

1488776433543094725.png

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

1488776453121062176.png

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

1488776481574050882.png

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

<img alt="水果蛋糕" width="180px" src="../img/1.jpg"></img> ../ 表示退到上一个目录,也就是这里的ch03文件夹所在的目录:

1488776576246064097.png

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

1488776608262079425.png

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

1488776668949068859.png

刷新页面:

1488776698043074666.png

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

1488776827465048647.png

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

1488776880949024993.png

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

1488776920277080610.png

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

1488777248574069439.png

刷新一下:

1488777262527032973.png

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

1488777409293021196.png

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

1488777543980013370.png

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

不好意思,启动报错:

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

1488778607012093773.png

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

1488778649121078061.png

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

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

1488778684418056324.png

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

1488779014637032171.png

1488779023512094203.png

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

1488779103059047123.png

1488779147605045196.png

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

1488779176527047007.png

1488779233434072177.png

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

1488779505199094000.png

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

1488779663809060722.png

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

1488779711496008955.png

刷新一下页面:

1488779733449033200.png

好像这个配色不太好看,那么我打开F12,选择这个font元素,重新配一个色(看好了,我就做这么一遍):

1488784757809084392.gif

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

1488784781746040109.png

刷新页面:

1488784849902049768.png

这个就叫做配色,我们也可以给body重新配色:

1488784945277056368.gif

就是这么简单。

您的支持是我写作的最大动力:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

5285
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

1482
来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

4375
来自专栏Material Design组件

Human Interface Guidelines —— Text Views & Web Views

963
来自专栏姬小光

姬小光前端小讲堂【第002期】

在上一期“然并卵的 Hello World !”(聊天界面回复 001)发出之后,同学们的反应跟我的预期出奇的一致,那就是然!并!卵!

1132
来自专栏DeveWork

将你的网站打造成一个iOS Web App

最近在做一个手机主题,据说借用类似 link href="xx.png" rel="nofollow" rel="nofollow" rel="apple-to...

3706
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

3078
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

1613
来自专栏前端架构与工程

【翻译】浏览器渲染Rendering那些事:repaint、reflow/relayout、restyle

原文链接:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ 有没有被标题中的5个“...

2246
来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

1155

扫码关注云+社区

领取腾讯云代金券