2.3 HTML 5基本概念_HTML5基础与实践教程-QQ阅读中文古言网

上QQ阅读APP看书，第一时间看更新

2.3 HTML 5基本概念

HTML 5有许多重要的基本概念，了解后即可编写简单的HTML页面。

2.3.1 元素

1.HTML元素语法

●HTML元素以开始标签起始。

●HTML元素以结束标签终止。

●元素的内容是开始标签与结束标签之间的内容。

●某些HTML元素具有空内容（empty content）。

●空元素在开始标签中进行关闭（以开始标签的结束而结束）。

●大多数HTML元素可拥有属性。

HTML文档由嵌套的HTML元素构成，见下面实例。

以上实例包含了3个HTML元素：<html>、<body>和<p>。

2.常见元素

HTML元素的分类有块级元素和内联元素

（1）块级元素（block）的特点

●总是在新行上开始。

●高度、行高、外边距和内边距都可控制。

●宽度默认为是它的容器的100%，除非设定一个宽度。

●可以容纳内联元素和其他块元素。

（2）内联元素（inline）的特点

●和其他元素都在一行上。

●高和外边距不可改变。

●宽度就是它的文字或图片的宽度，不可改变。

●设置宽度width无效。

●设置高度height无效，可以通过line-height来设置。

●设置margin只有左右margin有效，上下margin则无效。

●设置padding只有左右padding有效，上下padding则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。

●内联元素只能容纳文本或者其他内联元素。

（3）常见的块级元素

常见的块级元素如表2-1所示。

（4）常见的内联元素

常见的内联元素如表2-2所示。

表2-1 常见的块级元素

表2-2 常见的内联元素

3.HTML实例解析

（1）<p>元素

<p>元素定义了HTML文档中的一个段落。这个元素拥有一个开始标签<p>及一个结束标签</p>。元素内容是：这是第一个段落。

（2）<body>元素

<body>元素定义了HTML文档的主体。

这个元素拥有一个开始标签<body>以及一个结束标签</body>。元素内容是另一个HTML 元素（<p>元素）。

（3）<html>元素

<html>元素定义了整个HTML文档。

这个元素拥有一个开始标签<html>，以及一个结束标签</html>。元素内容是另一个HTML 元素（<body>元素）。

小知识

1.结束标签

即使忘记了使用结束标签，大多数浏览器也会正确地显示HTML。

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

2.HTML空元素

没有内容的HTML元素被称为空元素。空元素是在开始标签中关闭的。<br>就是没有关闭标签的空元素（<br>标签定义换行）。

在XHTML、XML以及未来版本的HTML中，所有元素都必须被关闭。在开始标签中添加斜杠，例如，<br/>是关闭空元素的正确方法，HTML、XHTML和XML都接受这种方式。即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。

3.大小写标签

HTML标签对大小写不敏感：<P>等同于<p>。许多网站都使用大写的HTML标签。本书中使用的是小写标签，因为万维网联盟（W3C）在HTML 4中推荐使用小写，而在未来 (X)HTML版本中强制使用小写。

2.3.2 属性

HTML标签可以拥有属性，属性提供了有关HTML元素的更多的信息。

属性语法的特性有以下4点。

●HTML元素可以设置属性。

●属性可以在元素中添加附加信息。

●属性一般描述于开始标签。

●属性总是以名称/值对的形式出现，例如，name="value"。

1.HTML属性常用引用属性值

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，属性值本身就含有双引号，那么就必须使用单引号。例如：

2.HTML提示：使用小写属性

属性和属性值对大小写不敏感。不过，万维网联盟在其HTML 4推荐标准中推荐小写的属性/属性值。而新版本的(X)HTML要求使用小写属性。

3.HTML属性参考手册

要查看完整的HTML属性列表就参看“HTML标签参考手册”。下面列出了适用于大多数 HTML元素的属性。

表2-3、表2-4、表2-5、表2-6分别列举了对齐、范围属性，色彩属性，表属性和img属性。

表2-3 对齐、范围属性

表2-4 色彩属性

表2-5 表属性

表2-6 img属性

2.3.3 注释

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。例如：

可使用注释对代码进行解释，这样做有助于程序员对代码进行编写。当程序员编写了大量代码时注释尤其有用。使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。注释内容不会显示，以上代码的显示效果如图2-1所示。

图2-1 注释效果演示

2.3.4 区块

大多数HTML元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例如，<h1>，<p>，<ul>，<table>。

常见块级元素如下。

1.HTML<div>和<span>

HTML可以通过<div>和<span>将元素组合起来。

2.HTML内联元素

内联元素在显示时通常不会以新行开始，例如，<b>、<td>、<a>、<img>。

3.HTML<div>元素

HTML<div>元素是块级元素，它可用于组合其他HTML元素的容器。<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局，取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。

4.HTML<span>元素

HTML<span>元素是内联元素，可用作文本的容器。<span>元素没有特定的含义，当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性。

5.HTML分组标签

HTML分组标签如表2-7所示。

表2-7 HTML分组标签