一、HTML 简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

二、CSS 简介

CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中

三、Bootstrap 简介

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和官网入门模板帮助你快速掌握 Bootstrap。

快速开始

首先需要引入Bootstrap，Bootstrap的引用方法分为两种：1）将Bootstrap下载到本地引用 2）在线引用Bootstrap

CSS 文件

复制以下<link>标签并粘贴到<head>标签内，注意，务必放到其它所有 CSS 样式前面。

JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及我们自己开发的 JavaScript 插件。我们使用的是 jQuery 的 slim 构建版本，当然，完整版本也是被支持的。

复制下面的 <script> 标签 粘贴到页面底部，并且是在</body> 标签之前，就能起作用了。注意，顺序很重要，不能错，首先是 jQuery，然后是 Popper，最后是我们自己的 JavaScript 插件。

集成包

官网提供的两个集成包都包含了 Bootstrap 的每一个JavaScript 插件。此外，还包含了 Popper，用于支持工具提示（tooltip）和弹出框（popover）功能，但是不包含 jQuery。添加到页面中时，按照先 jQuery 后 Bootstrap 的 JavaScript 集成包的顺序依次添加。

分开加载

如果你决定分开加载各个文件，那么务必按此顺序，首先是 jQuery，其次是 Popper（如果你使用工具提示和弹出框的话），最后是我们提供的 JavaScript 插件。

HTML5 文档类型（doctype）

Bootstrap 要求文档类型（doctype）是 HTML5。如果没有这一设置，你就会看到一些古怪的、不完整的样式，因此，正确设置文档类型（doctype）就能轻松避免这些困扰。

响应式布局相关的 标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 标签中 添加让 viewport（视口）支持响应式布局的 标签。

四、GITHUB PAGES 搭建

1.在GitHub中创建一个托管仓库，仓库的名字必须为：user_name(or organization name).github.io。这里的username就是你的GitHub用户名，如果不知道，可以在GitHub中点击右上角的头像，在下拉里面有Signed in as XXX的信息，这就是你的账号名称。如果想修改你的账号名称，可以参考以下的步骤。

2.克隆当前仓库：git clone repository_name

3.创建一个html文件到当前项目

4.提交并推送到远程仓库

5.到此你就已经成功搭建完了GitHub Page。打开浏览器，并通过访问https://user_name.github.io.来查看你的网站。

参考资料

Project information

  • HTML+CSS
  • BOOTSTRAP:前端框架
  • GITHUB PAGES :网站挂载到github的服务器上
  • 开发工具：Vscode