Web前端基础案例 1

任务1创建第一个HTML5网页Web前端开发案例教程（HTML5+CSS3）

（AI助学）微课版（第3版）Web前端开发是从创建网页开始的，本任务运用HBuilderX网页编辑软件创建一个简单的HTML5网页。通过该任务的实现，熟悉HBuilderX网页编辑软件，了解网页文件的基本结构和网页相关概念等。1.1任务描述图1-1第一个网页启动HBuilderX，创建项目，在该项目中新建一个HTML文件，在网页上显示：“厚德立信精技通达——校训”。浏览效果如图1-1所示。1.2知识准备1.2.1认识Web前端开发1.2.2Web相关概念1.2.3HTML5概述1.2.4常用的浏览器1.2.5网页编辑软件1.2.1认识Web前端开发Web前端开发是创建Web页面或App界面等前端界面并将其呈现给用户的过程，通过超文本标记语言（Hyper-TextMarkupLanguage，HTML）、层叠样式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。1.2.1认识Web前端开发前端开发从网页设计演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页设计是Web1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大。1.2.1认识Web前端开发与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互，来动态更新网站的内容。页面超文本预处理器（HypertextPreprocessor，PHP）、Java服务器页面（JavaServerPages，JSP）和活动服务器页面（ActiveServerPages，ASP）.NET等后台开发技术，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。IP地址（InternetProtocolAddress）用于确定互联网上的每台主机，它是每台主机唯一的标识。在互联网上，每台计算机或网络设备的IP地址都是全世界唯一的。IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整数。例如，某台主机的IP地址是32，本机的IP地址是

。IP地址1.2.2Web相关概念由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如的地址，即域名。www表示万维网（WorldWideWeb，WWW）。例如，是人邮教育社区的域名。域名1.2.2Web相关概念统一资源定位符（UniformResourceLocator，URL）其实就是Web地址，俗称“网址”。万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其进行访问。URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。例如，/book/details/6948，就是一本书详情页的URL。URL1.2.2Web相关概念超文本传输协议（HyperTextTransferProtocol，HTTP）是互联网上应用最为广泛的一种网络协议。所有的万维网文件都必须遵守这个协议。设计HTTP的最初目的是提供一种发布和接收HTML页面的方法。超文本传输安全协议（HyperTextTransferProtocolSecure，HTTPS）是由HTTP+安全套接字层（SecureSocketLayer，SSL）构建的、可进行身份认证的加密传输协议，比HTTP更安全。HTTP与HTTPS1.2.2Web相关概念在浏览网站时看到的每个页面都像是书中的一页，我们称之为“网页”。把一系列逻辑上可以视为一个整体的网页叫作网站，或者说，网站就是一组相互链接的页面集合，它具有共享的属性。主页是网站被访问的第一个页面，其中包含指向其他页面的超链接，通常用index.html表示。网站、网页与主页1.2.2Web相关概念HTML表示网页的一种规范（或者说是一种标准），它通过标记定义了网页内容的显示。HTML提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。HTML1.2.2Web相关概念查看网页源代码的方法：在网页上右击，选择“查看页面源代码”Web标准是一系列标准的集合，主要包括结构标准、表现标准和行为标准。结构主要指的是网页的HTML结构，即网页文档的内容；表现指的是网页元素的版式、颜色、大小等外观样式，是指用CSS设置的样式；行为指的是网页模型的定义及交互代码的编写，主要是指用JavaScript脚本语言实现的网页行为效果。Web标准1.2.2Web相关概念HTML5是超文本标记语言的第5代版本。

2014年10月29日，W3C宣布HTML5标准规范制定完成，并公开发布。1.2.3HTML5概述HTML5的主要优势如下。（1）良好的移植性。（2）更直观的结构。（3）内容和样式分离。（4）新的表单元素。（5）更方便地嵌入音频和视频。（6）矢量图绘制。1.2.4常用的浏览器

目前，常用的浏览器有Edge、火狐（Firefox）、Chrome、Safari和Opera等，如下图所示。Edge浏览器是微软新一代的浏览器，是IE的替代产品，其功能全面，支持扩展程序，界面简洁、注重实用，对HTML5有很好的支持。Edge浏览器1.2.4常用的浏览器

火狐浏览器是一个开源网页浏览器。火狐浏览器由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它可以集成很多小插件，具有可拓展等特点。该浏览器发布于2002年，它也是世界上使用较广泛的浏览器，对HTML5也有很好的支持。火狐浏览器1.2.4常用的浏览器Chrome浏览器是由谷歌公司开发的开放源代码的浏览器。该浏览器的目标是提升网页的稳定性、传输速度和安全性，并创造出简单有效的使用界面。Chrome浏览器完全支持HTML5的功能。Chrome浏览器1.2.4常用的浏览器Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的一款浏览器，两款浏览器都对HTML5有很好的支持。其它浏览器1.2.4常用的浏览器1.2.5网页编辑软件

网页编辑软件有很多种，比较常用的有HBuilderX、AdobeDreamweaver、VisualStudioCode、SublimeText等。微软公司产品国产软件（本书使用）Adobe公司产品由程序员JonSkinner开发1.3任务实现1.3.1启动HBuilderX1.3.2新建项目1.3.3在项目中创建网页文件1.3.4输入网页代码1.3.5保存并浏览网页1.3.1启动HBuilderX双击HBuilderX.exe文件或桌面上的HBuilderX快捷方式，启动HBuilderX，如图所示。1.3.2新建项目从菜单栏中选择“文件”|“新建”｜“项目”选项，出现“新建项目”对话框，输入项目名称chapter01，项目存放位置为“E:/Web前端开发/源码”，选择模板类型为“空项目”，单击“创建”按钮，如图所示。项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文件、样式表文件等1.3.3在项目中创建网页文件在左侧视图中右击项目名称，在弹出的快捷菜单中选择“新建”｜“html文件”选项，出现“新建html文件”对话框，输入文件名example01.html，单击“创建”按钮，如图所示。1.3.4输入网页代码在网页文件代码的<title>与</title>之间输入HTML文档的标题，这里输入“第一个网页”，然后