当前位置：首页 > backend >正文

Web开发 02

backend 2025/7/19 11:11:55

今天梳理出的 HTML + CSS 核心知识点，涵盖基础结构、布局、样式优化等实用技巧：

总结 1

一、HTML 核心知识

1. 基础结构

文档声明：<!DOCTYPE html> 定义文档为 HTML5 标准。
基本标签：
- <html>：根元素，包裹整个页面。
- <head>：元数据（标题、样式、脚本等），不显示在页面。
- <title>：设置网页标题（浏览器标签显示）。
- <body>：页面内容容器，所有可见内容写在这里。

2. 常用标签

文本与标题：
- <h1>~<h6>：标题标签，自动加粗且有默认层级样式。
- <p>：段落标签，默认有上下边距。
图片：
- <img src="路径" alt="替代文本">：插入图片，alt 用于加载失败时显示说明。
导航与布局：
- <nav>：语义化导航栏容器（搜索引擎友好）。
- <div>：通用块级容器，用于分组内容。
- <section>：语义化区块（如文章分段）。

3. 语义化标签

用 <nav>（导航）、<section>（区块）、<header>（页眉）、<footer>（页脚）等替代 <div>，让代码更易读，且对 SEO（搜索引擎优化）友好。

二、CSS 核心知识

1. 样式引入方式

外部样式表：<link rel="stylesheet" href="style.css">（推荐，分离 HTML 和 CSS，方便维护）。
内联样式：style="属性: 值;"（直接写在标签上，仅临时调试用，不推荐大规模使用）。

2. 选择器与优先级

基础选择器：
- 标签选择器：p { ... }（选中所有 <p> 标签）。
- 类选择器：.classname { ... }（通过 class 复用样式）。
- ID 选择器：#idname { ... }（唯一元素，优先级高，但少用）。
优先级规则：!important > 内联样式 > ID 选择器 > 类选择器 > 标签选择器。

3. 常用样式属性

布局与尺寸：
- width/height：设置宽高（auto 为自动计算，100% 为父元素占比）。
- max-width/max-height：限制最大尺寸（响应式常用）。
- margin/padding：外边距（元素外间距）和内边距（元素内间距），可单独设置方向（margin-top、padding-left 等）。
背景与边框：
- background-color/background-image：背景色 / 背景图。
- border：边框（border: 1px solid #000; 表示 1px 实线黑色边框）。
- border-radius：圆角（50% 可实现圆形 / 椭圆）。
文本样式：
- color：文字颜色。
- font-size/font-family：字体大小 / 字体类型。
- text-align：文本对齐（center 居中、left 左对齐等）。
显示与定位：
- display: block：块级元素（独占一行，如 <div>）。
- display: inline：行内元素（与其他元素同行，如 <span>）。
- display: flex：弹性盒布局（现代布局核心，可实现居中、分布对齐等）。

4. 响应式设计

媒体查询：

css

@media (max-width: 600px) {/* 屏幕宽度 ≤600px 时生效 */.classname { width: 80%; }
}

用于不同设备（手机、平板、桌面）适配样式。

弹性盒（Flexbox）：

css

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */
}

轻松实现复杂布局，替代传统 float。

5. 调试与优化

浏览器开发者工具：
- 检查元素：右键 → 检查，实时修改样式调试。
- 查看盒模型：确认 margin/padding 是否影响布局。
样式覆盖问题：
- 用更具体的选择器（如 .parent .child）或 !important（谨慎使用）强制覆盖。

三、实战技巧（结合你的项目）

1. 导航栏实现

用 <nav> 标签语义化导航，结合 CSS 美化：

css

nav {background: #333;padding: 10px;
}
nav a {color: white;text-decoration: none;margin: 0 10px;
}

2. 图片处理

圆形头像：

css

.avatar {width: 100px;height: 100px;border-radius: 50%;object-fit: cover; /* 保持图片比例 */
}

响应式图片：

css

img {max-width: 100%;height: auto; /* 缩放时保持比例 */
}

3. 居中布局

Flexbox 居中（推荐）：

css

.container {display: flex;justify-content: center;align-items: center;height: 300px; /* 需设置父元素高度 */
}

文本居中：
css
```
.text-center {text-align: center;
}
```

四、Git 与 GitHub 关联（项目托管）

本地 Git 操作：

bash

git init          # 初始化仓库
git add .         # 暂存所有文件
git commit -m "说明" # 提交到本地仓库

关联 GitHub 远程仓库：

bash

git remote add origin 仓库地址
git push -u origin main # 推送到 GitHub

作用：备份代码、协作开发、展示作品（公开仓库可被他人查看学习）。

总结 2

今天你学到的知识覆盖了 HTML 结构搭建、CSS 样式设计（布局、美化、响应式）、Git 版本控制 ，以及如何通过 GitHub 托管项目。这些是前端开发的基础，后续可深入学习：

复杂布局（Grid 布局）、动画（transition/animation）、交互（JavaScript 结合）。
利用 GitHub Pages 直接部署网页，生成可访问的在线链接（如 https://你的用户名.github.io/仓库名 ）。

一、HTML 基础标签与语义化

<section> 标签
- 作用：用于对页面中具有相似主题的内容进行分组，是具有明确语义的标签，代表一个独立的内容章节（如 “关于我”“兴趣爱好” 等板块）。
- 与其他标签的区别：
  - <div>：无特定语义，仅用于布局样式。
  - <article>：用于表示可独立存在的内容（如文章、评论）。
  - <aside>：用于侧边栏或与主内容关联较弱的内容。
<hr> 标签
- 作用：创建水平分隔线，用于分隔不同内容区域，增强页面结构可读性。
- 扩展：可通过 CSS 自定义样式（如颜色、粗细、长度等），例如：
  css
```
hr {border: none;height: 2px;background-color: #ccc;width: 80%;margin: 20px auto;
}
```
HTML 缩进规则
- HTML 对缩进不敏感，缩进不影响页面渲染，但能提升代码可读性（尤其复杂结构中）。
- 与其他语言的区别：
  - Python：缩进是语法必需，错误会导致报错。
  - Java：缩进仅影响可读性，不影响编译运行。

二、CSS 基础应用

作用：用于美化 HTML 元素，可自定义标签样式（如颜色、尺寸、布局等）。
示例：通过 CSS 修饰 <hr> 标签（见上文），或为 <section> 添加样式（如边框、间距）。

三、Git 与 HTML 文件提交（辅助开发流程）

提交 HTML 文件到 Git 仓库的步骤：
1. 暂存文件：git add 文件名（如 git add hello.html）或 git add .（暂存所有修改）。
2. 提交到本地仓库：git commit -m "提交说明"（描述改动内容）。
3. 推送到远程仓库（如需）：git push origin 分支名（如 git push origin main）。

以上是今天学到的核心 HTML 和 CSS 相关知识，聚焦于标签语义化、基础用法及开发流程中的文件管理。

总结 3

1. GitHub 仓库链接访问特性

https://github.com/[user]/[repo]/main/[file]：这种链接形式尝试直接访问 GitHub 仓库中的文件，但 GitHub 仓库主要用于代码托管，并非专门的 Web 服务器，所以通常会引导下载文件，而不是直接渲染文件内容，如 HTML 文件不会直接显示为网页，而是提示下载。
https://github.com/[user]/[repo]/blob/main/[file]：其中 blob 表示 GitHub 用于展示文件原始内容的视图。访问此链接时，GitHub 会以代码查看器的形式展示文件的源代码，比如 HTML 文件会显示其代码结构、标签和内容，而非渲染后的网页。

2. 查看渲染后 HTML 页面的方法

若要查看存储在 GitHub 仓库中 HTML 文件渲染后的网页效果，可将仓库克隆到本地，然后在浏览器中打开 HTML 文件，具体步骤如下：

克隆仓库：在终端或命令提示符中使用 git clone 命令克隆仓库，例如：

bash

git clone https://github.com/yangling-happy/my-web-project.git

进入项目目录：使用 cd 命令进入克隆下来的项目目录，例如：

bash

cd my-web-project

打开 HTML 文件：根据不同操作系统，使用相应命令在浏览器中打开 HTML 文件。
- Windows 系统：

bash

start hello.html

macOS 系统：

bash

open hello.html

Linux 系统：

bash

xdg-open hello.html

3. 项目代码相关知识

HTML 页面结构：示例代码展示了完整的 HTML 页面结构，包含 head 和 body 标签。head 标签中可设置页面标题、引入外部样式表和脚本，如：

html

预览

<head><title>My first lovely website</title><link rel="stylesheet" href="style.css" />
</head>

CSS 样式设置：通过 CSS 样式表（如 style.css）可以对 HTML 元素进行样式设置，包括字体、颜色、布局等，例如设置图片响应式显示：

css

.responsive {max-width: 50%;height: auto;display: block;margin: 0 auto;border-radius: 70%;
}

JavaScript 交互功能：使用 JavaScript 可以为网页添加交互功能，如导航栏滚动效果、移动端菜单切换和平滑滚动等，例如导航栏滚动效果的代码：

javascript

const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {if (window.scrollY > 10) {navbar.classList.add('shadow-md', 'bg-white/95', 'backdrop-blur-sm');} else {navbar.classList.remove('shadow-md', 'bg-white/95', 'backdrop-blur-sm');}
});

继续加油，实践越多越熟练！ 🚀

查看全文

http://www.xdnf.cn/news/15695.html