Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）_课件 项目1 创建非遗项目站点.pptx

项目1创建非遗项目站点信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》网页开发入门

任务1.1认识网页前端技术开发

任务实施二312查看CSS源代码以及网页的变化查看网页的源代码以及网页的显示效果查看Javascript源代码以及网页的变化样式表的网页纯HTML网页有脚本的网页

任务引入一3个内容一样的网页，网页包含一个标题、一个按钮和一个消息文本

任务描述认识网页1.依次打开三个网页，查看网页界面的变化。2.认识HTML5、CSS3和JavaScript在网页开发中的作用。

任务实施二纯HTML代码的网页!DOCTYPEhtmlhtml head metacharset=UTF-8 title纯HTML网页/title /head body h1Hello,World!/h1 buttonid=myButton单击我/button pid=message消息将在这里显示。 /p /body/html

任务实施二有样式表的网页styletype=text/cssbody{ background-color:aquamarine;}button{ padding:10px20px; font-size:16px; background-color:blanchedalmond; border:1pxsandybrownsolid;}#message{ font-size:18px; color:red;}/style

任务实施二加脚本的网页scripttype=text/javascriptfunctionclickButton(){ varmessageElement=document.getElementById(message); messageElement.innerText=按钮被单击了!; messageElement.style.color=blue;}/script

感谢观看信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

网页和网站概述信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备网页概述1HTTP协议2URL地址3网站概述4

01网页概述前端技术开发

网页概述前端技术开发01网页定义网页是构成网站的基本元素，是承载各种网站应用的平台，通过链接可以从一个页面跳转到另一个页面。网页功能网页具有信息展示、用户交互、数据传递等多种功能，是互联网信息传播和交流的重要工具。

网页概述前端技术开发01网页组成要素文字网页中的文字是传递信息的主要方式，包括标题、段落、列表等多种形式。图片网页中的图片可以丰富页面内容，提高用户体验，包括静态图片和动态图片。动画动画可以使网页更加动态和吸引人。可以是GIF动画，也可以是CSS或JavaScript动画。视频视频是多媒体元素中最为生动的一种。通过视频，网页可以展示教学内容、广告宣传等。

网页概述前端技术开发01网页分类静态网页是事先编写好的HTML文件，内容相对稳定，用户访问时直接从服务器上获取。静态网页动态网页可以根据用户请求动态生成内容，具有更强的交互性和实时性。动态网页0102

02HTTP协议介绍前端技术开发

HTTP协议介绍前端技术开发02HTTP（HyperTextTransferProtocol，超文本传输协议）是一种用于传输超文本（如HTML）的协议，它在互联网上应用非常广泛，构成了WWW（WorldWideWeb，万维网）的基础。定义HTTP协议用于从Web服务器传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等。作用

HTTP协议介绍前端技术开发02InternetWeb服务器客户机(浏览器)home.html用户通过浏览器访问某个网页后，浏览器和Web服务器执行以下动作：HTTP1浏览器与服务器建立TCP连接(80端口)2浏览器请求文档：GET/home.html3服务器作出响应，将文档home.html发送给浏览器4释放TCP连接5浏览器显示home.html中的内容TCP连接建立TCP连接请求文档HTTP请求报文响应文档HTTP响应报文释放TCP连接

03URL地址前端技术开发

URL地址前端技术开发03URL功能通过URL可以访问互联网上的各