1.1 任务1：风机设备信息页面的设计_Web前端应用开发技术-QQ阅读男生玄幻网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

1.1 任务1：风机设备信息页面的设计

本任务重点学习常见的HTML编辑器的使用方法，HTML文件的结构、元素、属性，HTML文件的设置、图片处理设置和颜色设置。

1.1.1 开发场景

传统的工业设备信息页面主要是采用 C/S（客户端/服务器）模式设计的，随着互联网的发展与设备的智能化，越来越多的工业设备开始采用 B/S（浏览器/服务器）模式设计其信息页面。

B/S模式是Web兴起后的一种网络架构模式，浏览器是客户端最主要的应用软件之一。B/S 模式统一了客户端，将系统功能实现的核心部分集中到了服务器，简化了系统的开发、维护和使用。图1.1所示为基于B/S模式设计的风机设备信息页面。

图1.1 基于B/S模式设计的风机设备信息页面

1.1.2 任务目标

（1）知识目标：了解HTML知识，熟悉HTML文件设置、图片处理和颜色设置。

（2）技能目标：学习操作HTML文件设置、进行图片处理和颜色设置。

（3）任务目标：学会使用HTML基础标签来制作风机设备信息页面。

1.1.3 原理学习

1.1.3.1 HTML开发基础

1）HTML简介

超文本标记语言（Hyper Text Markup Language，HTML）是一种用来描述页面的语言，包括一系列标签，通过这些标签可以统一页面上的文件格式，使分散的网络资源构成一个逻辑整体。HTML文件是由HTML命令组成的描述性文件，HTML命令不仅可以用来说明文本、图片、声音、动画、多媒体等内容，还可以从一个HTML文件跳转到另一个HTML文件，链接其他主机上的HTML文件。

下面是一个HTML文件的示例：

示例解析：

● <！DOCTYPE html>：HTML文件的第一行，位于<html>标签之前，用于指定浏览器使用哪个HTML版本来编写HTML命令。

● <html>：HTML文件的根元素。

● <head>：用于定义HTML文件的头部，它是所有头部元素的容器。

● <title>：定义HTML文件的标题。

● <body>：定义HTML文件的主体。

● <h1>：定义最大的标题。

● <p>：定义一个段落。

HTML是通过标签来描述页面，将页面内容在浏览器中显示出来的。在页面中，带有“<>”符号的元素称为 HTML 标签，如上面提到的<html>、<head>、<body>等都是 HTML的标签。所谓标签，就是指放在“<>”中用来表示某个功能的命令，也称为HTML元素。

按照结构功能来分，HTML 标签可分为双标签和单标签。双标签也称为体标签，是指由开始标签和结束标签组成的标签，例如上述示例中的<html>和</html>、<body>和</body>等都属于双标签。双标签的基础语法格式为：

单标签也称为空标签，是指用一个标签符号即可完整描述某个功能的标签，其语法格式为：

浏览器（如Chrome、IE、QQ、360等）用于读取HTML文件，并将其显示在页面上。浏览器并不是直接显示HTML标签的，而是利用标签来决定如何显示HTML文件内容的。页面显示效果如图1.2所示。

图1.2 页面显示效果

页面是由基本元素及属性组成的。图 1.3 所示为一个可视化的页面结构，只有<body>区域（白色部分）的内容才会显示在浏览器中。

图1.3 可视化的页面结构

<！DOCTYPE>声明有助于浏览器正确显示页面，其作用是声明HTML的版本，让浏览器能正确显示页面的内容。声明方式不区分大小写，以下方式均可：

在 HTML 文件中编写的中文字符最终要在浏览器中显示，因此中文字符需要经过编/解码。编/解码需要满足两个条件才能正确显示中文字符（不出现乱码）：一是编/解码的方式要支持所使用的中文字符；二是编/解码的方式要相同。GBK编/解码方式和UTF-8编/解码方式支持中文，但大多数浏览器默认使用的是GBK 解码方式，因此在使用UTF-8 编码方式时，需要在头部中声明所使用的编码方式是UTF-8，例如：

2）HTML编辑器

HTML 文件是一个扩展名为.html 的文本文件，其中的内容是按照 HTML 语法编写的文本代码，开发者可以使用任何文本编辑器直接打开、查看和编辑HTML文件。常用的文本编辑器有Visual Studio Code、Sublime Text、HBuilder。

Visual Studio Code是一款可运行在macOS、Windows和Linux之上的，针对现代Web和云应用的跨平台文本编辑器。Visual Studio Code支持多种编程语言，具有代码补全和导航功能，为JavaScript、TypeScript、Node.js和ASP.NET 5等编程语言提供了额外的工具集。Visual Studio Code具有语法高亮（Syntax Hight Lighting）、可定制的热键绑定（Customizable Keyboard Bindings）、括号匹配（Bracket Matching）以及代码片段收集（Snippets）等特性，将代码编辑器的简单性与开发者所需的功能结合在一起，提供了代码编辑、导航和理解支持、轻量级调试等功能，集成了丰富的可扩展性模型和轻量级的工具。

使用Visual Studio Code编辑HTML文件的步骤如下：

步骤1：新建HTML文件并编写代码。打开Visual Studio Code后，选择菜单“文件”→“新建”，可新建一个HTML文件，并输入如图1.4所示的代码。

图1.4 新建一个HTML文件并输入代码

步骤2：保存HTML文件。保存HTML文件时，可以使用扩展名.htm或.html。

步骤3：使用浏览器打开HTML文件，显示效果如图1.5所示。

图1.5 上述HTML文件的显示效果

3）HTML基础

（1）HTML 的元素。开始标签常称为起始标签，结束标签常称为闭合标签，元素以开始标签开始，以结束标签终止，元素内容是开始标签与结束标签之间的内容，没有内容的元素称为空元素，空元素是在开始标签中关闭的（以开始标签的结束而结束），大多数元素可拥有属性。HTML文件由嵌套的元素构成，例如：

上述的HTML文件包含了3个元素，解析如下：

① <h1>标签，例如：

<h1>标签定义了 HTML 文件中的一个标题，拥有一个开始标签<h1>和一个结束标签</h1>，<h1>标签内容是“HTML开发基础”。

② <body>标签，例如：

<body>标签定义了 HTML 文件的主体，拥有一个开始标签<body>和一个结束标签</body>，<body>标签内容是一个元素（本例是<h1>标签）。

③ <html>标签，例如：

<html>标签定义了整个 HTML 文件，该元素拥有一个开始标签<html>和一个结束标签</html>，其内容是一个元素（本例是<body>标签）。

空元素是指没有内容的HTML元素。空元素在开始标签中关闭，<br>就是没有关闭标签的空元素（<br>标签用于定义换行）。开发者可以在开始标签中添加斜杠来关闭空元素，如<br/>。

HTML标签对大小写不敏感，如<h1>等同于<H1>。

（2）HTML的属性。HTML标签可以拥有属性，属性提供了更多与元素相关的信息。属性通常是在开始标签中描述的，以名称-值对的形式出现，如“name="value"”。

例如，在下面的代码中，<body>标签定义了 HTML 文件的主体，bgcolor 属性描述了关于背景颜色的附加信息：

标题属性用于描述HTML文件中的标题。例如，在下面的代码中，<h1>标签定义了标题，align属性给出了关于对齐方式的附加信息：

HTML 的属性通常需要引用属性值，属性值应该包含在引号内。双引号是最常用的，使用单引号也没有问题。在某些特殊的情况下，如果属性值本身就包含双引号，这时就必须使用单引号，例如“name='John"Shup"Nelson'”。

表1.1列出了适用于大多数HTML元素的属性。

表1.1 适用于大多数HTML元素的属性

1.1.3.2 HTML文件设置

1）HTML标题

（1）在 HTML 文件中，标题是通过<h1>～<h6>标签进行定义的。<h1>标签定义重要等级最高的标题，<h6>标签定义重要等级最低的标题。标题显示效果如图1.6所示。

图1.6 标题显示效果

搜索引擎使用标题来为页面的结构和内容编制索引，用户可以通过标题来快速浏览页面，使用标题来呈现文件结构是很重要的。应该将<h1>标签用于主标题（最重要的标题），其后是<h2>标签（次重要的标题），再其次是<h3>标签，依次类推。<h1>～<h6>标签只用于标题文本，不要仅为了产生粗体文本使用<h1>～<h6>标签。

（2）<hr>标签可在HTML页面中创建水平线，水平线（Horizontal Rule）可以在视觉上将文件分隔成多个部分。HTML水平线的显示效果如图1.7所示。

图1.7 HTML水平线的显示效果

（3）将注释插入HTML代码中，可提高HTML代码的可读性，使HTML代码更易被人理解。浏览器会忽略HTML注释，也不会显示HTML注释。HTML注释写法如下：

（4）打开一个页面后，单击鼠标的右键，在弹出的右键菜单中通常有“查看源文件”或“查看页面源代码”选项。如果右键单击页面无反应或右键菜单中无相关选项，则可能是因为在制作页面时加入了 JavaScript 代码来禁止用户查看源文件代码或复制页面内容，这时可以选择浏览器状态栏或工具栏中的“查看”菜单，在其子菜单中选择“查看源代码”。

HTML标签如表1.2所示。

表1.2 HTML标签

2）HTML段落

（1）HTML段落的定义。页面内容通常由多个段落组成，HTML可以将文件分割为若干个段落。HTML段落是通过<p>标签定义的，例如：

浏览器会自动地在 HTML 段落的前后添加空行（</p>是块级元素），上述代码定义的HTML段落的显示效果如图1.8所示。

图1.8 HTML段落的显示效果

（2）不要忘记结束标签。根据W3C的原则，HTML的每个开始标签都必须有一个对应的结束标签，也就是有<html>就必须有</html>，只有这样才是一个完整的元素，除非它是一个自封闭标签。尽管不使用结束标签，大多数浏览器也能正确地将HTML文件显示出来，例如：

上例在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误，在未来的HTML版本中，不允许省略结束标签。

（3）HTML 分行。<br>标签可插入一个简单的换行符，能在不产生一个新段落的情况下换行（新行），代码如下，显示效果如图1.9所示。

<br>标签是一个空标签，意味着它没有结束标签。

图1.9 HTML分行的显示效果

（4）HTML输出使用提醒。屏幕的大小、对显示窗口的调整都可能导致不同的显示效果，无法确定HTML文件的显示效果，无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被看成一个空格，HTML代码中的所有连续的空行（换行）将被显示为一个空格。

3）HTML文本格式化

HTML 文本格式化有多种不同的形式，从标题到内容都有很多的样式。HTML 使用<b>标签与<i>标签来定义粗体文本与斜体文本。例如，下面代码的显示效果如图1.10所示。

图1.10 格式化显示效果

<b>标签与<i>标签分别用于定义粗体文本或斜体文本。<strong>标签或者<em>标签意味着要呈现的文本是重要的，所以要突出显示。主流的浏览器都能渲染各种效果的字体，未来浏览器可能会支持更好的渲染效果。通常使用<strong>标签来代替<b>标签，使用<em>标签来代替<i>标签。

（1）HTML文本格式化标签如表1.3所示。

表1.3 HTML文本格式化标签

（2）HTML输出标签如表1.4所示。

表1.4 HTML输出标签

（3）HTML引文、引用及标签定义如表1.5所示。

表1.5 HTML引文、引用及标签定义

1.1.3.3 HTML图片处理

1）HTML图片

HTML图片标签示例代码如下，其显示效果如图1.11所示。

图1.11 HTML图片标签的显示效果

（1）图片标签（<img>）和源属性（src）。在HTML中，通过<img>标签可以在页面中嵌入一幅图片。从技术上讲，图片并不是嵌入在页面中的，而是链接到页面中的，<img>标签的作用是为被引用的图片创建占位符。<img>标签是空标签，它只包含属性，并且没有闭合标签。要在页面上显示图片，就需要使用源属性（src），定义图片的语法为：

URL指存储图片的位置。如果名为“01.jpg”的图片位于www.test.com的images目录中，则该图片的URL为http：//www.test.com/images/01.jpg”；如果名为“camera.jpg”的图片和当前HTML文件位于同一个目录中，那么该图片的URL为“camera.jpg”。

（2）alt 属性。通过 alt 属性可以为图片设置替代文本，当无法显示图片时，将显示该属性值内容，即替代文本的内容。

替换文本属性的值是用户定义的，在浏览器无法显示图片时，浏览器将显示替代文本的内容。

（3）设置图片的高度与宽度。使用height（高度）属性与width（宽度）属性可以设置图片的高度与宽度，默认单位为像素，例如：

在实际开发中，指定图片的高度和宽度是一个良好的习惯。如果指定了图片的高度和宽度，则页面在加载图片时就会保留指定的尺寸；如果没有指定图片的高度和宽度，则页面在加载图片时可能会破坏页面的整体布局。

（4）定义客户端的图片映射。图片映射是指一幅具有可单击区域的图片。<map>标签是一个容器，包含一组<area>标签，<area>标签定义了图片映射中的可单击区域。HTML图片设置标签如表1.6所示。

表1.6 HTML图片设置标签

2）页面背景

在页面中加入背景颜色和背景图片通常可以使页面变得更加美观，更加吸引浏览者的眼球。<body>标签拥有两个设置背景的标签。背景可以是颜色（通过bgcolor属性设置）或者图片（通过background属性设置）。

（1）bgcolor属性。bgcolor属性用于设置背景颜色，例如：

（2）background 属性。background 属性用于设置背景图片，该属性的值为背景图片的路径和文件名，例如：

如果背景图片小于页面，则这个背景图片会自动重复，例如：

例如，上述代码中的背景图片的尺寸是240×240 px，只要浏览器窗口大于这个尺寸，背景图片就会被重复显示，效果如图1.12所示。

图1.12 背景图片被重复显示的效果

在新的HTML标准中不建议使用bgcolor属性和background属性，建议使用CSS来设置页面的背景颜色和背景图片。

1.1.3.4 HTML颜色设置

1）HTML颜色

HTML颜色是由十六进制值来定义的，由红色、绿色和蓝色（RGB）的值组成。每种颜色的最小值是0（十六进制值为＃00），最大值是255（十六进制值为＃FF）。十六进制值的写法为“＃”号后跟3位或6位十六进制值。3位数表示法为＃RGB，6位数表示为＃RRGGBB。由三种颜色混合而成的具体效果如图1.13所示。

2）Web安全颜色

不同的平台有不同的调色板，不同的浏览器也有自己的调色板。这就意味着，对于同一张图片，在Mac的浏览器和在PC 的相同浏览器中的显示效果可能有较大的差别。256种颜色中有40种颜色在Macintosh和Windows中的显示效果是不一样的，所以能安全使用的只有216种颜色，即216种Web安全颜色，为了尽量让用户看到相同的显示效果，建议使用Web安全颜色。