### 1.HTML
什么是HTML?
HTML（HyperText Markup Language）是一种用于创建和组织网页内容的标记语言。它使用标签来定义和描述网页的结构，并通过标签之间的嵌套和属性来指定元素的属性和行为。HTML代码可以在网页浏览器中渲染为可视化的网页。
该代码部分用到以下标签：
1. `<!DOCTYPE html>`：声明文档类型为 HTML。
2. `<html lang="en">`：根元素，指定页面的主要语言为英文。
3. `<head>`：包含关于文档的元信息和引用外部脚本和样式表的标签。
4. `<meta>`：用于设置文档的元信息，如字符编码、兼容模式和视口设置。
5. `<link href="style.css" rel="stylesheet" type="text/css" />`：引用外部样式表文件 `style.css` 来定义页面的样式。
6. `<title>`：设置页面的标题栏显示的文本为 “InsCode 登录页面”。
7. `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">`：引入 Font Awesome 图标库的样式表。
8. `<style>`：内联 CSS 样式定义，用于设置页面的背景图片、字体以及其他样式。
9. `<body>`：包含了页面的主要内容，可见部分的显示区域。
10. `<div class="container">`：一个带有类名为 “container” 的 `<div>` 元素，用于包裹登录表单的内容。
11. `<h2>`：用于显示 “登录” 的标题。
12. `<form>`：登录表单，用于向服务器提交用户的登录凭据。
13. `<div class="input-container">`：用于包裹输入框和图标的 `<div>` 元素。
14. `<i class="fas fa-user"></i>`：使用 Font Awesome 图标库显示一个用户图标。
15. `<input type="text" id="username" name="用户名" onfocus="showPlaceholder()" onblur="hidePlaceholder()" required>`：一个包含 `type` 为文本和 `name` 为 “用户名” 的输入框，还包含有焦点获得和失去时触发事件的交互行为。
16. `<button id="loginBtn" type="submit">登录</button>`：一个表示登录按钮的 `<button>` 元素。
17. `<div class="logo">`：一个带有类名为 “logo” 的 `<div>` 元素，包含站点的标志和欢迎文本。
18. `<img src="logo.svg" alt="InsCode">`：显示名为 “logo.svg” 的图像作为 InsCode 站点的标志。
19. `<script src="script.js"></script>`：引入外部 JavaScript 文件 `script.js`，用于处理与登录表单相关的 JavaScript 交互行为。
<style>
body { font-family: Arial, sans-serif; /* 设置字体 */ background: url(拾光.jpg) repeat-x; /* 设置背景图片 */ background-size: cover; background-position: center; }
登录
### 2.CSS
什么是CSS?
CSS（Cascading Style Sheets）是一种用于样式化网页的标记语言。它与HTML一起使用，用于控制网页的布局、外观和样式。通过CSS，开发人员可以定义文档的各个元素在浏览器中的显示方式。
对应于前面HTML的CSS代码如下：
/*将页面的内容垂直和水平居中对齐*/ html { height: 100%; width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; }
* 这段代码描述的是将页面的内容垂直和水平居中对齐的样式。
+ `html` 是选择所有 HTML 元素的根元素。
+ `height: 100%` 和 `width: 100%` 将页面的高度和宽度设置为占据整个可用空间。
+ `margin: 0` 确保没有任何外边距。
+ `display: flex` 将 `display` 属性设置为 `flex`，以创建一个弹性容器。
+ `align-items: center` 和 `justify-content: center` 让容器内的内容在垂直和水平方向上都居中对齐。
/*盒子细节设置*/
.container,.logo
{
text-align: center; /*文本内容居中对齐*/
padding: 30px; /*设置容器的内边距*/
max-width: 300px; /*容器的最大宽度*/
margin: 0 auto; /*设置容器的外边距*/
background-color: rgba(255, 255, 255, 0.5); /*设置白色透明背景*/
}
.container h2
{
text-align: center;
}
* 这段代码描述的是容器的细节样式设置。
+ `.container, .logo` 是选择类名为 `.container` 和 `.logo` 的所有元素。
+ `text-align: center` 将文本内容居中对齐。
+ `padding: 30px` 设置容器的内边距为 30px。
+ `max-width: 300px` 设置容器的最大宽度为 300px。
+ `margin: 0 auto` 设置容器的外边距为自动，并且在水平方向上居中对齐。
+ `background-color: rgba(255, 255, 255, 0.5)` 设置容器的背景颜色为半透明的白色。
/*设置输入框*/ .container input[type="text"], .container input[type="password"] { width: 100%; padding: 12px 30px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.5); /*设置输入框透明*/ }
* 这段代码描述的是输入框的样式设置。
+ `.container input[type="text"], .container input[type="password"]` 选择类名为 `.container` 的元素下的所有 `type` 为文本和密码的输入框元素。
+ `width: 100%` 设置输入框宽度为 100%。
+ `padding: 12px 30px` 设置输入框的内边距为 12px 顶部/底部和 30px 左侧/右侧。
+ `margin: 8px 0` 设置输入框的外边距为 8px 顶部/底部和 0 左侧/右侧。
+ `display: inline-block` 将元素显示为内联块级元素，即在同一行显示。
+ `border: 1px solid #ccc` 设置输入框的边框为 1px 灰色实线边框。
+ `box-sizing: border-box` 使用 `border-box` 盒子模型，让元素的总宽度包括内边距和边框。
+ `background-color: rgba(255, 255, 255, 0.5)` 设置输入框的背景颜色为半透明的白色。
/*设置输入框内图标*/ .input-container { position: relative; } .input-container i { position: absolute; top: 50%; left: 5px; transform: translateY(-50%); padding: 0 5px; color: #888; }
* 这段代码描述的是输入框内图标的样式设置。
+ `.input-container` 是选择类名为 `.input-container` 的元素。
+ `position: relative` 将元素的定位方式设置为相对定位。
+ `.input-container i` 是选择位于 `.input-container` 内的 `i` 元素。
+ `position: absolute` 将图标元素的定位方式设置为绝对定位。
+ `top: 50%` 将图标元素的顶部位置设置为父容器的 50% 处。
+ `left: 5px` 将图标元素的左侧位置设置为离父容器左边缘 5px 的距离。
+ `transform: translateY(-50%)` 使用 `translateY` 将图标元素在垂直方向上上移自身高度的一半，
/*按钮部分*/ #loginBtn { color: white; padding: 14px 20px; margin: 10px 0; border: none; width: 100%; background-color: #ccc; transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */ } #loginBtn:hover { cursor: pointer; opacity: 0.8; background-color: #f00; /* 改变背景色 */ transform: scale(1.02); /* 放大按钮 */ }
* 这段代码描述的是按钮样式设置。
+ `#loginBtn`：选择 ID 为 `loginBtn` 的按钮元素，并设置它们的样式。
+ `color: white`：将按钮文本的颜色设置为白色。
+ `padding: 14px 20px`：设置按钮的内边距为 14px 顶部/底部 和 20px 左侧/右侧。
+ `margin: 10px 0`：设置按钮的外边距为 10px 顶部/底部 和 0 左侧/右侧。
+ `border: none`：移除按钮的边框。
+ `width: 100%`：将按钮的宽度设置为 100%。
+ `background-color: #ccc`：设置按钮的背景颜色为浅灰色。
+ `transition: background-color 0.3s, transform 0.3s`：为按钮的背景颜色和变换效果设置过渡动画。
+ `#loginBtn:hover`：设置鼠标悬停在按钮上时的样式。
+ `cursor: pointer`：将鼠标悬停在按钮上时的光标样式设置为手型指针。
+ `opacity: 0.8`：将按钮的不透明度设置为 0.8，使其稍微变暗，以提供视觉反馈。
+ `background-color: #f00`：将按钮的背景颜色改为红色。
+ `transform: scale(1.02)`：将按钮的大小放大 1.02 倍，以一种平滑的动画效果进行缩放。
通过这些样式设置，实现了按钮的文本颜色、内边距、外边距、边框、宽度、背景颜色和过渡效果的定义。同时，使用 `:hover` 伪类选择器设置了鼠标悬停时按钮的样式，包括光标样式、背景颜色变化和按钮的缩放效果。这些样式共同创建了一个具有交互友好和动态效果的按钮样式。
### 3.JS
什么是Javascript?
JavaScript是一种高级编程语言，用于在网页上添加交互性和动态功能。它是一种脚本语言，可以直接嵌入到HTML代码中，并在浏览器中执行。
对应于前面HTML的Javascript代码如下：
/*控制框内占位符文本的显示和隐藏*/ function showPlaceholder() { if (event.target.value === '') { event.target.placeholder = '请输入' + event.target.name; } }
function hidePlaceholder() { event.target.placeholder = ''; }
* `function showPlaceholder()`：
+ 这个函数在输入框获得焦点时调用，用于显示占位符文本。
+ 使用 `event.target.value` 获取当前输入框的值。
#### 最后更多分享：**前端字节跳动真题解析**
- 
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
