簡單學習HTML+CSS+JavaScript

一、HTML

HTML被稱為 超文本標記語言，是由一系列標簽構成的語言。

下面介紹HTML中的標簽：

（一）HTML文件基本結構

<!DOCTYPE html><html><head><title>Document</title></head>
<body></body></html>
  • html 標簽是整個 html 文件的根標簽 (最頂層標簽)。
  • head 標簽中寫頁面的屬性。
  • title 標簽中寫的是頁面標題。
  • body 標簽中寫的是頁面上顯示的內容。

（二）HTML中標簽層次結構

  • head 和 body 是 html 的子標簽 (html 就是 head 和 body 的父標簽)。
  • title 是 head 的子標簽. head 是 title 的父標簽。
  • head 和 body 之間是兄弟關系。

（三）HTML常見標簽

1.標題標簽<h1>

標題標簽一共有六個，h1-h6，數字越大標題字體越小。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

2.段落標簽<p>

表示一個段落，段落與其他格式的文本之間會自動空出一行，但是前面沒有縮進。

<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>

3.換行標簽<br/>

換行標簽是一個單標簽。

這是一個br標簽<br/>
這是一個br標簽<br/>
這是一個br標簽<br/>

觀察段落標簽和換行標簽的區別：

4.圖片標簽 img

img標簽內必須帶有src屬性，來表示圖片的路徑。

<img src="rose.jpg">

img標簽的其他屬性：

width、height：控制寬度和高度，單位是像素（px）。往往只用修改一個即可，修改一個屬性 圖片會等比例變化。

border：表示圖片的邊框，單位是像素（px）。

<img src="" width="500px" height="500px" border="2px">
  • 屬性可以有多個,不能寫到標簽之前。
  • 屬性之間用空格分割,可以是多個空格,也可以是換行。
  • 屬性之間不分先后順序。
  • 屬性使用 "鍵值對" 的格式來表示。

5.超鏈接：a

<a href="http://www.baidu.com" target="_blank">百度</a>
  • href:必須具備,表示點擊后會跳轉到哪個頁面。
  • target:打開方式.默認是 _self.如果是 _blank 則用新的標簽頁打開。

href的鏈接可以是外部鏈接（如http://www.baidu.com），也可以是內部鏈接（在同一個目錄下的文件，比如1.html）或者空鏈接（填入#表示空鏈接）。

6.表格標簽

 <table style="width: 200px;height: 300px;" border="1px black"><tr><td>aaa</td><td>bbb</td></tr><tr><td>ccc</td><td>ddd</td></tr><tr><td>eee</td><td>fff</td></tr><tr><td>ggg</td><td>hhh</td></tr></table>
  • table標簽：表示的是整個表格。
  • tr標簽：表示表格中的一行。
  • td標簽：表示表格中的一個單元格。

7.表單標簽

表單是讓用戶輸入信息的重要途徑。

分為表單域（form）和表單控件（input）。

form標簽
<form action="test.html"></form>

action表示將要把表單提交到哪個頁面。

input標簽
<input type="text">

用于各種輸入控件，單行文本框，按鈕，單選框，復選框.

  • type (必須有), 取值種類很多，button, checkbox, text, file, image, password, radio 等。
  • name: 給 input 起了個名字。尤其是對于單選按鈕，具有相同的 name 才能多選一。類似于一個四選一選擇題，要將四個選項的name都設置成一樣的，才知道這是個選項針對的是這一道題。
  • value: input 中的默認值。
  • checked: 默認被選中(用于單選按鈕和多選按鈕)。

下面是一些常見的type類型：

文本框:
<input type="text">密碼框:
<input type="password">單選框(多個選項的name一樣):
<input type="radio" name="sex">男性
<input type="radio" name="sex" checked="checked">女性復選框:
<input type="checkbox">吃飯 <input type="checkbox">睡覺 <input type="checkbox">打豆豆普通按鈕:
<input type="button" value="我是一個普通按鈕">提交按鈕:
<form action="1.html"><input type="text" name="username"><input type="submit" value="提交">
</form>
slecet標簽

表示下拉菜單。

 下拉菜單<select><option>北京</option><option selected="selected">上海</option></select>

option標簽中selected屬性值為selected時，表示默認選中。

textarea標簽

用于改變設置文本框的長寬大小。

<textarea rows="50px" cols="50px">你好呀</textarea>

8.無語意標簽：div&span

div和span就是兩個盒子，用于網頁布局。

  • div 是獨占一行的，是一個大盒子。
  • span 不獨占一行，是一個小盒子。
<div><span>咬人貓</span><span>咬人貓</span><span>咬人貓</span>
</div>
<div><span>兔總裁</span><span>兔總裁</span><span>兔總裁</span>
</div>
<div><span>阿葉君</span><span>阿葉君</span><span>阿葉君</span>
</div>

使用這兩個標簽就能讓其內部的元素整體移動和修改更方便。

（四）小練習

題目：

代碼及結果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>用戶注冊</h1><table><tr><td>用戶名</td><td><input type="text" value="請輸入用戶名"></td></tr><tr><td>手機號</td><td><input type="text" value="請輸入手機號"></td></tr><tr><td>密碼</td><td><input type="password" value="請輸入密碼"></td></tr></table><div><span><input type="button" value="注冊"></span><span>已有賬號？</span><span><a href="#">登錄</a></span></div>
</body>
</html>

二、CSS

從這幅圖中可以看出HTML、CSS、JavaScript的區別和特點：

  • HTML是網頁的基礎結構層，本身不涉及樣式美化和交互功能，只是單純地組織內容。
  • CSS專注于視覺呈現，依賴 HTML 的結構，通過選擇器來針對特定的 HTML 元素應用樣式規則。
  • JavaScript是網頁的行為層，能夠讓靜態的網頁變得動態、可交互，常與 HTML 和 CSS 配合，增強網頁的功能性和用戶體驗。

（一）基本語法規范

選擇器+{一條/n條聲明}，一般寫在head標簽中的style中。

  • 選擇器決定針對誰進行修改。
  • 聲明決定怎樣進行修改。
  • 聲明的屬性是鍵值對。
<style>p {/* 設置字體顏色 */color: red;/* 設置字體大小 */font-size: 30px;}
</style><p>hello</p>

（二）引入方式

一共有三種引入方式：

引入方式語法描述示例
行內樣式在標簽內使用style屬性，屬性值是css屬性鍵值對<div style="color:green">綠色</div>
內部樣式定義style標簽，在標簽內部定義css樣式<style> h1 {...} </style>
外部樣式定義link標簽，通過href屬性引入外部css文件<link rel="stylesheet" href="[CSS文件路徑]">
  • 行內樣式，只適合于寫簡單樣式。只針對某個標簽生效。缺點是不能寫太復雜的樣式。
  • 內部樣式會出現大量的代碼冗余，不方便后期的維護，所以不常用。
  • 外部樣式，html 和 css 實現了完全的分離，企業開發常用方式。

（三）CSS中的選擇器類型

1.標簽選擇器

/* 選擇所有的a標簽，設置顏色為紅色 */
a {color: red;
}/* 選擇所有的div標簽，設置顏色為綠色 */
div {color: green;
}

2.class選擇器

/* 選擇class為font32的元素，設置字體大小為32px */
.font32 {font-size: 32px;
}

3.id選擇器

/* 選擇id為submit的元素，設置顏色為紅色 */
#submit {color: red;
}

4.復合選擇器

/* 設置頁面所有元素，顏色為紅色*/
* {color: red;
}

5.通配符選擇器

/*只設置 ul標簽下的 li標簽下的 a標簽，顏色為紅色*/
ul li a {color: blue;
}
  1. 以上三個標簽選擇器?ul?li?a?中的任意，都可以替換成類選擇器，或者 id 選擇器，可以是任意選擇器的組合，也可以是任意數量選擇器的組合。
  2. 不一定是相鄰的標簽，也可以是 "孫子" 標簽。
  3. 如果需要選擇多種標簽，可以使用?,?分割，如?p, div { }?表示同時選中 p 標簽和 div 標簽。逗號前后可以是以上任意選擇器，也可以是選擇器的組合。

（四）常見的CSS樣式

有如下HTML代碼：

<div class="text1">我是文本1</div>

設置顏色

.text1{color: red;
}

設置字體大小

.text1{font-size: 32px;
}

設置邊框

邊框是一個復合屬性，可以同時設置多個樣式，不分前后順序，瀏覽器會根據設置的值自動判斷。

.text1{border: 1px solid purple;
}

同時也可以寫成這樣：

.text1 {/* 這是 border 屬性的拆分寫法，原本可以用 border: 1px purple solid; 一次性設置，這里拆分為寬度、樣式、顏色分別設置 *//* border: 1px purple solid; */border-width: 1px; /* 設置邊框寬度為 1px */border-style: solid; /* 設置邊框樣式為實線（solid） */border-color: purple; /* 設置邊框顏色為紫色（purple） */
}

設置寬高

.text {/* 這是 width 和 height 屬性的單獨設置，分別控制元素的寬度和高度 */width: 200px; /* 設置元素寬度為 200px */height: 150px; /* 設置元素高度為 150px */
}

設置內外邊距

.text {/* 內邊距（padding）：控制元素邊框與內容之間的距離 */padding-top: 10px; /* 上內邊距為 10px */padding-right: 20px; /* 右內邊距為 20px */padding-bottom: 15px; /* 下內邊距為 15px */padding-left: 25px; /* 左內邊距為 25px *//* 外邊距（margin）：控制元素與其他元素之間的距離 */margin-top: 5px; /* 上外邊距為 5px */margin-right: 10px; /* 右外邊距為 10px */margin-bottom: 8px; /* 下外邊距為 8px */margin-left: 12px; /* 左外邊距為 12px */
}

三、JavaScript

（一）引入方式

引入方式語法表述示例
行內樣式直接嵌入到 html 元素內部<input type="button" value="點我一下" οnclick="alert('haha')">
內部樣式定義<script>標簽，寫到 script 標簽中<script>
alert("haha");
</script>
外部樣式定義<script>標簽，通過 src 屬性引入外部 js 文件<script src="hello.js"></script>

（二）基礎語法

1.創建變量

創建變量常用到下面三個關鍵字：

關鍵字解釋示例
var早期JS中聲明變量的關鍵字，作用域在該語句的函數內var name="zhangsan";
letES6中新增的聲明變量的關鍵字，作用域為該語句所在的代碼塊內let name="zhangsan";
const聲明常量的，聲明后不能修改const name="zhangsan";

JavaScript是一門動態的弱類型語言，同一個變量也可以存放不同類型的值。

2.數據類型

數據類型描述
number數字，不區分整數和小數。
string字符串類型，字符串字面值需要使用引號引起來，單引號雙引號均可。
boolean布爾類型：true 真，false 假。
undefined表示變量未初始化，只有唯一的值 undefined。
<script>var a = 10;console.log(typeof a); //numbervar b = 'hello';console.log(typeof b); //stringvar c = true;console.log(typeof c); //booleanvar d;console.log(typeof d); //undefinedvar e = null;console.log(typeof e); //null
</script>

3.運算符

JavaScript中的運算符和Java中基本一致，介紹一下==和===的區別：

  • ==是僅僅比較值是否一樣。
  • ===在比較值是否一樣的基礎上，還要比較其類型。
<script>var age = 20;var age1 = "20";var age2 = 20;console.log(age == age1); //true，比較值console.log(age === age1); //false，類型不一樣console.log(age == age2); //true，值和類型都一樣
</script>

（三）JavaScript對象

1.數組

創建方式：

//使用關鍵字new創建
// Array 的 A 要大寫
var arr = new Array();//使用字面量方式創建 [常用]
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 數組中保存的內容稱為 "元素"

對數組的操作：

<script>var arr = [1, 2, 'haha', false];// 讀取數組console.log(arr[0]); // 1// 添加數組元素arr[4] = "add"console.log(arr[4]); // addconsole.log(arr.length); // 5，獲取數組的長度// 修改數組元素arr[4] = "update"console.log(arr[4]); // update// 刪除數組元素arr.splice(4, 1); // 第一個參數表示從下標為4的位置開始刪除。第二個參數表示要刪除的元素個數是 1 個console.log(arr[4]); // undefined 元素已經刪除，如果元素不存在，結果為undefinedconsole.log(arr.length); // 4，獲取數組的長度
</script>

2.函數

函數的語法格式：

// 創建函數/函數聲明/函數定義
function 函數名(形參列表) {函數體return 返回值;
}// 函數調用
函數名(實參列表);          // 不考慮返回值
let 返回值 = 函數名(實參列表);  // 考慮返回值

注意點：

  • JavaScript中函數可以先調用再聲明。
  • 如果調用時實參與聲明時的形參數量不匹配，多出來的不管，缺少的被當做undefined。

3.對象

使用{}創建對象：

var a = {}; // 創建了一個空的對象var student = {name: '蔡徐坤',height: 175,weight: 170,sayHello: function() {console.log("hello");}
};

使用Object創建對象：

var student = new Object(); // 和創建數組類似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}console.log(student.name);
console.log(student['weight']);
student.sayHello();

（四）JQuery

jQuery是一個快速、簡潔且功能豐富的JavaScript框架，于2006年發布。它封裝JavaScript常用的功能代碼，提供了簡潔而強大的選擇器和DOM操作方法。使用JQuery可以輕松地選擇和操作HTML元素，從而減少了開發人員編寫的代碼量，提高了開發效率，它提供的API易于使用且兼容眾多瀏覽器，這讓諸如HTML文檔遍歷和操作、事件處理、動畫和Ajax操作更加簡單。JQuery對于事件的處理也進行了簡化，提供了一個簡單的API來綁定、觸發和處理事件，使開發人員能夠更方便地處理各種交互行為。

基礎語法：

$(selector).action()
  • $()?是一個函數，它是 jQuery 提供的一個全局函數，用于選擇和操作 HTML 元素。
  • Selector 選擇器，用來 "查詢" 和 "查找" HTML 元素。
  • action 操作，執行對元素的操作。

JQuery 的代碼通常都寫在 document ready 函數中。
document：整個文檔對象，一個頁面就是一個文檔對象，使用 document 表示。
這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在文檔加載完成后才可以對頁面進行操作。
如果在文檔沒有完全加載之前就運行函數，操作可能失敗。

示例如下：

<button type="button">點我消失</button>
<script>$(document).ready(function(){$('button').click(function(){//給按鈕添加了click事件,點擊后元素消失。$(this).hide();});});
</script>

JQuery也有一些自定義的選擇器：

$("標簽/#id/.對象").action()

JQuery事件

事件代碼
文檔就緒事件 (完成加載)$(document).ready(function)
點擊事件$(selector).click(function)
雙擊事件$(selector).dblclick(function)
元素的值發生改變$(selector).change(function)
鼠標懸停事件$(selector).mouseover(function)

操作元素

獲取/設置元素內容
JQuery方法說明
text()設置或返回所選文本內容
html()設置或返回所選文本內容（包括HTML標簽）
val()設置或返回表單字段的值

設置內容：

<div id="test"></div>
<div id="test2"></div>
<input type="text" value=""><script>$(document).ready(function () {$("#test").html('<h1>設置html</h1>');$("#test2").text('<h1>設置text</h1>');$("input").val("設置內容");});
</script>

獲取內容：

<div id="test"><span>你好</span></div>
<input type="text" value="hello"><script>$(document).ready(function () {var html = $("#test").html();console.log("html內容為:" + html);var text = $("#test").text();console.log("文本內容為:" + text);var inputVal = $("input").val();console.log(inputVal);});
</script>
獲取/設置元素屬性

JQuery attr() 方法用于獲取屬性值。

設置元素屬性

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就業課</a></p>
<script>$(function(){$("p a").attr("href","baidu.com")console.log($("p a").attr("href"));});
</script>

獲取元素屬性

<p><a href="https://www.bitejiuyeke.com/index" id="bite">比特就業課</a></p>
<script>$(function(){var href = $("p a").attr("href")console.log(href);});
</script>
獲取/返回css屬性

獲取元素屬性

<div style="font-size: 36px;">我是一個文本</div>
<script>$(function(){var fontSize = $("div").css("font-size");console.log(fontSize);});
</script>

設置元素屬性

<div style="font-size: 36px;">我是一個文本</div>
<script>$(function(){$("div").css("font-size","24px");});
</script>
添加元素/刪除元素

添加元素

<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<script>$(function () {$("ol").append("<li>append</li>");$("ol").prepend("<li>prepend</li>");$("ol").before("before");$("ol").after("after");});
</script>
  • append ()：在被選元素的結尾插入內容
  • prepend ()：在被選元素的開頭插入內容
  • after ()：在被選元素之后插入內容
  • before ()：在被選元素之前插入內容

演示：

刪除元素

  • remove()：刪除被選元素（及其子元素）
  • empty()：刪除被選元素的子元素。
<div id="div1">我是一個div</div>
<button>刪除 div 元素</button>
<script>$(function () {$('button').click(function(){$('#div1').remove();});});
</script>
<ol><li>List item 1</li><li>List item 2</li><li>List item 3</li>
</ol>
<button>刪除列表元素</button>
<script>$(function () {$('button').click(function(){$('ol').empty();});});
</script>

四、猜數字綜合案例

預期效果：

代碼實現：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>數字猜謎游戲</title><script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body><div><input type="button" id="button1" value="重新開始一局游戲"></div><div><span>請輸入要猜的數字：</span><span><input type="text" id="userNumber"></span><span><input type="button" id="button2" value="猜"></span></div><div><span>已經猜的次數：</span><span id="count">0</span></div><div><span>結果：</span><span id="result"></span></div><script>$(function(){let guessNumber = Math.floor(Math.random() * 100) + 1;let count = 0;// 點擊猜按鈕$("#button2").click(function(){count++;$("#count").text(count);// 將輸入值轉換為數字類型let userNumber = parseInt($("#userNumber").val(), 10);if(userNumber === guessNumber){$("#result").text("猜對了");$("#result").css("color", "gray");}else if(userNumber < guessNumber){$("#result").text("猜小了");$("#result").css("color", "blue");}else{$("#result").text("猜大了");$("#result").css("color", "red");} });// 重新開始游戲$("#button1").click(function() {guessNumber = Math.floor(Math.random() * 100) + 1;count = 0;$("#count").text(count);$("#result").text("");$("#userNumber").val("");});});</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/96600.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/96600.shtml
英文地址，請注明出處：http://en.pswp.cn/web/96600.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

強化學習中重要性采樣

強化學習中重要性采樣

PPO 中重要性采樣 https://github.com/modelscope/ms-swift/blob/main/docs/source/Instruction/GRPO/GetStarted/GRPO.md樂&#xff0c;這個網頁中是的groundtruth是錯誤的&#xff08;可能是為了防止抄襲&#xff09;。一些例子 0. 池塘養魚的一個例子 想象一下&#xff0c;你…
閱讀更多...
《樹與二叉樹詳解：概念、結構及應用》

《樹與二叉樹詳解：概念、結構及應用》

目錄 一. 樹的概念和結構 1.1 樹的基本概念 1.2 樹的結構特點 二. 樹的表示方法和實際運用 2.1 孩子 - 兄弟表示法&#xff08;Child-Sibling Representation&#xff09; 2.2 樹的實際應用場景 三. 二叉樹的概念 3.1 二叉樹的核心定義 3.2 二叉樹的基本分類 四. 二叉…
閱讀更多...
Qt/C++，windows多進程demo

Qt/C++，windows多進程demo

1. 項目概述 最近研究了一下Qt/C框架下&#xff0c;windows版本的多進程編寫方法&#xff0c;實現了一個小demo。下面詳細介紹一下。 MultiProcessDemo是一個基于Qt框架實現的多進程應用程序示例&#xff0c;展示了如何在Windows平臺上通過共享內存和事件機制實現進程間通信。該…
閱讀更多...
Android SystemServer 系列專題【篇五：UserController用戶狀態控制】

Android SystemServer 系列專題【篇五：UserController用戶狀態控制】

本篇接著SystemServer的啟動流程&#xff0c;圍繞SystemServer最后階段關于主用戶的啟動和解鎖的流程&#xff0c;作為切入點&#xff0c;來看看SystemServer是如何講用戶狀態同步到所有的系統級服務中。ssm.onStartUserssm.onUnlockingUserssm.onUnlockedUser本篇先介紹UserCo…
閱讀更多...
推薦使用 pnpm 而不是 npm

推薦使用 pnpm 而不是 npm

npm 的局限性 磁盤空間浪費在 npm 早期版本中&#xff0c;每個項目的node_modules目錄都會完整復制所有依賴包&#xff0c;即使多個項目依賴同一個包的相同版本&#xff0c;也會重復存儲。這導致磁盤空間被大量占用&#xff0c;隨著項目數量的增加&#xff0c;存儲成本顯著上升…
閱讀更多...
Transformer實戰（18）——微調Transformer語言模型進行回歸分析

Transformer實戰（18）——微調Transformer語言模型進行回歸分析

Transformer實戰&#xff08;18&#xff09;——微調Transformer語言模型進行回歸分析0. 前言1. 回歸模型2. 數據處理3. 模型構建與訓練4. 模型推理小結系列鏈接0. 前言 在自然語言處理領域中&#xff0c;預訓練 Transformer 模型不僅能勝任離散類別預測&#xff0c;也可用于連…
閱讀更多...
【Linux】【實戰向】Linux 進程替換避坑指南：從理解 bash 阻塞等待，到親手實現能執行 ls/cd 的 Shell

【Linux】【實戰向】Linux 進程替換避坑指南：從理解 bash 阻塞等待，到親手實現能執行 ls/cd 的 Shell

前言&#xff1a;歡迎各位光臨本博客&#xff0c;這里小編帶你直接手撕&#xff0c;文章并不復雜&#xff0c;愿諸君耐其心性&#xff0c;忘卻雜塵&#xff0c;道有所長&#xff01;&#xff01;&#xff01;&#xff01; IF’Maxue&#xff1a;個人主頁&#x1f525; 個人專欄…
閱讀更多...
linux常用命令 （3）——系統包管理

linux常用命令 （3）——系統包管理

博客主頁&#xff1a;christine-rr-CSDN博客 ????? ?? hi&#xff0c;大家好&#xff0c;我是christine-rr ! 今天來分享一下linux常用命令——系統包管理 目錄linux常用命令---系統包管理&#xff08;一&#xff09;Debian 系發行版&#xff08;Ubuntu、Debian、Linux …
閱讀更多...
YOLOv8 mac-intel芯片 部署指南

YOLOv8 mac-intel芯片 部署指南

&#x1f680; 在 Jupyter Notebook 和 PyCharm 中使用 Conda 虛擬環境&#xff08;YOLOv8 部署指南&#xff0c;Python 3.9&#xff09; YOLOv8 是 Ultralytics 開源的最新目標檢測模型&#xff0c;輕量高效&#xff0c;支持分類、檢測、分割等多種任務。 在 Mac&#xff08;…
閱讀更多...
【高等數學】第十一章 曲線積分與曲面積分——第六節 高斯公式 通量與散度

【高等數學】第十一章 曲線積分與曲面積分——第六節 高斯公式 通量與散度

上一節&#xff1a;【高等數學】第十一章 曲線積分與曲面積分——第五節 對坐標的曲面積分 總目錄&#xff1a;【高等數學】 目錄 文章目錄1. 高斯公式2. 沿任意閉曲面的曲面積分為零的條件3. 通量與散度1. 高斯公式 設空間區域ΩΩΩ是由分片光滑的閉曲面ΣΣΣ所圍成&#x…
閱讀更多...
IDEA試用過期，無法登錄，重置方法

IDEA試用過期，無法登錄，重置方法

IDEA過期&#xff0c;重置方法: IntelliJ IDEA 2024.2.0.2 (親測有效) 最新Idea重置辦法!&#xff1a; 方法一&#xff1a; 1、刪除C:\Users\{用戶名}\AppData\Local\JetBrains\IntelliJIdea2024.2 下所有文件(注意&#xff1a;是子目錄全部刪除) 2、刪除C:\Users\{用戶名}\App…
閱讀更多...
創建用戶自定義橋接網絡并連接容器

創建用戶自定義橋接網絡并連接容器

1.創建用戶自定義的 alpine-net 網絡[roothost1 ~]# docker network create --driver bridge alpine-net 9f6d634e6bd7327163a9d83023e435da6d61bc6cf04c9d96001d1b64eefe4a712.列出 Docker 主機上的網絡[roothost1 ~]# docker network ls NETWORK ID NAME DRIVER …
閱讀更多...
Vue3 + Vite + Element Plus web轉為 Electron 應用，解決無法登錄、隱藏自定義導航欄

Vue3 + Vite + Element Plus web轉為 Electron 應用，解決無法登錄、隱藏自定義導航欄

如何在vue3 Vite Element Plus搭好的架構下轉為 electron應用呢&#xff1f; https://www.electronjs.org/zh/docs/latest/官方文檔 https://www.electronjs.org/zh/docs/latest/ 第一步&#xff1a;安裝 electron相關依賴 npm install electron electron-builder concurr…
閱讀更多...
qt QAreaLegendMarker詳解

qt QAreaLegendMarker詳解

1. 概述QAreaLegendMarker 是 Qt Charts 模塊中的一部分&#xff0c;用于在圖例&#xff08;Legend&#xff09;中表示 QAreaSeries 的標記。它負責顯示區域圖的圖例項&#xff0c;通常包含區域顏色樣例和對應的描述文字。圖例標記和對應的區域圖關聯&#xff0c;顯示區域的名稱…
閱讀更多...
linux 函數 kstrtoul

linux 函數 kstrtoul

kstrtoul 函數概述 kstrtoul 是 Linux 內核中的一個函數&#xff0c;用于將字符串轉換為無符號長整型&#xff08;unsigned long&#xff09;。該函數定義在 <linux/kernel.h> 頭文件中&#xff0c;常用于內核模塊中解析用戶空間傳遞的字符串參數。 函數原型 int kstrtou…
閱讀更多...
LLM（三）

LLM（三）

一、人類反饋的強化學習&#xff08;RLHF&#xff09;微調的目標是通過指令&#xff0c;包括路徑方法&#xff0c;進一步訓練你的模型&#xff0c;使他們更好地理解人類的提示&#xff0c;并生成更像人類的回應。RLHF&#xff1a;使用人類反饋微調型語言模型&#xff0c;使用強…
閱讀更多...
DPO vs PPO,偏好優化的兩條技術路徑

DPO vs PPO,偏好優化的兩條技術路徑

1. 背景在大模型對齊&#xff08;alignment&#xff09;里&#xff0c;常見的兩類方法是&#xff1a;PPO&#xff1a;強化學習經典算法&#xff0c;OpenAI 在 RLHF 里用它來“用獎勵模型更新策略”。DPO&#xff1a;2023 年提出的新方法&#xff08;參考論文《Direct Preferenc…
閱讀更多...
BLE6.0信道探測，如何重構物聯網設備的距離感知邏輯？

BLE6.0信道探測，如何重構物聯網設備的距離感知邏輯？

在物聯網&#xff08;IoT&#xff09;無線通信技術快速滲透的當下&#xff0c;實現人與物、物與物之間對物理距離的感知響應能力已成為提升設備智能高度與人們交互體驗的關鍵所在。當智能冰箱感知用戶靠近而主動亮屏顯示內部果蔬時、當門禁系統感知到授權人士靠近而主動開門時、…
閱讀更多...
【計算機 UTF-8 轉換為本地編碼的含義】

【計算機 UTF-8 轉換為本地編碼的含義】

UTF-8 轉換為本地編碼的含義 詳細解釋一下"UTF-8轉換為本地編碼"的含義以及為什么在處理中文時這很重要。 基本概念 UTF-8 編碼 國際標準&#xff1a;UTF-8 是一種能夠表示世界上幾乎所有字符的 Unicode 編碼方式跨平臺兼容&#xff1a;無論在哪里&#xff0c;UTF-8 …
閱讀更多...
4.6 變體

4.6 變體

1.變體簡介 2.為什么需要變體 3.變體是如何產生的 4.變體帶來的麻煩 5.multi_compile和shader_feature1.變體簡介 比如我們開了一家餐廳, 你有一本萬能的菜單(Shader源代碼), 上面包含了所有可能的菜式; 但是顧客每次來點餐時, 不可能將整本菜單都做一遍, 他們會根據今天有沒有…
閱讀更多...
最新文章

Copyright @ 2022~2023