前端入门——案例一：登录界面设计（html+css+js）

原创

于 2025-09-06 15:55:17 发布 · 1.3k 阅读

标签

#前端 #html #css

许久不用html，丢的差不多了，复习些基础语法，且用个小案例进行学习。

基础介绍

下面将介绍网页里常见的结构元素<html> </html>、<head> </head>、<body> </body>、<div> </div> 。

<html> ... </html>

整个 HTML 文档的根标签。
网页所有内容都必须写在 <html> 标签里面。
它通常分为两大部分：
- <head>
- <body>

<head> ... </head>

网页的“头部”，用来放网页的元信息（meta-information），而不是展示给用户看的内容。
常见内容：
- <title> 网页标题（显示在浏览器标签上）
- <meta> 网页编码、关键词、描述等信息
- <link> 引用 CSS 文件
- <style> 内嵌 CSS
- <script> 引用或写 JS（通常推荐放在 <body> 最底部）

<body> ... </body>

网页的主体内容，用户能在浏览器里看到的东西都写在这里。
包含：
- 文本（<h1> <p> <span> ...）
- 图片（<img>）
- 链接（<a>）
- 表单（<form> <input>）
- 结构容器（<div> <section> 等）

4. `<div> ... </div>`

HTML 的通用容器（division，分区）。
本身没有语义，只是一个盒子，用来包裹和分组内容。
常和 CSS 样式 或 JS 脚本结合使用，用来布局或交互。

5. 总结区别

<html>：根标签，整个网页的外壳
<head>：放网页信息和设置，不直接展示给用户
<body>：放网页实际内容，用户能看到的部分
<div>：通用容器，用来分组和布局内容

基础语法

1. HTML 基础语法

HTML (HyperText Markup Language) → 用来写页面的结构和内容。
特点：标签结构化，大多数是成对出现的。

基本结构：

<!DOCTYPE html> <!-- 声明 HTML5 -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
</head>
<body>
  <h1>标题</h1>
  <p>这里是一段文字。</p>
  <a href="https://example.com">这是一个链接</a>
  <img src="image.jpg" alt="一张图片">
</body>
</html>

<h1>~<h6> → 标题，数字越大标题越小。
<p> → 段落。
<a href="URL"> → 超链接。
<img src="路径" alt="说明"> → 图片。
<div> → 区块容器（常用来布局）。
<span> → 行内容器（用来包小范围文字）。

2. CSS 基础语法

CSS (Cascading Style Sheets) → 用来写页面的样式（颜色、布局、大小）。
选择器 + 属性:值;

常见选择器：

/* 标签选择器 */
p {
   
   
  color: red;   /* 设置文字颜色 */
}

/* 类选择器 */
.my-class {
   
   
  font-size: 20px;
}

/* ID 选择器 */
#my-id {
   
   
  background: yellow;
}

/* 通配符（所有元素） */
* {
   
   
  margin: 0;
  padding: 0;
}

最低0.47元/天解锁文章