[关闭]
@hwk603 2016-10-14T22:23:45.000000Z 字数 3899 阅读 1451

青果工作室 HTML 教程(1)


导读

如果你想制作自己的网页,做网页设计,网站开发,那么你首先要学习的就是 HTML,并能熟练掌握 HTML 文件的编写。

不必担心自己因为没有编程基础而学不会 HTML,事实上学好 HTML 仅仅需要了解它所自带的标签的作用以及一点点美学基础。

开始

1. HTML 简介

一个简单的 HTML 文件:

  1. <html>
  2. <head>
  3. <title>网页标题</title>
  4. </head>
  5. <body>
  6. <h1>一级标题</h1>
  7. <p>段落</p>
  8. </body>
  9. </html>

这实际上就是一个最简单的网页,在浏览器中查看一下效果:

2. HTML 结构

这里先看一张HTML的文件的结构图:

图中给出了一个简单的 HTML 文件的结构,其中包括多个标签:

3. 常用标签

我们知道,网页能实现各种各样的定制,实现各种各样的功能,反过来可以说明我们的标签种类是很多的,这样才能实现各种各样的功能及定义。而这里我们先讲几个最基本的标签。

  1. <h1>This is first heading</h1>
  2. <h2>This is second heading</h2>
  3. <h3>This is third heading</h3>
  1. <p>This is a paragraph.</p>
  2. <p>This is another paragraph.</p>
  1. <a href="http://baidu.com">这是百度的超链接</a>
  2. <a href="http://hwk603.coding.me/qingguo/">这是青果的超链接</a>
  1. <img src="1.jpg" width="100" height="142">

这里着重介绍一下 <img> 标签,上面的示例可以看到,<img> 标签中加入了几个字段:src,width,height

src 后面跟着的是一张图片的存储路径。存储路径分为两种:相对路径和绝对路径,他们两个的区别我们稍后会详解。

width 是图片的宽度,height 是图片的长度。之后大家可以更改里面的数值看下效果。

利用上面介绍的几个标签,我们对之前那个最简单的 HTML 文件进行一下修改。

大家可以用电脑自带的记事本打开,也可以用我推荐的文本编辑器 notepad++

notepad++ 默认界面如上,为了美观,可以对界面设置做下修改,具体操作之后我会专门讲解。

提示大家,每次修改完,要进行一次刷新,我们才能在浏览器查看到修改后的页面。(F5 是刷新快捷键,如果你懒得点鼠标的话。)

修改后的 HTML 文件内容如下:

  1. <html>
  2. <head>
  3. <title>网页标题</title>
  4. </head>
  5. <body>
  6. <h1>一级标题</h1>
  7. <h2>二级标题</h2>
  8. <h3>三级标题</h3>
  9. <h4>四级标题</h4>
  10. <h5>五级标题</h5>
  11. <h6>六级标题</h6>
  12. <p>这是一个段落。</p>
  13. <p>青果工作室立足同学,走进同学,服务同学。他牵头设计了“青春川大”学生综合性信息服务网站,为同学们提供了丰富、有效、便捷的大学学习生活信息。</p>
  14. <p>我们负责制作和维护网站,负责网页的设计、维护与更新,协助其它部门有关网络上的工作,做好校团委网站的技术支持工作,为四川大学青年传媒网络阵营的发展保驾护航。</p>
  15. <a href="http://baidu.com">这是百度的超链接</a>
  16. <a href="http://hwk603.coding.me/qingguo/">这是青果的超链接</a>
  17. <!--绝对地址-->
  18. <img src="E:/HTML/1.jpg" width="100" height="142">
  19. <!--相对地址-->
  20. <img src="1.jpg" width="100" height="142">
  21. </body>
  22. </html>

浏览器中打开,效果如下:

绝对地址是指图片在网络或本地的绝对位置,具有唯一性,对一张本地图片进行操作:右键-属性-安全,可以看到其绝对地址。当你熟悉以后,一看图片所在的文件夹,就知道它的绝对地址了。

相对地址是指被链接文件相对于当前页面的地址,如果 HTML 文件跟图片文件在同一个文件夹里,我们不需要添加任何路径,直接引用文件。

4. HTML 属性

某些标签要想按照作者的意愿来实现在网页上,就得需要一定信息的补充,这信息就叫属性,HTML 标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。

事实上,刚刚我们添加的超链接标签中就已经用到了属性。

  1. <a href="http://baidu.com">这是百度的超链接</a>
  2. <a href="http://hwk603.coding.me/qingguo/">这是青果的超链接</a>

href="http://baidu.com" 这一部分就叫做 <a> 标签的属性,是对 <a> 标签的补充说明,既指向的网页。

下面我们再来给网页增添背景颜色,也许你已经猜到,这个属性就是属于 <body> 标签:

  1. <body bgcolor="#000000">
  2. <body bgcolor="rgb(0,0,0)">
  3. <body bgcolor="black">

这三种方式都可以设置背景颜色(上面为黑色),这个属性值可以是十六进制数、RGB 值或颜色名.

这里就简单的选择最直观的方式:(颜色名支持 black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.)

最后我们再来介绍一个属性:align 。

align 属性规定标签中内容的水平对齐方式,根据 align 属性不同的值,会有不同的对齐效果。

描述
left 左对齐内容。
right 右对齐内容。
center 居中对齐内容。
justify 对行进行伸展,这样每行都可以有相等的长度(就像在报纸和杂志中)。

当然,HTML 标签肯定不会只有这两种属性,大家有兴趣可以自己去查下资料。

利用上面介绍的标签属性,我们对前面的 HTML 文件进行修改:

  1. <html>
  2. <head>
  3. <title>网页标题</title>
  4. </head>
  5. <body bgcolor="gray">
  6. <h1 align="center">一级标题</h1>
  7. <h2 align="center">二级标题</h2>
  8. <h3 align="center">三级标题</h3>
  9. <h4 align="center">四级标题</h4>
  10. <h5 align="center">五级标题</h5>
  11. <h6 align="center">六级标题</h6>
  12. <p align="center">这是一个段落。</p>
  13. <p align="center">青果工作室立足同学,走进同学,服务同学。他牵头设计了“青春川大”学生综合性信息服务网站,为同学们提供了丰富、有效、便捷的大学学习生活信息。</p>
  14. <p align="center">我们负责制作和维护网站,负责网页的设计、维护与更新,协助其它部门有关网络上的工作,做好校团委网站的技术支持工作,为四川大学青年传媒网络阵营的发展保驾护航。</p>
  15. <a href="http://baidu.com">这是百度的超链接</a>
  16. <a href="http://hwk603.coding.me/qingguo/">这是青果的超链接</a>
  17. <!--绝对地址-->
  18. <img src="E:/HTML/1.jpg" width="100" height="142">
  19. <!--相对地址-->
  20. <img src="1.jpg" width="100" height="142">
  21. </body>
  22. </html>

如果你足够细心的话,可以看到我并没有把超链接和图片居中,实际上,按照刚才的属性修改也并不能实现超链接和图片居中。这个作为一个小作业,请大家回去自己想办法解决图片和超链接居中的问题。

作业

利用目前我们学习的知识,制作一个自己的个人页面,要求利用此次所讲的 HTML 标签,鼓励大家去利用网络/咨询学姐学长/图书馆查书等途径,学习更多 HTML 标签的使用,并把它加入到你们的网页中。

时间:从国庆假期开始,到例会开始之前,要求把自己制作的 HTML 页面打包压缩,以“姓名+页面主题”的形式,邮件发给丁枭。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注