HTML入門學習筆記

来源:https://www.cnblogs.com/wutong666/archive/2023/04/24/17348618.html
-Advertisement-
Play Games

HTML學習筆記詳解 01 初識HTML HTML HTML，英文全稱為 Hyper Text Markup Language，中文翻譯為超文本標記語言，其中超文本包括：文字，圖片，音頻，視頻，動畫等 目前 目前主流使用的是HTML5+CSS3 HTML的優勢 主流瀏覽器都支持 微軟 GOOGLE ...


HTML學習筆記詳解

01 初識HTML

  • HTML

HTML，英文全稱為 Hyper Text Markup Language，中文翻譯為超文本標記語言，其中超文本包括：文字，圖片，音頻，視頻，動畫等

  • 目前

目前主流使用的是HTML5+CSS3

  • HTML的優勢

    • 主流瀏覽器都支持
      • 微軟
      • GOOGLE
      • 蘋果
    • 市場的需求
    • 跨平臺（類似JVM）

  • W3C標準

    • W3C

    • W3C標準包括

      • 結構化標準語言（HTML（ 超越文本標記語言）、XML（配置文件 ））
      • 表現標準語言（CSS（表現標簽語言 ））
      • 行為標準（DOM（文檔對象模型 ）、ECMAScript（JavaScript））

02 HTML基本結構

  • <body>、</body>等成對的標簽，分別叫開放標簽和閉合標簽。
  • 單獨呈現的標簽（空元素），如"
    ;"意為用“/”來關閉元素
<!--DOCTYPE：告訴瀏覽器，本文件將使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
    <!-- head標簽代表網頁頭部 -->
<head>
    <!--meta描述性標簽，它用來描述我們網站的一些信息-->
    <!-- meta一般用來做SEO -->
    <meta charset="UTF-8">
    <meta name = "keywords" content = "學習前端">
    <meta name = "description" content = "can can need">
    <!--title網頁標題（顯示在上面的視窗里）-->
    <title>myFirstpage</title>
</head>
<!-- body標簽代表網頁主體 -->
<body>
        我的第一個web網頁</p>
        Hello world！
        <image: src:"">
</body>
</html>

03 網頁基本標簽

  • 標題標簽
  • 段落標簽
  • 換行標簽
  • 水平線標簽
  • 字體樣式標簽
  • 註釋和特殊符號
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本標簽學習</title>
</head>
<body>

<!--  標題標簽  -->
<h1> 一級標題 </h1>
<h2> 二級標題 </h2>
<h3> 三級標題 </h3>
<h4> 四級標題 </h4>
<h5> 五級標題 </h5>
<h6> 六級標題 </h6>

<!-- 段落標簽  -->
<!-- 使用<p>和</p>  -->
<h3> 兩隻老虎 </h3>
<p>兩隻老虎，兩隻老虎，</p>
<p>跑得快，跑得快，</p>
<p>一隻沒有眼睛，</p>
<p>一隻沒有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>兩隻老虎，兩隻老虎，</p>
<p>跑得快，跑得快，</p>
<p>一隻沒有耳朵，</p>
<p>一隻沒有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!-- 水平線標簽  -->
<hr/>

<!-- 使用<br/>  -->
<!-- 註意兩種換行方式的不同  -->
<h3> 兩隻老虎 </h3>
兩隻老虎，兩隻老虎，<br/>
跑得快，跑得快，<br/>
一隻沒有眼睛，<br/>
一隻沒有尾巴，<br/>
真奇怪！真奇怪！<br/>
兩隻老虎，兩隻老虎，<br/>
跑得快，跑得快，<br/>
一隻沒有耳朵，<br/>
一隻沒有尾巴，<br/>
真奇怪！真奇怪！<br/>

<hr/>

<!-- 粗體 斜體  -->
<h3>字體樣式標簽</h3>
粗體：<strong>I LOVE HTML</strong><br/>
斜體：<em>I LOVE HTML</em><br/>

<hr/>
<!-- 特殊符號  -->
<h3>特殊符號</h3>
1、空格：&nbsp;<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;格<br/>
註意，按空格也會有，但是多個space只會顯示一個<br/>
空    格<br/>
2、大於小於符號<br/>
&gt;：大於號<br/>
&lt;：小於號<br/>
&copy;：版權號<br/>
<!--
     特殊符號不記得時可以上百度查詢
-->

</body>
</html>

04 圖像標簽

  • 常見的圖像格式
    • JPG
    • GIF
    • PNG
    • BMP
    • .........
  • 調用格式
<img src="path" alt="text" title="text" width = "x" height = "y"/>

path：指圖片載入路徑（必填）

  • 建議使用相對地址（推薦），絕對地址（也可以，但不推薦）

  • 在這裡可以看到copy過來的絕對地址或者在本project中的地址。

../：--上一級目錄

alt：圖片名字，指如果圖片無法正常載入會出現的替代文本

title：當滑鼠置於圖片上時會顯示圖片名稱

width：設置寬度

height：設置高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>俾斯麥號戰列艦</title>
</head>
<body>
      <h1>俾斯麥號戰列艦</h1>
      <img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080">
</body>
</html>

05 鏈接標簽

  • 使用格式
<a href = "path" target = "目標視窗位置">鏈接文本或圖像</a>
<!-- a標簽
    href：必填。表示要跳轉到哪個頁面
    target：表示視窗在哪裡打開
        _blank  在新標簽中打開
        _self   在當前頁面的頁面中打開
-->
  • 文本超鏈接
  • 圖像超鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鏈接標簽學習</title>
</head>
<body>
<a name = "#top"></a>
<a href="imageTest.html" target="_blank">點我查看俾斯麥號高清大圖</a><br/>
<a href="imageTest.html" target="_blank">
    <img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "120" height="100">
</a>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<p><img src="../resource/image/bismarck.jpg" alt="俾斯麥號戰列艦" title="bismarck" width = "1960" height="1080"></p>
<a href="#top">點我回到頂部</a><br/>
<a name = "down">down</a>
</body>
</html>
  • 首先明確，超鏈接一共三類
    • 頁面間鏈接
      • 從一個頁面鏈接到另一個頁面
    • 錨鏈接
    • 功能性鏈接

06 塊元素和行內元素

  • 塊元素
    • 無論內容多少，該元素獨占一行
    • 例如（p,h1-h6,......）
  • 行內元素
    • 內容撐開寬度，左右都是行內元素的可以排在一行
    • （a.strong.em......）

07 列表標簽

  • 什麼是列表
    • 列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，並以列表的形式顯示出來，以便瀏覽者能更快捷的獲得相應的信息。
  • 列表的分類
    • 無序列表
    • 有序列表
    • 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--有序列表
顯示帶數字
常用範圍：試卷、問答之類
-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Linux</li>
</ol>

<hr>

<!--無序列表
顯示只有黑點之類的類似markdown類似的排序
常用範圍：導航、側邊欄
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C/C++</li>
    <li>Linux</li>
</ul>


<hr>
<!--自定義列表
dl:標簽
dt:列表名稱
dd:列表內容
常用範圍：常見於網站底部的導航欄
-->

<dl>
    <dt>電腦編程語言</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
    <dd>Linux</dd>
</dl>

</body>
</html>

08 表格標簽

  • 為什麼使用表格

    • 簡單通用
    • 結構穩定

  • 基本結構

    • 單元格
    • 行
    • 列
    • 跨行
    • 跨列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>

<table border="1px">
  <tr>
    <td colspan="3" text>學生成績</td>
  </tr>
    <td rowspan="2">吳同</td>
    <td>語文</td>
    <td>100</td>
  </tr>
    <td>數學</td>
    <td>100</td>
  </tr>
    <td rowspan="2">肉食動物</td>
    <td>語文</td>
    <td>100</td>
  </tr>
    <td>數學</td>
    <td>100</td>
  </tr>
</table>

</body>
</html>

09 視頻和音頻

  • 視頻元素
    • video
  • 音頻元素
    • audio
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒體元素調用</title>
</head>
<!-- 音頻和視頻
src:資源路徑
controls:控制條
outplay:自動播放
ps:有些人的自動播放功能可以不太好使，可能是瀏覽器設置問題。解決思路可以上網去查。
-->
<body>

<video src="../resource/video/xxx.mp4" controls autoplay></video>

<audio src="../resource/audio/xxx.mp3" controls></audio>
</body>

</html>

10 頁面結構分析

元素名 描述
header 標題頭部區域的內容（用戶頁面或頁面中的一塊區域）
footer 標記腳部區域的內容（用於整個頁面或頁面的一塊區域）
section Web頁面中的一塊獨立區域
article 獨立的文章內容
aside 相關內容或應用（常用於側邊欄）
nav 導航類輔助內容 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<header>
    <h2>網頁頭部</h2>
</header>

<section>
    <h2>網頁主體</h2>
</section>

<footer>
    <h2>網頁腳部</h2>
</footer>

</body>
</html>

11 iframe內聯框架

  • 使用結構
<iframe src="path" name="mainFrame" width="??px" height="??px"></iframe>
  • path:引用頁面地址
  • mainFrame:框架識別名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe網站內聯框架</title>
</head>
<body>

<iframe src="https://www.bilibili.com/" frameborder="0" width="1000px" height="800px"></iframe>

<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>-->

</body>
</html>
  • 有些網站如baidu等拒絕使用內聯框架訪問，所以顯示不成功可以換一個網站，如b站
  • 下一個示例是在內聯視窗中打開跳轉網頁
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe網站內聯框架</title>
</head>
<body>

<iframe src="" name = "bgm" frameborder="0" width="1000px" height="800px"></iframe>
<a href = "媒體元素學習.html" target="bgm">點擊跳轉</a>

</body>
</html>

12 初識表單和提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
</head>
<body>
      <h1>登錄註冊</h1>
<!--表單form

action:表單提交的位置，可以是網站，也可以是一個請求處理的地址
method: post get提交方式
        get方式提交：我們可以在url中看到我們提交的信息，不安全，但是高效
        post方式提交：比較安全，可以傳輸大文件
-->    
    
    
      <form action="myFirstpage.html" method="post">
          <!--文本輸入框：input type="text"-->
          <p>用戶：<input type="text" name = "username"></p>
          <!--密碼框：input = "password"-->
          <p>密碼：<input type="password" name = "pwd"></p>
          <p>
              <input type="submit">
              <input type="reset">
              <input type="button" value="註冊" name = "register">
          </p>
      </form>
</body>
</html>
  • 但事實上，使用post也十分危險，按F12打開開發者工具，進入網路監聽（Network，然後在左邊點擊提交

  • 可以看到右下角出現一個提交文件，點開後在上面選擇payload，即可以看到傳輸的相關內容

  • 因此其實這個也不安全，具體何種方法傳輸此類保密信息比較安全，需後期進一步學習。

13 表單元素格式

屬性 說明
type 指定元素類型。text、password、checkbox（多選）、radio（單選）、reset、file、hidden、image和button。預設為text
name 指定表單元素的名稱（後期java程式讀取該屬性）
value 元素的初始值。type為radio時必須指定一個值
size 指定表單元素的初識寬度。當type為text或password時，表單元素的大小以字元為單位。對於其他類型，寬度以像素為單位（px）
maxlength type為text或password時，輸入的最大字元數
checked type為radio或checkbox時，指定按鈕是否被選中

14 文本框和單選框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
</head>
<body>
<h1>註冊</h1>
<form action="表單學習.html" method="get">
    
    <!-- 文本輸入框 input type="text"
    value="xxx" 預設初始值
    maxlength="x" 最長能寫幾個字元
    size="x" 文本框的長度
    -->
    <p>用戶：<input type="text" name = "username"></p>
    
    
    <p>密碼：<input type="password" name = "pwd"></p>
    <!--單選框標簽
         input type="radio"
         value="boy"單選框的值，選中這個項傳輸的也是這個
         name = ""分組類別。如果想讓兩個選項在一個組中就必須統一name
         最後面的中文是填充在單選框中的內容
      -->
    <p>性別：
        <input type="radio" value="boy" name = "sex"/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

</body>
</html>

15 多選框和按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>註冊</title>
</head>
<body background="../resource/image/checkin.jpg"
      style="background-repeat:no-repeat;
               background-attachment:fixed;
               background-size:100% 100%; ">
<h1 style="text-align:center;" >註冊</h1>
<form action="表單學習.html" method="get">
    <!-- 文本輸入框 input type="text"
    value="xxx" 預設初始值
    maxlength="x" 最長能寫幾個字元
    size="x" 文本框的長度
    -->
    <p style="text-align:center;" >用戶：<input type="text" name = "username"></p>

    <!--密碼框
    input type="password"
    會自動將輸入字元轉變為*
    -->
    <p style="text-align:center;" >密碼：<input type="password" name = "pwd"></p>

    <!--單選框
    input type="radio"
    value="xx" 單選框的值
    name = "xx" 表示哪一組
    checked 在此單選框下的預設取值
    最後寫單選框內容
    -->
    <p style="text-align:center;" >性別：
        <input type="radio" value="boy" name = "sex" checked/>男
        <input type="radio" value="girl" name = "sex"/>女
    </p>

    <!--多選框
    input type="checkbox"
    value="xx" 多選框的值
    name = "xx" 表示哪一組
    最後寫多選框內容
    -->
    <p style="text-align:center;" >愛好：
        <input type="checkbox" value="sleep" name = "hobby"/>睡覺
        <input type="checkbox" value="learn" name = "hobby"/>學習
        <input type="checkbox" value="chat" name = "hobby"/>聊天
        <input type="checkbox" value="game" name = "hobby"/>游戲
    </p>
    
    
    <p style="text-align:center;" >
        <input type="submit">
        <input type="reset">
    </p>
    <p style="text-align:center;">
        電子木魚：
        <input type="button" value="功德+1" name="gongde"/>
    </p>
   <!-- <p style="text-align:center;">
        <input type="image" src="../resource/image/bismarck.jpg" width="128px" height="80px">
    </p>-->

    <!--下拉框選擇-->
    <p style="text-align:center;">
        國籍：
        <select name = "國籍" >
            <option value="ch">中國</option>
            <option value="usa">美國</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 -->
    <p style="text-align:center;">
        反饋：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域-->
    <p style="text-align:center;">
        上傳文件：
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

</form>

</body>
</html>

  • html中按鈕有4種

    • input type="button" 普通按鈕
    • input type="image" 圖像按鈕
    • input type="submit" 提交按鈕
    • input type="reset" 重置

  • 除了button按鈕外，剩餘三種都會產生不同效果。

  • image點擊會直接進入上方action對象中

  • 提交按鈕和image類似

  • 重置即清空當前頁面的表單內容

16 列表框文本域和文件域

<!--下拉框選擇-->
    <p style="text-align:center;">
        國籍：
        <select name = "國籍" >
            <option value="ch">中國</option>
            <option value="usa">美國</option>
            <option value="swz">瑞士</option>
            <option value="jpa" selected>日本</option>
        </select>
    </p>

    <!-- 文本域 
         cols="50" rows="10"
    -->
    <p style="text-align:center;">
        反饋：
        <textarea name="textarea" cols="50" rows="10"></textarea>
    </p>

    <!--文件域
             type="file" name="files
     -->
    <p style="text-align:center;">
        上傳文件：
        <input type="file" name="files">
        <input type="button" value="提交" name="upload">
    </p>

17 搜索框滑塊和簡單驗證

    <!--郵箱驗證-->
    <p style="text-align:center;">郵箱:
        <input type="email" name="email">
    </p>

    <!--URL-->
    <p style="text-align:center;">URL:
        <input type="url" name="url">
    </p>

    <!--數字
    input type="number"
    max:最大值
    min:最小值
    step:點擊右邊上下按鈕增減步長
    -->
    <p style="text-align:center;">數量：
        <input type="number" name="name" max="100" min="0" step="1">
    </p>


    <!--音量
    input type="range"
    max:最大值
    min:最小值
    -->
    <p style="text-align:center;">音量：
        <input type="range" name="voic" max="100" min="0">
    </p>

    <!--搜索
       input type="search"
     -->
    <p style="text-align:center;">搜索:
        <input type="search" name="search">
    </p>

18 表單應用

  • 隱藏域 hidden
  • 只讀 readonly
  • 禁用 disabled

拓展：使用label增強滑鼠可用性，即點擊某部分會進入某一編輯部分

 <p style="text-align:center;">
        <label for="mark">點點看吧</label>
    </p>
    <p style="text-align:center;">
        <input type="text" name="text" id="mark">
    </p>

19 表單初級驗證

  • 為什麼要進行初級驗證
    • 對輸入內容進行簡單判斷，從而降低伺服器負載
    • 安全，進行初級驗證可以對用戶輸入內容進行簡單查驗，對系統有一定保護作用
  • 常用方式：
    • placeholder 提示信息
    • required 非空判斷
    • pattern 正則表達式

20 總結


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 盤點| 有哪些比較新的好用的React Native 開發工具？
    在App開發過程中，如果想實現動畫效果，可以粗略分為兩種方式。一種是直接用代碼編寫，像平移、旋轉等簡單的動畫效果，都可以這麼乾，如果稍微複雜點，就會對開發工程師的數學功底、圖形圖像學功底有很高的要求。 ...
  • 博客園silence主題修改記錄
    博客園作為一個老牌技術博客網站，有著非常濃郁的游戲開發、引擎開發以及圖形學氛圍。並且沒有像其他網站有難以接受的廣告。 雖說網站主站看著比較老，但還在接受的範圍。並且可以根據自己的喜好來自定義主題。 尋找主題 以下是找的幾個常見的主題，因為是技術博客閱讀體驗是最重要的，所以最終還是選中了silence ...
  • axios傳遞參數的使用
    今天在學習elasticsearch時，遇到一個問題：項目中前端採用的是Vue2+axios，後端的介面採用Restful風格來接收： 關於Resultful風格： 1. GET（SELECT）：從伺服器取出資源（一項或多項）； 2. POST（CREATE）：在伺服器新建一個資源； 3. PUT（ ...
  • 記錄-使用雙token實現無感刷新，前後端詳細代碼
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 近期寫的一個項目使用雙token實現無感刷新。最後做了一些總結，本文詳細介紹了實現流程，前後端詳細代碼。前端使用了Vue3+Vite，主要是axios封裝，服務端使用了koa2做了一個簡單的伺服器模擬。 一、token 登錄鑒權 j ...
  • form-create-designer-naiveui
    基於Naive UI和Form Creat的表單設計器，可以通過拖拽的方式快速創建表單，提高開發者對錶單的開發效率，節省開發者的時間。 ...
  • CSS 設置文字間距
    CSS 設置文字間距 一、設置字元間距 在 CSS 中，可以使用 letter-spacing 屬性來設置字元間距。該屬性控制每個字元之間的距離，可以設置負值來讓字元更接近，也可以設置正值來讓字元之間的距離更遠。 以下是一個示例，將字元間距設置為 0.1em： p { letter-spacing: ...
  • js 工具類
    /*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組成 */ function ischina(str) { var ...
  • 漲姿勢了，殊途同歸的圖片交互動效製作！
    最近，在 CodePen 上，看到一個非常有意思的圖片動效，效果如下： 原效果鏈接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations 本身這個動畫效果，並沒有多驚艷。驚艷的地方在於原作者的實現方式非 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類