认识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小时内与您取得联系。