HTML5CSS3提高

来源:https://www.cnblogs.com/chenyuanrumeng/archive/2023/08/07/17610581.html
-Advertisement-
Play Games

# 1 HTML5新特性 ## 1.1 概述 HTML5 的新增特性主要是針對於以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等。 這些新特性都有相容性問題，基本是 **IE9+ 以上版本的瀏覽器**才支持，如果不考慮相容性問題，可以大量使用這些新特性。 ## 1.2 語義化標簽 （★★） ...


1 HTML5新特性

1.1 概述

HTML5 的新增特性主要是針對於以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等。

這些新特性都有相容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮相容性問題，可以大量使用這些新特性。

1.2 語義化標簽 （★★）

以前佈局，我們基本用 div 來做。div 對於搜索引擎來說，是沒有語義的。

<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>

發展到了HTML5後，新增了一些語義化標簽，這樣的話更加有利於瀏覽器的搜索引擎搜索，也方便了網站的seo（Search Engine Optimization，搜索引擎優化），下麵就是新增的一些語義化標簽

  • <header> 頭部標簽
  • <nav> 導航標簽
  • <article> 內容標簽
  • <section> 定義文檔某個區域
  • <aside> 側邊欄標簽
  • <footer> 尾部標簽

image.png

註意：

  • 這種語義化標準主要是針對搜索引擎的
  • 這些新標簽頁面中可以使用多次
  • 在 IE9 中，需要把這些元素轉換為塊級元素
  • 其實，我們移動端更喜歡使用這些標簽

1.3 多媒體標簽

多媒體標簽分為 音頻 audio 和視頻 video 兩個標簽 使用它們，我們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落後的flash和其他瀏覽器插件了。

因為多媒體標簽的 屬性、方法、事件比較多，因此我們需要什麼功能的時候，就需要去查找相關的文檔進行學習使用。

image.png

1.3.1 視頻標簽- video（★★★）

1.3.1.1 基本使用

當前 <video> 元素支持三種視頻格式： 儘量使用 mp4格式

使用語法：

 <video src="media/mi.mp4"></video>

image.png

1.3.1.2 相容寫法

由於各個瀏覽器的支持情況不同，所以我們會有一種相容性的寫法，這種寫法瞭解一下即可

<video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的瀏覽器暫不支持 <video> 標簽播放視頻
</ video >

上面這種寫法，瀏覽器會匹配video標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

1.3.1.3 video 常用屬性

屬性 值 描述
autoplay autoplay 視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題）
controls controls 向用戶顯示播放控制項
width pixels(像素) 設置播放器寬度
height pixels(像素) 設置播放器高度
loop loop 播放完是否繼續播放該視頻，迴圈播放
preload auto（預先載入視頻）
none（不應載入視頻）		 規定是否預載入視頻（如果有了autoplay 就忽略該屬性）
src url 視頻url地址
poster lmgurl 載入等待的畫面圖片
muted muted 靜音播放

屬性很多，有一些屬性需要大家重點掌握：

  • autoplay 自動播放
    • 註意： 在google瀏覽器上面，預設禁止了自動播放，如果想要自動播放的效果，需要設置 muted屬性
  • width 寬度
  • height 高度
  • loop 迴圈播放
  • src 播放源
  • muted 靜音播放

示例代碼：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

1.3.2 音頻標簽- audio

1.3.2.1 基本使用

當前 元素支持三種視頻格式： 儘量使用 mp3格式

使用語法：

<audio src="media/music.mp3"></audio>

image.png

1.3.2.2 相容寫法

由於各個瀏覽器的支持情況不同，所以我們會有一種相容性的寫法，這種寫法瞭解一下即可

< audio controls="controls"  >
    <source src="happy.mp3" type="audio/mpeg" >
    <source src="happy.ogg" type="audio/ogg" >
    您的瀏覽器暫不支持 <audio> 標簽。
</ audio>

上面這種寫法，瀏覽器會匹配audio標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

1.3.2.3 audio 常用屬性

屬性 值 描述
autoplay autoplay 如果出現該屬性，則音頻在就緒後馬上播放。
controls controls 如果出現該屬性 ，則向用戶顯示控制項，比如播放按鈕。
loop loop 如果出現該屬性，則每當音頻結束時重新開始播放。
src url 要播放的音頻的 URL。

示例代碼：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

1.4 小結

  • 音頻標簽和視頻標簽使用方式基本一致
  • 瀏覽器支持情況不同
  • 谷歌瀏覽器把音頻和視頻自動播放禁止了
  • 我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
  • 視頻標簽是重點，我們經常設置自動播放，不使用 controls 控制項，迴圈和設置大小屬性

1.5 新增的表單元素 （★★）

在H5中，幫我們新增加了很多類型的表單，這樣方便了程式員的開發

課堂案例：在這個案例中，熟練了新增表單的用法

image.png

案例代碼：

<!-- 我們驗證的時候必須添加form表單域 -->
<form action="">
    <ul>
        <li>郵箱: <input type="email" /></li>
        <li>網址: <input type="url" /></li>
        <li>日期: <input type="date" /></li>
        <li>時間: <input type="time" /></li>
        <li>數量: <input type="number" /></li>
        <li>手機號碼: <input type="tel" /></li>
        <li>搜索: <input type="search" /></li>
        <li>顏色: <input type="color" /></li>
        <!-- 當我們點擊提交按鈕就可以驗證表單了 -->
        <li> <input type="submit" value="提交"></li>
    </ul>
</form>

常見輸入類型

text password radio checkbox button file hidden submit reset image

新的輸入類型

屬性值 說明
type="email" 限制用戶輸入必須為Email類型
type="url" 限制用戶輸入必須為URL類型
type="date" 限制用戶輸入必須為日期類型
type="time" 限制用戶輸入必須為時間類型
type="month" 限制用戶輸入必須為月類型
type="week" 限制用戶輸入必須為周類型
type="number" 限制用戶輸入必須為數字類型
type="tel" 手機號碼
type="search" 搜索框
type="color" 生成一個顏色選擇表單

類型很多，我們現階段重點記憶三個： number tel search

屬性 值 說明
required required 表單擁有該屬性表示其內容不能為空，必填
placeholder 提示文本 表單的提示信息，存在預設值將不顯示
autofocus autofocus 自動聚焦屬性，頁面載入完成自動聚焦到指定表單
autocomplete off / on 當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。
預設已經打開，如 autocomplete="on"，關閉 autocomplete="off"
需要放在表單內，同時加上 name 屬性，同時成功提交
multiple multiple 可以多選文件提交

可以通過以下設置方式修改placeholder裡面的字體顏色：

input::placeholder {
    color: pink;
}

2 CSS3新特性

2.1 CSS3 的現狀

  • 新增的CSS3特性有相容性問題，ie9+才支持
  • 移動端支持優於 PC 端
  • 不斷改進中
  • 應用相對廣泛
  • 現階段主要學習：新增選擇器和盒子模型以及其他特性

2.2 CSS3 新增選擇器

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。

  • 屬性選擇器
  • 結構偽類選擇器
  • 偽元素選擇器

2.2.1 屬性選擇器（★★）

屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素

選擇符 簡介
E[att] 選擇具有 att 屬性的 E 元素
E[att="val"] 選擇具有 att 屬性且值等於 val 的 E 元素
E[att^="val"] 匹配具有 att 屬性且值以開頭的 E 元素
E[att$="val"] 匹配具有 att 屬性且值以 val 結尾的 E 元素
E[att*="val"] 匹配具有 att 屬性且值中含有 val 的 E 元素

示例代碼：

 /* 只選擇 type =text 文本框的input 選取出來 */
input[type=text] {
    color: pink;
}
/* 選擇首先是div 然後 具有class屬性 並且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
    color: red;
}
/* 選擇首先是section 然後 具有class屬性 並且屬性值 必須是 data結尾的這些元素 */
section[class$=data] {
    color: blue;
}
  • 屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素
  • 屬性選擇器可以根據元素特定屬性的來選擇元素。 這樣就可以不用藉助於類或者id選擇器
  • 屬性選擇器也可以選擇出來自定義的屬性
  • 註意：類選擇器、屬性選擇器、偽類選擇器，權重為 10。

2.2.2 結構偽類選擇器

結構偽類選擇器主要根據文檔結構來選擇器元素， 常用於根據父級選擇器裡面的子元素

選擇符 簡介
E:first-child 匹配父元素中的第一個子元素 E
E:last-child 匹配父元素中最後一個 E 元素
E:nth-child(n) 匹配父元素中的第 n 個子元素 E
E:first-of-type 指定類型 E 的第一個
E:last-of-type 指定類型 E 的最後一個
E:nth-of-type(n) 指定類型 E 的第 n 個

2.2.2.1 E:first-child

匹配父元素的第一個子元素E

 <style>
    ul li:first-child{
      background-color: red;
    }
  </style>

  <ul>
    <li>列表項一</li>
    <li>列表項二</li>
    <li>列表項三</li>
    <li>列表項四</li>
  </ul>

image.png

E:last-child 則是選擇到了最後一個li標簽

2.2.2.2 E:nth-child(n)（★★★）

匹配到父元素的第n個元素

  • 匹配到父元素的第2個子元素

    ul li:nth-child(2){}

  • 匹配到父元素的序號為奇數的子元素

    ul li:nth-child(odd){} odd 是關鍵字 奇數的意思（3個字母 ）

  • 匹配到父元素的序號為偶數的子元素

    ul li:nth-child(even){} even（4個字母 ）

  • 匹配到父元素的前3個子元素

    ul li:nth-child(-n+3){}

    選擇器中的 n 是怎麼變化的呢？

    因為 n是從 0 ，1，2，3.. 一直遞增

    所以 -n+3 就變成了

    • n=0 時 -0+3=3
    • n=1時 -1+3=2
    • n=2時 -2+3=1
    • n=3時 -3+3=0
    • ...

一些常用的公式： 公式不是死的，在這裡列舉出來讓大家能夠找尋到這個模式，能夠理解代碼，這樣才能寫出滿足自己功能需求的代碼

公式 取值
2n 偶數
2n+1 奇數
5n 5 10 15...
n+5 從第5個開始（包含第五個）到最後
-n+5 前5個（包含第5個）...

常用的結構偽類選擇器是： nth-child(n) {...}

2.2.2.3 E:nth-child 與 E:nth-of-type 的區別

這裡只講明 E:nth-child(n) 和 E:nth-of-type(n) 的區別 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推導即可

<style>
    ul li:nth-child(2){
      /* 字體變成紅色 */
        color: red;
    }

    ul li:nth-of-type(2){
      /* 背景變成綠色 */
      background-color: green;
    }
  </style>


  <ul>
    <li>列表項一</li>
    <p>亂來的p標簽</p>
    <li>列表項二</li>
    <li>列表項三</li>
    <li>列表項四</li>
  </ul>

image.png

也就是說：

  • E:nth-child(n) 匹配父元素的第n個子元素E，也就是說，nth-child 對父元素裡面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然後看看是否和E匹配
  • E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E，也就是說，對父元素裡面指定子元素進行排序選擇。 先去匹配E ，然後再根據E 找第n個孩子

2.2.2.4 小結

  • 結構偽類選擇器一般用於選擇父級裡面的第幾個孩子
  • nth-child 對父元素裡面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然後看看是否和E匹配
  • nth-of-type 對父元素裡面指定子元素進行排序選擇。 先去匹配E ，然後再根據E 找第n個孩子
  • 關於 nth-child（n） 我們要知道 n 是從 0 開始計算的，要記住常用的公式
  • 如果是無序列表，我們肯定用 nth-child 更多
  • 類選擇器、屬性選擇器、偽類選擇器，權重為 10

2.2.3 偽元素選擇器（★★★）(重點)

偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構

選擇符 簡介
::before 在元素內部的前面插入內容
::after 在元素內部的後面插入內容

示例demo

<style>
 div {
     width: 200px;
     height: 200px;
     background-color: pink;
 }
 /* div::before 權重是2 */
 div::before {
     /* 這個content是必須要寫的 */
     content: '我';
 }
 div::after {
     content: '小豬佩奇';
 }
</style>
<body>
 <div>
     是
 </div>
</body>

註意：

  • before 和 after 創建一個元素，但是屬於行內元素
  • 新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素
  • 語法： element::before {}
  • before 和 after 必須有 content 屬性
  • before 在父元素內容的前面創建元素，after 在父元素內容的後面插入元素
  • 偽元素選擇器和標簽選擇器一樣，權重為 1

2.2.3.1 應用場景一： 字體圖標

在實際工作中，字體圖標基本上都是用偽元素來實現的，好處在於我們不需要在結構中額外去定義字體圖標的標簽，通過content屬性來設置字體圖標的 編碼

步驟：

  • 結構中定義div盒子
  • 在style中先申明字體 @font-face
  • 在style中定義after偽元素 div::after
  • 在after偽元素中 設置content屬性，屬性的值就是字體編碼
  • 在after偽元素中 設置font-family的屬性
  • 利用定位的方式，讓偽元素定位到相應的位置；記住定位口訣：子絕父相
<head>
 ...
 <style>
     @font-face {
         font-family: 'icomoon';
         src: url('fonts/icomoon.eot?1lv3na');
         src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
             url('fonts/icomoon.ttf?1lv3na') format('truetype'),
             url('fonts/icomoon.woff?1lv3na') format('woff'),
             url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
         font-weight: normal;
         font-style: normal;
         font-display: block;
     }
     div {
         position: relative;
         width: 200px;
         height: 35px;
         border: 1px solid red;
     }

     div::after {
         position: absolute;
         top: 10px;
         right: 10px;
         font-family: 'icomoon';
         /* content: ''; */
         content: '\e91e';
         color: red;
         font-size: 18px;
     }
 </style>
</head>
<body>
 <div></div>
</body>

2.2.3.2 應用場景二： 仿土豆效果

把之前的代碼進行了改善

步驟：

  • 找到之前寫過的仿土豆的結構和樣式，拷貝到自己的頁面中
  • 刪除之前的mask遮罩
  • 在style中，給大的div盒子（類名叫tudou的），設置 before偽元素
  • 這個偽元素充當的是遮罩的角色，所以我們不用設置內容，但是需要設置content屬性，屬性的值為空字元串
  • 給這個遮罩設置寬高，背景顏色，預設是隱藏的
  • 當滑鼠移入到 div盒子時候，讓遮罩顯示，利用 hover 來實現
<head>
 ...
 <style>
     .tudou {
         position: relative;
         width: 444px;
         height: 320px;
         background-color: pink;
         margin: 30px auto;
     }

     .tudou img {
         width: 100%;
         height: 100%;
     }

     .tudou::before {
         content: '';
         /* 隱藏遮罩層 */
         display: none;
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
     }

     /* 當我們滑鼠經過了 土豆這個盒子，就讓裡面before遮罩層顯示出來 */
     .tudou:hover::before {
         /* 而是顯示元素 */
         display: block;
     }
 </style>
</head>

<body>
 <div class="tudou">
     <img src="images/tudou.jpg" alt="">
 </div>
 <div class="tudou">
     <img src="images/tudou.jpg" alt="">
 </div>
 <div class="tudou">
     <img src="images/tudou.jpg" alt="">
 </div>
 <div class="tudou">
     <img src="images/tudou.jpg" alt="">
 </div>
</body>

2.2.3.3 應用場景三： 清除浮動

回憶一下清除浮動的方式：

  • 額外標簽法也稱為隔牆法，是 W3C 推薦的做法。
  • 父級添加 overflow 屬性
  • 父級添加after偽元素
  • 父級添加雙偽元素

額外標簽法也稱為隔牆法，是 W3C 推薦的做法

image.png

註意： 要求這個新的空標簽必須是塊級元素

後面兩種偽元素清除浮動算是第一種額外標簽法的一個升級和優化。

image.png

image.png

2.3 盒子模型（★★★）

CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：即可指定為 content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

  • box-sizing: content-box 盒子大小為 width + padding + border （以前預設的）
  • box-sizing: border-box 盒子大小為 width

如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）

2.4 其他特性（★）

2.4.1 圖標變模糊 -- CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應用於元素。

語法：

filter:   函數(); -->  例如： filter: blur(5px);  -->  blur模糊處理  數值越大越模糊

image.png

2.4.2 計算盒子寬度 -- calc 函數

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算。

語法：

width: calc(100% - 80px);

括弧裡面可以使用 + - * / 來進行計算

2.5 CSS3 過渡（★★★）

過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態

可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面佈局。

我們現在經常和 :hover 一起 搭配使用。

語法：

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;
  • 屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以。
  • 花費時間： 單位是 秒（必須寫單位） 比如 0.5s
  • 運動曲線： 預設是 ease （可以省略）
  • 何時開始：單位是 秒（必須寫單位）可以設置延遲觸發時間 預設是 0s （可以省 略）
  • 後面兩個屬性可以省略
  • 記住過渡的使用口訣： 誰做過渡給誰加

image.png

2.5.1 過渡練習

image.png

步驟：

  • 創建兩個div的盒子，屬於的嵌套關係，外層類名叫 bar，裡層類名叫 bar_in
  • 給外層的bar 這個盒子設置邊框，寬高，圓角邊框
  • 給裡層的bar_in 設置 初試的寬度，背景顏色，過渡效果
  • 給外層的 bar 添加 hover事件，當觸發了hover事件 讓裡層的bar_in 來進行寬度的變化

代碼：

<head>
 ...
 <style>
     .bar {
         width: 150px;
         height: 15px;
         border: 1px solid red;
         border-radius: 7px;
         padding: 1px;
     }
     .bar_in {
         width: 50%;
         height: 100%;
         background-color: red;
         /* 誰做過渡給誰加 */
         transition: all .7s;
     }
     .bar:hover .bar_in {
         width: 100%;
     }
 </style>
</head>
<body>
 <div class="bar">
     <div class="bar_in"></div>
 </div>
</body>

3 廣義H5說法 瞭解

3.1 狹隘H5

image.png

3.2 廣義H5

  • 廣義的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
  • 這個集合有時稱為 HTML5 和朋友，通常縮寫為 HTML5 。
  • 雖然 HTML5 的一些特性仍然不被某些瀏覽器支持，但是它是一種發展趨勢。
  • HTML5 MDN 介紹：
    https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

4 Web伺服器

4.1 什麼是Web伺服器

伺服器（我們也會稱之為主機）是提供計算服務的設備，它也是一臺電腦。在網路情況下，根據伺服器提供的服務類型不同，伺服器又分為文件伺服器、資料庫伺服器、應用程式伺服器、Web伺服器等。

Web伺服器一般指網站伺服器，是指駐留於網際網路上某種類型電腦的程式，可以向瀏覽器等Web客戶端提供文檔，也可以放置網站文件，讓全世界瀏覽；可以放置數據文件，讓全世界下載。

根據伺服器在網路中所在的位置不同，又可分為本地伺服器和遠程伺服器。

4.2 遠程伺服器

遠程伺服器是通常是別的公司為我們提供的一臺電腦（主機），我們只要把網站項目上傳到這臺電腦上，任何人都可以利用功能變數名稱訪問我們的網站。

比如功能變數名稱：www.mi.com 可以訪問小米網站

總結：

  1. 伺服器就是一臺電腦。因為我們主要是做網站，所以我們主要使用wb伺服器。
  2. 伺服器可以分為本地伺服器和遠程伺服器。
  3. 遠程伺服器是別的公司為我們提供了一臺電腦。
  4. 我們可以把網站上傳到遠程伺服器裡面，別人就可以通過功能變數名稱訪問我們的網站了。

4.3 將自己的網站上傳到遠程伺服器

一個免費的遠程伺服器（免費空間） http://free.3v.do/

  1. 去免費空間網站註冊賬號。
  2. 記錄下主機名、用戶名、密碼、功能變數名稱。
  3. 利用 cutftp 軟體 上傳網站到遠程伺服器。
  4. 在瀏覽器中輸入功能變數名稱，即可訪問我們的網站。

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

-Advertisement-
Play Games
更多相關文章
  • mysql備份恢復(mysqldump備份 mysqlbinlog恢復)
    # mysql備份恢復(mysqldump備份 mysqlbinlog恢復) ## 一、備份的分類 1. 物理備份 ​ 物理備份:對資料庫操作系統的物理文件(如數據文件、日誌文件等) - 冷備份(離線備份) :是在關閉資料庫的時候進行的 - 熱備份(聯機備份) :資料庫處於運行狀態，依賴於資料庫的日 ...
  • 2023-8-7 記錄一次面試題，使用Sql進行遞歸
    本文分享自華為雲社區《【帶你走進DWS大集群內幕】大集群通信：作業hang、殘留問題定位》，作者： 雨落天穹丶。 前言： 測試過程中，我們會遇到這樣一種情況，我的作業都執行很久了，為啥還不結束，是不是作業hang掉了？ 或者說，明明看到CN上的作業都沒了，為什麼通過全局視圖發現DN上還有作業在執行而 ...
  • MySQL Execution Plan -- IN條件與ORDER BY組合優化
    基於本次618大促JDV平臺支持大促過程中的表現，共從大促總結、能力沉澱、待提升項3個方向也進行了相應總結和反思。 ...
  • 使用SQL 統計表最大值，最小值，平均值，中位數值
    > 問：有一個postgres數據表，表中有update_time, create_time關於時間戳的欄位，選擇某個時間段，計算出update_time減去create_time的值做為耗時時間的欄位duration_time，統計出在這段時間內耗時時間的平均值，中位數值，最大值，和最小值，請問如 ...
  • 發佈關於PostGIS對於USD格式的拓展
    我們非常高興的發佈為了一年一度的SIGGRAPH 2023發佈關於為PostGIS支持USD格式的新拓展。 新添加了3個函數 ST_AsUSDA(geom geometry, usd_root_name text, usd_geom_name text, width float) ST_AsUSDC ...
  • ios 自製Framework 獲取指定bundle並讀取裡面的資源
    原文地址：https://zhanglei.blog.csdn.net/article/details/121673288 [toc] ## 一、前言 應用中某些模塊需要組件化，組件化後的工程最後會做二進位化處理，打包成`.framework`文件。 今天簡單聊一下在主工程或其他組件中是如何訪問自製 ...
  • 記錄--前端重新部署如何通知用戶
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 場景 前端構建完上線，用戶還停留還在老頁面，用戶不知道網頁重新部署了，跳轉頁面的時候有時候js連接hash變了導致報錯跳不過去，並且用戶體驗不到新功能。 2. 解決方案 每次打包寫入一個json文件，或者對比生成的script的sr ...
  • pc 移動端 雙端切換
    實現一個項目匹配多個端，使用vue.config自帶的page 實現多個頁面切換。官網介紹：https://cli.vuejs.org/zh/config/#pages 在創建的vue項目中找到 vue.config.js中 添加page 沒有就在根目錄下創建vue.config.js const ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類