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

Web开发 01

web 2025/7/18 5:58:05

先放一下自己写的手敲的第一个网站代码！~虽然很简单但还是有点成就感！！开心😊

<!DOCTYPE html>
<html><head><title>Title!</title><link rel = "stylesheet"href= "style.css"/> </head><body><h1>Heading!</h1><p>Paragrah!</p></body>
</html>

h1{color: blueviolet;
}
p {color: aquamarine;font-family: Arial, Helvetica, sans-serif;
}

1 html和css的链接

Q:这个css链接是另外自己写一个文件是不是？

A：

是的，在你提供的 hello.html 代码里，<link rel="stylesheet" href="style.css" /> 这行代码的作用是链接外部 CSS 文件，style.css 是需要你自己另外创建的一个独立文件，用来编写 CSS 样式规则，从而对 hello.html 里的 HTML 元素进行样式美化。比如你想设置 h1 标签的颜色、p 标签的字体大小等样式，就可以在 style.css 文件中编写对应的 CSS 代码。

2 没颜色（标签不对应）

你的 style.css 里写了 .info 和 div 的样式，但 hello.html 里没对应 HTML 元素用这些类或标签 ，所以样式没生效。要让样式起作用，得在 hello.html 里添加对应的元素，比如：

html

预览

<!DOCTYPE html>
<html>
<head><title>Title!</title><link rel="stylesheet" href="style.css" />
</head>
<body><h1>Heading!</h1><p>Paragrah!</p><!-- 添加带 info 类的元素 --><p class="info">这行文字会应用 .info 样式</p><!-- 添加 div 元素 --><div>这行文字会应用 div 样式</div>
</body>
</html>

这样浏览器渲染时，能匹配到 style.css 里的选择器，文字就有对应的颜色和字体样式啦，保存修改后刷新页面就能看到效果。

啥意思？

你现在的 hello.html 里，HTML 结构有了，但要让 style.css 的样式生效，得给元素加上对应的类名或标签匹配 。简单说，就是让 style.css 里写的 .info（类选择器）、div（标签选择器）能找到 hello.html 里的元素，举个完整例子：

方法 1：给元素加类名 / 用对应标签

假设想让 h1 用 .info 样式、p 用 div 样式（虽然 p 不是 div，但可以调整 CSS 选择器，或者直接改 HTML 标签），先改 hello.html：

html

预览

<!DOCTYPE html>
<html>
<head><title>Title!</title><!-- 引入外部样式，路径正确的话就能关联到 style.css --><link rel="stylesheet" href="style.css" /> 
</head>
<body><!-- 给 h1 加 info 类，匹配 style.css 里的 .info 选择器 --><h1 class="info">Heading!</h1> <!-- 把 p 改成 div 标签，匹配 style.css 里的 div 选择器；或者不改标签，改 CSS 选择器为 p --><div>Paragrah!</div> 
</body>
</html>

然后调整 style.css（如果不想改 HTML 标签，也可以把 div 选择器改成 p ，看你需求）：

css

/* 匹配带 info 类的元素 */
.info { color: blueviolet;
}
/* 匹配 div 标签（如果 HTML 里是 p 标签，就把这里改成 p ） */
div { color: aquamarine;font-family: Arial, Helvetica, sans-serif;
}

方法 2：直接写 HTML 标签 / 类名对应的样式

如果你想简单点，直接控制 h1、p 这些现有标签，也可以改 style.css 里的选择器，比如：

css

/* 直接选 h1 标签 */
h1 { color: blueviolet;
}
/* 直接选 p 标签 */
p { color: aquamarine;font-family: Arial, Helvetica, sans-serif;
}

这样 hello.html 不用改，保持原来的 h1、p 标签，样式也能生效，因为 CSS 直接通过标签名选中了它们。

总结一下，核心就是 HTML 元素的类名、标签名，要和 CSS 里的选择器对应上 ，这样样式才能 “找到” 元素并生效。你可以根据需求选方法，保存代码后刷新浏览器，就能看到颜色变化啦～

总结：

我知道了，其实就是要对应着 <h1>Heading!</h1> <p>Paragrah!</p>要修改的标签名字！

对哒，你理解得很到位啦！CSS 就是通过选择器（像标签选择器、类选择器、ID 选择器等）去 “找” HTML 里对应的标签、类名、ID 的元素，然后给它们设置样式。

就拿你这代码来说，要是想改 h1 和 p 的样式，在 style.css 里可以直接用标签选择器，像这样：

css

h1 {color: red; /* 把 h1 文字改成红色 */font-size: 24px; /* 调整字体大小 */
}
p {color: blue; /* 把 p 文字改成蓝色 */line-height: 1.6; /* 调整行高 */
}

这样写，style.css 里的 h1 选择器就对应 hello.html 里的 <h1>Heading!</h1>，p 选择器对应 <p>Paragrah!</p>，保存后刷新页面，就能看到样式变化啦，继续加油探索呀～

3 与git有关的一些配置收获的常识（）

1. Git 身份配置

用户名与邮箱的作用：
Git 提交时需要记录作者身份（user.name 和 user.email），用于版本历史追踪。

全局设置命令（所有仓库生效）：

bash

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱@example.com"

仓库特定设置（仅当前仓库生效）：
去掉 --global 参数，在仓库目录下单独设置。

查看已设置的值：

bash

git config --global user.name
git config --global user.email

2. 提交文件的基本流程

添加文件到暂存区：

bash

git add 文件名          # 添加单个文件
git add .              # 添加当前目录所有文件

提交暂存区的文件到本地仓库：

bash

git commit -m "提交说明"  # 添加有意义的提交信息

常见错误处理：
- 若提示 Untracked files，需先执行 git add。
- 若提示 Author identity unknown，需配置 user.name 和 user.email。

3. Git 基础概念

工作区（Working Directory）：你实际编辑文件的地方。
暂存区（Staging Area）：准备提交的文件缓存区，通过 git add 进入。
本地仓库（Local Repository）：通过 git commit 将暂存区内容提交到本地。
远程仓库（Remote Repository）：如 GitHub，通过 git push/pull 同步。

4. 其他实用命令

查看提交历史：
bash
```
git log
```
查看仓库状态（检查文件修改 / 未追踪）：
bash
```
git status
```

5. 最佳实践

提交信息规范：使用清晰、简洁的描述（如 修复登录bug、添加用户列表功能）。
全局与局部配置：根据需求选择配置范围（全局适合个人统一身份，局部适合工作 / 个人项目区分）。

关联远程仓库：若需推送到 GitHub，需先执行：

bash

git remote add origin 远程仓库URL
git push -u origin main  # 首次推送需关联分支

这些是 Git 最基础但核心的操作，掌握后你可以完成日常开发的版本控制需求。如果需要深入学习，可以继续探索分支管理、合并冲突解决等进阶功能！

4 git和github项目同步的实践知识

一、初始化与关联远程仓库

本地仓库初始化
通过 git init 在 VS Code 的项目文件夹中创建本地 Git 仓库（生成隐藏的 .git 文件夹，用于跟踪文件变化）。
关联 GitHub 远程仓库
- 先在 GitHub 上创建一个同名空仓库（如 my-web-project，暂不勾选初始化文件，避免冲突）。
- 通过命令 git remote add origin [GitHub仓库URL] 将本地仓库与远程仓库关联（origin 是远程仓库的默认别名）。
- 用 git remote -v 验证关联是否成功（会显示远程仓库的 fetch 和 push 地址）。

二、分支与推送准备

设置主分支名称
执行 git branch -M main 将本地默认分支重命名为 main（与 GitHub 远程仓库的默认分支名保持一致，避免冲突）。

三、提交本地文件（核心步骤）

提交的必要性
只有本地仓库有提交记录（即保存了文件版本），才能推送到远程仓库。若未提交，会出现 error: src refspec main does not match any 错误。
提交流程
- git add .：将当前文件夹下所有文件暂存（add 后文件进入待提交状态）。
- git commit -m "提交说明"：将暂存的文件正式提交到本地仓库（-m 后的文字需简要描述本次提交内容，如 “初始化项目”）。

四、推送到 GitHub 远程仓库

首次推送命令
执行 git push -u origin main，将本地 main 分支推送到远程 origin 仓库的 main 分支。
- -u 表示设置默认推送关联，后续推送可直接用 git push。
推送失败的常见原因及解决
- 本地无提交记录：按上述 “提交流程” 先添加并提交文件。
- 远程仓库非空（如 GitHub 上勾选了初始化 README）：需先拉取远程内容并合并，命令为 git pull origin main --allow-unrelated-histories，解决冲突后再推送。