Web前端开发案例教程（HTML5+CSS3）（项目式）全套教学课件.pptx

;;创建第一个HTML5网页;;知识点;创建第一个HTML5网页;1.2.1认识Web前端开发;1.2.1认识Web前端开发;1.2.1认识Web前端开发;IP地址（InternetProtocolAddress）用于确定互联网上的每台主机，它是每台主机唯一的标识。在互联网上，每台计算机或网络设备的IP地址都是全世界唯一的。

IP地址的格式是xxx.xxx.xxx.xxx，其中xxx是0～255的任意整数。;由于IP地址是数字编码的，不易记忆，所以我们平时上网使用的大多是诸如的地址，即域名。www表示万维网（WorldWideWeb，WWW）。

;统一资源定位符（UniformResourceLocator，URL）其实就是Web地址，俗称“网址”。万维网上的所有文件都有唯一的URL，只要知道资源的URL，就能够对其进行访问。

URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。;网站、网页与主页;HTML表示网页的一种规范（或者说是一种标准），它通过标记定义了网页内容的显示。HTML提供了许多标记，如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容，就用相应的HTML标记进行描述。

;Web标准是一系列标准的集合，主要包括结构标准、表现标准和行为标准。

;HTML5是超文本标记语言的第5代版本。2014年10月29日，W3C宣布HTML5标准规范制定完成，并公开发布。;1.2.4常用的浏览器;Edge浏览器是微软新一代的浏览器，是IE的替代产品，其功能全面，支持扩展程序，界面简洁、注重实用，对HTML5有很好的支持。

;火狐浏览器是一个开源网页浏览器。火狐浏览器由Mozilla资金会和开源开发者一起开发。由于是开源的，所以它可以集成很多小插件，具有可拓展等特点。该浏览器发布于2002年，它也是世界上使用较广泛的浏览器，对HTML5也有很好的支持。

;Chrome浏览器是由谷歌公司开发的开放源代码的浏览器。该浏览器的目标是提升网页的稳定性、传输速度和安全性，并创造出简单有效的使用界面。Chrome浏览器完全支持HTML5的功能。;Safari浏览器是苹果公司开发的浏览器，Opera浏览器是Opera软件公司开发的一款浏览器，两款浏览器都对HTML5有很好的支持。;1.2.5网页编辑软件;任务3创建第一个HTML5网页;1.3.1启动HBuilderX;1.3.2新建项目;1.3.3在项目中??建网页文件;1.3.4输入网页代码;在HBuilderX中单击工具栏中的“浏览器运行”按钮，或按“Ctrl+R”组合键，选择Chrome浏览器浏览网页，效果如图所示。;任务3创建第一个HTML5网页;任务小结;;;任务3搭建简单学院网站;;;知识点;任务3搭建简单学院网页;2.2.1HTML5文档的基本结构;2.2.1HTML5文档的基本结构;2.2.1HTML5文档的基本结构;文档类型声明，位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范。HTML5文档中的文档类型声明代码如下。;html标记标志着HTML文档的开始，/html标记标志着HTML文档的结束。在它们之间的是文档的头部和主体内容。;head标记用于定义HTML文档的头部信息，也称为头部标记。head标记紧接在html标记之后，主要用来封装其他位于文档头部的标记，例如，title、meta、link和style等用来描述文档的标题、作者以及样式等。

一个HTML文档只能含有一对head标记。;body标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于body标记内。

一个HTML文档只能含有一对body标记，且body标记必须在html标记内，位于head标记之后，与head标记有并列关系。;html标记、head标记和body标记都是HTML文档中的基本标记，除了这些标记之外，HTML5还提供了大量其他标记，下面对标记及标记中的属性进行简要说明。;标记;标记的属性;标记的属性;注释标记;标题标记;标题标记;段落标记;段落标记;水平线标记;水平线标记;换行标记;换行标记;字体样式标记;字体样式标记;特殊字符;特殊字符;无序列表;无序列表;有序列表;有序列表;列表嵌套;列表嵌套;自定义列表;自定义列表;自定义列表;自定义列表;超链接一般有以下几种形式;2.2.5HTML超链接标记;2.2.5HTML超链接标记;2.2.5HTML超链接标记;页面间的超链接;锚点链接;锚点链接;空链接;常用的Web图像格式;常用的Web图像格式;常