整合營(yíng)銷(xiāo)服務(wù)商

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

          免費(fèi)咨詢(xún)熱線:

          HTML:解鎖網(wǎng)站設(shè)計(jì)的終極指南

          HTML:解鎖網(wǎng)站設(shè)計(jì)的終極指南

          當(dāng)今數(shù)字時(shí)代,網(wǎng)站是企業(yè)和個(gè)人的必需品。而HTML是創(chuàng)建網(wǎng)站的基礎(chǔ),它賦予了網(wǎng)站結(jié)構(gòu)、內(nèi)容和交互性。本文將深入探討HTML,提供一個(gè)全面的指南,幫助你掌握網(wǎng)站設(shè)計(jì)的關(guān)鍵。

          什么是HTML?

          HTML(超文本標(biāo)記語(yǔ)言)是一種標(biāo)記語(yǔ)言,用于描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。它由一組元素和屬性組成,這些元素和屬性定義了文本、圖像、鏈接和其他網(wǎng)頁(yè)組件。

          HTML元素

          HTML元素是構(gòu)成網(wǎng)頁(yè)基本構(gòu)建塊的標(biāo)簽。每個(gè)元素都有一個(gè)開(kāi)始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽,它們之間包含元素的內(nèi)容。最常見(jiàn)的元素包括:

          • <head>:定義網(wǎng)頁(yè)的元數(shù)據(jù)
          • <body>:包含網(wǎng)頁(yè)的可見(jiàn)內(nèi)容
          • <p>:創(chuàng)建段落
          • <a>:創(chuàng)建鏈接
          • <img>:插入圖像

          HTML屬性

          屬性用于修改元素的行為或外觀。每個(gè)元素可以具有多個(gè)屬性,這些屬性由名稱(chēng)和值對(duì)組成。例如,<img>元素可以具有src屬性來(lái)指定圖像文件的路徑。

          HTML結(jié)構(gòu)

          HTML文檔遵循一個(gè)特定的結(jié)構(gòu),包括:

          1. **文檔類(lèi)型聲明:**指定所使用的HTML版本
          2. **<head>元素:**包含元數(shù)據(jù),如頁(yè)面標(biāo)題、描述和關(guān)鍵詞
          3. **<body>元素:**包含網(wǎng)頁(yè)的可見(jiàn)內(nèi)容

          HTML交互性

          雖然HTML本質(zhì)上是靜態(tài)的,但它可以與其他技術(shù)結(jié)合使用,如JavaScript和CSS,以創(chuàng)建交互式網(wǎng)站。例如,JavaScript可以用于驗(yàn)證表單輸入或創(chuàng)建動(dòng)畫(huà)效果。

          學(xué)習(xí)HTML

          學(xué)習(xí)HTML相對(duì)容易,有許多在線資源和教程可供使用。以下是一些提示:

          • 從基礎(chǔ)開(kāi)始,學(xué)習(xí)基本元素和屬性
          • 練習(xí)創(chuàng)建簡(jiǎn)單的網(wǎng)頁(yè)
          • 探索高級(jí)概念,如表格、表單和多媒體
          • 使用代碼編輯器和瀏覽器調(diào)試工具

          掌握HTML的好處

          掌握HTML有很多好處,包括:

          • **創(chuàng)建自己的網(wǎng)站:**設(shè)計(jì)和開(kāi)發(fā)你的個(gè)人或商業(yè)網(wǎng)站
          • **提高就業(yè)能力:**HTML是許多技術(shù)工作的重要技能
          • **理解網(wǎng)絡(luò):**深入了解網(wǎng)頁(yè)如何工作
          • **激發(fā)創(chuàng)造力:**用你的想象力創(chuàng)建視覺(jué)上引人注目的網(wǎng)站

          結(jié)論

          HTML是網(wǎng)站設(shè)計(jì)的基石。通過(guò)理解其基本原理、元素和結(jié)構(gòu),你可以解鎖創(chuàng)建引人入勝且功能豐富的網(wǎng)頁(yè)的能力。無(wú)論你是想建立自己的網(wǎng)站還是提升你的職業(yè)生涯,掌握HTML都是必不可少的。

          這里是云端源想IT,幫你輕松學(xué)IT”

          嗨~ 今天的你過(guò)得還好嗎?

          世界微塵里

          吾寧愛(ài)與憎


          - 2024.03.18 -

          在互聯(lián)網(wǎng)的世界中,表單是用戶(hù)與網(wǎng)站進(jìn)行互動(dòng)的重要橋梁。無(wú)論是注冊(cè)新賬號(hào)、提交反饋、還是在線購(gòu)物,表單都扮演著至關(guān)重要的角色。在網(wǎng)頁(yè)中,我們需要跟用戶(hù)進(jìn)行交互,收集用戶(hù)資料,此時(shí)就需要用到表單標(biāo)簽。

          HTML提供了一系列的表單標(biāo)簽,使得開(kāi)發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來(lái)深入探討這些標(biāo)簽,了解它們的作用以及如何使用它們來(lái)構(gòu)建一個(gè)有效的用戶(hù)界面。



          一、表單的組成

          在HTML中,一個(gè)完整的表單通常由表單域、表單控件(表單元素)和提示信息三個(gè)部分構(gòu)成。

          表單域

          • 表單域是一個(gè)包含表單元素的區(qū)域
          • 在HTML標(biāo)簽中,<form>標(biāo)簽用于定義表單域,以實(shí)現(xiàn)用戶(hù)信息的收集和傳遞
          • <form>會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器


          表單控件

          這些是用戶(hù)與表單交云的各種元素,如<input>(用于創(chuàng)建不同類(lèi)型的輸入字段)、<textarea>(用于多行文本輸入)、<button>(用于提交表單或執(zhí)行其他操作)、<select>和<option>(用于創(chuàng)建下拉列表)等。



          提示信息

          這些信息通常通過(guò)<label>標(biāo)簽提供,它為表單控件提供了描述性文本,有助于提高可訪問(wèn)性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用,并且可以通過(guò)for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來(lái)。


          這三個(gè)部分共同構(gòu)成了一個(gè)完整的HTML表單,使得用戶(hù)可以輸入數(shù)據(jù),并通過(guò)點(diǎn)擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。


          二、表單元素

          在表單域中可以定義各種表單元素,這些表單元素就是允許用戶(hù)在表單中輸入或者選擇的內(nèi)容控件。下面就來(lái)介紹HTML中常用的表單元素。


          1、<form>標(biāo)簽:基礎(chǔ)容器

          作用:定義一個(gè)表單區(qū)域,用戶(hù)可以在其中輸入數(shù)據(jù)進(jìn)行提交。

          <form action="submit.php" method="post">

          其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址,method屬性定義了數(shù)據(jù)提交的方式(通常為GET或POST)。


          2、<input>標(biāo)簽:數(shù)據(jù)輸入

          <input>標(biāo)簽是一個(gè)單標(biāo)簽,用于收集用戶(hù)信息。允許用戶(hù)輸入文本、數(shù)字、密碼等。

          <input type="text" name="username" placeholder="請(qǐng)輸入用戶(hù)名">

          type屬性決定了輸入類(lèi)型,name屬性定義了數(shù)據(jù)的鍵名,placeholder屬性提供了輸入框內(nèi)的提示文本。


          <input>標(biāo)簽的屬性

          下面舉個(gè)例子來(lái)說(shuō)明:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          
          <body>
          <form>
          用戶(hù)名:<input type="text" value="請(qǐng)輸入用戶(hù)名"><br>
          密碼:<input type="password"><br>
          性別:男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
          愛(ài)好:吃飯<input type="checkbox"> 睡覺(jué)<input type="checkbox"> 打豆豆<input type="checkbox"><br>
          <input type="submit" value="免費(fèi)注冊(cè)">
          <input type="reset" value="重新填寫(xiě)">
          <input type="button" value="獲取短信驗(yàn)證碼"><br>
          上傳頭像:<input type="file">
          </form>
          </body>
          </html>


          3、<label>標(biāo)簽:關(guān)聯(lián)說(shuō)明

          它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來(lái),以改善網(wǎng)頁(yè)的可用性和可訪問(wèn)性。<label>標(biāo)簽有兩種常見(jiàn)的用法:


          1)包裹方式:

          在這種用法中,<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如:

          <label>用戶(hù)名:<input type="text" name="username"></label>

          這樣做的好處是用戶(hù)點(diǎn)擊標(biāo)簽文本時(shí),關(guān)聯(lián)的輸入字段會(huì)自動(dòng)獲取焦點(diǎn),從而提供更好的用戶(hù)體驗(yàn)。



          2)使用for屬性關(guān)聯(lián):

          在這種用法中,<label>標(biāo)簽通過(guò)for屬性與目標(biāo)表單元素建立關(guān)聯(lián),for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如:

          <label for="username">用戶(hù)名:</label><input type="text" id="username" name="username">

          這樣做的優(yōu)勢(shì)是單擊標(biāo)簽時(shí),相關(guān)的表單元素會(huì)自動(dòng)選中(獲取焦點(diǎn)),從而提高可用性和可訪問(wèn)性。


          4、<select>和<option>標(biāo)簽:下拉選擇

          在頁(yè)面中,如果有多個(gè)選項(xiàng)讓用戶(hù)選擇,并且想要節(jié)約頁(yè)面空間時(shí),我們可以使用標(biāo)簽控件定義下拉列表。


          注意點(diǎn):

          • <select>中至少包含一對(duì)<option>
          • 在<option>中定義selected=“selected”時(shí),當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          籍貫:
          <select>
          <option>山東</option>
          <option>北京</option>
          <option>西安</option>
          <option selected="selected">火星</option>
          </select>
          </form>
          </body>
          </html>


          5、<textarea>標(biāo)簽:多行文本輸入

          當(dāng)用戶(hù)輸入內(nèi)容較多的情況下,我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。

          • 允許用戶(hù)輸入多行文本。
          <textarea name="message" rows="5" cols="30">默認(rèn)文本</textarea>

          rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。


          代碼示例:

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          </head>
          <body>
          <form>
          今日反饋:
          <textarea>請(qǐng)?jiān)诖溯斎雰?nèi)容</textarea>
          </form>
          </body>
          </html>



          6、<button>標(biāo)簽:按鈕控件

          創(chuàng)建一個(gè)可點(diǎn)擊的按鈕,通常用于提交或重置表單。它允許用戶(hù)放置文本或其他內(nèi)聯(lián)元素(如<i>、<b>、<strong>、<br>、<img>等),這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。

          <button type="submit">提交</button>

          type屬性為submit時(shí)表示這是一個(gè)提交按鈕。


          7、<fieldset>和<legend>標(biāo)簽:分組和標(biāo)題

          通常用于在HTML表單中對(duì)相關(guān)元素進(jìn)行分組,并提供一個(gè)標(biāo)題來(lái)描述這個(gè)組的內(nèi)容。



          <fieldset>標(biāo)簽:該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組,并且通常在視覺(jué)上通過(guò)圍繞這些元素繪制一個(gè)邊框來(lái)區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。

          <legend>標(biāo)簽:它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題,這個(gè)標(biāo)題通常會(huì)出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶(hù)更容易理解每個(gè)分組的目的和內(nèi)容。

          代碼示例:

          <form>
          <fieldset>
          <legend>個(gè)人信息</legend>
          <label for="name">姓名:</label>
          <input type="text" id="name" name="name"><br><br>
          <label for="email">郵箱:</label>
          <input type="email" id="email" name="email"><br><br>
          </fieldset>
          <fieldset>
          <legend>興趣愛(ài)好</legend>
          <input type="checkbox" id="hobby1" name="hobby1" value="music">
          <label for="hobby1">音樂(lè)</label><br>
          <input type="checkbox" id="hobby2" name="hobby2" value="sports">
          <label for="hobby2">運(yùn)動(dòng)</label><br>
          <input type="checkbox" id="hobby3" name="hobby3" value="reading">
          <label for="hobby3">閱讀</label><br>
          </fieldset>
          <input type="submit" value="提交">
          </form>

          在這個(gè)示例中,我們使用了兩個(gè)<fieldset>元素來(lái)組織表單的不同部分。第一個(gè)<fieldset>包含姓名和郵箱字段,而第二個(gè)<fieldset>包含三個(gè)復(fù)選框,用于選擇用戶(hù)的興趣愛(ài)好。每個(gè)<fieldset>都有一個(gè)<legend>元素,用于提供標(biāo)題。這樣,用戶(hù)在填寫(xiě)表單時(shí)可以更清晰地了解每個(gè)部分的內(nèi)容。

          想要快速入門(mén)前端開(kāi)發(fā)嗎?推薦一個(gè)前端開(kāi)發(fā)基礎(chǔ)課程,這個(gè)老師講的特別好,零基礎(chǔ)學(xué)習(xí)無(wú)壓力,知識(shí)點(diǎn)結(jié)合代碼,邊學(xué)邊練,可以免費(fèi)試看試學(xué),還有各種輔助工具和資料,非常適合新手!點(diǎn)這里前往學(xué)習(xí)哦!云端源想

          8、<datalist>標(biāo)簽:預(yù)定義選項(xiàng)列表

          <datalist>標(biāo)簽是HTML5中引入的一個(gè)新元素,它允許開(kāi)發(fā)者為輸入字段提供預(yù)定義的選項(xiàng)列表。當(dāng)用戶(hù)在輸入字段中輸入時(shí),瀏覽器會(huì)顯示一個(gè)下拉菜單,其中包含與用戶(hù)輸入匹配的預(yù)定義選項(xiàng)。


          使用<datalist>標(biāo)簽可以提供更好的用戶(hù)體驗(yàn),因?yàn)樗梢詭椭脩?hù)選擇正確的選項(xiàng),而不必手動(dòng)輸入整個(gè)選項(xiàng)。此外,<datalist>還可以與<input>元素的list屬性結(jié)合使用,以將預(yù)定義的選項(xiàng)列表與特定的輸入字段關(guān)聯(lián)起來(lái)。



          下面是一個(gè)使用<datalist>標(biāo)簽的代碼示例:

          <form>
          <label for="color">選擇你喜歡的顏色:</label>
          <input type="text" id="color" name="color" list="colorOptions">
          <datalist id="colorOptions">
          <option value="紅色">
          <option value="藍(lán)色">
          <option value="綠色">
          <option value="黃色">
          <option value="紫色">
          </datalist>
          <input type="submit" value="提交">
          </form>


          9、<output>標(biāo)簽:計(jì)算結(jié)果輸出

          <output>標(biāo)簽是HTML5中引入的一個(gè)新元素,它用于顯示計(jì)算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用,通過(guò)將計(jì)算結(jié)果賦值給<output>元素的value屬性來(lái)顯示結(jié)果。


          <output>標(biāo)簽可以用于各種類(lèi)型的計(jì)算和輸出,例如數(shù)學(xué)運(yùn)算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用,以實(shí)時(shí)更新計(jì)算結(jié)果。



          下面是一個(gè)使用<output>標(biāo)簽的示例:

          <form>
          <label for="num1">數(shù)字1:</label>
          <input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
          <label for="num2">數(shù)字2:</label>
          <input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
          <label for="result">結(jié)果:</label>
          <output id="result"></output>
          </form>
          
          <script>
          function calculate() {
          var num1=parseInt(document.getElementById("num1").value);
          var num2=parseInt(document.getElementById("num2").value);
          var result=num1 + num2;
          document.getElementById("result").value=result;
          }
          </script>


          10、<progress>標(biāo)簽:任務(wù)進(jìn)度展示

          <progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個(gè)新元素。它通過(guò)value屬性和max屬性來(lái)表示進(jìn)度,其中value表示當(dāng)前完成的值,而max定義任務(wù)的總量或最大值。

          示例:

          <!DOCTYPE html>
          <html>
          <head>
          <title>Progress Example</title>
          </head>
          <body>
          <h1>File Download</h1>
          <progress id="fileDownload" value="0" max="100"></progress>
          <br>
          <button onclick="startDownload()">Start Download</button>
          
          <script>
          function startDownload() {
          var progress=document.getElementById("fileDownload");
          for (var i=0; i <=100; i++) {
          setTimeout(function() {
          progress.value=i;
          }, i * 10);
          }
          }
          </script>
          </body>
          </html>

          在上面的示例中,我們創(chuàng)建了一個(gè)名為"fileDownload"的<progress>元素,并設(shè)置了初始值為0,最大值為100。我們還添加了一個(gè)按鈕,當(dāng)用戶(hù)點(diǎn)擊該按鈕時(shí),會(huì)觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個(gè)函數(shù)模擬了一個(gè)文件下載過(guò)程,通過(guò)循環(huán)逐步增加<progress>元素的value屬性值,從而顯示下載進(jìn)度。


          11、<meter>標(biāo)簽:度量衡指示器

          <meter>標(biāo)簽在HTML中用于表示度量衡指示器,它定義了一個(gè)已知范圍內(nèi)的標(biāo)量測(cè)量值或分?jǐn)?shù)值,通常用于顯示磁盤(pán)使用情況、查詢(xún)結(jié)果的相關(guān)性等。例如:

          <p>CPU 使用率: <meter value="0.6" min="0" max="1"></meter> 60%</p>
          <p>內(nèi)存使用率: <meter value="0.4" min="0" max="1"></meter> 40%</p>

          在這個(gè)示例中,我們使用了兩個(gè)<meter>標(biāo)簽來(lái)分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測(cè)量值,min和max屬性分別定義了測(cè)量范圍的最小值和最大值。通過(guò)這些屬性,<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。



          需要注意的是,<meter>標(biāo)簽不應(yīng)該用來(lái)表示進(jìn)度條,對(duì)于進(jìn)度條的表示,應(yīng)該使用<progress>標(biāo)簽。


          12、<details>和<summary>標(biāo)簽:詳細(xì)信息展示

          <details>和<summary>標(biāo)簽是HTML5中新增的兩個(gè)元素,用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。

          <details>標(biāo)簽定義了一個(gè)可以展開(kāi)或折疊的容器,其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用,<summary>標(biāo)簽定義了<details>元素的標(biāo)題,當(dāng)用戶(hù)點(diǎn)擊該標(biāo)題時(shí),<details>元素的內(nèi)容會(huì)展開(kāi)或折疊。

          示例:

          <details>
          <summary>點(diǎn)擊查看詳細(xì)信息</summary>
          <p>這里是一些額外的信息,用戶(hù)可以點(diǎn)擊標(biāo)題來(lái)展開(kāi)或折疊這些信息。</p>
          </details>

          在這個(gè)示例中,我們使用了<details>標(biāo)簽來(lái)創(chuàng)建一個(gè)可折疊的容器,并在其中添加了一個(gè)<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶(hù)點(diǎn)擊這個(gè)標(biāo)題時(shí),容器的內(nèi)容會(huì)展開(kāi)或折疊。


          總結(jié):

          HTML表單標(biāo)簽是構(gòu)建動(dòng)態(tài)網(wǎng)頁(yè)的基石,它們使得用戶(hù)能夠與網(wǎng)站進(jìn)行有效的交互。


          通過(guò)合理地使用這些標(biāo)簽,開(kāi)發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單,從而提升用戶(hù)體驗(yàn)和網(wǎng)站的可用性。所以說(shuō),掌握這些標(biāo)簽的使用,對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)是至關(guān)重要的。


          我們下期再見(jiàn)!


          END

          文案編輯|云端學(xué)長(zhǎng)

          文案配圖|云端學(xué)長(zhǎng)

          內(nèi)容由:云端源想分享

          HP創(chuàng)建動(dòng)態(tài)交互性站點(diǎn)的強(qiáng)有力的服務(wù)器端腳本語(yǔ)言,作為WEB領(lǐng)域的首選開(kāi)發(fā)語(yǔ)言,因其部署簡(jiǎn)單、語(yǔ)法簡(jiǎn)單、開(kāi)發(fā)效率高而廣受開(kāi)發(fā)者的喜愛(ài)。全世界80%的網(wǎng)站都使用PHP來(lái)開(kāi)發(fā)。

          但正因?yàn)檫@樣的方便簡(jiǎn)單,很多PHP工程師都停留在使用的階段,而沒(méi)有真正的去了解過(guò)PHP的工作原理,這無(wú)疑是讓大家不能深入理解到PHP的執(zhí)行工作原理,結(jié)果就會(huì)導(dǎo)致無(wú)法對(duì)項(xiàng)目后期做出合理的性能優(yōu)化方案

          我們不要做到: “知其然而不知其所以然”
          

          項(xiàng)目運(yùn)行環(huán)境的組成部分

          運(yùn)行環(huán)境是一個(gè)程序語(yǔ)言必須條件,它是執(zhí)行基礎(chǔ)設(shè)施。

          例如:打籃球需要籃球場(chǎng)、唱歌需要麥克風(fēng)。如果沒(méi)得這些條件將不能完成工作事項(xiàng)

          PHP的執(zhí)行環(huán)境可按照操作系統(tǒng)來(lái)劃分,分別是Windows、linux、Mac系統(tǒng)等。雖然系統(tǒng)名稱(chēng)不一樣,但是系統(tǒng)上面需要使用的軟件都是一樣的。分別是Apache、nginx、mysql、php

          注:操作系統(tǒng)都是基于Unix內(nèi)核開(kāi)發(fā)出來(lái)的。Unix是基于C開(kāi)發(fā)的
          

          Apache和nginx都是web服務(wù)器,用于接收用戶(hù)從電腦、手機(jī)軟件和網(wǎng)頁(yè)發(fā)送的http請(qǐng)求,可以理解為倉(cāng)庫(kù)的入口。

          mysql是關(guān)系型的數(shù)據(jù)庫(kù),用于存儲(chǔ)整個(gè)網(wǎng)站的數(shù)據(jù)內(nèi)容,例如:用戶(hù)信息、商品信息等??梢岳斫鉃榇鎯?chǔ)商品的倉(cāng)庫(kù)。

          PHP就是執(zhí)行PHP代碼的解釋器,用于完成這個(gè)http請(qǐng)求需要所做的工作內(nèi)容。可以理解為在倉(cāng)庫(kù)作業(yè)的工作人員。

          php是nginx和mysql的中間樞紐中心,接入用戶(hù)請(qǐng)求指令,找到對(duì)應(yīng)的數(shù)據(jù)。在返回給發(fā)送方。

          正是因?yàn)檫@系統(tǒng)和軟件的關(guān)系,就分別產(chǎn)生了Windows簡(jiǎn)稱(chēng)的wamp、wnmp和linux下面的lanp、lnmp。就是把軟件名稱(chēng)取其首字母組合生成。

          如何接入PHP請(qǐng)求

          用戶(hù)請(qǐng)求接入需nginx來(lái)做,它是項(xiàng)目的操作入口。當(dāng)我們把請(qǐng)求發(fā)生到nginx之后。

          拿出nginx的參數(shù)配置:

          server {
           listen 80; #監(jiān)聽(tīng)80端口,接收http請(qǐng)求
           server_name www.example.com; #一般存放網(wǎng)址,表示配置的哪個(gè)項(xiàng)目
           root /home/wwwroot/public; # 存放代碼的根目錄地址或代碼啟動(dòng)入口
           index index.php index.html; #網(wǎng)站默認(rèn)首頁(yè)
           
           #當(dāng)請(qǐng)求網(wǎng)站的url進(jìn)行l(wèi)ocation的前綴匹配且最長(zhǎng)匹配字符串是該配置項(xiàng)時(shí),按順序檢查文件是否存在,并返回第一個(gè)找到的文件
           location / {
           #try_files,按順序檢查文件是否存在,返回第一個(gè)找到的文件
           #$uri代表不帶請(qǐng)求參數(shù)的當(dāng)前地址
           #$query_string代表請(qǐng)求攜帶的參數(shù)
           try_files $uri $uri/ /index.php?$query_string; #按順序檢查$uri文件,$uri地址是否存在,如果存在,返回第一個(gè)找到的文件;如果都不存在,發(fā)起訪問(wèn)/index.php?$query_string的內(nèi)部請(qǐng)求,該請(qǐng)求會(huì)重新匹配到下面的location請(qǐng)求
           }
           
           #當(dāng)請(qǐng)求網(wǎng)站的php文件的時(shí)候,反向代理到php-fpm去處理
           location ~ \.php$ {
           include fastcgi_params; #引入fastcgi的配置文件
           fastcgi_pass 127.0.0.1:9000; #設(shè)置php fastcgi進(jìn)程監(jiān)聽(tīng)的IP地址和端口
           fastcgi_index index.php; #設(shè)置首頁(yè)文件
           fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; #設(shè)置腳本文件請(qǐng)求的路徑
           }
          }
          

          nginx有如下步驟:

          1. nginx會(huì)根據(jù)過(guò)來(lái)的http請(qǐng)求頭里的Host字段里的值,來(lái)判斷使用哪個(gè)server{}。如果請(qǐng)求頭里沒(méi)有Host字段,或者Host字段里的值,和Nginx配置文件里的server{}里的{server_name}都不匹配,則使用第一個(gè)server{},來(lái)處理這個(gè)請(qǐng)求
          2. nginx 會(huì)首先測(cè)試 HTTP 請(qǐng)求的 IP 地址和 端口號(hào)是否與 server.listen 中的 IP:Port 一致,然后再測(cè)試 "Host" 請(qǐng)求頭字段的值是否與 server.server_name 中的 name 一致。如果都沒(méi)有一致,則選擇 default_server 進(jìn)行處理。
          3. nginx 首先查找最詳細(xì)具體的 prefix location 記錄,根據(jù)請(qǐng)求文件的來(lái)進(jìn)行規(guī)則的匹配。

          例如: toutiao.com /index.php 請(qǐng)求 匹配了 / 并且匹配 "\.php$",因此,根據(jù) location 的配置,將該請(qǐng)求發(fā)送給 localhost:9000 的 FastCGI 服務(wù)器.

          fastcgi_param 參數(shù)設(shè)置了 SCRIPT_FILENAME 值為 /home/wwwroot/public/index.php,由該 fastcgi server 執(zhí)行該文件。其中:$document_root 為 root 指定的配置,$fastcgi_script_name 為請(qǐng)求 URI,如這里為 /index.php

          最終根據(jù)規(guī)則的匹配把請(qǐng)求發(fā)生給PHP,然后再來(lái)解析PHP代碼
          

          PHP請(qǐng)求執(zhí)行是誰(shuí)來(lái)做?

          nginx和php是2個(gè)軟件,它們的之間的通信不在用普通的http協(xié)議來(lái)發(fā)送數(shù)據(jù),因?yàn)閚ginx是web服務(wù)器,php是應(yīng)用服務(wù)器,啟動(dòng)后由PHP-FPM來(lái)管理進(jìn)程。nginx和php-fpm之間的傳輸協(xié)議采用fast-cgi,而不是默認(rèn)的http協(xié)議。

          fastcgi協(xié)議

          fastcgi協(xié)議用來(lái)確定webserver(例如nginx),也就是內(nèi)容分發(fā)服務(wù)器傳遞過(guò)來(lái)什么數(shù)據(jù),什么樣格式的數(shù)據(jù)

          php-fpm進(jìn)程管理器

          php-fpm是對(duì)fastcgi協(xié)議的實(shí)現(xiàn),是進(jìn)程管理器,啟動(dòng)時(shí)包括master和worker進(jìn)程倆部分,master進(jìn)程監(jiān)聽(tīng)端口,接收來(lái)自webserver請(qǐng)求,worker進(jìn)程一般具有多個(gè),每個(gè)worker進(jìn)程都有一個(gè)cgi進(jìn)程解釋器,用來(lái)執(zhí)行php代碼

          完整工作流程解析

          用戶(hù)發(fā)送請(qǐng)求會(huì)從解析域名開(kāi)始,然后再發(fā)送服務(wù)器、執(zhí)行響應(yīng)結(jié)果。完成流程如下

          用戶(hù)輸入域名訪問(wèn)網(wǎng)址 ---> 域名進(jìn)行DNS解析 ---> 拿到對(duì)應(yīng)IP服務(wù)器和端口 ---> nginx監(jiān)聽(tīng)到對(duì)應(yīng)端口的請(qǐng)求 ---> nginx對(duì)url進(jìn)行l(wèi)ocation匹配 ---> 執(zhí)行匹配location下的規(guī)則 ---> nginx轉(zhuǎn)發(fā)請(qǐng)求給php的進(jìn)程 ---> php-fpm的master進(jìn)程監(jiān)聽(tīng)到nginx請(qǐng)求 ---> master進(jìn)程將請(qǐng)求分配給其中一個(gè)閑置的worker進(jìn)程 ---> worker進(jìn)程執(zhí)行請(qǐng)求 ---> worker進(jìn)程執(zhí)行結(jié)果通過(guò)標(biāo)準(zhǔn)輸出 stdout 返回給nginx ---> nginx通過(guò)HTTP 協(xié)議html返回給客戶(hù)端 ---> 客戶(hù)端在解析dom樹(shù),最終呈現(xiàn)頁(yè)面

          如有感悟,歡迎關(guān)注(* ̄︶ ̄)


          主站蜘蛛池模板: 国产日韩精品一区二区三区在线 | 国产福利视频一区二区| 一区二区三区www| 亚洲一区二区三区在线视频 | 日韩精品中文字幕无码一区| 国产精品香蕉一区二区三区| 波多野结衣中文一区二区免费| 国产精品一区二区三区99 | 中文字幕人妻无码一区二区三区| 麻豆国产一区二区在线观看| 无码人妻久久一区二区三区蜜桃 | 亚洲爆乳无码一区二区三区| 少妇一晚三次一区二区三区| 亚洲国产国产综合一区首页| 精品一区中文字幕| 亚洲国产精品成人一区| 久久福利一区二区| 中文字幕亚洲乱码熟女一区二区 | 日本一区二区三区高清| 天天躁日日躁狠狠躁一区| 亚洲精品色播一区二区| 亚洲欧洲一区二区| 日韩人妻无码一区二区三区久久| 日韩制服国产精品一区| 日本不卡一区二区三区视频| 狠狠色婷婷久久一区二区| 美女福利视频一区| 无码一区二区三区在线观看| 国产一区二区三区不卡观| 久久精品一区二区三区四区| 射精专区一区二区朝鲜| 无码福利一区二区三区| 无码丰满熟妇浪潮一区二区AV| 亚洲熟妇无码一区二区三区导航| 任你躁国语自产一区在| 一本一道波多野结衣AV一区| 亚洲av无一区二区三区| 亚洲美女高清一区二区三区| 黄桃AV无码免费一区二区三区| 亚洲综合无码AV一区二区| 成人中文字幕一区二区三区|