网页的基本概念

标签

HTML 代码由许许多多不同的标签（tag）构成。

  1. <title>网页标题</title>

上面代码中，<title>和</title>就是一对标签。

标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

标签放在一对尖括号里面（比如<title>），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如</title>）。但是，也有一些标签不是成对使用，而是只有开始标签，没有结束标签，比如上一节示例的<meta>标签。

  1. <meta charset="utf-8">

上面代码中，<meta>标签就没有结束标签</meta>。

这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。实际引用中，它们主要用来提示浏览器，做一些特别处理。

标签可以嵌套。

  1. <div><p>hello world</p></div>

上面代码中，<div>标签内部包含了一个<p>标签。

嵌套时，必须保证正确的闭合顺序，不能跨层嵌套，否则会出现意想不到的渲染结果。

  1. <div><p>hello world</div></p>

上面代码就是错误的嵌套，闭合顺序不正确。

标签名是大小写不敏感，比如<title>和<TITLE>是同一个标签。不过，一般习惯都是使用小写。

另外，HTML 语言忽略缩进和换行。也就是说，下面的写法与一行的写法效果是一样的。

  1. <title>
  2.   网页标题
  3. </title>

进一步说，整个网页的 HTML 代码完全可以写成一行，浏览器照样解析，结果完全一样。有时，正式发布网页之前，开发者会把源码压缩成一行，以减少传输的字节数。网页内容的缩进和换行，主要靠 CSS 样式来实现。

元素

浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点（node），称为网页元素（element）。所以，“标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如<p>标签对应网页的p元素。

嵌套的标签就构成了网页元素的层级关系。

  1. <div><p>hello world</p></div>

上面代码中，div元素内部包含了一个p元素。上层元素又称为“父元素”，下层元素又称为“子元素”，即div是p的父元素，p是div的子元素。

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

  1. <p>hello</p>
  2. <p>world</p>

上面代码中，p元素是块级元素，因此浏览器会将内容分成两行显示。

行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。

  1. <span>hello</span>
  2. <span>world</span>

上面代码中，span元素是行内元素，因此浏览器会将两行内容放在一行显示。

属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

  1. <img src="demo.jpg" width="500">

上面代码中，<img>标签有两个属性：src和width。

属性可以用等号指定属性值，比如上例的demo.jpg就是src的属性值。属性值一般放在双引号里面，这不是必需的，但推荐总是使用双引号。

注意，属性名是大小写不敏感的，onclick和onClick是同一个属性。

HTML 提供大量属性，用来定制标签的行为，详细介绍请看《标签》一章。