HTML 基础- 4个实例

本章介绍了 HTML 中较为常用的基础标签的实例以及 HTML 基础知识。您可能还没接触过这些实例，不过不用担心，阅读完本章您就能够掌握它们了！ 1

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计制作、网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的梅里斯网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

HTML 标题

HTML 标题（Heading）是通过 

-

 标签来定义的.

h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT 等。

这里有六个标题元素标签 —— 

、

 、

、

、

、

，每个元素代表文档中不同级别的内容：

 

 表示主标题（ the main heading ），

 表示二级子标题（ subheadings ），

表示三级子标题（ sub-subheadings ），

、

、

字体的大小依次递减。

实例

 

这是标题1

 

这是标题2

 

这是标题3

 

这是标题4

 

这是标题5

 

这是标题6

尝试一下 »

你也可以通过实战实验来尝试挑战一个 h2 标题的设置：

HTML标题实战实验

HTML 段落

---

HTML 段落是通过标签

来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样，您可以进行实战演练。

实例

这是一个段落。

这是另外一个段落。

尝试一下 »

 

下面这个实例讲述了标题和段落的结构层次：

实例

三国演义

罗贯中

第一回 宴桃园豪杰三结义 斩黄巾英雄首立功

话说天下大势，分久必合，合久必分。

第二回 张翼德怒鞭督邮 何国舅谋诛宦竖

且说董卓字仲颖

却说张飞

却说张飞饮了数杯闷酒

尝试一下 »

上述实例所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要确保层次结构是合理的。在创建此类结构时，您只需要记住以下几点：

• 首先，您应该只对每个页面使用一次

  ，这是主标题，所有其他标题位于层次结构中的下方。

• 其次，请确保在层次结构中以正确的顺序使用标题。不要使用

  来表示副标题，后面跟

  来表示副副标题，这是没有意义的，会导致奇怪的结果。

• 最后，在可用的六个标题级别中，您应该保证每个页面中标题级别的使用不超过三个，除非您认为有必要使用更多。具有许多标题级别的文档会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。 

HTML 中的空格

在代码中可能包含了很多的空格——这是没有必要的

下面的两个代码片段是等价的：

实例

狗 狗 很 呆 萌。

狗 狗        很

       呆 萌。

尝试一下 » 无论你用了多少空格（包括空格字符，包括换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空格字符减少为一个单独的空格符。

为什么我们会使用那么多的空格呢?

答案就是为了可读性——如果你的代码被很好地进行格式化，那么就很容易理解你的代码，反之就会很混乱。在我们的 HTML 代码中，我们让每一个嵌套的元素以两个空格缩进。

你使用什么风格来格式化你的代码取决于你（比如所对于每层缩进使用多少个空格），但是记住你应该坚持使用某种风格。

HTML 链接

HTML 链接是通过标签来定义的。a标签，也叫anchor（锚点）元素，既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

实例

这是一个链接

尝试一下 »

 提示：在href属性中指定链接的地址。

 (您将在本教程稍后的章节中学习更多有关属性的知识)

 HTML链接实战测验

HTML 图像

HTML 图像是通过标签来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。

举例如下：

请注意：img元素是自关闭元素，不需要结束标记。

实例

尝试一下 »

注意： 图像的名称和尺寸是以属性的形式提供的。

HTML 图像实战测验

HTML 强调

在人类语言中，为了突出一句话的意思，我们通常强调某些词，并且我们通常想要标记某些词作为重点或者表示某种程度上的不同。HTML 提供了许多语义化的元素，并且允许我们通过这些元素的意义标记正文内容，在这个章节中，我们将看到最常见的一小部分元素。

在 HTML 中我们可以使用em（emphasis）元素来标记这样的情况，浏览器默认风格为斜体：

实例

我 很高兴你不 讨厌我.

尝试一下 »

在 HTML 中我们还可以使用(strong importance)元素来标记这样的请况，浏览器默认风格为粗体：

实例

这种液体是高毒性的.

我就指望你不会 迟到!

尝试一下 »

注意：为了不同的字体风格，我们应该使用元素和一些 CSS 的样式.