6月8号

📰

微头条

看见新观点 · 极速登录

登 录

注册新账号
|

忘记密码？

✨ 体验版 | 点击按钮演示交互

登录页面HTML+CSS+JS完整知识点

一、HTML结构知识点

1. 文档基础

• <!DOCTYPE html>：声明页面为HTML5文档，必须写在首行。
• <html lang="zh-CN">：根标签，lang设置网页语言为中文。
• <head>存放页面元数据，不展示在页面；<body>存放所有可见内容。

2. meta元标签

• <meta charset="UTF-8"> 设置字符编码，解决中文乱码。
• viewport视口标签：实现移动端适配，width=device-width 页面宽度等于手机屏幕。

3. 表单form标签

• action：表单提交地址，# 代表当前页面；method="post"，传输隐私数据，不暴露在网址栏。
• id：给标签唯一标识，用于JS获取元素。

4. input输入框属性

• type="text" 普通文本框；type="password" 密码框，内容隐藏。
• placeholder：输入框灰色提示文字；required：HTML5原生非空校验。
• autocomplete：开启浏览器自动填充账号密码。

5. 超链接 <a>
   href="#" 空链接，仅前端演示，不跳转页面。

二、CSS样式知识点

1. 全局样式重置

* {margin:0;padding:0;box-sizing:border-box;}

• 清除浏览器自带内外边距；border-box：盒子宽高包含边框、内边距，布局不易错乱。

2. Flex弹性布局居中

• display:flex 开启弹性布局；justify-content:center 水平居中；align-items:center 垂直居中。
• min-height:100vh：占满浏览器全屏高度。

3. 渐变样式

• linear-gradient() 线性渐变，制作渐变背景。
• 文字渐变：background-clip:text、-webkit-background-clip:text、color:transparent。

4. 美化通用属性

• border-radius：设置圆角；box-shadow：添加阴影，营造立体卡片效果。
• transition：样式过渡动画，鼠标悬浮时变化更顺滑。
• overflow:hidden：隐藏超出容器的内容。

5. 伪类、伪元素

• :hover 鼠标悬浮样式；:active 鼠标按下样式；:focus 输入框选中激活样式。
• ::placeholder：修改输入框提示文字样式。

6. 响应式媒体查询
   @media (max-width: 屏幕宽度) {}，手机小屏幕自动修改内边距、字体大小，适配移动端。
7. 常用单位与布局

• rem：相对根字体大小，适配不同设备；gap 设置弹性元素间距。
• flex-wrap:wrap：空间不足时元素自动换行，防止页面横向溢出。

三、JavaScript交互知识点

1. 获取DOM元素
   document.getElementById("id名")，根据id获取页面标签对象。
2. 绑定事件 addEventListener

• submit：表单提交事件；click：鼠标点击事件；keypress：键盘按下事件。

3. 阻止默认行为 e.preventDefault()
   阻止表单自动刷新页面、a标签自动跳转。
4. 表单输入校验

• 输入框.value.trim() 获取输入内容并去除前后空格。
• 判断空值后alert弹窗提示，元素.focus() 自动光标定位到输入框。

5. 手动触发表单提交
   dispatchEvent(new Event('submit'))，回车时复用表单校验逻辑。
6. 变量规范
   const 定义常量，值不会改变的变量推荐使用。

四、综合核心简答题知识点

1. HTML、CSS、JS分工
   HTML搭建页面结构；CSS负责布局美化；JS实现点击、表单校验等交互，三层分离方便维护。
2. 表单优先使用post原因
   数据不会显示在URL地址栏，适合账号、密码等隐私信息，安全性更高。
3. 前端校验优缺点
   提升用户体验，减少无效提交；仅做辅助，不能替代后端校验，可被用户绕过。
4. transition过渡作用
   元素状态切换时平滑变化，避免样式瞬间切换的生硬感，优化页面视觉体验。