整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
門子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小時內與您取得聯系。
