2.1　编写第一个HTML文件

2.1.1　HTML文件的编写方法

一个HTML文件是由一系列的元素和标签组成的。HTML的标签分为两种类型：单独出现的标签和成对出现的标签。大多数标签都是成对出现的，由起始标签和结束标签组成。起始标签的格式为<元素名称>，结束标签的格式为</元素名称>。其完整语法如下。

     <元素名称>要控制的元素</元素名称>

成对标签仅对包含在其中的文件部分发生作用，例如<title>标签和</title>标签就是成对标签，用于界定标题元素的范围，也就是说，<title>和</title>标签之间的部分是此HTML文件的标题。

单独标签的格式为<元素名称>，其作用是在相应的位置插入元素，例如<br>标签便是在该标签所在位置插入一个换行符。

说明

每个HTML标签都可以用大写、小写或混合写。例如，<HTML>、<html>和<Html>都是一样的。

在每个HTML标签中，还可以设置一些属性来控制HTML标签建立的元素。这些属性将位于所建立元素的起始标签中，因此起始标签的基本语法如下。

     <元素名称  属性1="值1" 属性2="值2"… >

结束标签的建立方式如下。

     </元素名称>

因此，在HTML文件中，某个元素的完整定义语法如下。

     <元素名称  属性1="值1" 属性2="值2"…>元素资料</元素名称>

说明

语法中，设置各属性所使用的“"”可省略。

当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为一个元素。元素是HTML文件的重要组成部分，例如title（文件标题）、img（图像）及table（表格）等。元素名不区分大小写。HTML用标签来规定元素的属性及其在文件中的位置。

由于在HTML语法中，每个由HTML标签与文字所形成的元素内，还可以包含另一个元素。因此，整个HTML文件就像是一个大元素，包含了许多小元素。

在所有HTML文件，最外层的元素是由<html>标签建立的。在<html>标签建立的元素中，包含两个主要的子元素，这两个子元素是由<head>标签与<body>标签建立的。由<head>标签建立的元素的内容为文件标题，而由<body>标签建立的元素内容为文件主体。

编写HTML文件主要有如下3种方法。

　手工直接编写。由于HTML语言编写的文件是标准的ASCII文本文件，所以我们可以使用任何的文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。

　使用热门的Web开发软件，如Jetbrains公司的WebStorm、Microsoft公司的Visual Studio Code、SangilKim公司的EditPlus、Adobe公司的Dreamweaver。

　由Web服务器一方实时动态生成。这需要进行后端的网页编程来实现，如ASP、PHP等，一般情况下都需要数据库的配合。

2.1.2　手工编写页面

下面使用记事本编写第一个HTML文件，步骤如下。

（1）选择“开始→程序→附件→记事本”命令，打开Windows系统自带的记事本，如图2.1所示。

图2.1　记事本

（2）在记事本中直接输入下面的HTML代码。

     <html>
     <head>
          <title>简单的HTML文件</title>
     </head>
     <body text="blue">
          <h2 align="center">HTML初露端倪</h2>
          <hr>
          <p>让我们一起体验超炫的HTML旅程吧</p>
     </body>
     </html>

（3）输入代码后，记事本中显示代码的内容，如图2.2所示。

（4）选择记事本菜单中的“文件→保存”命令，弹出如图2.3所示的“另存为”对话框。

图2.2　显示代码的记事本

图2.3　“另存为”对话框

（5）在对话框中选择存盘的文件夹，然后在“保存类型”中选择“所有文件”，在“编码”中选择UTF-8，这里将“文件名”设置为index.html，最后单击“保存”按钮。

（6）关闭记事本，回到存盘的文件夹，双击如图2.4所示的index.html文件，我们可以在浏览器中看到最终页面效果，如图2.5所示。

图2.4　双击html文件

图2.5　页面效果

注意

使用记事本编写HTML页面时，如果记事本中声明了文档的编码格式，那么保存文件时，也要注意修改编码格式（见图2.3下方的“编码”选项），否则浏览文件可能会出现乱码。

2.1.3　实例演练——创建基本的HTML网页

【例2.1】实现明日科技公司简介。（实例位置：资源包\TM\sl\2\1）

本节中创建一个基本的HTML网页，功能是简单介绍明日科技公司，运行效果如图2.6所示。

图2.6　明日科技公司简介

具体步骤如下。

（1）创建一个html文件，将其命名为slyindex.html。

（2）在<title>…</title>标签中定义文件的标题为“明日科技公司简介”。

（3）在页面的主题标签内，将页面的背景图片和文字的颜色设置为黑色，并将上边距、左右边距都设置为10像素。其实现的代码如下。

（4）通过CSS样式的<style>标签，去除重复的背景图。其实现的代码如下。

     <style type="text/css">
          body{background-repeat:no-repeat}
     </style>

2.1.4　使用WebStorm制作页面

WebStorm是Jetbrains公司旗下的一款JavaScript开发工具，被广大开发者誉为“Web前端开发神器”，它具有十分优秀的代码补全功能，并支持所有流行的库。WebStorm不仅可以用于编辑JavaScript代码，还可以用于编写和修改HTML以及CSS代码。正因如此，WebStorm受到广大前端开发者的喜爱。下面介绍WebStorm的下载和使用。

1．下载与安装

WebStorm的下载与安装步骤如下。

（1）打开浏览器，输入网址https://www.jetbrains.com/zh-cn/webstorm/download/#section=windows，进入WebStorm官方下载页面，如图2.7所示。在该页面中，读者可以选择符合自己计算机系统的WebStorm，然后单击“下载”按钮即可开始下载。

图2.7　WebStorm官方下载页面

说明

WebStorm是一个收费软件，官网下载的安装文件默认提供30天的试用期，如果想一直使用WebStorm开发程序，需要在官网购买使用授权。

（2）下载完成以后，页面会弹出对话框，询问是否保留已下载的WebStorm，单击“保留”按钮即可将WebStorm安装包保留至本地，如图2.8所示。

图2.8　将WebStorm安装包保存至本地

（3）双击打开本地的WebStorm安装包，开始安装WebStorm，如图2.9所示。单击Next按钮进入如图2.10所示的页面，在该页面中单击Browse按钮选择安装路径。设置完成以后，再次单击Next按钮进行下一步。

图2.9　开始安装WebStorm

图2.10　选择安装路径

（4）图2.11显示了安装选项页面。为了方便以后打开WebStorm，可以在计算机桌面上创建一个新的快捷方式。创建新的快捷方式时，读者只需在第一项中选择符合自己计算机系统类型的快捷方式，然后单击Next按钮进行下一步，选择开始菜单文件夹，如图2.12所示，选择默认的JetBrains，单击Install按钮进行下一步。

图2.11　添加快捷方式

图2.12　选择开始菜单文件夹

（5）选择完开始菜单文件夹以后，进入WebStorm安装页面，如图2.13所示。安装完成以后，Next按钮会处于可单击的状态，单击该按钮，进入如图2.14所示的提示用户安装完成的页面，单击Finish按钮即可。

图2.13　安装WebStorm

图2.14　安装完成

2．WebStorm的使用

WebStorm的使用步骤如下。

（1）双击打开WebStorm，打开中的页面如图2.15所示，打开后的页面如图2.16所示，单击第一项New Project按钮可以新建一个项目。

图2.15　打开WebStorm

（2）图2.17显示了选择新建项目文件的路径的页面。读者也可以单击右侧文件夹的图标选择已有的文件夹，然后单击Create按钮即可成功创建一个项目，如图2.18所示。接下来需要创建HTML文件，右击项目名称，然后在弹出的快捷菜单中选择New→HTML File命令，进入为HTML文件的命名页面。

图2.16　创建新的项目文件

图2.17　选择新建项目文件路径

图2.18　创建HTML文件

（3）图2.19显示了新建的HTML5文件命名页面。为文件命名时，可以省略其扩展名，输入名称以后，按Enter键，进入如图2.20所示的页面。在该页面中，读者可以在<title>标签中修改网页的标题，在<body>标签中添加网页的正文，例如本实例中，修改网页的标题为“我的第一个HTML5页面”，并且添加网页正文内容为“明天你好”。代码编写完成以后，单击右侧Google Chrome浏览器的图标，即可在Google Chrome浏览器中运行本实例。

图2.19　为HTML文件命名

图2.20　代码编写页面

2.1.5　使用浏览器浏览HTML文件

运行HTML代码离不开浏览器，现如今有三大主流浏览器，分别是Google Chrome浏览器、Microsoft Edge浏览器和Firefox浏览器，其中Google Chrome浏览器由于其性能高、兼容性好以及开发者工具多而深受开发者青睐。本书同样主要使用Google Chrome浏览器运行HTML代码。运行HTML实例时，主要有如下两种情况。

（1）运行WebStorm中的HTML文件时，在WebStorm中打开HTML文件，例如图2.20就相当于在WebStorm中打开HTML文件，然后单击WebStorm右上角的Google Chrome浏览器的图标即可使用Google Chrome浏览器运行HTML文件。

（2）直接使用Google Chrome浏览器运行HTML文件。首先选中HTML文件，然后右击，在弹出的快捷菜单中依次选择“打开方式→Google Chrome”，如图2.21所示，即可在Google Chrome浏览器中看到HTML文件的运行效果。

图2.21　选择打开方式

2.1.6　如何查看网页源代码

下面以明日学院的前台网页为例讲解如何查看网页的源代码，步骤如下。

（1）打开浏览器，在地址栏中输入https://www.mingrisoft.com/，然后按Enter键。

（2）页面显示了明日学院的首页面。

（3）在浏览器网页的空白处右击，在弹出的快捷菜单中选择“查看网页源代码”命令，如图2.22所示。

图2.22　选择“查看网页源代码”命令

（4）这样，就会在浏览器中新建一个窗口来显示网页的源代码，如图2.23所示。

图2.23　网页的源代码

2.1.7　编写文件的注意事项

在编写HTML5文件时，要注意以下事项。

　“<”和“>”是任何标签的开始和结束。元素的标签要用这对尖括号括起来，并且结束的标签总是在开始的标签前加一个斜杠。

　标签与标签之间可以嵌套，如：

     <H2><center>初识HTML文件</center></H2>

　在源代码中不区分大小写，如以下几种写法都是正确并且相同的标签。

     <HEAD>
     <head>
     <Head>

　任何回车和空格在源代码中不起作用。为了代码清晰，建议不同的标签之间换行编写。

　可以在HTML标签中放置各种属性，如：

     <h2 align="center">HTML初露端倪</h2>

其中align为属性，center为属性值，元素属性出现元素的< >内，并且和元素名之间有一个空格分隔，属性值可以直接书写，也可以使用""括起来。如下面的两种写法都是正确的。

     <h2 align="center">HTML初露端倪</h2>
     <h2 align=center>HTML初露端倪</h2>

　如果希望在源代码中添加注释，便于阅读，可以以“<!--”开始，以“--!>”结束。如下代码。

     <!--------------------------------------------!>
     <!--     文件范例：1-2.html      --!>
     <!-- 文件说明：第一个HTML文件--!>
     <!--------------------------------------------!>

注释语句只出现在源代码中，而不会在浏览器中显示。

编程训练（答案位置：资源包\TM\sl\2\编程训练）

【训练1】实现一篇博客文章内容的显示　在网页中显示一段关于HTML5学习的博客文章，并通过浏览器进行查看。

【训练2】查看京东网站前端源代码　打开京东网站首页，查看它的源代码。

本周热推：
C++游戏设计案例教程C++面向对象程序设计Julia语言程序设计亮剑Java Web项目开发案例导航Kafka并不难学！入门、进阶、商业实战
上一章目录下一章