mooneddi.github.io:GithubPages个人网站资源-CSDN文库

共6个文件

html：2个

css：1个

gitignore：1个

需积分: 5 185 浏览量 2021-04-02 20:11:07 上传评论收藏 3KB ZIP 举报

【GitHub Pages个人网站搭建与HTML基础】 GitHub Pages是GitHub提供的一项免费服务，允许用户在GitHub上托管静态网页，用于展示个人简历、项目介绍或者博客等。"mooneddi.github.io"是一个具体的GitHub Pages个人网站实例，它展示了如何利用GitHub Pages创建自己的在线存在。 **一、GitHub Pages简介** 1. **服务类型**: GitHub Pages分为两种类型：用户/组织站点和个人项目站点。"mooneddi.github.io"通常是用户或组织站点，以用户名.github.io的形式存在。 2. **静态内容**: 该服务只支持静态文件，如HTML、CSS、JavaScript等，不支持服务器端脚本。 3. **域名绑定**: 用户可以将自己的自定义域名绑定到GitHub Pages，提升网站的专业性。 4. **自动构建**: 当你将修改后的文件推送到特定分支（通常为`gh-pages`）时，GitHub会自动构建并发布你的网站。 **二、HTML基础** HTML（HyperText Markup Language）是网页的基础语言，用于构建网页结构。在"mooneddi.github.io-main"这个目录中，我们可能会找到`.html`文件，它们包含了网站的页面内容。 1. **HTML结构**: HTML文档由一系列标签组成，如`<html>`, `<head>`, `<body>`等，它们定义了文档的结构。 2. **标题和段落**: `<h1>`到`<h6>`表示不同级别的标题，`<p>`用于创建段落。 3. **链接**: `<a>`标签创建超链接，通过`href`属性指定目标URL。 4. **图像**: `<img>`标签插入图片，`src`属性指明图片源，`alt`属性提供替代文本。 5. **列表**: `<ul>`和`<ol>`创建无序和有序列表，`<li>`定义列表项。 6. **区块元素与内联元素**: 区块元素如`<div>`占据一整行，内联元素如`<span>`只占据自身内容宽度。 **三、GitHub Pages的工作流程** 1. **创建仓库**: 在GitHub上新建一个名为`用户名.github.io`的仓库。 2. **本地开发**: 使用文本编辑器编写HTML、CSS和JavaScript文件，并保存在本地项目目录下。 3. **版本控制**: 将本地文件添加到Git仓库，进行提交和推送操作。 4. **部署至GitHub**: 推送更改到GitHub上的`gh-pages`分支，GitHub会自动处理构建和发布。 **四、CSS与美化** 虽然题目中没有明确提到CSS，但在实际的GitHub Pages项目中，HTML常常与CSS结合使用来定义页面样式。CSS通过选择器选择HTML元素并应用样式规则，实现布局和美化。 1. **选择器**: 如类选择器`.class`、ID选择器`#id`和元素选择器`element`等。 2. **盒模型**: CSS的盒模型包括内容、内边距、边框和外边距，影响元素的大小和位置。 3. **布局方式**: 浮动布局、Flexbox和Grid是常见的布局方式，用于控制元素的排列。 4. **响应式设计**: 利用媒体查询`@media`，使网站在不同设备和屏幕尺寸上表现良好。通过学习和实践HTML以及与GitHub Pages的结合，你可以轻松创建属于自己的个性化网页。"mooneddi.github.io"就是一个很好的参考示例，从中你可以了解到如何布局、设计以及如何将网站发布到GitHub上。

资源推荐

资源详情

资源评论