認識HTML頁面

頁就是一個HTML文件。

1、HTML結構

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范.

HTML標簽
標識HTML文檔，是所有HTML中標簽的一個根節點。
head標簽
標識頭部區域，用于存放：title,meta,base,style,script,link
title標題
在head標簽中我們必須要設置的標簽，讓頁面擁有一個屬于自己的標題。
body標簽
標識頁面的主體部分，用于存放所有的HTML標簽，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML標簽和屬性

寫HTML文檔時，必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件，它由標簽和信息組合而成，當然標簽和信息也不是隨便組合的，需要遵循一定規則，否則無法正常顯示。

標簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML標簽。根據出現個數不同，分為雙標簽和單標簽
雙標簽
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內容 </標簽名>
單標簽
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

標簽關系
嵌套關系
<head> <title> </title> </head>
并列關系
<head></head> <body></body>
標簽語義化
所謂標簽語義化，就是指標簽的含義
作用：

方便代碼閱讀和維護
具有更好地搜索引擎優化
更容易讓瀏覽器或是網絡爬蟲解析，從而更好地分析網頁的內容

遵循原則：
合適的地方放一個最為合理的標簽。當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性

有一起學習的嗎？請點贊收藏+關注哦！

??《javascript權威指南》，前端屆稱為”犀牛書”，本書介紹JavaScript語言和由瀏覽器與Node實現的JavaScript API。本書適合有一定編程經驗、想學習JavaScript讀者，也適合已經在使用JavaScript但希望更深入地理解進而真正掌握這門語言的程序員。本書的目標是全面地講解JavaScript語言，對JavaScript程序中可能用到的重要的客戶端API和服務器端API提供深入的介紹。

2??《前端工程化》本書以Vue.js的3.0版本為核心技術棧，圍繞“前端工程化”和TypeScript的知識點展開講解，根據筆者多年的前端開發和一線團隊管理經驗，將Vue 3的知識點按照工程師做項目的實施順序梳理成章，一步一步幫助讀者進行前端工程化和Vue 3的開發。從前端工程化開始到TypeScript語言的學習，再到使用TypeScript開發Vue 3項目，通過循序漸進的學習過程提升讀者在前端工程化領域的實戰能力。

3??《JavaScript設計模式與開發實踐》騰訊前端alloy team團隊出品，全面涵蓋專門針對javascript的16個設計模式，深入剖析面向對象設計原則、編程技巧及代碼重構設計模式是軟件設計中經過了大量實際項目驗證的可復用的優秀解決方案，它有助于程序員寫出可復用和可維護性高的程序。許多優秀的javascript開源框架都運用了不少設計模式，改善了自己編寫的某個軟件，更好地理解了面向對象的編程思想。

4??《Web性能權威指南》是谷歌公司高性能團隊核心成員的權威之作，堪稱實戰經驗與規范解讀完美結合的產物。目標是涵蓋Web開發者技術體系中應該掌握的所有網絡及性能優化知識。全書以性能優化為主線，從TCP、UDP和TLS協議講起，解釋了如何針對這幾種協議和基礎設施來優化應用。然后深入探討了無線和移動網絡的工作機制。最后，揭示了HTTP協議的底層細節，同時詳細介紹了XHR、SSE、WebSocket、WebRTC和DataChannel等現代瀏覽器新增的具有革命性的新能力。

5??《前端架構:從入門到微前端》是一本圍繞前端架構的實施手冊，從基礎的架構規范，到如何設計前端架構，再到采用微前端架構拆分復雜的前端應用。本書通過系統地介紹前端架構世界的方方面面，來幫助前端工程師更好地進行系統設計。

前端架構包含以下五部分內容。設計:講述了架構設計的模式，以及設計和制定前端工作流。

基礎:通過深入構建系統、單頁面應用原理、前端知識體系等，來構建出完整的前端應用架構體系。實施:通過與代碼結構的方式，介紹如何在企業級應用中實施組件化架構、設計系統和前后端分離架構。

微前端:引入6種微前端的概念，以及如何劃分、設計微前端應用，并展示了如何實現這6種微前端架構。

演進:提出更新、遷移、重構、重寫、重新架構等架構演進方式，來幫助開發人員更好地設計演進式架構。

《前端架構:從入門到微前端》適合想要成為優秀前端開發工程師(初中級)，或致力于構建更易于維護的系統架構的開發人員、技術主管、軟件架構師和軟件

6??《編譯原理》是編譯原理課程方面的經典教材，全面、深入地探討了編譯器設計方面的重要主題，包括詞法分析、語法分析、語法制導定義和語法制導翻譯、運行時刻環境、目標代碼生成、代碼優化技術、并行性檢測以及過程間分析技術，并在相關章節中給出大量的實例。

tml簡單教程

簡單登錄界面

以下是一個簡單的HTML登錄頁面的代碼，你可以根據自己的需要進行修改：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面</title>
<style type="text/css">
body {
background-color: #f2f2f2;
}
.login {
width: 400px;
height: 300px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px #ccc;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
}
.login h1 {
text-align: center;
font-size: 30px;
color: #333;
padding-top: 30px;
}
.login input[type="text"], .login input[type="password"] {
width: 300px;
height: 40px;
border-radius: 5px;
border: none;
outline: none;
margin-top: 30px;
margin-left: 50px;
padding-left: 10px;
font-size: 16px;
}
.login input[type="submit"] {
width: 300px;
height: 40px;
background-color: #f00;
border-radius: 5px;
border: none;
outline: none;
color:#fff;
font-size: 18px;
cursor:pointer; 
margin-top: 30px; 
margin-left:50px; 
}
</style>
</head>
<body>
<div class="login">
<h1>登錄</h1>
<form action="" method="post">
<input type="text" name="username" placeholder="請輸入用戶名"><br>
<input type="password" name="password" placeholder="請輸入密碼"><br>
<input type="submit" value="登錄">
</form>
</div>
</body>
</html>

這是一個簡單的登錄頁面，你可以根據自己的需要進行修改。如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) HTML+CSS+JS實現十款好看的登錄注冊界面模板，趕緊收藏起來吧！好看的登錄界面王同學要努力的博客-CSDN博客. https://blog.csdn.net/m0_46374969/article/details/115906705. (2) HTML+CSS登錄界面html登錄頁面代碼桐艾的博客-CSDN博客. https://blog.csdn.net/tongai1/article/details/105954419. (3) 如何制作一個簡單的HTML登錄頁面（附代碼） - 知乎專欄. https://zhuanlan.zhihu.com/p/143671138.

發送get請求并顯示返回內容

當客戶端使用GET方法向服務器發送請求時，請求的數據會附加在URL的末尾。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取GET請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test_get.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 GET 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送GET請求。當用戶點擊按鈕時，jQuery會向demo_test_get.asp發送GET請求，并將數據附加在URL的末尾。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) 純 HTML 頁面發請求獲取數據并渲染到頁面上 - CSDN博客. https://blog.csdn.net/LuckKing0925/article/details/111308084. (3) 使用Ajax發送http請求（get&post請求） - 千古壹號 - 博客園. https://www.cnblogs.com/qianguyihao/p/8485028.html.

發送post請求

在HTML中，可以使用form元素來創建一個表單，然后使用POST方法將表單數據發送到服務器。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
</head>
<body>
<form action="http://www.example.com/login" method="post">
<label for="username">用戶名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密碼:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>

在這個例子中，我們使用了form元素來創建一個表單，然后使用POST方法將表單數據發送到http://www.example.com/login。在表單中，我們使用了兩個input元素來接收用戶名和密碼。當用戶點擊提交按鈕時，表單數據將被發送到服務器。

如果你想了解更多關于HTML的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) POST - HTTP | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/web/http/methods/post. (2) HTML 請求方法 - w3school 在線教程. https://www.w3school.com.cn/tags/html_ref_httpmethods.asp. (3) jQuery post() 方法 | 菜鳥教程. https://www.runoob.com/jquery/ajax-post.html. (4) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data.

接收post請求

當客戶端使用POST方法向服務器發送請求時，服務器會將請求的數據存儲在HTTP請求的請求主體中。服務器可以使用相同的HTTP協議來回答請求。在客戶端，可以使用JavaScript來獲取POST請求的數據。以下是一個簡單的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST請求</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送 POST 請求</button>

</body>
</html>

在這個例子中，我們使用了jQuery庫來發送POST請求。當用戶點擊按鈕時，jQuery會向demo_test_post.asp發送POST請求，并將數據存儲在HTTP請求的請求主體中。當服務器回答請求時，jQuery會調用回調函數，并將服務器返回的數據作為參數傳遞給它。

如果你想了解更多關于HTML、JavaScript和jQuery的知識，可以參考這些網站：W3Schools、MDN Web Docs。

(1) 發送表單數據 - 學習 Web 開發 | MDN - MDN Web Docs. https://developer.mozilla.org/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data. (2) javascript能否獲取到post請求內的數據? - SegmentFault 思否. https://segmentfault.com/q/1010000004523107. (3) ChatGPT流式streaming回復的實現 - 掘金. https://juejin.cn/post/7222440107214241829.

在線咨詢

上一篇：淺談進程隱藏技術
下一篇：html基礎必備-必需標記，前端小白一看就會

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。