任务1创建第一个HTML5网页_第1页
任务1创建第一个HTML5网页_第2页
任务1创建第一个HTML5网页_第3页
任务1创建第一个HTML5网页_第4页
任务1创建第一个HTML5网页_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务1创建第一个HTML5网页Web前端开发案例教程HTML5+CSS3项目式微课版Web前端开发是从创建网页开始的，本任务运用HBuilderX网页编辑软件创建一个简单的HTML5网页。通过该任务的实现，熟悉HBuilderX网页编辑软件，了解网页文件的基本结构和网页相关概念等。创建第一个HTML5网页任务1任务效果图1-1第一个网页启动HBuilderX，创建项目，在该项目中新建一个HTML文件，在网页上显示：“只争朝夕，不负韶华。”。浏览效果如图1-1所示。知识点认识Web前端开发01Web相关概念02HTML5概述03

常用的浏览器04

网页编辑软件05创建第一个HTML5网页任务11.2.1认识Web前端开发Web前端开发是创建Web页面或App界面等前端界面并将其呈现给用户的过程，通过超文本标记语言（Hyper-TextMarkupLanguage，HTML）、层叠样式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。1.2.1认识Web前端开发前端开发从网页设计演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页设计是Web1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大。1.2.1认识Web前端开发

与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互，来动态更新网站的内容。页面超文本预处理器（PageHypertextPreprocessor，PHP）、Java服务器页面（JavaServerPages，JSP）和活动服务器页面（ActiveServerPages，ASP）.NET等后台开发技术，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。IP地址（InternetProtocolAddress）用于确定互联网上的每台主机，它是每台主机唯一的标识。在互联网上，每台计算机或网络设备的IP地址都是全世界唯一的。

IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整数。IP地址1.2.2Web相关概念由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如的地址，即域名。www表示万维网（WorldWideWeb，WWW）。域名1.2.2Web相关概念统一资源定位符（UniformResourceLocator，URL）其实就是Web地址，俗称“网址”。万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其进行访问。URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。URL1.2.2Web相关概念网站、网页与主页1.2.2Web相关概念HTML表示网页的一种规范（或者说是一种标准），它通过标记定义了网页内容的显示。HTML提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。HTML1.2.2Web相关概念查看网页源代码的方法：在网页上右击，选择“查看页面源代码”Web标准是一系列标准的集合，主要包括结构标准、表现标准和行为标准。Web标准1.2.2Web相关概念HTML5是超文本标记语言的第5代版本。

2014年10月29日，W3C宣布HTML5标准规范制定完成，并公开发布。1.2.3HTML5概述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常用的浏览器本书所有页面在浏览时一律采用Chrome浏览器。Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的一款浏览器，两款浏览器都对HTML5有很好的支持。其它浏览器1.2.4常用的浏览器1.2.5网页编辑软件

网页编辑软件有很多种，比较常用的有HBuilderX、AdobeDreamweaver、VisualStudioCode、SublimeText等。任务3创建第一个HTML5网页任务11.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文档的标题，这里输入“第一个网页”，然后在<body>与</body>标记之间添加网页的主体内容，如图所示。文档的标题网

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论