5.3 Web前端开发基础.pptxVIP

项目5 ThingsBoard开发平台应用——Web前端开发基础

01Web前端开发基本概念02HTML基础Web前端开发基础03JavaScript基础

Web前端开发基本概念Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需求。Web开发分为前端（Front-end）和后端（Back-end）两部分，后端指的是程序、数据库和服务器层面的开发，而前端则指直接与用户接触的网页，如布局、特效、交互等的开发。前端开发的主要工作是把UI（UserInterface，用户界面）的设计图按照W3C标准做成HTML页面，用CSS进行布局，并且用JavaScript脚本语言实现页面上的前端互动。互动效果包括弹出层、页签切换、图片滚动、Ajax异步互动等。由于ThingsBoard平台重点是JavaScript代码开发，所以这里主要介绍JavaScript基础。

HTML基础1．HTML文件结构我们可将HTML文档分为头部和主体两部分。其中，文档头部使用head元素进行定义。head元素是所有头部元素的容器。head中的元素可以设定文档标题、提供元信息、指定样式表，甚至引用脚本等。不过，绝大多数文档头部包含的数据都不会真正作为内容显示给读者。文档主体使用body元素进行定义。body元素定义文档的主体，即用户可以在移动页面上直接看到的内容，基本包含文档呈现的所有内容，例如文本、超链接、图像、表格和列表等。!DOCTYPEhtmlhtml head /head body /body/html

HTML基础2．文本控制标记（1）标题标记：hi标题/hi，其中i表示标题级数，取值范围为1到6之间的正整数。（2）段落标记：p段落内容/p。（3）换行标记：br，用于定义文本从新的一行显示，它不产生一个空行，但连续多个的br标记可以产生多个空行的效果。br标记是非成对标记。（4）水平线标记：hr，用于产生一条水平线，以分隔文档的不同部分。

HTML基础（5）字形标记：详见表。标记含义b.../b粗体标记i.../i斜体标记big.../big大字体标记small.../small小字体标记u.../u下划线标记sup.../sup上标标记sub.../sub下标标记strong.../strong斜体加T体标记mark.../mark定义带有记号的文本

HTML基础（6）div标记，用来排版大块HTML段落，设置多个段落的文本对齐方式等。（7）span标记，用来组合文档中的行内元素，使用方法和div标记基本相同。（8）图像标记：img，是一个单标记，规范的图像标记语法格式如下：img属性=”属性值”。（9）超链接标记：a标记可以实现网页超链接，基本语法结构如下：ahref=URL网页元素/a，其中href属性指定超链接所要链接的地址。

JavaScript基础1．JavaScript引入方式想要在HTML中引入JavaScript，一般有3种方式。（1）外部JavaScript，指的是把HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码。外部JavaScript是最理想的JavaScript引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都会使用外部JavaScript。语法：

JavaScript基础!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title/title!--1.在head中引入--scriptsrc=”index.js”/script/headbody!--2.在body中引入--scriptsrc=index.js/script/body/html

JavaScript基础（2）内部JavaScript，指的是把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在script/script标签对内。语法：!DOCTYPEhtmlhtmlheadmetacharset=utf-8/title/title!--1.在head中引入--script……/script/headbody!--2.在body中引入--script……/script/body/html

JavaScript基础（3）元素属性JavaScript，指的是在元素的“事件属性”中直接编写JavaScript或调用函