整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
门子PLC S7-1200有个web页面发布的功能，这个功能好像很少有人提及它的使用，我也只是偶尔用来监控一下PLC变量，因为打开TIA14确实有点慢。
但是这个功能**不是什么鸡肋，因为它可以发布用户自定义的页面，而且页面可以加载javas cript，这就使得它的功能跟火箭一样一飞冲天了，不过SIEMENS的**文档也说了，*好不要靠这个功能来代替专业的HMI软件，毕竟它的实时性和安全性还是有待斟酌的。
但是在产品调试阶段还有测试阶段，这个功能确实很值得一用，因为它很方便实现也很容易让不懂PLC系统的测试人员无门槛上手，毕竟打开浏览器这个操作人人都会。
实现起来很简单，网上的英文文档也很多，介绍的很详细，所以这里就不详细说怎么实现了，只是说一说基于主流的CSS框架来使页面制作的更容易和更美观一些，还有就是在实际编写过程中遇到的一些问题
在实际开始进行web功能编写前，需要先规划一下需要展示几个页面和页面的布局，这里介绍一个网站layoutit，这个完全可视化的网站可以进行拖放操作实现网页布局，布局后的html代码可以下载下来直接使用，使用的CSS框架是主流的bootstrap，可以说页面的美观程度完全不用操心，**主流，下面是我用它生成的一个网页结构，之后下载到PLC后，浏览器中打开的样子.
网页结构完成后，就可以放入PLC的变量了，这里其实没什么特别要说的，变量是通过在整个html文件开头通过AWP进行所谓的声明，之后在网页中进行使用
从PLC进行读操作的变量通过
<!--AWP_Out_Variable Name='"此处填写变量名"'-->从PLC进行写操作的变量通过
<!--AWP_In_Variable Name='"此处填写变量名"'-->这里要注意引号的使用，如果是内存变量M，或者Q，I之类的输入输出变量，就是通过单引号外加双引号将它括起来，像这样
‘“此处填写变量名”‘
但是如果是DB块的变量，就需要像这样
‘“DataBloack名称”.变量名称’
实际的使用中，无非也就几种操作，
基本这三种操作就能实现大部分功能，其他的诸如枚举变量，数组显示我都很少用到，大家自己研究吧
这个功能通过表单的POST方法实现
<form method="POST" action="" align="right">
<input type="submit" value="开始测试" class="btn btn-primary btn-sm">
<input type="hidden" name='"AI_TEST_Start_Stop"' value="1"></form>第1，2，4行可以原封不动的敲进去，因为没有任何功能性的东西，都是一些显示和样式，只有第三行比较重要，其中name后面是PLC的变量名，value是给这个变量写入1，这个就实现了按下按钮，这个变量置1的操作，那怎么置0呢，把value改成0就行了。
这个功能*简单，在需要显示变量的地方插入代码
<td class="font-weight-bold">:="200asModbusMaster_DB".ModbusMaster_6:</td>两边尖括号的东西可以忽略，只要注意尖括号内部的代码就行，这是显示的是DB块变量，显示变量的时候可以不需要单引号，但是两端都要有冒号。
这个和按下按钮控制变量的实现机制是一样的，只不过需要有个输入框
<form method="POST" action="">
<input type="text" name='"1200asModbusSlave_DB".ModbusSlave_7'>
<input type="submit" class="btn btn-success btn-sm" value="输入700"></form>可以看到第2行type是text，这就是那个输入框，这里面的数值是赋给name的，name后面的变量就是PLC里面的变量，这里需要有单引号，第三行是通过一个按钮实现提交动作，也就是按下按钮后，1200asModbusSlave_DB”.ModbusSlave_7就写入你输入的那个值了
再来说一种，有些时候希望一个Bool变量不是单纯的在网页端显示1或者0，而是能用图形来进行显示，这个也是可以实现的
<img src='Images/Lamp0:="TestFinished":.png' />这个HTML代码正常的样子其实是这样的
<img src='Images/Lamp00.png' />或者<img src='Images/Lamp01.png' />发现一些端倪了吧，其实就是用Bool变量来替换Lamp0x后面的这个x，0的时候就是Lamp00.png，1的时候就是Lamp01.png，这两张图片是这样的
*后是这个样子的
1.1页面基础元素：<html>
<html>是页面的基础元素，主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>（开头标记为<>,结束标记为</html>）先介绍一下完整的HTML文件的基本结构
<html> 文件开始标记
<head> 文件头开始标记
......... 文件头部分的内容
</head> 文件头结束标记
<body> 文件主体开始标记
......... 文件主题部分的内容
</head> 文件主题结束标记
</html> 文件结束标记
在<html>和</html>之间写入想要编辑的页面内容就构成了一个简单的页面
1.1.1 文本显示方向属性：dir
【作用与语法】dir属性用来指定浏览器文本显示的方向，同时也决定浏览器滚条的位置。dir属性的语法结构如下
<html dir="浏览器中文本的方向">......</html>(在元素名称和属性之间要加入空格)
dir属性可以取两个值，ltr（left title right）和rtl（right title left），分别表示从左向右显示和从右向左显示
1.1.2 指定语言属性：lang
【作用与语法】lang属性用来指定文档中所使用的语言。lang属性的语法结构如下
<html lang="指定的语言">包含的内容部分</html>
lang属性的取值可以使用ISO标准中的语言代码。在<html>元素中加入lang属性，使浏览器更好的显示界面，并不会更改页面的文字编码
ISO标准中语言代码的取值及含义语言名称写法语言名称写法英语en法语fr汉语zh德语de日语ja意大利语it
1.2 页面头部元素：<head>
【作用与语法】HTML的头部元素是以<head>为开始标记，以</head>为结束标记。它用于包含当前文档的相关信息，可包含<title>元素、<meta>元素等，分别用来定义页面的标题、编码。使用<head>元素可以将基本信息部分和页面主体内容区分开来。<head>元素的语法结构如下
<head>......</head>
1.3 页面标题元素：<title>
【作用与语法】HTML页面的标题一般是用来说明页面用途的，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在页面的头部，也就是<head>和</head>之间。<title>元素的语法结构如下。
<title>......</title> (说明：在标记中间的“......”就是标题的内容，它位于HTML文档的头部，即<head>和</head>之间)
1.4 元信息元素：<meta>
【作用与语法】元信息元素<meta>用来定义页面的附加信息，其中包括页面的作者、版权、关键字等相关信息。<meta>元素的语法结构如下。
<meta 属性=“属性值”/>
<meta>元素是一个自封闭的元素，通过其中的属性来添加各种附加信息。<meta>元素在不适用任何属性时，对页面没有影响。
1.4.1 元信息元素名称属性：name
【作用与语法】name属性用来制定文档中附加信息的名称。例如，最常用的值“keywords”用来定义文档中的关键字，方便搜索引擎的搜索。name属性的语法结构如下。
<meta name="信息名称"/>
在<meta>元素中，名称必须对应有相关的值才能生效
1.4.2 元信息元素的值：content
【作用与语法】content属性用来指定文档中附加信息的值，它与name属性成对出现。content属性的语法结构如下
<meta name="信息名称" conten="附加信息的值"/>
<meta>元素中所定义的“keywords”信息是用来为搜索引擎定义关键字的，所以对页面显示效果并不产生影响，故页面显示效果并无太大变化
1.4.3 元信息元素的附加属性：http-equiv
【作用与语法】http-equiv属性和name属性类似，用来指定附加信息的名称。在浏览器加载页面之前，服务器会把http-equiv属性定义的相关信息发送给浏览器，便于在浏览器中正确显示页面。http-equiv属性的语法结构如下
【作用与语法】<meta http-equiv="信息名称"，content="附加信息的值">
说明：和name属性相似，http-equiv属性一般要和conten属性成对出现
1.4.4 定义页面的跳转
【作用与语法】在浏览器网页的时候经常会看到一些欢迎信息的页面，并经过一段时间后，这一页面会自动转到其他页面，这就是网页的跳转。使用HTML中的HTTP代码就可以很轻松的实现这一功能。页面跳转的语法结构
<meta http-equiv="refresh" content="跳转时间"；url="链接地址">
说明：在该语法中，refresh表示网页的刷新，而在content中则设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的
1.5 基本设置元素：<base>
在HTML中，基本设置元素<base>使用来定义相对路径的根目录。使用<base>元素，可以方便的定义页面中的超级链接。语法结构如下
<base 属性="属性值"/>
<base>元素在不使用任何属性时，对页面没有影响。<base>元素中可以使用的属性有链接路径属性href和链接窗口属性target
1.5.1 链接路径属性：href
【作用与语法】href属性用来指定文档中相对链接的根目录。文档中的所有链接(包括图片、音频等内容)都按照href属性所指定的根目录显示。href属性的语法结构如下
<base href="指定路径">包含的内容部分</base>
href属性的取值为url值。它可以使用绝对路径，也可以指
向某个文件夹。
1272208556@qq.com
1、HTML + CSS + UI
2、Javascript
3、HTML5CORE + AJAX + Jquery
4、Bootstrap,Angular JS + 其他框架
1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO
======================================================
1、Internet
1、什么是Internet
是全球性计算机互联网络,是由若干终端(PC,移动端)以及特殊的传输介质而组成的一个网络结构
PC:Personal Computer
2、提供的服务
信息共享
Telnet : 远程连接
Email : 电子邮件
WWW : 万维网 www.baidu.com
BBS : 电子公告板 ，论坛
FTP : 上传和下载服务
3、实现技术
1、分组交换原理:数据通过数据包进行传递，到达目的地后，对数据包进行重组
2、TCP/IP 协议簇
2、WEB
1、什么是WEB
就是 WWW（World Wide Web）
w3c : www consortium 万维网联盟
2、能干什么
能够将各类的信息和服务进行连接，提供图形用户界面
信息:文字、图片、音频、视频
服务:Telnet, FTP , Mail , HTTP ...
3、万维网就是无数的文档集合（网页文档）,文档会驻留在世界（互联网）的任何一个角落
3、WEB的工作原理
WEB是基于Internet的多媒体信息服务系统
1、基于 浏览器 / 服务器 模式
B / S : Browser / Server
在服务器上，主要以网页的形式发布多媒体信息
2、由WEB服务器、浏览器、通信协议组成
3、WEB 相关技术
1、服务器端技术（后台）
PHP,JSP,ASP 。。。 。。。
2、客户端技术(前端技术)
HTML,
CSS,
Javascript
=========================================================
1、HTML 入门
1、什么是HTML
HTML(Hyper Text Markup Language),超级文本标记语言
超文本:
a
标记 : 超文本都是由标记组成的
<a>
语言 : 包含自己独特的语法
HTML最终由浏览器负责解释
HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript
2、HTML版本
超级文本标记语言（第一版）
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0
HTML5
3、标签(标记)
1、标签语法
1、必须使用尖括号扩起来
<a>,<div> ...
<A>,<a>
2、有封闭类型的标签，也有非封闭类型的标签
1、封闭类型
也称作双标记，则必须成对出现
<标记>文本内容</标记>
不同的标记，决定了"文本内容"的不同表现形式
eg:<a></a>,<p></p>,<div></div>
2、非封闭类型
也称作单标记、空标记
<标记>
或者
<标记/>
eg:
<hr>,<br>,<img>
3、元素
标记就是元素，元素也称为标记
4、元素嵌套(标签嵌套)
标签之间相互嵌套，形成复杂的语法结构
<body>
<p>
<a></a>
</p>
</body>
5、属性
属性是出现在开始标记中的内容,作用是修饰元素
<p 属性名="属性值"></p>
<p 属性名='属性值'></p>
<p 属性名=属性值></p>
标准属性:每个元素都会具备的通用属性
id : 定义每个标签的唯一标识
title:提示文本
class:样式相关，类样式
style:样式相关，行内样式
操作1：定义一对p标签，id属性设置为program
<p id="program"></p>
多属性:
<p 属性1="值" 属性2="值"></p>
注意：多属性之间，排名不分先后
2、创建HTML文档
开发工具:任何一个文字编辑软件都可以开发HTML
EditPlus ： 超级记事本
运行环境:任何一个浏览器都能运行HTML
Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera
超文本文件(HTML文档):
是一个以.html或.htm结尾的文档
3、文档结构
1、文档类型声明
声明使用的html版本和风格
<!doctype html>
2、html页面
1、文档根元素
每个文档有且仅有一对根元素 , html
2、在根元素的内部，包含两对子元素
1、head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件
2、body : 页面的主体内容
任何一个标签，都可能会出现在body中
3、head元素
1、声明网页标题
<title></title>
2、定义网页文本编码格式
默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
3、... ...
4、body元素
属性:
text : 文本的颜色
bgcolor : 背景颜色
练习1:
1、为body添加两个属性，text，bgcolor
2、文本颜色 : 红色(red)
背景颜色 : 银色(silver)
3、在body中随意写上一段文本，观察页面显示效果
5、文本标记
1、特殊的文本
转义字符:
空格:
< : < less than
> : > greater than
版权标识:©
2、文本标记
1、文本样式
<b>...</b> : 加粗文本
<i>...</i> : 斜体文本
<u>...</u> : 下划线
<s>...</s> : 删除线
<sup>...</sup> : 上标
<sub>...</sub> : 下标
2、标题元素
1-6级6个标题
<hn></hn> n:1-6
一级最大
六级最小
3、段落元素
提供了结构化文本的表现方式
语法:<p></p>
注意：
1、每对p标签单独成一个段落
2、段落与其他元素有垂直空白，段落间距
常用属性:
align : 水平对齐方式
取值:left center right
4、换行元素
在代码的任何位置处，实现回车的效果
<br />
5、水平线
又叫分割线
<hr />
属性:
1、size : 水平线的粗细，通常以像素(px)为单位
2、width: 宽度
3、align: 水平线的水平对齐方式
4、color: 颜色
6、分区元素
目的：为元素进行分组，多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意：
div ：主要用在布局上
span：修改其内部内容的样式
7、预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3、注释
可以写在html源码中，但不被浏览器解释的文本
语法:
<!-- 注释内容 -->
4、行内元素与块级元素
块级元素:默认情况下，块级元素独占一行，元素的前后都会自动换行 div,hn,hr,p
块级元素作用:布局
行内元素:默认情况，多个元素位于同一行，不会换行
span,文本标记... ...
行内元素作用:修改内部内容的样式
*请认真填写需求信息，我们会在24小时内与您取得联系。
