《终端数据可视化》课件——3 Web基础.pptxVIP

;单元描述;;1.前端开发常用工具;1.前端开发常用工具;1.前端开发常用工具;2.HTML+CSS基础;由于div元素是网页中最常用的一个元素，CSS能够轻松的对其进行定位，因此目前DIV+CSS技术是最常用的网页布局技术，在实时监测页面中就采用DIV+CSS实现。

可以把div元素看成一个矩形区域的容器，在这个容器内可以存放其它HTML元素，也包括div元素，即div元素是可以嵌套的。借助于CSS样式，能够把div元素放置在网页的任何位置，实现网页的精致排版。;CSS指层叠样式表，英文为CascadingStyleSheets，主要是为了解决内容与表现分离的问题，从而提高工作效率。CSS格式设置规则由两部分组成：选择器和声明。声明由属性（如text-decoration）和值（如none）两部分组成。

根据运用样式表的范围是局限在当前网页文件内部还是其他网页文件，可以分为内联样式、内部样式表和外部样式表。;CSS中的选择器通常是需要改变样式的HTML元素，选择器可以分为id选择器、类选择器、属性选择器等。灵活的运用选择器可以精简样式表的代码。

元素选择器

CSS的元素选择器是最常见的选择器，又称之为类型选择器，它匹配文档语言元素类型的名称，如p、a、h1，甚至HTML本身都是。;id选择器

id选择器可以为有id属性的HTML元素指定特定的样式，CSS中id选择器以“#”来定义。

注意：

①id属性的值是唯一的，在一个HTML文档中只能出现一次。

②id属性不要以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。;类选择器与多类选择器

类选择器也可以叫做class选择器，用于描述一组元素的样式，class选择器有别于id选择器，可以在多个元素中使用。在CSS中，类选择器以一个点“.”号开始，点号后是类选择器的名称；在HTML中则是通过class属性调用类选择器名来表示该元素应用了此样式。

在HTML中，一个class值中可能包含一个词列表（即多个样式），各个词之间用空格分隔。通过词列表可以将不同的CSS样式效果同时运用到一个元素中，而且可以重复运用，减少了重复代码的编写，提高了编写代码的效率。;后代选择器

如下的.datav-item.datav-title这种选择器的写法称为后代选???器或包含选择器，用于选取某元素的后代元素。通过定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。;锚伪类

在支持CSS的浏览器中，链接包括活动状态、已被访问状态、未被访问状态和鼠标悬停状态四种状态，这四种状态都可以用不同的方式显示即锚伪类。

注意：

①在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。

②在CSS定义中，a:active必须被置于a:hover之后，才是有效的。

③伪类名称对大小写不敏感。

④当用户只写一个a元素的样式时，超链接的4种状态样式就统一了。;选择器分组

在CSS中有时会遇到如下情况，有多个元素需要设同一个样式效果，如在本页面的CSS代码中要求将body、div、span、a、img、input、p这些元素的外边距和内边距均为0，可以如左的写法。这样写后会发现，这些样式除了选择器不同，其花括号中的内容都是相同的，如果采用选择器分组的方法写就如右。显然这种将多个选择器放在规则左边，然后用逗号分隔，并在右边则定义样式方法更为简便。;JavaScript通常内嵌在HTML页面中运行，与页面同时被浏览器加载和运行，在HTML页面中使用script……/script标签引入JavaScript脚本。但当JavaScript的代码太多时，不但增加了网页文件的容量也增加了阅读网页代码的难度。这里可以将代码写在以.js命名的脚本文件中，然后再将其引入网页文件中。;函数是JavaScript中最常用功能之一，它可以避免相同功能代码的重复编写，将程序中的代码模块化，提高程序的可读性，减少开发者的工作量，便于后期的维护。

函数用于封装一段完成特定功能的代码。可重复使用的且拥有名称。JavaScript有3种声明函数的方法，其中function命令和函数表达式这两种方法最为常用。;文档树（DocumentObjectModel）是HTML页面的层级结构，它由元素、属性和文本组成，它们都是一个节点（Node），就像公司的组织结构图一样。;任务3.1搭建开发环境;在本项目的开发中，采用VSCode工具进行网页的搭建。任务实施将先从VSCode的下载与安装，认识VSCode界面以及运用VSCode创建网页文件来熟悉该开发工具。;（1）VSCode下载与安装

code.visua