HTML5 CSS3 JavaScript网页设计与制作项目教程课件PPT 项目1 认识HTML5——布局网页.pptx

HTML5+CSS3+JavaScript网页设计与制作项目教程项目1 认识HTML5——布局网页 目录ENTERPRISE OPERATION REPORT04.总结提升03.知识链接02.学习目标01.项目导入 项目导入PART 01 项目导入“旅行家——合作伙伴”页面效果展示HTML5可实现页面内容的布局。常见的HTML标记包括文本标记、超链接标记及列表标记。本章我们将使用这些元素制作“旅行家合作伙伴”页面 学习目标PART 02 知识目标能力目标1、了解HTML及其发展历程，了解常用的浏览器及其特点2、了解常用的HTML编译器 3、掌握HTML文档的基本结构1、掌握VSCode的下载与安装方法2、掌握文本控制标记的使用3、掌握超链接标记的使用4、掌握列表标记的使用 知识链接PART 03 一、HTML5概述1、什么是HTMLHTML全称“超文本标记语言（Hyper Text Markup Language）”，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。需要强调的是，HTML 不是一种编程语言，而是一种标记语言。所谓标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页。HTML标签可包括文字，图形、动画、声音、表格、链接等。 2、HTML的特点及其发展历程HTML具有简易型、可扩展性、平台无关性及通用性等特点。HTML最初于1989年由CERN的Tim Berners-Lee发明，已经经历了4个版本的更新，主要由W3C对其规则进行管理。一、HTML5概述 3、HTML与浏览器目前常用的浏览器包括谷歌（Chorme）、火狐（FireFox）、Safari及Microsoft Edge等，如图所示。各浏览器随着HTML的更新迭代，不同版本对其有相应的支持，同时具有各自的特点及优势。一、HTML5概述 4、VS Code的下载与安装VS Code，全称Visual Studio Code，是Microsoft在发布的一个运行于 Windows、Mac OS X和Linux?之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。支持前端开发应用的HTML、CSS、JavaScript等语言，并支持丰富的其他语言和运行时扩展的生态系统。VS Code软件功能非常强大，界面简洁明晰、操作方便快捷，设计得很人性化。本书中的案例将使用VS Code作为编译工具。一、HTML5概述 1、创建HTML5文档(1)使用记事本创建HTML文档步骤1：创建一个记事本文件；步骤2：打开新建文本文档，选择“文件→另存为”，重命名txt文件将其后缀改为html，注意将文件保存类型选择为“所有文件”，点击保存按钮即可将文件保存为html文档；步骤3：选中html文档，点击鼠标右键，在快捷菜单中选择打开方式，选择记事本，即可打开html文档并对其进行编辑。步骤4：使用浏览器打开html文档，可查看页面效果。二、HTML5文档及其基本语法 2、使用VS Code创建HTML文档步骤1：打开VS Code，选择“文件→新建文件”步骤2：在界面右下角选择语言模式为HTML步骤3：按“Ctrl+S”键打开另存为对话框，选择文档保存位置并命名文档，点击保存按钮保存文档步骤4：切换输入法为英文，在代码编辑区域输入“!”，按Tab键，将自动生成html文档基本结构步骤5：在body标签中输入“Hello World！”，按“Ctrl+S”保存文档，在代码编辑区域空白处点击鼠标右键，在快捷才到中选择“Open in Default Browser”即可在默认浏览器中预览html页面二、HTML5文档及其基本语法 2、HTML5文档的基本结构HTML5文档由文档类型声明、根标记、头部标记、主体标记组成。【例1-1】HTML5文档基本结构!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleMyFirstPage/title/headbody?/body/html二、HTML5文档及其基本语法 !doctype html文档类型声明这个部分的用来说明该文档是HTML文档。所有的HTML文档开始于文档声明之后，它说明了文档的类型及其所遵守的标准规范集。本例中的!doctype是html5的文档类型声明，形式简洁。html根标记 根标记位于文档类型声明之后，位于html文档的最外层。根标记是双标记，html标志着html文档的开始，/html标志着html文档的结束。根标记中嵌套着头部标记和主体标记。lang属性指定页面内容的默认语言，例如：en表示英语。二、HTML5文档及其基本语法 hea