2.1 HTML 语法

和任何语言一样,HTML有语法规则。

HTML 表示 HyperText Markup Language:

  • HyperText(超文本) 表示使用HTTP协议。
  • Markup(标记) 表示代码使用关键字注解。
  • Language(语言) 表示遵循约定的语法,开发人员能编写,而计算机也能解释。

标签和元素

标记语言的基本规则是使用符号来规定内容边界,即内容从哪里开始到哪里结束。

回顾一下这个HTML代码:

<p>Hello World</p>

Hello World

角括号(angle brackets) <> 之间的是 HTML 标签(tags)

每个标签都有其特定的含义,这里 p 代表 段落(paragraph).

标签通常是成对出现:

  • 开始标签 <p> 定义段落的 起始
  • 关闭标签 </p> 定义段落的 结束

关闭标签比开始标签多一个 斜杠(slash) /

开始标签和关闭标签之间的部分构成了一个 HTML 元素(element)

在浏览器中打开时,结果如上面Result中所示,我们注意到HTML标签并不会被显示,它们只是用来告诉浏览器该如何解释那段内容。

创建第一个HTML文件

打开你的文本编辑器(如Sublime Text 3),新建文件,拷贝/粘贴如下内容,并保存为1.html文件:

<p>This is my first webpage!</p>

用你的浏览器打开这个文件,你会看到:

This is my first webpage!

属性(Attributes)

属性是为元素绑定的额外信息。属性被添加在HTML的开始标签中,因此它们也不会被浏览器所显示。

例如,href 属性用来定义一个链接(link)元素(使用 a 标签)的目标地址:

<a href="http://techbrood.com">踏得网</a>

16个通用属性,可用于任意的HTML元素。所有这些属性都是可选的(optional)

有些元素拥有 强制性 (required)属性。比如,添加图片时,需要指明图片的来源,使用src (source) 属性:

<img src="//wow.techbrood.com/assets/basket.png" alt="图片说明">

上面的alt属性是为了用于图片地址不可用时显示的说明性文字。

注释(Comments)

和其他语言一样,写好注释是一个良好的编程习惯,用于提高代码可读性,便于维护。注释会被浏览器忽略。

注释开始于 <!-- 结束于 -->

<!-- 第一段HTML代码注释 -->
<p>Hello World!</p>

Hello World!

自关闭(Self-enclosing)元素

有些元素如图片(img)、换行符(br)、输入框(input)只有开始标签,被称之为自关闭的元素:

<br> <!-- line-break -->
<img src="http://placehold.it/50x50" alt="Description"> <!-- image -->
<input type="text"> <!-- text input -->

由于没有关闭标签,自关闭元素不能包含其他元素。