静态页面制作:2HTML的标签简介

在这里我就假定大家已经根据第一天的内容，安装好了Chrome和Sublime3这两个必备的工具。

 

首先我们先打开sublime3并且输入一点内容，这里需要注意的是，暂且不要输入汉语，我们可以先输入自己的英文名字，然后来看一下效果。

 

至于为什么不能输入汉语，如果大家有兴趣可以自己试试（会有意想不到的效果！）。

 

我在sublime3中输入Hello World!，然后Command + s保存（我的是苹果系统，如果是windows系统使用Control + s)，

 

文件名可以自由起，但是一定要注意后缀是.html。 举例：我的文件名是index，后缀名是.html。

那么我们现在可以右键index.html文件，选择使用Chrome浏览器打开。然后出现的效果就如下图：

 

 

这是我在sublime中输入的Hello World!，右边是谷歌浏览器给我的反馈结果。但是这个太小儿科了，网页中的内容是非常丰富的，不光有文字，还有图片、按钮甚至视频。然后还有不同的大小、位置、以及样式。我们也希望我们的网页丰富多彩，但是如果只是在文档中写入简单的文字，显然是无法拥有丰富多彩的效果，我们需要通过某种方式去告诉浏览器我们的要求。我们之前已经介绍，html是超文本标签语言，如果我们想要特殊的样式，那我们告诉浏览器的方式，就是给不同类型的内容打上“标签”。

 

 

HTML实际上是有着不同类型的标签，其实也是针对不同的内容。

 

比如说我们刚刚写的Hello World! 这几个字在我的网页设计中，我期望它是整个页面的标题，那么我们就需要使用标题标签，“h1标签”。

 

通过上图我们不难理解，h1的全拼是Headline No.1的缩写，相当于是word中的一号标题，也可以理解为全文标题。

 

h1标签常见的应用地方是内容页的正文标题一般都会用h1标签，有的首页的logo和网站名称也用h1标签，

 

h1通俗点说就是告诉搜索引擎重要的地方，h1标签一般在一个页面出现1到2次不会太多。

我们来分析一下标签到底该怎么写。举例例子：

今天天气不错，这明显是某人说的一句话，在文章中如果某人引用了某句话，格式应该用双引号围起来，如下图：

 

通过上图我们不难发现，引号是成对出现的，并且前后不同。在两个引号之间的就是我们具体的内容。

 

这个特点其实跟我们HTML标签可以说是如出一辙，HTML标签“一般”也是成对出现（当然还有不一般的，我们后面会接触到）。

我们来看一下网页中的标签是怎样的！

 

如果我们只写h1，这是不符合规则的。因为如果光写h1很容易就跟内容重合了。

 

所以我们需要在h1的左右两边加上<>，也就是大于号和小于号，这样就浏览器就可以识别到，这是一个h1标签。

 

另外就是我们发现尾标签比首标签多了一个反斜杠/，我给大家通过红颜色标记出来了！在首标签和尾标签之间就是我们具体的内容了。

 

下面我们回到sublime中，将刚刚写的Hello World！ 使用h1标签围起来，看看是什么样的效果。

 

 

 

我们在sublime中，将内容透过h1标签围起来，保存（Command + s），然后刷新我们的谷歌浏览器（Command + r）。

 

如果你够细心，那么会发现，现在的效果已经发生了改变，那就是文字变大了，如果不加标签的话，文字就是正文的大小，加上h1标签之后，文字就变为全文标题的大小了。

 

如果你在细心点，还会发现一个非常实用的细节，那就是当我的光标点在某个标签上的时候，标签的下方就会出现一排小......,可能现在我们的代码写的比较少，还体会不到这个sublime为我们提供的便捷。

 

但是当我们写了很多很多标签的时候，这个细节将会帮助我们快速的定位到标签的对应者。

除了h1标签还有很多其他的标签，在这里我们列举一些常用的，大家一一测试一下。

 

看看每个标签所发生的效果！

 

h2~h6标签和h1是一样的（同属于标题标签），其中的不同之处透过测试，大家也不难发现，那就是字体的大小会一次递减，当然其他的不同之处在这里我们也不做过多介绍。

 

这里需要强调的是与标题标签对应的正文标签，例如：p标签，p标签的全拼是paragraph(段落)，在文字段落中我们会经常使用到。

 

a标签的全拼是anchor(锚点、超链接)，后面我们会通过实际案例来进行介绍。

 

刚刚我们说的标签都是有实际内容的，无论是针对标题的h1~h6标签，还是针对段落的p标签，以及使用超链接的a标签。

 

那么除了有实际内容的标签之外，还有一种标签是没有实际内容的，是什么我们先不介绍.

 

我们先说一个例子：其实我们的网页设计跟城市规划有很多似是而非的东西。

 

在规划一个城市的时候，很多时候都会先设定框架，比如说北京，有朝阳区、海淀区、昌平区等等。

 

这些在规划的时候并没有实际的东西，但是要先把这篇区域站好位置。有了这个位置之后，以后再针对这个位置进行详细的建设。

 

那么我们的网页设计也一样，例如下图：

 

 

这是一个简单的网页设计框架，最上方就是标签栏，下面就是内容，当然下面可能还有很多，但是这些都是区域的划分。

 

也就是说我先把标题的区域定好，至于标题是什么，以后再说。内容的区域我也先设定好，具体的内容以后再填充。

 

那么先划分区域，没有实际内容，我们就会使用到一个标签，就叫做div标签。

 

 

div标签是HTML中非常重要的一个标签，也就是division的一个缩写，表示的就是一个区域。

 

div既然表示的是区域划分，其实就相当于是一个容器，既然是容器，那么容器中就需要装东西.

 

也就是在div这个容器中可以放载有内容的标签。也就是标签嵌套，如下图

上图其实我们就已经使用div标签把h1标签包裹起来了，但是如果我们这么写，看着就会觉得很不舒服.

 

一层套一层，现在是两层都会觉得不舒服，如果在套两层就更不可观了。

 

我们可以在sublime中重新规划这行代码。保存并且舒心浏览器，我们会发现确实没有什么变化。

 

注意： 没有任何变化，div的作用仍然是不可少的。 就好比我们上面举得例子，区域划分往往是建设前的设计。

 

这个设计可以协助我们更好的填充内容！

 

 

以上是标签的简介，下面我们来看一下标签和属性。