R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【HTML教程第一篇】多样的标签

注意:本文发布于 2085 天前,文章中的一些内容可能已经过时。

本章教程无需任何基础。

平常我们看到的网站都是用 HTML 的形式展现的。不过 HTML 是什么?一种可能的解释是“How To Make L***”,但是这并不科学。事实上,它的全称为 Hyper Text Markup Language,即超文本标记语言。它并不算一个编程语言。 HTML 通过各种标签来描述一个网页。网页中有文字、图像、视频、按钮等元素,文字还有加粗、倾斜等格式。怎样让浏览器理解我们的意思呢?例如,我们要显示如下格式的文字:

Hyper Text Markup Language

我们可以用 <b> 标签(英文为 bold,控制加粗)和 <i> 标签(英文为 italic,控制倾斜)来描述这句话:

<b>H</b>yper <b>T</b>ext <b>M</b>arkup <i><b>L</b>anguage</i>

被包在 <b></b> 标签中的文字会加粗,被包在 <i></i> 标签中的文字会倾斜。

有一定初步的了解了吧?现在我们正式地开始学习标签。

HTML中,标签通常是成对出现的。例如刚才的 <b></b>,前者是开放标签,后者是闭合标签,两者之间是标签里的内容(内容可以为空,但是有意义么?)。bold 是加粗的意思,因此 <b>content</b> 将会显示出一个加粗的单词“content”。但是,有的时候只有一个标签,这就是所谓的单标签,例如 <br> 标签,表示这里需要换一行。可以这么理解:双标签包住一些文字,用来控制文字的一些格式;单标签本身就相当于一个文字。

标签是可以嵌套的,例如 <b><i>L</i>anguage</b> ,将会显示一个倾斜的“Language”,其中字母 L 为粗体。切记一点,嵌套次序一定要正确,一定是一对 x 标签里面是一对 y 标签,即 <x><y></y></x>,如果写成 <x><y></x></y>,虽说有的浏览器也可以大概猜出来你要表达什么,但是这个是不合理的。

标签名称不区分大小写,因此 <b></b><B></B> 等价。

最后要注意的是 HTML 中的空白字符。如果出现了空白字符,哪怕数量再多,只要空白字符是连续的,就只会被当作一个空格。因此,下面的三段话效果都是一样的,都会显示成 is this a space?

is this a space?

is    this a       space?

is  this
a space?

那么多个空格怎么办?换行又怎么办?标签是用尖括号括起来的,那么尖括号又怎么办?还有……HTML当然没有放弃它们(注意千万别忘了里面的分号):

空格:&nbsp;
换行:<br>(只需要这么写,<br> 是单标签)
尖括号:左尖括号为 <,右尖括号为 >
& 符号:&amp;

了解了基本知识之后,我们就要开始写第一个网页了。首先,打开你喜欢的纯文本编辑器(例如广受好评的 Sublime Text),新建一个文件,然后以 .htm 或者 .html 的格式保存。注意不要用 DreamWeaver。要想成为高手,它会是你的一大障碍。通过拖拽控件生成的网页结构不会统一,生成的文件中也会有好多奇怪的东西。

Web 上有好多的文档格式,例如 HTML5、XML 等。浏览器需要知道你写的文档是什么格式,才可以正常解析。因此,我们的第一句要写上:

<!DOCTYPE html>

这表示我们写的是一个符合 HTML5 标准的文档。要注意 <!DOCTYPE> 并不是一个标签,它只是一个给浏览器的声明。

以下才是文档的真正内容。一个 HTML 文档当然要以 <html></html> 标签为开头和结尾了。于是我们的文档变成了这样:

<!DOCTYPE html>
<html></html>

<html> 标签中会嵌套两个标签:<head></head><body></body>。前者描述了网页的一些性质,后者才是显示在浏览器页面上的内容。

<head> 中可以用 <title> 标签定义网页的标题:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page!</title>
</head>
<body></body>
</html>

你可以保存之后用浏览器打开看看效果了,注意浏览器上面的标题栏。

接下来,我们要写一句 Hello World,然后将 World 一词加粗并倾斜:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page!</title>
</head>
<body>
    Hello <b><i>World</i></b>
</body>
</html>

效果还好吧? 标签就是这么用的。常用的 HTML 标签还有:

> 文章的标题
<h1>一级标题</h1>
<h2>二级标题</h2>
....
<h6>六级标题</h6>
h 的英文是 header,善用 h1~h6,搜索引擎会根据这个来整理文章。

> 文章的段落
<p>这是第一段文字。</p>
<p>这是第二段文字。</p>
p 的英文是 paragraph,也就是一个自然段。所以以后分段千万不要用<br>啦!

> 无序列表
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>
ul 的英文是 unordered list,里面 li 的英文是 list item,是不是很形象呢?

> 有序列表
<ol>
    <li>先学会前端</li>
    <li>再学会后台</li>
    <li>再尝试将前后台对接</li>
</ol>
同理,ol 的英文是 ordered list。

任务:用上本文所讲的标签,写一篇文章吧。

想知道更多的标签和标签的展现方式,请看下一篇。

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 终于要写点东西了
下一篇: 【HTML教程第二篇】我有特殊的属性

这是我们共同度过的

第 1553 天