整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML基礎(chǔ)

          TML的作用

          HTML是用來開發(fā)網(wǎng)頁的,它是開發(fā)網(wǎng)頁的語言

          HTML的定義

          全稱HyperText Mark-up Language,超文本標(biāo)記語言

          標(biāo)記就是標(biāo)簽

          <標(biāo)簽名稱></標(biāo)簽名稱> 比如 <html></html> <h1></h1>等,標(biāo)簽大多數(shù)都是成對出現(xiàn)的。

          超文本 兩層含義:

          1. 因為網(wǎng)頁中還可以有圖片、視頻、音頻等內(nèi)容(超越文本限制)
          2. 它還可以在網(wǎng)頁中跳轉(zhuǎn)到另一個網(wǎng)頁,與世界各地主機(jī)的網(wǎng)頁鏈接(超鏈接文本)

          HTML的基本結(jié)構(gòu)

          <!DOCTYPE html>
          <html>
              <head>
                  <meta charset="UTF-8">
                  <title>網(wǎng)頁標(biāo)題</title>
              </head>
              <body>
                  網(wǎng)頁顯示內(nèi)容
              </body>
          </html>

          第一行<!DOCTYPE html>是文檔聲明

          用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔

          <html>...</html>標(biāo)簽是開發(fā)人員在告訴瀏覽器

          整個網(wǎng)頁是從<html>這里開始的,到</html>結(jié)束

          也就是html文檔的開始和結(jié)束標(biāo)簽

          <head>...</head>標(biāo)簽用于定義文檔的頭部

          是負(fù)責(zé)對網(wǎng)頁進(jìn)行設(shè)置標(biāo)題、編碼格式以及引入css和js文件的

          <body>...</body>標(biāo)簽是編寫網(wǎng)頁上顯示的內(nèi)容

          網(wǎng)頁文件的后綴是.html, 一個html文件就是一個網(wǎng)頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁

          VS Code 安裝

          VS Code全拼是 Visual Studio Code 是由微軟研發(fā)的一款免費、開源的跨平臺代碼編輯器

          目前是前端(網(wǎng)頁)開發(fā)使用最多的一款軟件開發(fā)工具

          下載網(wǎng)址: https://code.visualstudio.com/Download

          選擇對應(yīng)的安裝包進(jìn)行下載:

          安裝一切默認(rèn)

          VS Code 的插件安裝

          • Chinese(Simplified) Language Pack for VS Code 中文漢化包
          • open in browser 右擊在瀏覽器打開html

          常用的HTML標(biāo)簽

          1 標(biāo)簽不區(qū)分大小寫,但是推薦使用小寫

          2 根據(jù)標(biāo)簽的書寫形式,標(biāo)簽分為雙標(biāo)簽(閉合標(biāo)簽)和單標(biāo)簽(空標(biāo)簽) 2.1 雙標(biāo)簽是指由開始標(biāo)簽和結(jié)束標(biāo)簽組成的一對標(biāo)簽,這種標(biāo)簽允許嵌套和承載內(nèi)容,比如: div標(biāo)簽 2.2 單標(biāo)簽是一個標(biāo)簽組成,沒有標(biāo)簽內(nèi)容, 比如: img標(biāo)簽

          標(biāo)簽的使用形式

          1. 成對出現(xiàn)的標(biāo)簽
          2. 標(biāo)簽的嵌套
          3. 單個出現(xiàn)的標(biāo)簽
          4. 帶屬性的標(biāo)簽


          列表標(biāo)簽

          1. 無序列表標(biāo)簽(ul標(biāo)簽)
          2. 有序列表標(biāo)簽(ol標(biāo)簽)

          網(wǎng)頁效果

          表格標(biāo)簽

          <table>標(biāo)簽:表示一個表格

          <tr>標(biāo)簽:表示表格中的一行

          <td>標(biāo)簽:表示表格中的列

          <th>標(biāo)簽:表示表格中的表頭

          屬性設(shè)置

          border: 1px solid black:設(shè)置邊框和顏色

          border-collapse: collapse:設(shè)置邊框合并



          網(wǎng)頁效果

          表單標(biāo)簽

          表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

          <form>標(biāo)簽 表示表單標(biāo)簽,定義整體的表單區(qū)域

          一個表單中有很多信息組成,比如 姓名,愛好,地址等,這些內(nèi)容有很多其他標(biāo)簽來承載

          這些標(biāo)簽稱為表單元素標(biāo)簽

          網(wǎng)頁效果

          表單提交

          表單用于搜集不同類型的用戶輸入的數(shù)據(jù),然后可以把用戶數(shù)據(jù)提交到web服務(wù)器

          • action屬性 設(shè)置表單數(shù)據(jù)提交地址
          • method屬性 設(shè)置表單提交的方式,一般有“GET”方式和“POST”方式, 不區(qū)分大小寫

          兩種方式的區(qū)別:

          • “GET”方式 : 沒有請求體
          • “POST”方式 : 有請求體

          表單元素屬性設(shè)置

          • name: 表單元素的名稱,用于作為提交表單數(shù)據(jù)時的參數(shù)名
          • value: 表單元素的值,用于作為提交表單數(shù)據(jù)時參數(shù)名所對應(yīng)的值

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <meta http-equiv="X-UA-Compatible" content="ie=edge">

          <title>Document</title>

          </head>

          <body>

          <!--

          姓名 type="text" 定義單行文本輸入框

          密碼 type="password" 定義密碼輸入框

          性別 type="radio" 定義單選框

          愛好 type="checkbox" 定義復(fù)選框

          照片 type="file" 定義上傳文件

          個人描述 <textarea></textarea> 定義多行文本輸入框

          地址 <select></select> 定義下拉列表

          提交 type="submit" 定義提交按鈕

          重置 type="reset" 定義重置按鈕

          按鈕 type="button" 定義一個普通按鈕

          -->

          <form action="http://192.168.1.106:8080" method="POST">

          <label>姓名:</label>

          <input type="text" name="username" >

          <br>

          <label>密碼:</label>

          <input type="password" name="password">

          <br>

          <label>性別:</label>

          <input type="radio" name="sex" value="1">男

          <input type="radio" name="sex" value="0">女

          <br>

          <label>愛好:</label>

          <input type="checkbox" name="like" value="睡覺">睡覺

          <input type="checkbox" name="like" value="吃飯">吃飯

          <input type="checkbox" name="like" value="打豆豆">打豆豆

          <br>

          <label>照片:</label>

          <input type="file" name="pic">

          <br>

          <label>個人描述:</label>

          <textarea name="desc"></textarea>

          <br>

          <label>地址:</label>

          <select name="addr">

          <option value="1">北京</option>

          <option value="2">上海</option>

          <option value="3">廣州</option>

          <option value="4">深圳</option>

          </select>

          <br>

          <input type="submit" value="提交">

          <input type="reset" value="重置">

          <input type="button" value="按鈕">

          </form>

          </body>

          </html>


          點擊提交:

          可以看到服務(wù)器收到了請求報文。

          時的工作中常會遇到一些系統(tǒng)集成的需求,需要在軟件平臺集成視頻監(jiān)控系統(tǒng)。而軟件開發(fā)者往往不懂安防弱電系統(tǒng),不知道如何在自己的軟件界面中集成一些監(jiān)控的實時畫面。而監(jiān)控廠家提供的SDK比較復(fù)雜,很難在短時間完成集成的任務(wù)。最終導(dǎo)致軟件平臺的一些功能無法實現(xiàn),影響項目的質(zhì)量。

          本文提供的方法主要基于VLC播放器的ActiveX插件,通過這個插件,在網(wǎng)頁中調(diào)用攝像機(jī)的RTSP流,實現(xiàn)圖像的實時預(yù)覽,音頻的監(jiān)聽等等功能。文章以海康的IP網(wǎng)絡(luò)攝像機(jī)為例給出具體的調(diào)用方法,供大家學(xué)習(xí)參照。

          VLC軟件下載

          登錄VLC官網(wǎng) https://www.videolan.org/,選擇windows(32位)版本下載。

          下載VLC軟件

          VLC軟件安裝(務(wù)必勾選插件)

          運行安裝文件

          選擇軟件安裝位置

          一定記得要勾選網(wǎng)頁瀏覽器插件

          完成安裝

          網(wǎng)頁編輯

          可選用記事本(notepad)或?qū)I(yè)的編輯器,輸入如下代碼,保存為html網(wǎng)頁文件。

          <html>
          <body>
          
          <title>TESTVDEIO-1-TEST</title>
          <head>
          <table>
                      <tbody>
                      <caption>視頻監(jiān)控演示</caption>
                  <tr>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
              <param name='volume' value='50' />
              <param name='autoplay' value='true' />
              <param name='loop' value='false' />
              <param name='fullscreen' value='false' />
              <param name='controls' value='false' />
                      </td>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
              <param name='volume' value='50' />
              <param name='autoplay' value='true' />
              <param name='loop' value='false' />
              <param name='fullscreen' value='false' />
              <param name='controls' value='false' />
                      </td>
                  </tr>
                   <tr>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.89:554/h264/ch1/main/av_stream' />
              <param name='volume' value='50' />
              <param name='autoplay' value='true' />
              <param name='loop' value='false' />
              <param name='fullscreen' value='false' />
              <param name='controls' value='false' />
                      </td>
                      <td>
                      <object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410">
              <param name='mrl' value='rtsp://admin:q66668888@172.16.200.88:554/h264/ch1/main/av_stream' />
              <param name='volume' value='50' />
              <param name='autoplay' value='true' />
              <param name='loop' value='false' />
              <param name='fullscreen' value='false' />
              <param name='controls' value='false' />
                      </td>
                  </tr>
              </tbody>
          </table>
                      </object>
          </body>
          </html>

          代碼編輯截圖

          海康威視RTSP調(diào)用格式


          具體請參看海康專業(yè)文檔

          瀏覽器測試

          先用Google Chrome瀏覽器測試,提示插件不支持。

          Chrome瀏覽器提示插件不受支持

          用微軟IE測試,需要安裝插件。

          IE瀏覽器提示要安裝ActiveX插件

          確認(rèn)安裝插件

          瀏覽器只顯示了第一個畫面。

          IE瀏覽器顯示不完整

          用編輯器測試,2種內(nèi)核都能正常顯示。

          編輯器里測試效果

          改用360瀏覽器,呈現(xiàn)2X2的畫面,實現(xiàn)最終的顯示效果。

          360瀏覽器顯示的最終效果圖

          結(jié)語

          本文參考了一些專業(yè)文章,就不一 一列出了,在這一并謝過!

          由于本人水平有限,有不對的地方敬請指正。文章旨在拋磚引玉,通過討論,相互學(xué)習(xí),共同進(jìn)步。


          我是WoNew弱電蝸牛,一名從業(yè)多年的弱電工程師,在頭條傳播弱電專業(yè)知識和行業(yè)信息,分享工作中的經(jīng)驗和心得。
          喜歡我的文章或視頻,歡迎點贊和轉(zhuǎn)發(fā)。有疑問或建議,也歡迎留言,我會盡力解答。

          html圖像

          在htmtl中,圖像由<img>標(biāo)簽定義.<img>是空標(biāo)簽,它只包含屬性,并且沒有閉合標(biāo)簽.

          要在頁面上顯示圖像,使用源屬性(src).源屬性的值是圖像的url地址(統(tǒng)一資源定位符).

          定義圖像的語法是:

          <img src="url"/>

          url指存儲圖像的位置.

          <html>

          <head>

          <title>first page</title>

          </head>

          <body>

          <img src="logo.png" alt=" "/>

          </body>

          <html>

          ●如果圖像無法顯示,則alt屬性用來為圖像定義一串預(yù)備的可替換的文本.alt屬性是必需的.

          height(高度)與width(高度)屬性用于設(shè)置圖像的高度與寬度.該屬性值可以以像素百分比形式指定,默認(rèn)單位為像素

          <html>

          <head>

          <title>first page</title>

          </head>

          <body>

          <img src="logo.png" height="100px" width="100px" alt=" "/>

          <!--或者-->

          <img src="logo.png" height="80%" width="80%" alt=" "/>

          </body>

          </html>

          ●<img>的border屬性規(guī)定圖像周圍的邊框的寬度.默認(rèn)情況下,圖像是沒有邊框的

          border屬性的屬性值的單位是像素.表示邊框的寬度

          實例:帶有2個像素粗邊框的圖像.

          <img src="logo.png" height="100px" width="100px" border="2" alt=" " />

          二 html鏈接

          html使用標(biāo)簽<a>來設(shè)置超文本鏈接.

          超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,你可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分.

          在標(biāo)簽<a>中,使用href(hyper text reference)屬性來描述鏈接的目標(biāo)地址

          鏈接的html代碼很簡單.格式如下:

          <a href="url">鏈接文本</a>

          上邊的代碼顯示為:鏈接文本(鏈接文本下面有下劃線)

          ●使用target屬性,你可以規(guī)定在何處打開鏈接文檔.如果給target屬性賦值_blank,將使鏈接在新窗口或新選項卡中打開.

          <a href="url" target="_blank">鏈接文本</a>

          三 html列表

          無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進(jìn)行標(biāo)記

          無序列表使用<ul>標(biāo)簽,與<li>標(biāo)簽一起使用(unordered list)

          <ul>

          <li>咖啡</li>

          <li>茶</li>

          <li>牛奶</li>

          </ul>

          瀏覽器顯示效果如下:

          有序列表也是一列項目,列表項目使用數(shù)字進(jìn)行標(biāo)記.

          有序列表始于<ol>標(biāo)簽,每個列表項目始于<li>標(biāo)簽.

          <ol>

          <li>咖啡</li>

          <li>菜</li>

          <li>牛奶</li>

          </ol>

          運行效果如下:

          四 html表格

          表格由<table>標(biāo)簽定義.

          每個表格均有若干行(由<tr>標(biāo)簽定義,table row),每行被分割為若干單元格(由<td>標(biāo)簽定義,table division)

          下面是一個包含兩行兩列的表格:

          <table border="2">

          <tr>

          <td>阿/td>

          <td>平</td>

          </tr>

          <tr>

          <td>加</td>

          <td>油</td>

          </tr>

          </table>

          運行效果:


          主站蜘蛛池模板: 国产成人精品一区二区A片带套| 精品乱人伦一区二区三区| 日韩一区二区三区免费体验| 无码日韩人妻AV一区二区三区| 亚拍精品一区二区三区| 日韩一区二区电影| 日韩精品无码一区二区三区四区 | 色噜噜狠狠一区二区三区果冻| 国产一区二区三区免费看| 天堂一区人妻无码| 中文字幕日韩精品一区二区三区| 任你躁国语自产一区在| 精品国产日产一区二区三区| 色狠狠一区二区三区香蕉蜜桃| 亚洲美女高清一区二区三区| 日本精品夜色视频一区二区| 国产一区韩国女主播| 日韩有码一区二区| 一区二区三区电影在线观看| 一区二区三区免费在线视频| 免费一区二区三区四区五区| 国产aⅴ一区二区三区| 鲁大师成人一区二区三区| 黑人一区二区三区中文字幕| 一区二区三区视频免费观看| 影院无码人妻精品一区二区| 好湿好大硬得深一点动态图91精品福利一区二区| 国产乱码精品一区二区三区麻豆| 无码国产精品一区二区免费I6| 国产精品久久无码一区二区三区网| 亚洲av无一区二区三区| 国产精品亚洲专区一区| 一区二区三区福利| 国产精品视频一区二区三区无码 | 国产精品一区二区三区高清在线 | 国产欧美色一区二区三区| 国语对白一区二区三区| 日韩AV在线不卡一区二区三区 | 相泽亚洲一区中文字幕| 中文字幕亚洲乱码熟女一区二区| 日本免费一区二区久久人人澡|