- HTML5从入门到精通（第4版）
- 明日科技编著
- 3476字
- 2024-12-24 10:26:16
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】查看京东网站前端源代码 打开京东网站首页，查看它的源代码。