下载掌阅APP，畅读海量书库
立即打开
我们在上网浏览网站时，会发现网站是由若干网页构成的，这些网页是如何创建的呢？“九层之台，起于累土；千里之行，始于足下”，下面从简单的案例开始介绍HTML5，帮助读者了解创建HTML5网页的步骤及页面的基本结构，在本案例的知识点中介绍网页相关的概念、常用的网页编辑软件和常用的浏览器等内容。
创建一个简单的HTML5网页，在该网页显示“志向和热爱是伟大行为的双翼。——歌德”，网页浏览效果如图1-1所示。
图1-1 第一个HTML5网页
创建HTML5网页的具体步骤如下。
双击HBuilderX.exe文件或桌面上的HBuilderX快捷图标，启动HBuilderX，进入HBuilder界面，如图1-2所示。
图1-2 HBuilderX界面
微课1-1：案例实现
项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文件、样式表文件等。
从菜单栏中选择“文件”|“新建”|“项目”命令，出现“新建项目”对话框，输入项目名称project01，设置项目存放位置为E:/网页设计/源代码，选择模板类型为“空项目”，单击“创建”按钮，如图1-3所示。
图1-3 新建项目
此时一个项目创建完成，在HbuilderX界面的左侧视图中显示了该项目，如图1-4所示。若左侧视图没显示在HBuilderX界面中，则可选择菜单栏中的“视图”|“显示项目管理器”命令使其显示。
图1-4 项目创建完成
在左侧视图中右击项目名称，在弹出的快捷菜单中选择“新建”|“html文件”命令，出现“新建html文件”对话框，输入文件名example01.html，单击“创建”按钮，如图1-5所示。
图1-5 新建网页文件
在网页文件代码的<title>与</title>之间输入网页的标题，这里输入“第一个网页”，然后在<body>与</body>之间添加网页的主体内容，如图1-6所示。
图1-6 输入网页代码
这里的<p>和</p>是HTML段落标记，在案例2中会详细介绍。
在菜单栏中选择“文件”|“保存”命令，或按“Ctrl+S”组合键，即可保存文件。
在HBuilderX中单击工具栏中的“浏览器运行”按钮
，或按“Ctrl+R”组合键，使用浏览器浏览网页，效果如图1-7所示。
至此，创建了一个HTML5项目project01，该项目包含一个网页文件example01.html。在该项目中用同样的方法还可以继续创建新的网页文件，读者可以自行练习。
图1-7 浏览网页
注意 也可打开保存网页文件的文件夹，双击网页文件来浏览网页，前提是计算机中已经安装了浏览器软件。
对于从事网页设计的人员来说，与网页相关的概念、网页编辑软件和浏览器等都是必须了解的，下面就来介绍这些知识。
微课1-2：Web前端开发的前世今生
与网页相关的概念有IP地址，域名，URL，HTTP与HTTPS，网站、网页与主页，HTML与HTML 5，Web标准等，下面就来介绍这些概念。
IP地址（Internet Protocol Address）用于确定Internet上的每台主机，它是每台主机唯一的标识。在Internet上，每台计算机或网络设备的IP地址都是全世界唯一的。
IP地址的格式是×××.×××.×××.×××，其中×××是0～255的任意整数。例如，某台主机的IP地址是61.172.201.232，本机的IP地址是127.0.0.1。
由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如www.ryjiaoyu.com的地址，即域名地址。www表示万维网，ryjiaoyu.com是人邮教育网站的域名。
统一资源定位符（Uniform Resource Locator，URL）其实就是Web地址，俗称“网址”。在万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能对其进行访问。
URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。例如，http://www.ryjiaoyu.com/book/details/6948就是一本书详情页的URL。
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是互联网上应用最为广泛的一种网络协议。所有的万维网文件都必须遵守这个协议。设计HTTP的最初目的是提供一种发布和接收HTML页面的方法。
超文本传输安全协议（Hyper Text Transfer Protocol Secure，HTTPS）是由HTTP+安全套接字层（Secure Socket Layer，SSL）构建的、可进行身份认证的加密传输协议，比HTTP更安全。
简单地说，网页就是把文字、图像、声音、视频等融媒体形式的信息，以及分布在Internet上的各种相关信息相互链接构成的一种信息表达方式。
在浏览网站时看到的每个页面都像书中的一页，因此称之为“网页”。
一系列在逻辑上可以视为一个整体的网页叫作网站，或者说，网站就是一组相互链接的页面集合，具有共享的属性。
主页（也称首页）是网站被访问的第一个页面，其中包含指向其他页面的超链接，通常用index.html表示。
超文本标记语言（Hyper Text Markup Language，HTML）是网页的一种规范（或者说是一种标准），它通过标记定义网页显示的内容。HTML提供许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。图1-8和图1-9所示分别是小米商城网站的主页和主页源代码。
HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是第5代超文本标记语言。HTML5第一份正式草案于2008年1月公布，并得到了各大浏览器开发商的广泛支持。2014年10月29日，万维网联盟（World Wide Web Consortium，W3C）宣布，HTML5标准规范制定完成，并公开发布。HTML5可以跨平台使用，具有良好的移植性；增加了新的结构性标记，具有更直观的结构；增加了新的表单元素；能方便地嵌入音频和视频；能使用Canvas元素结合JavaScript在网页上绘制图像等。
图1-8 小米商城网站的主页
图1-9 主页源代码
为了使网页在不同的浏览器中显示相同的效果，在开发应用程序时，浏览器开发商和Web开发商都必须遵守W3C与其他标准化组织共同制定的一系列Web标准。
W3C是最著名的国际标准化组织之一。
Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构标准、表现标准和行为标准。结构主要指的是网页的HTML结构，即网页文档的内容；表现指的是网页元素的版式、颜色、大小等外观样式，是指用CSS设置的样式；行为指的是网页模型的定义及交互代码的编写，主要是指用JavaScript脚本语言实现的网页行为效果。
市面上的网页编辑软件有很多，目前常用的有HBuilderX、Visual Studio Code和Adobe Dreamweaver等，下面简单介绍其各自特点。
HBuilderX是由数字天堂（北京）网络技术有限公司（DCloud）推出的一款支持HTML5的Web开发编辑器，是一款优秀的国产免费软件，在前端开发、移动开发方面提供了丰富的功能和良好的用户体验。HBuilderX本身主体是用Java编写的。速度快是HBuilderX的最大优势之一，它通过完整的语法提示和代码块等，大幅提升HTML、CSS、JavaScript等代码编辑效率。
本书所有代码均使用HBuilderX编写。
Visual Studio Code简称VS Code，是微软公司推出的开发现代Web应用和云应用的跨平台源代码编辑器，可用于Windows、macOS和Linux操作系统，是最受欢迎的源代码编辑器之一。它速度快、量级轻且功能强大。
Adobe Dreamweaver是软件开发商Adobe公司推出的一套拥有可视化编辑界面，可用于编辑网站和移动应用程序的代码编辑器。它支持通过代码、拆分、设计、实时视图等多种方式来创作、编辑和修改网页，对于初级Web开发人员来说，无须编写任何代码就能快速创建Web页面。其成熟的代码编辑工具也更适用于高级Web开发人员的创作。Adobe Dreamweaver是一个比较好的HTML代码编辑器。
浏览器是网页运行的平台，网页文件必须使用浏览器打开才能呈现网页效果。目前，常用的浏览器有Edge浏览器、火狐（Firefox）浏览器、Chrome浏览器、Safari浏览器和Opera浏览器等，如图1-10所示。
Edge浏览器是微软公司推出的新一代浏览器，是IE的替代产品，其功能全面，支持扩展程序，界面简洁，注重实用性，对HTML5有很好的支持。
火狐浏览器是一个开源网页浏览器。火狐浏览器由Mozilla基金会和开源开发者一起开发。由于是开源的，所以它可以集成很多小插件，具有可拓展等特点。该浏览器发布于2002年，它也是世界上使用较广泛的浏览器。
图1-10 常用的浏览器图标
由于火狐浏览器对Web标准的执行比较严格，所以在实际网页制作过程中，火狐浏览器是最常用的浏览器之一，对HTML5的支持度也很好。
Chrome浏览器是由谷歌公司开发的开放源代码的浏览器。该浏览器的目标是提升网页的稳定性、传输速度和安全性，并提供简单、有效的使用界面。Chrome浏览器完全支持HTML5的功能。
注意 本书中的所有网页在浏览时一律采用Chrome浏览器。
Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的浏览器，这两款浏览器都对HTML5有很好的支持。
本案例介绍了使用HBuilderX开发工具创建一个简单的HTML5网页。创建网页时最好先创建一个项目，再在项目中创建网页，这样可便于组织和管理网页。在知识点中介绍了网页设计的基础知识，包括网页相关概念、常用的网页编辑软件和常用的浏览器等。
1.HTML的中文全称是（ ）。
A.文件传输协议
B.超文本传输协议
C.超文本标记语言
D.统一资源定位符
2.HTTP的中文全称是（）。
A.文件传输协议
B.超文本传输协议
C.超文本标记语言
D.统一资源定位符
3.下面的应用软件中，不可以用于网页制作的是（ ）。
A.Visual Studio Code
B.HBuilderX
C.Adobe Dreamweaver
D.3ds Max
1.使用Chrome浏览器浏览网页时，在网页的任意空白处单击鼠标右键，选择“查看网页源代码”命令可以查看网页的HTML代码。（ ）
2.HTTP是由SSL+HTTP构建的、可进行身份认证的加密传输协议，要比HTTPS安全。（ ）
3.HTML5可以跨平台使用，具有良好的移植性。（）
4.Web标准并不是某一个标准，而是一系列标准的集合，主要包括结构标准、表现标准和行为标准。（ ）
5.一个项目中只能有一个网页文件。（ ）
1.创建个人介绍网页，网页内容为学号、姓名、性别、课程学习目标等，保存后浏览网页。
2.拓展练习：项目和网页文件的基本操作。
在HBuilderX环境中，可以对项目或网页文件进行重命名、移除项目、删除网页文件等操作。其操作方法是右击项目或网页文件名称，选择相应的命令。请读者自行练习。
HTML5标准方案的制定（扫码观看）
1-3：HTML5标准方案的制定