HTML基礎

TML的作用

HTML是用來開發網頁的，它是開發網頁的語言

HTML的定義

全稱HyperText Mark-up Language，超文本標記語言

標記就是標簽

<標簽名稱></標簽名稱> 比如 <html></html> <h1></h1>等，標簽大多數都是成對出現的。

超文本兩層含義：

因為網頁中還可以有圖片、視頻、音頻等內容（超越文本限制）
它還可以在網頁中跳轉到另一個網頁，與世界各地主機的網頁鏈接（超鏈接文本）

HTML的基本結構

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
        網頁顯示內容
    </body>
</html>

第一行<!DOCTYPE html>是文檔聲明
用來指定頁面所使用的html的版本, 這里聲明的是一個html5的文檔
<html>...</html>標簽是開發人員在告訴瀏覽器
整個網頁是從<html>這里開始的，到</html>結束
也就是html文檔的開始和結束標簽
<head>...</head>標簽用于定義文檔的頭部
是負責對網頁進行設置標題、編碼格式以及引入css和js文件的
<body>...</body>標簽是編寫網頁上顯示的內容

網頁文件的后綴是.html, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁

VS Code 安裝

VS Code全拼是 Visual Studio Code 是由微軟研發的一款免費、開源的跨平臺代碼編輯器
目前是前端(網頁)開發使用最多的一款軟件開發工具

下載網址: https://code.visualstudio.com/Download

選擇對應的安裝包進行下載:

安裝一切默認

VS Code 的插件安裝

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

常用的HTML標簽

1 標簽不區分大小寫，但是推薦使用小寫
2 根據標簽的書寫形式，標簽分為雙標簽(閉合標簽)和單標簽(空標簽) 2.1 雙標簽是指由開始標簽和結束標簽組成的一對標簽，這種標簽允許嵌套和承載內容，比如: div標簽 2.2 單標簽是一個標簽組成，沒有標簽內容，比如: img標簽

標簽的使用形式

成對出現的標簽
標簽的嵌套
單個出現的標簽
帶屬性的標簽

列表標簽

無序列表標簽(ul標簽)
有序列表標簽(ol標簽)

網頁效果

表格標簽

<table>標簽：表示一個表格
<tr>標簽：表示表格中的一行
<td>標簽：表示表格中的列
<th>標簽：表示表格中的表頭

屬性設置
border: 1px solid black:設置邊框和顏色
border-collapse: collapse:設置邊框合并

網頁效果

表單標簽

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

<form>標簽表示表單標簽，定義整體的表單區域

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

這些標簽稱為表單元素標簽

網頁效果

表單提交

表單用于搜集不同類型的用戶輸入的數據，然后可以把用戶數據提交到web服務器

action屬性設置表單數據提交地址
method屬性設置表單提交的方式，一般有“GET”方式和“POST”方式, 不區分大小寫

兩種方式的區別:

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

表單元素屬性設置

name: 表單元素的名稱，用于作為提交表單數據時的參數名
value: 表單元素的值，用于作為提交表單數據時參數名所對應的值

<!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>

<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>

點擊提交：

可以看到服務器收到了請求報文。

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

本文提供的方法主要基于VLC播放器的ActiveX插件，通過這個插件，在網頁中調用攝像機的RTSP流，實現圖像的實時預覽，音頻的監聽等等功能。文章以海康的IP網絡攝像機為例給出具體的調用方法，供大家學習參照。

VLC軟件下載

登錄VLC官網 https://www.videolan.org/，選擇windows（32位）版本下載。

下載VLC軟件

VLC軟件安裝（務必勾選插件）

運行安裝文件

選擇軟件安裝位置

一定記得要勾選網頁瀏覽器插件

完成安裝

網頁編輯

可選用記事本（notepad）或專業的編輯器，輸入如下代碼，保存為html網頁文件。

<html>
<body>

<title>TESTVDEIO-1-TEST</title>
<head>
<table>
            <tbody>
            <caption>視頻監控演示</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調用格式

具體請參看海康專業文檔

瀏覽器測試

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

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

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

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

確認安裝插件

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

IE瀏覽器顯示不完整

用編輯器測試，2種內核都能正常顯示。

編輯器里測試效果

改用360瀏覽器，呈現2X2的畫面，實現最終的顯示效果。

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

結語

本文參考了一些專業文章，就不一一列出了，在這一并謝過！

由于本人水平有限，有不對的地方敬請指正。文章旨在拋磚引玉，通過討論，相互學習，共同進步。

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

html圖像

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

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

定義圖像的語法是:

url指存儲圖像的位置.

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

<html>

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

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

<html>

<head>

<title>first page</title>

</head>

<body>

</body>

</html>

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

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

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

二 html鏈接

html使用標簽<a>來設置超文本鏈接.

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

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

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

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

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

三 html列表

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

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

<ul>

</ul>

瀏覽器顯示效果如下:

有序列表也是一列項目,列表項目使用數字進行標記.

有序列表始于<ol>標簽,每個列表項目始于<li>標簽.

<ol>

</ol>

運行效果如下:

四 html表格

表格由<table>標簽定義.

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

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

<tr>

</tr>

<tr>

</tr>

</table>

運行效果:

在線咨詢

上一篇：如何給HTML標簽中的文本設置修飾線
下一篇：網頁開發HTML5入門內容，一起來學習吧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML基礎

TML的作用

HTML的定義

HTML的基本結構

VS Code 安裝

VS Code 的插件安裝

常用的HTML標簽

表單提交

VLC軟件下載

VLC軟件安裝（務必勾選插件）

網頁編輯

海康威視RTSP調用格式

瀏覽器測試

結語

您的項目需求