HTML 前端 实例与教程 2

单元1Web前端开发基础HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】1.1网页概述1.1.1基本概念1.1.2静态网页与动态网页1.2技术介绍1.2.1HTML1.2.2CSS1.2.3JavaScript1.3浏览器介绍1.3.1常见浏览器1.3.2浏览器内核1.4VSCode编辑器介绍1.4.1安装VSCode编辑器1.4.2设置VSCode编辑器1.4.3利用VSCode编辑器创建HTML模板【商业实例】“仿写淘宝首页”项目——创建网页模板任务一创建HTML模板代码任务二修改title为“淘宝首页”任务三创建网页内容区域并填充内容【综合实训】安装与使用VSCode编辑器【单元小结】目录【学习导读】万维网（WorldWideWeb，WWW）也称为Web，它是一种基于超文本和超文本传输协议（HypertextTransferProtocol，HTTP）的、全球性的、动态交互的、跨平台的分布式图形信息系统。Web前端即给用户展示的网页，也就是网站的前台部分，包含网页布局、特效、用户交互等。大家生活中接触到的淘宝官网、网易官网、腾讯官网等都属于Web前端。Web前端开发是指使用HTML、CSS及JavaScript等技术创建和维护Web界面的过程。本单元将详细介绍进行Web前端开发所需要掌握的基础知识。学习导读【学习目标】知识目标1．了解网页的基本概念。2．了解Web前端开发的技术。3．了解浏览器的概念。4．认识Web前端开发工具。能力目标1．能够独立安装并使用VSCode编辑器。2．能够创建一个HTML网页。素质目标1．培养学生的信息收集能力。2．培养学生的探索精神。3．培养学生的动手能力。学习目标思维导图1.1网页概述网页是一种可以在互联网中传输，能被浏览器识别并显示出来的文件，是网站的基本构成元素。网站由多个网页组成，网页之间的排列并不是杂乱无章的，而是有序链接在一起的。1.1.1基本概念以CSDN（ChineseSoftwareDeveloperNetwork）首页为例，其中包含文字、图片等元素。1.1网页概述1.1.1基本概念代码中仅包含一些特殊的符号和文本。在浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。静态网页无论用户何时访问，静态网页都会显示固定的信息，除非网页源代码被修改并重新上传。静态网页的优点是访问速度快，缺点是更新不方便。动态网页动态网页显示的内容会随着用户操作和时间的不同而变化。其优点在于可以实时展示用户想要查看的内容，缺点是不够统一，每个用户看到的内容可能存在差异。互联网上的大部分网站都是由静态网页和动态网页一起组成的。1.1网页概述1.1.2静态网页与动态网页1.2技术介绍1.2.1HTMLHTML是一种用于创建和组织网页内容的标记语言，它提供了一种跨平台和可访问的方式来呈现和共享信息。它使用标签（例如<h1>表示标题、<p>表示段落）来定义文本、图像、链接和其他元素的结构和语义。HTML提供了一种结构化的方式来描述网页的内容，并通过使用属性（如class和id）来为元素添加样式和行为。1.2技术介绍1.2.2CSSCSS是一种用于控制网页外观和布局的样式表语言。它通过选择器（如class选择器、id选择器）和属性（如颜色、字体、边框）来为HTML元素添加样式，以改变网页的颜色、布局、字体等，使网页更加个性化和美观。1.2技术介绍1.2.3JavaScriptJavaScript是一种用于为网页添加交互和动态功能的脚本语言，其前身叫作LiveScript，由Netscape公司开发。在Sun公司推出Java之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。JavaScript是一种面向对象的语言，提供了丰富的内置函数和方法，以及访问浏览器的应用程序接口（ApplicationProgramInterface，API），使开发人员能够创建复杂的交互性和动态性网页。JavaScript可以与HTML和CSS结合使用，以响应用户的操作、操作网页元素、验证表单数据等。JavaScript也可以用于服务器端开发（如Node.js），以及构建跨平台的移动应用程序（如ReactNative）等。0102031.3浏览器介绍1.3.1常见浏览器IE浏览器IE浏览器由微软公司推出，直接绑定在Windows操作系统中，无须下载安装。IE有6.0、7.0、8.0、9.0、10.0等版本。火狐（Firefox）和GoogleChrome火狐（Firefox）和GoogleChrome是目前较常用的3种浏览器，其他常见的浏览器还有Safari浏览器和Opera浏览器等。对于一般的网站，只要兼容IE浏览器、Firefox浏览器和GoogleChrome浏览器，就能满足绝大多数用户的需求。GoogleChromeGoogleChrome是由Google（谷歌）公司开发的开放源代码网页浏览器。该浏览器基于WebKit和Mozilla的源代码内核进行二次开发，目标是提升稳定性、速度和安全性，并呈现出简单有效的使用界面。Firefox浏览器Firefox浏览器是一个开源网页浏览器，使用Gecko引擎（非IE内核）。它是一款快速、轻量、注重隐私的浏览器，全平台可用，访问速度非常快。1.3浏览器介绍1.3.2浏览器内核浏览器内核是浏览器最核心的部分，负责对网页语法进行解释并渲染网页（也就是显示网页效果）。浏览器渲染引擎是浏览器内核的重要组成部分，主要负责解析HTML、CSS，计算网页布局和绘制网页等，并将解析后的CSS规则应用到HTML标签元素上，最后将HTML渲染到浏览器窗口中以显示具体的文档对象模型（DocumentObjectModel，DOM）内容。Trident内核：常用于IE浏览器。Gecko内核：常用于Firefox浏览器。WebKit内核：常用于Safari浏览器。Presto内核：常用于Opera浏览器。1.4VSCode编辑器介绍前端代码编辑器是一种专门为编写网页前端开发代码（如HTML、CSS、JavaScript等）而设计的软件工具，提供了一系列功能，如代码高亮、代码自动完成、错误检查、代码重构、版本控制集成、实时预览等，旨在提高开发效率、简化代码编写过程。VSCodeWebStormAtomSublimeTextWebStorm用于JavaScript和相关技术的集成开发环境（IntegratedDevelopmentEnvironment，IDE），可以帮助开发人员方便地进行Web前端开发。SublimeText是一款快速、轻量级的文本编辑器，支持多种语言和高亮显示。SublimeText有许多插件可供选择，可以通过PackageControl插件方便地管理插件。VSCode是微软推出的开源代码编辑器，支持Windows、macOS和Linux系统。它内置扩展功能，可以安装不同的插件。Atom是一个开源的文本编辑器，由GitHub开发。Atom具有高度可定制性和易于使用的API，使用户可以轻松地创建和分享自定义插件。1.4VSCode编辑器介绍1.4.1安装VSCode编辑器01OPTION选择编辑器安装地址02OPTION选择编辑器快捷方式的安装地址1.4VSCode编辑器介绍1.4.1安装VSCode编辑器03OPTION选择附加任务04OPTION开始安装1.4VSCode编辑器介绍1.4.1安装VSCode编辑器05OPTION安装进度界面04OPTION安装完成1.4VSCode编辑器介绍1.4.2设置VSCode编辑器01OPTION设置“常用设置”面板02OPTION安装扩展程序1.4VSCode编辑器介绍1.4.3利用VSCode编辑器创建HTML模板01OPTION选择“新建文件”命令02OPTION创建HTML文件1.4VSCode编辑器介绍1.4.3利用VSCode编辑器创建HTML模板03OPTION选择HTML文件保存的位置04OPTION输入代码<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>Document</title></head><body></body></html>【商业实例】“仿写淘宝首页”项目——创建网页模板任务一创建HTML模板代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>Document</title></head><body></body></html>打开VSCode编辑器，选择菜单栏中的“文件”—“新建文件”命令，创建1-2.html文件。在正文中输入“!”，并按Tab键，这时会自动生成HTML的模板代码，如下所示。【商业实例】“仿写淘宝首页”项目——创建网页模板任务二修改title为“淘宝首页”<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>淘宝首页</title></head><body></body></html>修改title为“淘宝首页”，这样在打开网页的时候浏览器标题就会变成“淘宝首页”，代码如下。【商业实例】“仿写淘宝首页”项目——创建网页模板任务三创建网页内容区域并填充内容<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initialscale=1.0"><title>淘宝首页</title></head><body><div>这里是网站内容部分</div></body></html>在<body>标签中插入一个<div>标签，<div>标签中的内容即为网页的主体内容，设置<div>标签中的内容为“这里是网站内容部分”，代码如下所示（实例位置：单元1/1-3.html）。网页效果【综合实训】安装与使用VSCode编辑器二、实训内容一、实训目的掌握VSCode编辑器的安装与配置方法。掌握VSCode插件的安装与使用方法。学会