@hwk603 2016-10-14T14:23:45.000000Z 字数 3899 阅读 1382

青果工作室 HTML 教程(1)

导读

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

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

开始

1. HTML 简介

首先，HTML 是一种语言，是用来描述网页的语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language) 所谓的超文本就是指页面内可以包含图片、链接、甚至音乐，等非文字元素
HTML 不是一种编程语言，而是一种标记语言 (markup language)所以就算你什么编程语言都不懂，没关系，完全可以上手 HTML。标记语言：一套标记标签 (markup tag)（也就是一些特定的符号，后面我们会讲到）
HTML 就是使用标记标签来描述网页
HTML文件后缀名就是(.html)，你可以使用一般的文本编辑器就能编辑（我为大家提供了一个 windows 上很不错的编辑器：notepad++），之后再使用浏览器打开，就能看见所你所编辑的网页。

一个简单的 HTML 文件:

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        <h1>一级标题</h1>
        <p>段落</p>
    </body>
</html>

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

2. HTML 结构

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

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

<html> 与 </html> 之间的文本描述网页;
<body> 与 </body> 之间的文本是可见的页面内容;
<h1> 与 </h1> 之间的文本被显示为标题;
<p> 与 </p> 之间的文本被显示为段落.

3. 常用标签

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

标题是通过 <h1> - <h6> 等标签进行定义的。示例：

<h1>This is first heading</h1>
<h2>This is second heading</h2>
<h3>This is third heading</h3>

段落是通过 <p> 标签进行定义的。示例：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

超链接是通过 <a> 标签进行定义的。示例：

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

图片是通过 <img> 标签进行定义的。示例：

<img src="1.jpg" width="100" height="142">

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

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

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

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

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

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

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

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

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

浏览器中打开，效果如下：

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

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

4. HTML 属性

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

是在 HTML 元素的开始标签中定义。
总是以名称和值对应的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

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

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

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

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

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<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 文件进行修改：

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

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

作业

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

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