Web前端开发（HTML5+CSS3+JavaScript） 课件 第1章 WEB前端开发概述

Web前端基础技术CSSJSHTML第1章Web前端开发概述Contents目录

什么是Web前端开发

Web工作过程基本概念Web前端开发相关技术开发工具课程内容、目标和学习方法内容：HTML5CSS3JavaScript---Web前端开发基础目标：使用H5+CSS3+JS构建合理布局、具有交互功能的前端页面。方法：教程内容+上课内容+实践/模仿+资源扩展0.课程内容、目标和学习方法1.Web前端开发主要任务：UI设计（

页面布局,

页面效果)；交互(数据的获取和呈现)后台管理前端界面(前端职责)：界面布局；数据请求和呈现学习目标：参考并实现布局和效果2.Web工作过程2)动态页面[JSPPHPASP.NET]；不可直接执行，服务器端编译后执行，结果为html内容1)静态页面[HTMLCSSJavaScript]:htm/html；可直接执行(双击打开)/index.html/index.html/login.jsp3.基本概念1)URL:UniformResourceLocator，统一资源定位器；如何定位到文件（资源位置）语法格式：协议：//域名[/资源路径和文件名]Web：http(s):///index.html其他：等2)Web服务器硬件+软件：提供网站资源访问663)超链接定位目标的方式：从一个页面指向另外一个目标[页面、其他文件]的链接关系。可以指向另外一个网页，也可以是同一页面的不同位置、或图片等其他类型文件等。是文件与文件之间的关联方式4.Web前端开发相关技术1)HTML:超文本标记语言（结构和内容）HyperTextMarkupLanguage的简写，通过标记来描述网页文件的结构和内容；由标记组成的文本文件，浏览器解析并呈现；文件扩展名为html或htm；实例：查看源代码4.Web前端开发相关技术2).CSS:层叠样式表,扩展HTML有限的样式（效果/表现）CSS(CascadingStyleSheets)：改变或增强页面元素的效果；页面布局；使HTML内容和效果分离。CSSCSS4.Web前端开发相关技术3).JavaScript（行为/交互）动态获取/改变页面元素的内容、效果；实现与用户交互。实例：效果实际把标记作为对象，通过编程的方式访问和改变属性。4.Web前端开发相关技术4).其他框架技术：基于HTMLCSSJavaScript---后续课程5.Web前端开发工具下载安装：VSCode下载：/汉化VSCode：安装插件1.安装完毕后，启动。2.单击【view】菜单=>【Extension】扩展=>打开扩展面板3.在出现的面板的搜索栏输入：Chinese，找到扩展插件，单击【install】进行安装5.Web前端开发工具实用插件(建议安装！！！)：htmltagwrap:alt+w：选择文本，插入标记AutoCloseTag：自动插入闭合标记AutoRenameTag：修改标记时，自动修改闭合标记AutoFileName：自动显示目录下的文件提供选择openinbrowser:在浏览器打开创建Web页面1.在电脑任意位置创建一个文件夹,如：D:\Web2.打开VSCode，执行：【文件】【打开文件夹】，选择D:\Web.3.在控制工作台：资源管理器【WEB】新建文件图标

输入文件名和扩展名：双击打开文件进行编辑5.Web前端开发工具编辑Web页面，并打开输入以下标记，按ALT+B快捷键，在浏览器中打开web页面5.Web前端开发工具练一练要求：下载、安装vscode；安装插件,输入上面的内容，运行并在浏览器中查看目的：熟悉vscode的使用,以及如何在浏览器中查看1.HTML文档是由

[标记]

构成的

[文本]

文件2.HTML是一种（B）语言A.编译型B.超文本标记C.高级程序设计D.面向对象的编程3.HTML、CSS和JavaScript三者的关系：HTML描述网页的结构和内容；CSS控制网页的外观，即网页的表现；JavaScript控制网页的行为，实现与用户的交互。本章目标：1.了解本课程学习内容：H5+CSS3+JS，各自任务角色2.理解前端开发的核心任务3.理解基本概念：静态/动态网页的工作过程、WEB服务器、