Web开发 01

发布于：2025-07-18 ⋅ 阅读:(10) ⋅ 点赞:(0)

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

<!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. 提交文件的基本流程

  1. 添加文件到暂存区：

    bash

    git add 文件名          # 添加单个文件
git add .              # 添加当前目录所有文件
  2. 提交暂存区的文件到本地仓库：

    bash

    git commit -m "提交说明"  # 添加有意义的提交信息
  3. 常见错误处理：
    • 若提示 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项目同步的实践知识

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

  1. 本地仓库初始化
    通过 git init 在 VS Code 的项目文件夹中创建本地 Git 仓库（生成隐藏的 .git 文件夹，用于跟踪文件变化）。

  2. 关联 GitHub 远程仓库

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

二、分支与推送准备

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

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

  1. 提交的必要性
    只有本地仓库有提交记录（即保存了文件版本），才能推送到远程仓库。若未提交，会出现 error: src refspec main does not match any 错误。

  2. 提交流程

    • git add .：将当前文件夹下所有文件暂存（add 后文件进入待提交状态）。
    • git commit -m "提交说明"：将暂存的文件正式提交到本地仓库（-m 后的文字需简要描述本次提交内容，如 “初始化项目”）。

四、推送到 GitHub 远程仓库

  1. 首次推送命令
    执行 git push -u origin main，将本地 main 分支推送到远程 origin 仓库的 main 分支。

    • -u 表示设置默认推送关联，后续推送可直接用 git push。

  2. 推送失败的常见原因及解决

    • 本地无提交记录：按上述 “提交流程” 先添加并提交文件。
    • 远程仓库非空（如 GitHub 上勾选了初始化 README）：需先拉取远程内容并合并，命令为 git pull origin main --allow-unrelated-histories，解决冲突后再推送。

五、终端工具说明

  • VS Code 的 CMD 终端 和 Git Bash 均可执行 Git 命令，区别仅在于终端本身的语法（如 CMD 用 dir 查看文件，Git Bash 用 ls），不影响 Git 功能。
  • 无需切换终端，保持使用 CMD 即可完成所有操作。

六、验证结果

推送成功后，刷新 GitHub 仓库页面，即可看到本地提交的文件（如 index.html、css 文件夹等），完成本地与远程仓库的同步。

通过以上步骤，就能实现从本地项目创建到 GitHub 远程同步的完整流程，后续开发中只需重复 “修改文件 → git add . → git commit -m "说明" → git push” 即可持续更新远程仓库。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布