Web前端开发项目教程 课件 项目1-1Web前端基础知识 - HTML5+CSS3初体验

云天收夏色，木叶动秋声。送走狂风暴雨的盛夏，迎来静美凉爽的初秋，亲爱的同学，欢迎你们。项目一Web前端开发职业前景与开发初体验迈入大学校门感觉如何？目录/Contents010203【任务1.1】认识Web前端开发工程师【任务1.2】熟悉Web前端开发相关技术【任务1.3】熟悉Web前端开发工作流程04【任务1.4】初识HTML5页面认识Web前端开发工程师01学习目标/Target了解Web前端开发涉及的岗位，PC端、移动端网站、Web应用软件、APP、小程序、快应用。熟悉Web前端开发的发展方向，HTML5、CSS3和JavaScript发展史及优势。了解Web前端开发职业前景，岗位需求和薪资水平。认识Web前端开发工程师，岗位职责和任职要求。前端开发概述/

Summary

伴随移动互联网技术的发展，大多数人变成了低头一族，用计算机在互联网上查询信息、社交、购物；依靠一部智能手机，就能够在一个陌生的城市找到自己想去的任何地方。市场对前端开发人员的需求也越来越大。若要开发出一个符合实际需要的Web站点（网站)/Web应用软件/APP/小程序/快应用，HTML5+CSS3+JavaScript技术是我们必须要掌握的。

然而究竟什么是前端开发？许多刚刚接触的初学者也不是很清楚（大前端时代）。因此在学习前端开发之前，首先要了解一些前端开发的基础知识。本课将从认识网页、网页制作入门技术以及HBuilder工具的使用三个方面详细讲解，带领大家走进HTML5+CSS3+JavaScript的世界。Web前端开发涉及的岗位用户视角PC端/移动端网站开发前端：使用HTML、CSS和JavaScript等技术进行界面开发。

后端：协作完成功能开发和性能优化。管理视角

架构师

UI设计师

产品经理<li><a

href="#">地图</a></li><li><ahref="#">视频</a></li><li><a

href="#">贴吧</a></li><li><ahref="#">学术</a></li>负责构建出具有良好用户体验、跨平台兼容性的应用界面，既要满足业务功能需求，还要吸引用户并提高用户留存率。

内部管理系统办公协作类：内容娱乐类：工具服务类：金融服务类：其他：电商购物类：Web前端开发涉及的岗位Web应用软件开发Web前端开发的发展方向单页Web应用（SingleWeb

Application，SPA），由JavaScript来控制，用户与应用程序交互时动态更新该页面。对单页应用来说模块化的开发和设计相当重要。渐进式Web应用（ProgressiveWebApplication，PWA）使用最近的Web标准以允许在用户的计算机或设备上安装并向这些用户提供类似应用程序体验的网站。应用程序（Application，App）的用户黏性超越Web页面的主要原因就是其能提供更好的性能、功能和产品体验，而PWA的目标是提供接近App的产品体验。人工智能物联网（人工智能+物联网AI+IoT，AIoT）Web开发，出现在PC、手机上，越来越多的车载、可穿戴、生物识别网络安全等终端设备上，有前端交互界面和后台管理界面为客户服务。还需要考虑到智能设备的功能，Google公司发布的TensorFlow.js框架就是帮助Web开发者踏入人工智能、深度学习领域的利器。图形学方向，“集大成者”之一是游戏行业。可视化界面、3D引擎的开发都需要图形学相关的算法知识，而Web前端开发也越来越多地涉及图形学，如借助5G技术发展出来的移动虚拟仿真效果。目前主流的大数据可视化技术，就是依托Web图形化技术来帮助用户更好更准确的理解数据。HTML5，把代码重复率很高的功能提取为<header>、<nav>标签等，它的核心理念是将一切新特性与原有功能保持平滑过渡。CSS即层叠样式表（CascadingStyleSheets），设置HTML页面各种元素的样式。CSS3是目前CSS规范的最新版本，远离很多JavaScript脚本或者Flash代码，节约成本和提高性能。JavaScript是一种轻量级、解释型、面向对象的编程语言，主要用于Web前端开发，能为网页添加交互性和动态功能。它最初由网景公司（Netscape）于1995年设计，现由ECMA国际（欧洲计算机制造商协会）标准化，官方名称为

ECMAScript（ES5、ES2025）。Web前端开发职业前景更新上述数据/gangwei/qianduankaifagongchengshi//jobs?cityKw=%E9%83%91%E5%B7%9E&jobKw=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91认识Web前端开发工程师熟悉Web前端开发相关技术02学习目标/Target了解Web前端开发三大核心技术，HTML5、CSS3和JavaScript。熟悉Web前端开发相关专业术语，网页、网站、首页、静态网页和动态网页。了解Web前端开发工具链简介，三剑客和众多编辑器。认识HBuilderX，移动应用开发新功能。什么是Web标准由于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作。通过Web标准展示统一内容Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XHTML、CSS、Javascript等等。制定Web标准的目的？Web标准213结构标准用于对网页元素进行整理和分类，主要包括：HTML、XML和XHTML。结构标准表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS样式。表现标准行为标准是指网页模型的定义及交互的编写，主要指JavaScript，包括：DOM、BOM和ECMAScript。行为标准结构标准表现标准（样式标准）行为标准如果把Web标准看做一栋房子，结构标准就相当于房子的框架。Web标准结构标准表现（样式）标准行为标准表现标准就相当于房子的装修，让房子看起来更美观。表现标准用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。Web标准结构标准表现标准（样式标准）行为标准行为标准相当于房间内部的设备，让房子具有功能性。KTV有唱歌功能厨房有做饭功能行为标准是指网页模型的定义及交互的编写，主要包括两个部分：DOM和ECMAScript。Web标准Web标准HTML、CSS和JavaScript是网页制作的标准语言，要想学好、学会网页制作技术，首先需要对它们有一个整体的认识。Web前端开发三大核心技术Web前端开发三大核心技术超文本标记语言（HyperTextMarkupLanguage，HTML）目前最新的版本是HTML5，把代码重复率很高的功能提取为<header>、<nav>语义化标签等，它的核心理念是将一切新特性与原有功能保持平滑过渡。简化了DOCTYPE和字符集声明。层叠样式表（CascadingStyleSheets,CSS），设置HTML页面各种元素的样式。CSS3是目前CSS规范的最新版本，远离很多JavaScript脚本或者Flash代码，节约成本和提高性能。JavaScript(JS)是一种轻量级、解释型、面向对象的编程语言，主要用于Web前端开发，能为网页添加交互性和动态功能。它最初由网景公司（Netscape）于1995年设计，现由ECMA国际（欧洲计算机制造商协会）标准化，官方名称为

ECMAScript（ES5、ES2025）。前端开发技术入门--HTMLHTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。前端开发技术入门--HTMLHTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。HTML2.01995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。超文本标签语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.011999年12月24日，W3C推荐标准。HTML52014年10月底，W3C宣布HTML5正式定稿，网页进入了HTML5开发的新时代。【总结】HTML语言至今经历了六个版本，过程中新增了许多HTML标签，同时也淘汰了一些标签。前端开发技术入门--CSSCSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（如字体、大小、对齐方式等）、图片外形（如：宽度、高度、边框样式、边距等）以及版面布局等外观显示样式。<styletype="text/css">

p{ font-size:36px; color:red; text-align:center; }</style>字号颜色对齐方式CSS32001年5月23日完成了CSS3的工作草案。CSS21998年5月发布了CSS2。CSS11996年12月W3C发布了第一个CSS版本。前端开发技术入门--JavaScriptJavaScript是网页中的一种脚本语言，其前身叫做LiveScript，由Netscape(网景)公司开发。后来在Sun公司推出著名的Java语言之后，Netscape公司和Sun公司于1995年一起重新设计了LiveScript，并把它改名为JavaScript。JavaScript和Java的关系JavaScript命名最初是受Java启发而来的。因为当时Java非常热门，但LiveScript却籍籍无名，为了让这门新生语言能够更好地传播，Netscape（网景公司）将名字改成了JavaScript。因此JavaScript除了名字和Java比较像之外，其语言风格和Java相去甚远。JavaScript

在设计时并未参考Java，而是参考了Self和Scheme这样的语言。多学一招:前端开发技术入门--JavaScript什么是网站和网页？Web前端开发相关专业术语网站和网页网站和网页淘宝网首页的源代码，这是一个纯文本文件，仅包含一些特殊的符号和文本。而我们浏览网页时看到的图片、视频等，正是这些特殊的符号和文本组成的代码被浏览器渲染之后的结果。特殊的符号和文本图文并茂的页面浏览器渲染网站、网页和首页首页，也叫主页index.html，index、default、main或portal等文件主名加上html、htm、php、jsp或asp等扩展名，中间用.进行分隔。通过超链接网站多个页面集合在一起静态网页和动态网页用户无论何时何地访问，网页都会显示固定的信息，除非网页源代码被重新修改上传。静态网页更新不方便，但是访问速度快。静态网页动态网页显示的内容则会随着用户操作和时间的不同而变化。动态网页可以和服务器数据库进行实时的数据交换。静动混合网页的构成元素网页的相关名词名词名词释义Internet网络就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。WWWWWW（英文WorldWideWeb的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。URLURL（英文UniformResourceLocator的缩写）中文译为“统一资源定位符”

URL其实就是Web地址，俗称“网址”。DNSDNS（英文DomainNameSystem的缩写）是域名解析系统。HTTP和HTTPSHTTP(英文Hypertexttransferprotocol的缩写)中文译为超文本传输协议，是一种详细规定了浏览器和万维网服务器之间互相通信的规则。HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全。WebWeb通常指互联网的使用环境。但对于网站制作者来说，它是一系列技术的复合总称，通常称之为网页。W3C组织W3C（英文WorldWideWebConsortium的缩写）中文译为“万维网联盟”。万维网联盟是国际最著名的标准化组织。Web前端开发工具链简介一、了解Web前端开发涉及的浏览器，全球主流浏览器（市场份额TOP5）：GoogleChrome谷歌、MicrosoftEdge（IE）、AppleSafari、MozillaFirefox火狐、Opera欧朋，国产特色浏览器

：360安全浏览器、搜狗高速浏览器。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。选择建议开发者首选：Chrome（调试工具全）+Firefox（CSS兼容性测试）组合，覆盖98%的兼容性场景；隐私敏感用户：Firefox（开源透明）或Safari（硬件级隐私保护）；生态绑定用户：Windows用户选Edge，Apple用户选Safari；轻量化需求：Opera（内置工具丰富）或国产浏览器（本地化功能强）。浏览器市场已从单纯的“速度竞争”转向“隐私保护+生态整合”，2025年各产品均加速AI功能渗透（如EdgeCopilot、FirefoxAI标签页），用户可根据核心需求（开发/办公/隐私/游戏）选择适配工具。什么是浏览器内核浏览器内核备注IETridentIE、猎豹安全、360极速浏览器、百度浏览器，只能用于Windows平台。FirefoxGecko可以跨平台。SafariwebkitSafari是一款由苹果开发的网页浏览器，是各类苹果设备（如Mac、iPhone、iPad、iPodTouch）的默认浏览器。老版本的谷歌浏览器。ChromeBlink由谷歌公司开发。新版谷歌浏览器。Operablink是一款挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。浏览器内核是浏览器最核心的部分，负责对网页语法的解释并渲染网页（也就是显示网页效果），是渲染引擎（标准叫法）的通俗叫法。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。Web前端开发工具链简介二、了解Web前端开发常用的编辑器，主流首选编辑器（推荐新手/团队协作）：VisualStudioCode（VSCode）、WebStorm，轻量便捷编辑器（适合快速写代码/临时调试）：SublimeText、Atom（GitHub开发的开源免费编辑器），专业重型IDE（适合全栈/大型项目）：IntelliJIDEA（Ultimate版）、Eclipse（搭配前端插件），其他：EditPlus、HBuilder、AdobeDreamweaver（DW）。编辑器选择建议需求场景推荐编辑器核心原因新手入门/主流前端开发VisualStudioCode免费、生态全、上手易、社区支持足中大型前端项目/团队协作WebStorm开箱即用、框架支持好、集成化工作流快速写代码/轻量需求SublimeText启动快、性能好、基础功能实用全栈开发（Java+前端）IntelliJIDEA全栈功能覆盖，无需切换工具Web前端开发工具链简介三、了解Web前端开发常用的切图软件及工具，在Web前端开发中，"切图"是将设计稿（如UI设计图）转化为可实现的前端资源（如图片、图标、尺寸标注等）的关键环节。按功能定位分为「专业设计工具」「辅助切图工具」「在线工具」三大类。1.专业设计工具（直接从设计稿中切图）这类工具本身是UI/UX设计师的主力软件，前端开发者可直接使用它们打开设计源文件，进行精确切图、测量尺寸、获取样式信息（如颜色值、字体大小）等操作。AdobePhotoshop（PS）、AdobeXD、Sketch（macOS专属）、Figma（在线设计工具）2.辅助切图工具（增强效率或处理特殊需求）这类工具不直接用于设计，而是辅助前端开发者从图片中提取资源、标注尺寸或转换格式，适合没有设计源文件（只有图片）的场景。MarkMan（马克鳗）、PxCook（像素大厨）、SnippingTool（Windows）/Snip&Sketch（Windows）/预览（macOS）3.在线切图/转换工具（轻量便捷，无需安装）适合临时处理图片（如格式转换、压缩、简单裁剪），无需下载软件。TinyPNG（）、Convertio（convertio.co）、Remove.bg（remove.bg）Web前端开发工具链简介选择建议场景推荐工具核心原因有设计源文件（PS/XD/Sketch）AdobeXD/Figma自带标注功能，可直接获取CSS样式代码Mac用户+Sketch设计稿Sketch+Measure插件切图效率高，适配Web需求无设计源文件（只有图片）MarkMan/PxCook快速标注尺寸、取色，操作简单团队协作/远程开发Figma在线同步，支持多人实时查看和切图临时压缩/转换图片格式TinyPNG/Convertio无需安装，操作便捷前端切图注意事项格式选择：图标优先用SVG（矢量，无损缩放）；照片用WebP（比JPG/PNG体积小50%+）；简单图形用PNG-24（透明背景）。分辨率适配：导出2x/3x图用于Retina屏幕（通过CSS的image-set或srcset适配不同设备）。自动化趋势：现代工作流中，设计师可通过Figma/Sketch直接导出「前端资源包」（含切图、样式代码），或通过工具（如Zeplin）自动同步到前端，减少手动切图成本。根据团队使用的设计工具和协作模式选择合适的切图软件，能显著提升前端还原设计稿的效率和准确性。Web前端开发工具链简介HBuilderX下载与安装：百度搜HBuilder官网DCloud-数字天堂官网、HBuilderX、HBuilder、uni-app、uniapp...https://www.dcloud.io/创建项目、关闭项目、修改项目别名熟悉Web前端开发工作流程03学习目标/Target熟悉Web前端开发工作流程，需求分析、

项目规划、设计阶段、开发阶段、测试阶段、调试与优化、

部署上线、维护与迭代、文档编写、团队协作。了解Web前端开发的岗位分工，产品经理、交互设计师、视觉设计师、前端工程师、后台工程师和测试人员。了解Web前端项目目录结构，

基础原生项目、主流框架项目（Vue/React）、大型工程化项目

。任务实现：规划网页栏目、提炼关键任务。Web前端开发基本工作流程Web前端开发项目目录结构初识HTML5页面04学习目标/Target熟悉Web前端开发项目目录及文件，img、css、js、index.html。了解网页基本标签结构分析，声明文档类型、<html>标签、<head>标签、设置网页编码、<title>标签和<body>标签。任务实现：修改网页标题、运行、修改网页内容、CSS样式设置

。任务拓展：阿狸小站本地部署及互联网发布。创建第一个网页步骤1步骤2编写HTML代码新建Web前端开发项目<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网页标题</title></head><body><!--这是注释--></body></html>HTML文档是由多种标签组成，HTML5的标准模板：内嵌式用于向浏览器说明当前文档使用的HTML版本标志着HTML文档的开始标志