整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          輕松易懂,一文告訴你什么是http協議?

          輕松易懂,一文告訴你什么是http協議?

          、什么是http?

          Http協議即超文本傳送協議 (HTTP-Hypertext transfer protocol) 。

          它定義了瀏覽器(即萬維網客戶進程)怎樣向萬維網服務器請求萬維網文檔,以及服務器怎樣把文檔傳送給瀏覽器。從層次的角度看,HTTP是面向(transaction-oriented)應用層協議,它是萬維網上能夠可靠地交換文件(包括文本、聲音、圖像等各種多媒體文件)的重要基礎。并且詳細的規定了客戶端瀏覽器與服務器之間互相通信的規則。


          二、抓包

          下面是一口君抓取的訪問自己搭建的web服務器交互的所有數據包。 以下是瀏覽器顯示信息:

          以下是實際 index.html內容

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>一口Linux</title>
          </head>
          <body  >
          <div align="center">
           <table width="900" border="0">
             <tr><td>
              <form  onsubmit="return isValidate(myform)" action="cgi-bin/login.cgi" method="post">
            用戶名: <input type="text" name="username" id="username" > 
            <td> </td>
              <tr><td>
            密    碼: <input type="password" name="userpass" id="userpass"> 
             <td> </td>
              <tr><td>
            <input type="submit" value="登錄" id="button"  >
             </form>
          
             </td></tr>
           </table>
          </div>
          
             <div align="center">
              <table width="900" height="467" border="0" background="./image/yikou.png">
                <tr>
                  <td width="126" height="948"> </td>
                  <td width="351"></td>
                  <td width="101"> </td>
                </tr>  
            </div>
          </body>
          </html>
          

          下面是用抓包工具抓取的所有HTTP數據包:

          瀏覽器發送的GET請求數據包:

          服務器回復的頁面對應的數據包:

          完整的瀏覽訪問服務器數據包交互流程如下:

          數據包交互流程,簡單總如下:

          1. 瀏覽器會向web服務器發起tcp 3次握手,(http是基于tcp,上圖數據包1-3)
          2. 瀏覽器會根據網址欄輸入的url,通過DNS協議查找該domain對應的IP地址(如果url中直接給出IP地址,則省略該步驟)
          3. 瀏覽器發送HTTP協議的GET請求,web服務器會回復對應的頁面(沒有指定的話,一般由配置文件指定默認文件比如index.html,見數據包4-6)
          4. 因為頁面有圖片信息,瀏覽器再請求獲取對應的圖片文件(見數據包7-24)
          5. 最后會關閉tcp連接,執行4握手(見數據包25-28)

          三、頁面交互流程

          下面我們來看一下,從網頁輸入URL到加載,http究竟做了哪些工作?

          瀏覽器負責發起請求和最后的響應請求,服務器接收請求后,處理請求。

          1、輸入URL。

          不管是鏈接還是地址欄的輸入,情況都是一樣的。http協議已經規定了URL的格式,通過http協議中的域名或IP找到服務器。

          2、找到服務器的同時,會有http的請求發送過來,告訴服務器我求你做什么?http協議規定了發送請求的格式,這個格式有三部分組成請求行、請求頭、請求體。

          請求行包括請求的方式(get、post或其他)、要求響應的文件、http版本。 請求頭包括本機信息、瀏覽器信息等等,當然,也包括URL中?后面的參數。

          請求體包括POST傳遞數據的相關信息,Get方式傳值時,請求體為空。

          3、請求信息發送至服務器以后,服務器會獲取傳遞過來的相關信息進行后端程序的處理。 服務器可以通過數據包中信息獲取URL傳遞過來的值,通過form(表單)獲取POST傳遞過來的值,當然,也是可以獲取到所有的其他請求過來的信息,如瀏覽器信息、cookie信息、操作系統信息等。獲取相關的數據以后,服務器就會根據程序進行處理。

          4、處理完成以后,服務器會做出響應,向瀏覽器輸出相關信息。http對響應的格式也做出了規定,響應的信息主要包括,響應碼、響應頭、響應體

          響應碼用來標識服務器響應的結果,如我們??吹降?00、404等。大致的分類如下:

          1開頭的表示消息,
          2開頭表示成功,
          3開頭表示重定向,
          4開頭表示失敗,
          5開頭表示服務器異常。
          

          響應頭記錄服務器相關信息如服務器是否啟用壓縮、服務器為IIS或Ngnix、程序所用服務端語言等等。當然,緩存也是在這里設置的,通過修改響應頭可以修改html在本地緩存的情況,如設置瀏覽器緩存過期的時間。

          響應體主要是我看到的html的相關內容了。

          完成以上4步操作以后,瀏覽器就斷開了與服務器的數據連接,不能在進行數據傳輸,如果需要再次進行數據傳輸,那么一切就要從輸入URL開始。

          如此,便是一個完整的網頁流程,http從中的作用就是對整個流程進行規定,包括執行步驟,每一步的數據格式。只有了解http協議以及網頁是如何產生的以后,才能對網頁進行更好的控制,例如控制瀏覽器緩存、通過非瀏覽器發送http請求、get和post傳值的選擇,甚至是建立長連接,這些都是以http協議為基礎。

          四、補充

          1. http主要方法


          1.0 版本和 1.1 版本的描述分別基于 RFC1945 和 RFC2616 除了上圖中的內容之外, HTTP 消息中還有一些用來表示附加信息的 頭字段。 客戶端向 Web 服務器發送數據時, 會先發送頭字段, 然后再發送 數據。

          2. 狀態碼

          收到請求消息之后, Web 服務器會對其中的內容進行解析, 通過 URI和方法來判斷“對什么”“進行怎樣的操作”, 并根據這些要求來完成自己的工作, 然后將結果存放在響應消息中。 在響應消息的開頭有一個狀態碼,它用來表示操作的執行結果是成功還是發生了錯誤。

          當我們訪問 Web 服務器時, 遇到找不到的文件就會顯示出 404 Not Found 的錯誤信息, 其實這就是狀態碼。 狀態碼后面就是頭字段和網頁數據。 響應消息會被發送回客戶端, 客戶端收到之后, 瀏覽器會從消息中讀出所需的數據并顯示在屏幕上。 到這里, HTTP 的整個工作就完成了。

          HTTP 狀態碼由三個十進制數字組成,第一個十進制數字定義了狀態碼的類型。

          響應分為五類:信息響應(100–199),成功響應(200–299),重定向(300–399),客戶端錯誤(400–499)和服務器錯誤 (500–599)

          HTTP狀態碼列表:

          、如何從網頁中繪制出下面這個表格

          二、解題思路

          1、表格分析:**表格由 5 行 ,6 列 構成,且第一行第一列為 空。

          2、繪制思路:

          (1)先畫出第一行第一列,且空著它。

          (2)再加一列,寫上周一。

          (3)再復制幾個 td 標簽,將周二至周五也繪制出來,此時 “列” 就繪制完了。

          (4)繪制行:在下面再復制一行 tr 和 td ,并且添加上文字,此時第 2 行的 第1列也就出來了。此時第一行的第一列的單元格就自動展開了,不用特殊調試。

          (5)如法炮制,再復制兩行 tr 和 td ,將第二節和第三節也添加上。

          (6)在第 2 行中復制一對 td 標簽添加 html ,這樣,再復制 td 添加 css ,以此表格就繪制出來了。

          成品圖標注:↓


          用html標簽使用介紹

          本文主要記錄常用的html標簽使用說明,用起來的時候偶爾查查。

          常用html標簽列表

          標簽

          英文全拼

          作用

          特點

          ?<html></html>??

          html

          網頁的根標簽

          所有的標簽都要寫在這一對根標簽里面

          ??<head></head>??

          head

          網頁的頭標簽

          包括完檔的屬性和信息

          ??<body></body>??

          body

          網頁的主題

          包含文檔的所有內容

          ??<div></div>??

          division

          定義一個區域

          瀏覽器通常會在??<div>??前后放置一個換行符

          ??<!-- 注釋 -->??

          -

          注釋

          單標簽

          ??<br>或<br/>??

          break

          換行

          單標簽,不會在其前后創建空白行

          ??<hr>或<hr/>??

          horizontal rule

          添加水平線

          單標簽

          ??<img src="">??

          image

          添加圖片

          單標簽

          ??<embed src="">??

          embed

          嵌入外部應用

          單標簽

          ??<meta>??

          meta

          提供有關頁面的元信息

          單標簽,??<meta>???標簽通常位于??<head>??區域內

          ??<link>??

          link

          定義文檔與外部資源的關系

          單標簽,??<link>???標簽只能存在于??<head>??區域內,不過它可出現任何次數。

          ??<p></p>??

          paragraph

          定義段落

          自動在其前后創建空白行

          ??<h1> to <h6>??

          Header 1 to Header 6

          定義標題

          h1在一個頁面里只能出現一次

          ??<strong></strong>??

          strong

          文本加粗

          加粗標記該文本

          ??<b></b>??

          bold

          文本加粗

          加粗顯示文本,不推薦使用

          ??<em></em>??

          emphasize

          文本傾斜

          傾斜標記文本

          ??<i></i>??

          italic

          文本傾斜

          傾斜顯示文本,不推薦使用

          ??<del></del>??

          delete

          文本添加刪除線

          -

          ??<s></s>??

          strike

          文本添加刪除線

          不推薦使用

          ??<ins></ins>??

          insert

          文本添加下劃線

          -

          ??<u></u>??

          underline

          文本添加下劃線

          不推薦使用

          ??<a href="">填寫內容</a>??

          anchor

          添加超鏈接

          最好使用CSS來改變鏈接的樣式

          ??<ul></ul>??

          unordered list

          定義無序列表

          通常與??<li>??標簽一起使用

          ??<ol></ol>??

          ordered list

          定義有序列表

          通常與??<li>??標簽一起使用

          ??<li></li>??

          list item

          創建列表項

          可與各種列表定義標簽一起使用

          ??<dl></dl>??

          definition list

          定義描述列表

          通常與??<dt>???和??<dd>??一起使用

          ??<dt></dt>??

          definition term

          定義條目

          定義描述列表的項目

          ??<dd></dd>??

          definition description

          定義描述

          對描述列表中的項目進行描述

          ??<table></table>??

          table

          定義HTML表格

          盡可能通過樣式改變表格外觀

          ??<tr></tr>??

          table row

          定義表格的行

          一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽

          ??<th></th>??

          table headline

          定義表格每一列的標題

          該標簽的文本通常呈現為粗體且居中

          ??<td></td>??

          table data

          定義表格中的單元格數據

          該標簽的文本呈現為普通且左對齊

          ??<caption>表格標題</caption>??

          caption

          定義整個表格的標題

          ??<caption>???標簽必須直接放在??<table>??標簽后

          ??<input type="">??

          input

          定義輸入控件

          輸入字段可通過多種方式改變,取決于type屬性

          ??select??

          select

          定義下拉列表

          ??<select>???中的??<option>??標簽定義了列表中的可用選項

          ??<option></option>??

          option

          定義下拉列表中的可用項

          ??<option>??標簽不可自由定義寬高

          ??<optgroup></optgroup>??

          options group

          定義選項組

          ??<optgroup>??標簽用于把相關的選項組合在一起

          ??<textarea></textarea>??

          textarea

          定義多行的文本輸入控件

          文本的默認字體是等寬字體

          ??<form></form>??

          form

          定義表單

          ??<form>??可以包含多個元素

          ??<fieldset></fieldset>??

          field set

          定義圍繞表單中元素的邊框

          ??<legend>???為??<fieldset>??定義標題

          ??<legend></legend>??

          legend

          為??<fieldset>??定義標題

          ??<legend>??通過css設定樣式

          ??<progress></progress>??

          progress

          定義運行中的任務進度

          ??<progress>???是HTML5中的新標簽,??<progress>??標簽不適合用來表示度量衡

          ??<meter></meter>??

          meter

          度量衡

          ??<meter>???是HTML5的新標簽,??<meter>??標簽不適合用來表示進度條

          ??<audio></audio>??

          audio

          添加音頻

          ??<audio>??標簽是HTML5的新標簽

          ??<video></video>??

          video

          添加視頻

          ??<video>??標簽是HTML5的新標簽

          ??<source>??

          source

          定義媒介資源

          ??<source>??標簽是HTML5中的新標簽

          常用標簽使用說明

          • 常用寫法:??<img src="" alt="" title=""width="" height=""??>
          • src:圖片的來源(必寫屬性)
          • alt:圖像不顯示時的替代文本
          • title:鼠標在移動到元素上的文本提示
          • width/height:圖片寬高,沒有定義寬高的時候,圖片按照百分之百比例顯示,更改圖片的寬度或者高度,圖片等比例縮放

          普通用法

          • 常用寫法:??<a href="" title="" target="">填寫內容</a>??
          • href:去往的路徑(必寫屬性)
          • title:鼠標在移動到元素上的文本提示
          • target:規定在何處打開路徑
          • _blank:新頁面打開
          • _parent:在父窗口中打開鏈接
          • _self:當前頁面跳轉(默認值)
          • _top:在當前窗體打開鏈接,并替換當前的整個窗體
          • 當href的值為javascript:void(0); 或 javascript:; ,表示超鏈接不做任何事情,不做任何跳轉
          • 當href的值為#,表示超鏈接為空鏈接,點擊此鏈接時會跳轉到頁首的位置

          錨點鏈接

          錨點鏈接通過點擊超鏈接,自動跳轉到我們設置錨點的位置,類似于word的目錄導航。建立錨點的元素必須要有id或name屬性,最好兩個都有。這里只跳轉本頁面元素,其他頁面跳轉自行搜索。
          具體做法如下:

          1. 給目標元素設置id值,如??<p id="id1"></p>??
          2. 設置錨點超鏈接,錨點的超鏈接路徑一定包含"#",后面緊跟元素的id或者name,如??<a href="#id1"></a>??

          示例如下。為了顯示效果,通過使用lorem自動生成隨機文本(具體使用方法搜索,一般直接輸入就行),lorem*50表示重復lorem15次。

          <a href="#id2">a</a>
          
            <p id="id1">
              (lorem*15)
            </p>
          
               (lorem*15)
          
            <p id="id2">
               (lorem*15)
            </p>

          超鏈接全局設置

          在頁面head中寫入代碼可以設置超鏈接的全局跳轉設置

          <head>
            <!-- 讓頁面所有的超鏈接新頁面打開 -->
            <base target="_blank">  
          </head>

          charset編碼

          • 常用寫法: ??<meta charset="UTF-8">??
          • charset:定義文檔的字符編碼
          • ASCII/ANSI/Unicode:英語
          • GBK:亞洲通用字符集
          • GB2312:中文簡體
          • Big5:臺澳港繁體
          • UTF-8:世界通用字符集

          name

          1. 關鍵字
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網頁的關鍵字,盡量將重要的關鍵詞放在前面
          1. 網頁描述
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網頁的主要內容
          1. 作者
          • 常用寫法: ??<meta name="author" content="">??
          • 描述:告訴搜索引擎網頁的作者
          1. 文件檢索
          • 常用寫法: ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
          • 描述:有時候會有一些站點內容,不希望被ROBOTS抓取而公開。為了解決這個問題,ROBOTS開發界提供了兩個辦法:一個是robots.txt,另一個是The Robots META標簽。
          • content: 文件檢索方式
          • all:文件將被檢索,且頁面上的鏈接可以被查詢 (默認值)
          • none:文件將不被檢索,且頁面上的鏈接不可以被查詢
          • index:文件將被檢索;
          • noindex:文件將不被檢索,但頁面上的鏈接可以被查詢
          • follow:頁面上的鏈接可以被查詢
          • nofollow:文件將不被檢索,頁面上的鏈接可以被查詢

          網頁自動跳轉

          • 常用寫法: ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
          • 描述:網頁5秒后自動跳轉到谷歌主頁
          • url:為空則刷新本頁
          • 常用寫法:
          • 描述:規定當前文檔與被鏈接文檔/資源之間的關系
          • rel:定義當前文檔與被鏈接文檔之間的關系。rel 是 relationship的英文縮寫(必寫屬性)
          • type:規定被鏈接文檔的類型
          • href:鏈接的文件路徑
          • 示例:
          • 鏈接外部樣式表:??<link rel="stylesheet" type="text/css" href="a.css">??
          • 設置網頁icon圖標:??<link rel="icon" href="a.ico">??

          列表

          無序列表

          無序列表使用粗體圓點進行標記。簡單示例如下。

          <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  ...
              </ul>

          有序列表

          有序列表使用數字進行標記,我們可以通過整數值start指定列表編號的起始值。簡單示例如下。

          <ol start="2">
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  ...
              </ol>

          描述列表

          通過描述列表自定義列表,列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

          <dl>
                  <dt>A</dt> <!-- 小標題 -->
                      <dd>A1</dd> <!-- 解釋標題 -->
                      <dd>A2</dd> <!-- 解釋標題 -->
                  <dt>B</dt> <!-- 小標題 -->
                      <dd>B1</dd> <!-- 解釋標題 -->
                      <dd>B2</dd> <!-- 解釋標題 -->
              </dl>

          表格

          基礎表格

          • 常用寫法:??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
          • width:表格寬度
          • height:表格高度
          • border:邊框寬度
          • cellspacing:單元格間距
          • cellpadding:內容與邊框間距

          簡單示例如下。

          <table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
          <caption>表格標題</caption> <!-- 定義表格標題 -->
          
          <tr>
              <!-- 定義表格的行 -->
              <td>A1</td> <!-- 定義表格該行第一列中的數據 -->
              <td>B1</td>
              <td>C1</td>
          </tr>
          <tr>
              <!-- 定義表格的行 -->
              <th>A</th> <!-- 定義表格每一列的標題 -->
              <th>B</th>
              <th>C</th>
          </tr>
          <tr>
              <td>A2</td>
              <td>B2</td>
              <td>C2</td>
          </tr>
          </table>

          單元格合并

          • 常用寫法:??<td colspan=“” rowspan=“”></td>??
          • 描述:告訴表格該單元格可以橫跨colspan列,縱跨rowspan行

          簡單示例如下。

          <table border="2" cellspacing="1px" width="400px" height="100px">
          <caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
          <tr height="100">
              <!-- 定義表格的行 -->
              <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
              <td>B1</td>
          </tr>
          
          <tr height="100">
              <td>A2</td>
              <td>B2</td>
              <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
          </tr>
          
          <tr height="100">
              <td>A3</td>
              <td>B3</td>
          </tr>
          </table>

          對于??<input>??不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。

          文本輸入框

          • 常用寫法:??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
          • type:規定輸入字段的類型
          • name:輸入框的名字
          • maxlength:輸入文本長度
          • readonly:輸入框是否只讀
          • disabled:輸入框是否未激活
          • value:輸入框默認值

          簡單示例如下。

          <input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

          密碼輸入框

          • 常用寫法:??<input type="password" name="">??
          • type:規定輸入字段的類型
          • name:輸入框的名字
          • 密碼輸入框的其他參數和文本輸入框一樣

          簡單示例如下。

          <input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

          單選框

          • 常用寫法:??<input type="radio" name="" checked="checked">??
          • type:規定輸入字段的類型
          • name:輸入框的名字
          • checked:設定該輸入框被預先選定
          • 想要多個單選框只能有一個被選中,設置所有單選框的name值相同即可實現

          示例一,兩個單選框都可以被選中

          <div>
              <input type="radio" name="man" checked="checked">男
          </div>
          <div>
              <input type="radio" name="woman">女
          </div>

          示例二,兩個單選框只能有一個被選中

          <div>
              <input type="radio" name="gender" checked="checked">男
            </div>
            <div>
              <input type="radio" name="gender">女
            </div>

          下拉列表

          ??<select>??

          • 常用寫法:??<select multiple=""></select>??
          • multiple:當該屬性為true時,可選擇多個選項。

          ??<optgroup>??

          • 常用寫法:??<optgroup label=""></optgroup>??
          • label:設定選項組的描述。

          ??<option>??

          • 常用寫法:??<option value="" selected="">選項值</option>??
          • value:定義送往服務器的選項值。
          • selected:當該屬性為true時,該選項被默認選擇。

          示例一,單選下拉列表

          <select>
              <option value="a">a</option>
              <option value="b">b</option>
              <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
            </select>

          示例二,帶組合的單選下拉列表

          <select>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1">b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          示例三,帶組合的多選下拉列表

          <select multiple=”multiple”>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1" selected='selected'>b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          多選框

          • 常用寫法:??<input type="checkbox" checked="">??
          • type:規定輸入字段的類型
          • checked:設定該輸入框被預先選定

          簡單示例如下。

          <input type="checkbox"  checked="checked">A
            <input type="checkbox">B

          文本框

          • 常用寫法:??<textarea cols="" rows="" placeholder=""></textarea>??
          • cols:控制可見文本的列數
          • rows:控制可見文本的行數
          • placeholder:提示字符

          簡單示例如下。

          <textarea cols="5" rows="2" placeholder="text"></textarea>

          文本上傳控件

          • 常用寫法:??<input type="file" accept=""/>??
          • accept:規定提交的文件的類型

          簡單示例如下。

          <input type="file" accept="image/gif, image/jpeg"/>

          其他類型按鈕

          <input type="submit">文件提交按鈕
            <input type="button" value="">普通按鈕
            <input type="image" src="">圖片按鈕
            <input type="reset">重置按鈕
            <input type="url">網址控件
            <input type="date">日期控件 
            <input type="time">時間控件
            <!--email提供了郵箱的完整驗證,必須包含@和后綴,如果不滿足驗證,會阻止表單提交-->
            <input type="email">郵件控件
            <input type="number" step="3">數字控件
            <input type="range" step="100">滑塊控件
            <input type="color">顏色控件

          表單

          示例一,普通表單

          <form>
              First name: <input type="text" name="fname"><br>
              Last name: <input type="text" name="lname"><br>
              <input type="submit" value="提交">
            </form>

          示例二,帶分組信息表單

          <form>
              <fieldset>
                <legend>Personalia:</legend>
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>
                <input type="submit" value="提交">
              </fieldset>
          
              First nameA: <input type="text" name="fname"><br>
              Last nameB: <input type="text" name="lname"><br>
            </form>

          ??<progress>???與??<meter>??主要區別和用法見??HTML5 progress和meter控件??

          ??<progress>??

          • 常用寫法:??<progress value="" max=""></progress>??
          • value:規定進程的當前值
          • max:規定需要完成的值

          簡單示例如下。

          <progress value="60" max="100"></progress>

          ??<meter>??

          • 常用寫法:??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
          • value:規定度量的當前值
          • max:規定被界定為高的值的范圍
          • min:規定被界定為低的值的范圍
          • low:規定被界定為低的值的范圍
          • high:規定被界定為高的值的范圍
          • optimum:規定度量的最優值
          • 具體使用見meter標簽改變顏色規則

          簡單示例如下

          <meter min="0" low="40" high="90" max="100" value="91"></meter>
          <meter min="0" low="40" high="90" max="100" value="90"></meter>

          多媒體資源

          ??<audio>??

          • 常用寫法:??<audio src="" controls autoplay loop></audio>??
          • src:規定音頻文件的url
          • controls:如果出現該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現該屬性,自動播放音頻
          • loop:如果出現該屬性,循環播放音頻

          簡單示例如下

          <audio src="demo.mp3" controls autoplay></audio>

          ??<video>??

          • 常用寫法:??<video src="" width="" height="" poster="" controls autoplay loop></video>??
          • src:規定視頻文件的url
          • width:設置視頻播放器的寬度(pixels)
          • height:設置視頻播放器的高度(pixels)
          • poster:設置視頻未播放時展示的畫面
          • controls:如果出現該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現該屬性,自動播放音頻
          • loop:如果出現該屬性,循環播放音頻

          簡單示例如下

          <video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

          ??<source>??

          • 常用寫法:??<source src="" type="">??
          • src:規定媒體文件的url
          • type:規定媒體文件的類型
          • 因為不同瀏覽器支持的媒體格式不同,當添加媒體文件時,需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件,然后使用source 標簽,讓瀏覽器從上到下選擇支持的媒體格式

          簡單示例如下

          <video controls>
              <source src="demo.mp3" type="audio/mp3">
              <source src="demo.mp4" type="video/mp4">
              您的瀏覽器不支持video元素。
            </video>

          特殊字符

          ??HTML特殊字符編碼對照表??

          參考

          • ??HTML基礎??
          • ??HTML 參考手冊??
          • HTML中標簽對應的英文
          • meter標簽改變顏色規則
          • HTML5 progress和meter控件

          主站蜘蛛池模板: 亚洲爆乳精品无码一区二区三区| 亚欧在线精品免费观看一区| 无码av免费一区二区三区| 国产一区二区三区樱花动漫| 国产成人精品一区二区秒拍| 在线一区二区观看| 日本精品视频一区二区| 国产一区二区三区久久| 韩国精品一区二区三区无码视频| 亚洲欧洲精品一区二区三区| 一本岛一区在线观看不卡| 日韩人妻无码一区二区三区久久| 国产美女一区二区三区| 久久一区二区三区99| A国产一区二区免费入口| 少妇一晚三次一区二区三区| 日韩亚洲AV无码一区二区不卡| 丰满爆乳一区二区三区| 久久精品一区二区影院 | 无码精品久久一区二区三区 | 人妻夜夜爽天天爽一区| 一区国产传媒国产精品| 亚洲一区二区影院| 人体内射精一区二区三区| 日本不卡一区二区视频a| 亚洲国产成人一区二区精品区| 岛国无码av不卡一区二区| 亚洲片一区二区三区| 少妇无码AV无码一区| 久久精品国产一区二区三区肥胖 | 久久亚洲中文字幕精品一区| 国产精品乱码一区二区三区| 精品人妻少妇一区二区| 亚洲国产综合无码一区| 性色A码一区二区三区天美传媒| 熟妇人妻系列av无码一区二区| 亚洲福利精品一区二区三区| 全国精品一区二区在线观看| 无码精品人妻一区二区三区免费 | 国产伦精品一区二区三区免费迷 | 中文字幕AV无码一区二区三区|