任务1创建第一个HTML5网页教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

任务1 创建第一个HTML5网页 Web前端开发案例教程 HTML5+CSS3 微课版 Web前端开发是从创建网页开始的，本任务运用HBuilderX网页编辑软件创建一个简单的HTML5网页。通过该任务的实现，熟悉HBuilderX网页编辑软件，了解网页文件的基本结构和网页相关概念等。 任务导学 创建第一个HTML5网页 任务1 任 务 描 述 任务效果 图1-1 第一个网页 启动HBuilderX，创建项目，在该项目中新建一个HTML文件，在网页上显示：“这是我的第一个网页哦。”。浏览效果如图1-1所示。 知识点 认识Web前端开发 01 Web相关概念 02 HTML5概述 03 常用的浏览器 04 网页编辑软件 05 创建第一个HTML5网页 任务1 知 识 准 备 1.2.1 认识Web前端开发 Web前端开发是创建Web页面或App界面等前端界面并将其呈现给用户的过程，通过超文本标记语言（Hyper-Text Markup Language，HTML）、层叠样式表（Cascading Style Sheets，CSS）、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。 1.2.1 认识Web前端开发 前端开发从网页设计演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页设计是Web1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大。 1.2.1 认识Web前端开发 与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互，来动态更新网站的内容。页面超文本预处理器（Page Hypertext Preprocessor，PHP）、Java服务器页面（Java Server Pages，JSP）和活动服务器页面（Active Server Pages，ASP）.NET等后台开发技术，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。 IP地址（Internet Protocol Address）用于确定互联网上的每台主机，它是每台主机唯一的标识。在互联网上，每台计算机或网络设备的IP地址都是全世界唯一的。 IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整数。例如，某台主机的IP地址是61.172.201.232。 IP地址 1.2.2 Web相关概念 10 由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如www.ptpress.com.cn的地址，即域名。www表示万维网（World Wide Web，WWW）。 例如，www.ryjiaoyu.com是人邮教育社区的域名。 域名 1.2.2 Web相关概念 11 统一资源定位符（Uniform Resource Locator，URL）其实就是Web地址，俗称“网址”。万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其进行访问。 URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。 例如，http://www.ryjiaoyu.com/book/details/6948，就是一本书详情页的URL。 URL 1.2.2 Web相关概念 12 超文本传输协议（Hyper Text Transfer Protocol，HTTP）是互联网上应用最为广泛的一种网络协议。所有的万维网文件都必须遵守这个协议。设计HTTP的最初目的是提供一种发布和接收HTML页面的方法。 超文本传输安全协议（Hyper Text Transfer Protocol Secure，HTTPS）是由HTTP+安全套接字层（Secure Socket Layer，SSL）构建的、可进行身份认证的加密传输协议，比HTTP更安全。 HTTP与HTTPS 1.2.2 Web相关概念 13 在浏览网站时看到的每个页面都像是书中的一页，我们称之为“网页”。 把一系列逻辑上可以视为一个整体的网页叫作网站，或者说，网站就是一组相互链接的页面集合，它具有共享的属性。 主页是网站被访问的第一个页面，其中包含指向其他页面的超链接，通常用index.html表示。 网站、网页与主页 1.2.2 Web相关概念 14 HTML表示网页的一种规范（或者说是一种标准），它通过标记定义了网页内容的显示。HTML提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。 HTML 1.2.2 Web相关概念 查看网页源代码的方法： 在网页上右击，选择“查看