HTML 4.0手册：构建基础网页的完整指南

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：HTML 4.0是早期互联网的基础网页标记语言，这份手册为初学者和资深开发者提供全面学习资源。本手册介绍了HTML 4.0的关键概念，包括文档类型声明、基本结构、元素与属性、表格、框架、样式表支持、表单控制、结构化元素、多媒体支持、可访问性和国际化等方面的知识，以及如何创建有效的交互和动态内容。掌握HTML 4.0是理解现代网页技术，特别是HTML5，的重要步骤。 HTML 4.0学习手册

1. HTML 4.0基础结构和文档类型声明

HTML文档基本结构

在HTML 4.0中，每一个网页文档都遵循一个标准的结构。这个结构以 <!DOCTYPE> 开头，接着是 <html> 元素，里面包含 <head> 和 <body> 两个主要部分。 <!DOCTYPE> 声明是必需的，它用于告诉浏览器文档遵循的是哪种HTML或XHTML规范。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "***">
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

文档类型声明

文档类型声明（ <!DOCTYPE> ）位于文档的第一行，它指明了页面所使用的HTML版本。例如，对于HTML 4.01 Transitional，声明看起来是这样的。这个声明影响了页面的HTML验证和浏览器的文档类型定义（DTD）。

HTML PUBLIC 指令表明文档是公开的，随后的字符串是识别该文档类型定义的唯一标识符。
DTD 是一个文档类型定义，定义了HTML文档结构的规范。

在上面的例子中， loose.dtd 是一种宽松的HTML文档类型定义，它允许一些已经被弃用的元素和属性，给予开发者更多的灵活性。

HTML 4.0基本结构解析

在 <head> 部分中，通常会包含 <title> 元素，定义了页面的标题。这个标题会在浏览器的标题栏或页面的标签上显示，并且是搜索引擎优化（SEO）的重要因素。

<body> 部分包含了所有在浏览器中呈现给用户的文档内容。这是实际的网页内容所在，可以是文本、图片、链接、表格等HTML元素。

通过了解HTML文档的基本结构和文档类型声明，开发者能够确保他们的网页与标准兼容，并且能够被各种浏览器正确解析。这是建立一个功能齐全网页的基石。

2. HTML 4.0元素与属性使用

2.1 HTML 4.0文本内容元素

2.1.1 标题和段落的定义

在HTML文档中，标题和段落是构成文本内容结构的基石。标题元素 <h1> 到 <h6> 分别代表了六个级别的标题，其中 <h1> 是最高等级，通常用于页面主标题，而 <h6> 则是最低等级的标题。标题标签不仅有助于定义文档的结构层次，还有利于搜索引擎优化（SEO），因为它们明确地指示了内容的重要性和层次。

段落元素 <p> 用于定义文本中的段落。浏览器会自动在段落元素前后添加一些空间，从而在视觉上将段落分隔开来。正确使用标题和段落元素可以帮助改善文档的可读性和可访问性。

<h1>这是一个主标题</h1>
<h2>这是一个二级标题</h2>
<p>这是一个段落。浏览器会自动添加一些空间分隔段落。</p>

在使用标题和段落时，应该遵循一定的逻辑结构，确保标题和其对应的段落内容相关联，并且标题的层级应该递进有序，避免跳跃使用标题级别，否则会破坏文档结构的清晰度和层次感。

2.1.2 列表元素的使用方法

列表是HTML中用于组织项目信息的常用结构，可以分为有序列表 <ol> 、无序列表 <ul> 和定义列表 <dl> 。有序列表使用数字或者字母来标记每个列表项 <li> ，而无序列表则常用实心圆点或其它符号作为标记。定义列表由 <dl> 定义，其中 <dt> 用于定义术语， <dd> 用于提供术语的描述。

<ol>
  <li>第一条</li>
  <li>第二条</li>
</ol>

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
</ul>

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
</dl>

列表元素不仅有助于组织和展示信息，还能增强网站的可访问性。对于屏幕阅读器等辅助技术，它们可以识别并正确地朗读列表项，方便视觉障碍用户浏览网页内容。

2.2 HTML 4.0链接和图片元素

2.2.1 锚点和超链接的创建

超链接是HTML中实现页面间导航的基础。使用 <a> 标签，并通过 href 属性指定目标URL来创建超链接。例如：

<a href="***">访问示例网站</a>

锚点链接可以快速定位到同一页面内的特定部分，或者跳转到另一个页面的特定位置。要创建锚点链接，首先需要为目标位置添加一个 id 属性，然后在 <a> 标签的 href 属性中使用 # 符号加上该 id 值来指定锚点目标。

<!-- 在目标位置添加id -->
<h2 id="section1">第一节</h2>

<!-- 创建锚点链接 -->
<a href="#section1">跳转到第一节</a>

在实际应用中，超链接和锚点链接可以用于多种场景，例如提供文档目录、在长页面内进行快速导航，或是链接到外部资源等。正确使用它们不仅可以提升用户在网站中的导航体验，还能让网站内容结构化更加清晰。

2.2.2 图片的插入与属性设置

在HTML中插入图片可以使用 <img> 标签，该标签是自闭合标签。 src 属性用于指定图片的URL路径，而 alt 属性则提供图片内容的文字描述，这对于视障用户和搜索引擎优化非常重要。

<img src="path/to/image.jpg" alt="描述图片内容">

除了 src 和 alt 属性， <img> 标签还有许多其他属性，比如 width 和 height 用于设置图片的尺寸， title 属性可以添加提示信息，当鼠标悬停在图片上时显示。这些属性可以用来优化图片在网页中的表现和用户的交互体验。

<img src="path/to/image.jpg" alt="示例图片" width="200" height="100" title="悬停显示更多描述">

在实际开发中，为了提升网站的加载速度和用户体验，开发者可能会根据需要调整图片的尺寸，或者使用CSS来控制图片的显示效果。同时，图片的优化和版权问题也是在使用过程中需要关注的问题。

2.3 HTML 4.0表格元素

2.3.1 表格结构的定义

HTML表格用于展示数据的行和列。一个基本的表格由 <table> 标签定义，其中的行由 <tr> 标签表示，单元格则由 <td> （表格数据单元格）标签表示。表格标题可以使用 <caption> 标签进行定义，表格头部使用 <thead> 、 <th> 标签来指定表头单元格。

<table>
  <caption>员工信息表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>部门</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>市场部</td>
      <td>经理</td>
    </tr>
  </tbody>
</table>

表格元素 <table> 、 <tr> 、 <td> 和 <th> 共同构成了表格的基本框架。开发者需要根据实际内容来决定表格的行数和列数，并合理组织表格内容，以保持数据的逻辑性和清晰度。

2.3.2 表格合并单元格的应用

在某些情况下，表格中需要合并行或列单元格以更好地展示复杂数据。这可以通过 rowspan （跨行）和 colspan （跨列）属性来实现。

<table border="1">
  <tr>
    <th rowspan="2">姓名</th>
    <th colspan="2">课程</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>物理</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

在上述例子中，姓名列跨越了两行，而课程标题列跨越了两列。合并单元格可以简化表格结构，让数据展示更为直观。但是，过度合并单元格可能会降低表格的可访问性，并且在复杂数据展示上可能并不总是最有效的方式。

2.4 HTML 4.0表单元素

2.4.1 输入元素的类型和用途

HTML表单是收集用户输入的界面元素，它由 <form> 标签定义，内含各种输入控件，如文本框 <input> 、复选框 <input type="checkbox"> 、单选按钮 <input type="radio"> 、提交按钮 <input type="submit"> 等。不同类型的输入控件适用于不同类型的数据收集。

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="登录">
</form>

在上面的例子中， <form> 标签内包含用户名和密码输入框，以及一个登录按钮。 <label> 标签通过 for 属性与对应输入控件的 id 属性关联，不仅有助于提高表单的可访问性，还可以提高用户输入的便利性。

2.4.2 表单标签与按钮元素的组合

除了文本框和按钮，HTML表单还可以使用其他类型的 <input> 标签或组合标签，如 <textarea> 用于多行文本输入， <select> 和 <option> 用于创建下拉列表等。按钮元素 <button> 也可以用于触发表单的提交或执行其他操作。

<form>
  <label for="message">留言:</label><br>
  <textarea id="message" name="message" rows="10" cols="30"></textarea><br><br>

  <label for="colors">选择颜色:</label>
  <select id="colors" name="colors">
    <option value="red">红色</option>
    <option value="green">绿色</option>
    <option value="blue">蓝色</option>
  </select><br><br>

  <button type="submit">提交</button>
</form>

在上面的例子中，使用了 <textarea> 来收集用户留言，并通过 <select> 和 <option> 提供了颜色选择的下拉菜单。按钮元素 <button> 用于提交表单。表单元素和按钮的组合为用户提供了丰富多样的交互方式，满足了各种数据收集的需求。

在设计表单时，应考虑用户体验，确保表单简洁、易于填写，并且对用户的输入提供即时的反馈。此外，安全性也是一个重要的考虑因素，如确保敏感信息的传输安全和数据的正确性验证。

3. 创建HTML 4.0表格和框架

3.1 表格高级布局技术

3.1.1 跨行和跨列的表格设计

在HTML中， <td> 和 <th> 元素可以使用 rowspan 和 colspan 属性来控制跨行和跨列的行为。 rowspan 属性允许一个单元格跨越多个行，而 colspan 属性允许一个单元格跨越多个列。这对于创建复杂的表格布局非常有用，例如表头或表格体中的合并单元格。

<table border="1">
  <tr>
    <th colspan="2">标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td rowspan="2">行1, 列1</td>
    <td>行1, 列2</td>
    <td>行1, 列3</td>
  </tr>
  <tr>
    <td>行2, 列2</td>
    <td>行2, 列3</td>
  </tr>
</table>

在上述代码中，"标题1"使用 colspan="2" 跨越了两个列，而"行1, 列1"使用 rowspan="2" 跨越了两个行。这样的布局使得表格在视觉上更为清晰，同时提供了更多的空间用于展现复杂的数据关系。

3.1.2 表格样式和边框的自定义

HTML中的 <table> , <tr> , <th> , 和 <td> 元素都可以被CSS样式所修改，这包括边框的样式、宽度、颜色等。使用CSS为表格添加样式是让表格在网页中更美观和更具可读性的标准做法。表格边框的自定义尤其重要，它可以帮助区分表格的不同部分，并且使数据更易于理解。

table {
  border-collapse: collapse; /* 折叠边框，提高表格的整洁性 */
}

td, th {
  border: 1px solid black; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
}

th {
  background-color: #f2f2f2; /* 设置表头背景颜色 */
}

3.2 框架集的结构与应用

3.2.1 框架的定义和布局技巧

HTML框架集允许将浏览器窗口分割成几个部分，每个部分可以独立加载不同的HTML页面。框架集的实现主要依赖 <frameset> 标签，该标签可以包含多个 <frame> 标签，每个 <frame> 标签代表一个框架窗口。通过合理使用框架集，可以有效组织复杂的页面布局。

<frameset cols="25%,75%">
  <frame src="leftmenu.html">
  <frame src="maincontent.html">
</frameset>

上述代码定义了一个框架集，其中包含两个框架，左侧为25%宽度，右侧为75%宽度。 leftmenu.html 页面通常会作为导航菜单，而 maincontent.html 页面则是主要内容区域。

3.2.2 框架间的导航与链接

在框架集中，能够实现在一个框架内的链接改变另一个框架的内容是非常有用的。这可以通过 <a> 标签的 target 属性来实现，它指定链接的目标框架。例如，如果想在点击左侧菜单的链接时，在右侧框架中显示相应的内容，可以这样设置：

<a href="page1.html" target="maincontent.html">页面1</a>

上面的 target 属性值"maincontent.html"应该与目标框架的 <frame src="..."> 标签中的 name 属性值相匹配，这样点击链接后， page1.html 将会在名为"maincontent.html"的框架中打开。

要记得，虽然框架集在过去的网页设计中很常见，但现代网页设计推荐使用更加灵活和语义化的方式来创建布局，比如使用CSS来控制多列布局。框架集已经不再被HTML5标准推荐使用，并且在很多浏览器中已经逐渐被弃用。

4. 引入和应用CSS样式表

4.1 CSS基础语法

4.1.1 选择器的种类和用法

在CSS中，选择器是用于定位HTML文档中元素的语法结构，它决定了哪些元素将受到样式的影响。选择器的种类多样，包括元素选择器、类选择器、ID选择器、属性选择器等。通过这些选择器的组合使用，可以灵活地对网页中的内容进行样式定义。

元素选择器 ：直接使用HTML标签名作为选择器，如 p 会选中所有 <p> 标签。
类选择器 ：以点（ . ）开头，用于选择具有特定类属性的元素。例如， .info 会选中所有具有 class="info" 的元素。
ID选择器 ：以井号（ # ）开头，用于选择具有特定ID属性的元素。例如， #header 会选中所有 id="header" 的元素。
属性选择器 ：用于选择具有特定属性或属性值的元素。例如， [type="text"] 会选中所有 type 属性为 text 的 <input> 标签。

/* 元素选择器 */
p {
  color: blue;
}

/* 类选择器 */
.info {
  background-color: #f0f0f0;
}

/* ID选择器 */
#header {
  height: 100px;
}

/* 属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

在上述代码中，通过不同类型的选择器，我们可以为网页中的不同元素添加样式，比如改变段落文字颜色、设置具有 info 类的元素背景色、指定具有特定ID的元素高度以及为类型为文本的输入框添加边框。

4.1.2 样式声明和继承原理

样式声明是由属性和值组成的，形式为 property: value; 。CSS属性用于定义样式，值则是具体的表现。在编写CSS时，每个声明都必须以分号（ ; ）结束，而每个属性/值对都应该放在大括号（ {} ）内。

.element {
  color: red;    /* 文字颜色 */
  font-size: 14px; /* 字体大小 */
  line-height: 1.5; /* 行高 */
}

继承是CSS中一个非常重要的概念。某些CSS属性是可以从父元素继承到子元素的，例如 color 、 font-family 等。这样可以减少重复的代码，使得样式的维护变得更加方便。

<div class="parent">
  <p>This paragraph is styled by the parent's CSS.</p>
</div>

.parent {
  color: blue;
  font-family: Arial, sans-serif;
}

在上面的例子中， .parent 类中的所有文本默认为蓝色，而所有继承自 .parent 的元素，如 <p> 标签内的文本，也会默认为蓝色。这种继承机制减少了重复定义的需要，同时也保持了样式的一致性。

4.2 CSS布局技术

4.2.1 盒模型的理解和应用

CSS盒模型是所有布局的基础。盒模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。每个盒子都可能有 width 和 height 属性，它们决定了内容区域的大小。

内容（content） ：元素的实际内容，比如文本、图片等。
内边距（padding） ：内容区域到边框区域的距离。
边框（border） ：围绕在内边距和内容外的线。
外边距（margin） ：边框外到相邻元素之间的距离。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 30px;
}

![CSS Box Model](***

在上图中，我们可以清晰地看到各个盒模型组成部分的关系。理解盒模型对于设计布局至关重要，因为几乎所有元素都可以看作一个个的盒子，通过调整这些部分的尺寸和位置，可以实现丰富多彩的布局效果。

4.2.2 浮动和定位的布局技巧

CSS提供了浮动（ float ）和定位（ position ）来实现复杂的页面布局。浮动布局中，元素可以脱离文档流，向左或向右浮动，而定位布局则允许元素在页面上自由定位。

浮动：使用 float 属性可以使元素脱离文档流，向左或向右浮动。这在创建列布局时特别有用。
定位： position 属性可以设置元素的定位方式，包括 static 、 relative 、 absolute 、 fixed 和 sticky 。其中， absolute 和 fixed 可以使元素脱离文档流并精确地定位在页面的任意位置。

/* 浮动布局 */
.left-column {
  float: left;
  width: 200px;
}

.right-column {
  float: right;
  width: 200px;
}

/* 定位布局 */
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
}

通过结合使用浮动和定位，我们可以实现各种复杂的页面设计。浮动经常被用于创建环绕文字的图片或者创建浮动布局的列，而定位则更多用于创建绝对位置的元素，如悬浮菜单、全屏覆盖层等。

4.3 CSS高级特性

4.3.1 CSS3过渡和动画效果

CSS3引入了过渡（Transitions）和动画（Animations）效果，使得网页元素的动态效果更加丰富，而无需依赖JavaScript或Flash。

过渡（Transitions） ：允许在CSS属性发生变化时，创建平滑的动画效果。通常用于响应用户的交互，如悬停（ hover ）效果。
动画（Animations） ：可以创建更复杂的动画序列。使用 @keyframes 规则定义动画序列，然后通过 animation 属性应用到元素上。

/* 过渡效果 */
.button {
  transition: background-color 0.5s;
}

.button:hover {
  background-color: green;
}

/* 动画效果 */
@keyframes slideIn {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

.animation-div {
  animation: slideIn 1s ease;
}

在上面的例子中， .button 类的元素在鼠标悬停时，背景颜色平滑过渡到绿色。而 .animation-div 类的元素则会在1秒内平滑地从左侧滑入视图。

4.3.2 响应式设计的基本概念

响应式设计（Responsive Design）是一种网站设计方法，目的是让网站在不同的设备和屏幕尺寸上都能提供良好的浏览体验。CSS3中引入的媒体查询（Media Queries）是实现响应式设计的关键技术之一。

媒体查询允许我们根据不同的屏幕条件来应用CSS样式，比如屏幕宽度、高度或者分辨率等。

/* 默认样式 */
.container {
  width: 90%;
  margin: auto;
}

/* 当屏幕宽度小于768px时 */
@media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

在上述代码中，当屏幕宽度小于768像素时， .container 类的宽度会调整为100%，以适应较小屏幕的显示需求。响应式设计的核心思想是使网页元素能够灵活地适应不同屏幕尺寸，提供最佳的用户体验。

5. 表单控制元素的使用和交互

5.1 表单输入类型与验证

5.1.1 不同输入类型的特点和应用场景

表单是Web开发中不可或缺的一部分，它们允许用户在网页上输入数据，这些数据可以是个人信息、搜索查询、选择偏好等。HTML表单元素是通过 <form> 标签及其子元素实现的，其中最核心的是 <input> 元素，它有多种类型，每种类型用于接收特定类型的数据。

文本输入 ( type="text" )
特点：允许用户输入一行文本。
应用场景 ：用于收集用户的姓名、地址、搜索关键词等信息。
密码输入 ( type="password" )
特点：输入时字符被替换为圆点或其他字符，以隐藏内容。
应用场景 ：用于输入密码或任何敏感信息。
单选按钮 ( type="radio" )
特点：允许用户从一组选项中选择单一选项。
应用场景 ：在性别选择、选项投票等场景中使用。
复选框 ( type="checkbox" )
特点：允许用户选择一个或多个选项。
应用场景 ：用于多选偏好设置、订阅服务等。
提交按钮 ( type="submit" )
特点：当点击时，表单数据会被发送到服务器。
应用场景 ：用于触发表单的提交操作。
电子邮件输入 ( type="email" )
特点：提供用于输入电子邮件地址的专门字段。
应用场景 ：适合注册表单，用于收集电子邮件地址。

每种输入类型都有其适用的场景，合理利用它们可以使表单更加直观易用。

5.1.2 表单验证方法和用户体验

在收集用户数据的过程中，确保用户输入的数据是有效和符合要求的至关重要。表单验证就是用来确保用户输入的数据是正确的，并且符合我们的预期。

客户端验证
方法：通过HTML5的内置验证属性来实现，如 required , pattern , min , max 等。
优点：可以即时反馈给用户，提升用户体验。
示例： html <input type="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
注意：客户端验证不能完全替代服务器端验证，因为用户可以绕过客户端验证。
服务器端验证
方法：在服务器接收到数据后进行检查。
优点：安全性更高，可以防止恶意用户绕过客户端验证。
注意：必须进行服务器端验证，即使客户端验证已经通过，也可能会受到伪造的请求。
用户体验优化
友好提示 ：在用户输入不符合要求时，提供清晰友好的提示信息。
即时反馈 ：使用JavaScript进行即时验证反馈，提升用户满意度。
样式反馈 ：使用CSS来突出显示验证错误的字段，引起用户注意。
示例代码段 javascript document.querySelector('form').addEventListener('submit', function(event) { var emailInput = document.querySelector('input[name="email"]'); if (!emailInput.validity.valid) { event.preventDefault(); // 显示错误信息 alert('请输入有效的电子邮件地址。'); } });

表单验证和交互是用户界面设计的重要部分。在确保数据准确性的同时，提供良好的用户体验，是前端开发者必须考虑的因素。

5.2 表单处理脚本

5.2.1 JavaScript表单事件处理

为了使表单更加动态和响应用户操作，JavaScript可以用来添加事件监听器到表单元素上。以下是一些常用的表单事件：

onsubmit事件
触发时机：当表单提交时。
用途：可以在表单提交前执行验证逻辑，阻止表单提交。
oninput事件
触发时机：输入字段内容发生变化时。
用途：可以用来实现即时验证，例如实时检查电子邮件格式。
onchange事件
触发时机：当输入字段失去焦点且内容发生变化时。
用途：常用于选择列表或复选框值发生变化时执行操作。
onclick事件
触发时机：当用户点击按钮或链接时。
用途：用于触发复杂的交互动作，比如显示或隐藏元素。

5.2.2 提交数据的前后端交互

当用户完成表单填写并提交时，JavaScript可以用来处理数据的收集与发送。以下是一个简单的JavaScript示例，展示如何使用AJAX技术将表单数据异步提交到服务器：

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var formData = new FormData(this); // 获取表单数据
    fetch('submit_form.php', {
        method: 'POST', // 使用POST方法提交数据
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log(data); // 处理返回的JSON数据
        // 根据返回结果执行后续操作
    })
    .catch(error => {
        console.error('提交失败:', error); // 处理提交错误
    });
});

在实际应用中，前端JavaScript负责收集和格式化数据，然后通过XMLHttpRequest或Fetch API将数据发送到后端服务器。后端接收到数据后，进行必要的处理，然后返回响应。

表单处理和验证的实践

在本小节中，我们探讨了表单输入类型及其在不同场景的应用，以及如何通过JavaScript进行表单事件处理和前后端数据交互。这些技术的运用可以大大增强Web应用的用户体验和数据处理能力。在下一节中，我们将探讨如何利用div和span元素进行页面结构化。

6. 利用div和span进行页面结构化

6.1 div和span的基本使用

6.1.1 div和span的布局特性

div 和 span 是 HTML 中非常基础的布局元素，但它们的用途和特性有着明显的区别。 div 是一个块级元素，这意味着它会独占一行，而 span 是一个内联元素，它不会导致换行，可以与其他内联元素在同一行显示。

div 通常用于组织大块的页面布局，比如头部、导航栏、内容区和侧边栏。通过使用 CSS 样式，我们可以给 div 添加宽度、高度、背景颜色等样式，以及利用浮动或定位来构建复杂的页面布局。例如：

<div style="width: 100%; height: 200px; background-color: #f0f0f0;">
  <!-- 这是一个div元素，用作页面布局的一部分 -->
</div>

span 则更多地用于文本级别的小范围样式控制，例如给特定的文字添加样式，或者在其他内联元素中进行分组。 span 也是实现网页的微布局（micro-layouts）的关键元素。比如：

<p>这是一个段落，其中包含<span style="color: red;">一些</span>特殊文字。</p>

在这个例子中， span 被用来高亮显示“一些”这两个字。

6.1.2 区块和内联元素的样式控制

由于 div 是块级元素，CSS 中的 display 属性可以将其样式改变为 inline-block ，这使得 div 既具有内联元素的特性又保持了块级元素的特性。一个常见的用法是将 div 用于表格单元格风格的布局，如下所示：

.div-cell {
  display: inline-block;
  width: 200px;
  padding: 10px;
  box-sizing: border-box;
}

而 span 作为内联元素，通常用于文本中段落的样式变更。例如，我们可以在文本中添加 span 来改变特定部分的颜色，如下所示：

<p>这部分<em>强调</em>文本，那部分<em>也强调</em>。</p>

在这个例子中， em 标签和 span 都可以用来强调文本，通常 em 是用来强调语气，而 span 则是用于对样式进行控制。

6.2 页面布局实践

6.2.1 流式布局的设计原则

流式布局（Liquid Layout）指的是布局元素的大小以百分比为单位，使其能够适应不同屏幕尺寸。这种布局方式在响应式设计出现之前就已经存在，它允许页面以更灵活的方式在不同设备上显示。

一个典型的流式布局示例包括一个头部、侧边栏和内容区，其中所有这些元素的宽度都用百分比定义。代码示例如下：

<div id="header" style="width: 100%;">
  <!-- 头部内容 -->
</div>

<div id="sidebar" style="width: 20%; float: left;">
  <!-- 侧边栏内容 -->
</div>

<div id="content" style="width: 75%; float: left;">
  <!-- 主要内容 -->
</div>

为了防止布局错乱，通常会在元素后添加清除浮动的元素，以确保后续内容能够正确显示。

6.2.2 常见的页面布局框架

随着前端技术的发展，页面布局框架越来越多，比较流行有Bootstrap、Foundation等。这些框架提供了丰富的布局组件，简化了布局的实现过程。例如Bootstrap中的网格系统就是利用div实现的响应式布局。简单的页面布局框架示例如下：

<div class="container">
  <div class="row">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

通过上述代码，我们可以实现一个简单的三列布局，每个列占据相等的空间。需要注意的是，这些框架经常更新，因此在使用时应该查看对应的文档指南。

7. 嵌入多媒体内容到网页

随着互联网的发展，用户对于网页内容的多样性需求逐渐增加，多媒体内容的嵌入为用户提供了更丰富、更互动的体验。多媒体不仅包括静态的图像和动画，还包括音频和视频等动态元素。在本章中，我们将探讨如何有效地将这些元素嵌入到网页中，并确保它们在不同的设备和浏览器上均能良好显示。

7.1 图像与音频的嵌入方法

图像作为最直观的表达方式之一，在网页设计中占据重要地位。与此同时，音频内容也逐渐被广泛使用，用以提供更多的交互性和信息传递手段。

7.1.1 图像格式的比较和选择

在嵌入图像到网页时，选择合适的格式至关重要。不同的图像格式具有不同的优势和用途：

JPEG ：适用于包含复杂颜色渐变的照片等图像，支持有损压缩，能够生成较小的文件大小，适合用于网络上的高质量图片展示。
PNG ：提供无损压缩和透明度支持，适合用于图像细节丰富，需要透明背景的场景，如图标和徽标。
GIF ：支持简单动画和透明度，适合小动画和简单图像。
SVG ：基于XML的矢量图形格式，适合可缩放的图像，如图标、徽标等，支持高分辨率显示且不损失质量。

7.1.2 音频格式的兼容性处理

音频内容通常通过 <audio> 标签嵌入网页。然而，并非所有的音频格式都能在所有浏览器中播放，因此需要使用支持多种浏览器的格式：

MP3 ：是最常见的音频格式之一，尽管受到专利和版权的限制，但大多数浏览器都支持它。
Ogg Vorbis ：一种免费和开放的音频格式，支持无专利使用，且压缩效率高，但普及率低于MP3。
WebM ：提供高质量音频的同时，文件大小相对较小，得到现代浏览器的广泛支持。

嵌入音频时，可以考虑使用多种格式，以确保最大化的兼容性：

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
  <source src="example.webm" type="audio/webm">
  您的浏览器不支持 audio 元素。
</audio>

7.2 视频和动画的实现技术

视频和动画的使用能够极大提升用户的互动体验，并使内容更加生动。

7.2.1 视频格式的选择与嵌入

视频的嵌入主要通过 <video> 标签实现。选择合适的视频格式和编码也非常重要，以确保内容的广泛兼容性：

MP4 ：使用H.264编码的MP4视频是目前最广泛支持的视频格式之一，几乎能在所有现代浏览器上播放。
WebM ：使用VP8或VP9编码的WebM格式提供较高质量和较小的文件大小，兼容Chrome、Firefox和Opera等浏览器。
Ogg Theora ：一个免费开源的视频格式，支持较新版本的Firefox、Chrome和Opera。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

7.2.2 动画效果的实现与优化

动画可以增强页面的视觉效果并引导用户注意力。实现动画的方法有很多种，包括使用CSS3、SVG、JavaScript，甚至是WebGL技术。例如，使用CSS3的 @keyframes 规则可以创建简单而流畅的动画效果：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

当需要复杂动画时，例如游戏或交互式应用，可以考虑使用HTML5的 <canvas> 元素或WebGL，以及相应的JavaScript库（如Three.js）来实现。这些技术能提供高性能的图形渲染和复杂的视觉效果，但需要较深的前端开发知识。

嵌入多媒体内容到网页时，开发者需要综合考虑内容的类型、用户的设备和浏览器兼容性，以及SEO（搜索引擎优化）等因素。优化多媒体文件大小可以加快网页加载速度，提升用户体验，并有利于获得搜索引擎的好排名。此外，确保所有嵌入的内容都是可访问的，并遵循无障碍标准，以便所有用户都能享受网页内容。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif