Girls coding day 操作手册

本文内容很简单，从零开始操作一个bootstrap模板。

准备工作

1. 安装visual studio code(或其他文本编辑器)
2. 安装Chrome浏览器，开发者模式（windows: F12，mac：Option+Command+I）
3. 登录Github，注册一个账号，并下载Github desktop

编码

首先去找个Bootstrap模板，这个东西相当于已经做好的一个网站。可以在这里找一个。

下载好一个，解压以后，就可以看到结构了。

打开目录下的index.html，应该可以在浏览器里看到样子。

修改index.html里的内容，保存之后，刷新浏览器就可以看到效果。

Tip：使用Ctrl+F可以快速定位你要找的部分。比如你要查找页面上某段文字，可以在html文件中使用查找来定位。

常见html标签

超链接

标签就是常见的链接，它里面可以包含一段文字，使用href属性可以链接到你想跳转的地址。

举例：

点击我可以跳转到百度

使用target="_blank"可以新开标签页。

链接地址可以使用相对地址，比如当前的页面是index.html，如果要链接到index.html文件的那个目录下的about.html，那么就可以用：

点击我可以跳转about页面

更多详细内容

图片

标签将会在页面上引入一张图片，使用src属性引入图片链接即可：

![](images/eg_tulip.jpg)

这里的地址跟上面的a标签是一个意思。

更多详细内容

分割标签

当你要在页面上包含一系列内容和其他标签，又想不到用什么标签时，你可以用div标签。

这是一段话

  
子内容
  ![](images/eg_tulip.jpg)

对于初学者来说，div标签最大的作用就是换行。

更多详细内容

段落标签

p标签表示一段话，用法也很简单：

这是一段话，这是一个链接

更多详细内容

CSS样式知识

CSS可以有3种方式来影响页面：

1. 外部式：建立一个css文件，在html文件中，在head标签中建立link标签来引用。
2. 嵌入式：在html文件中，使用style标签编写。
3. 内联式：在html文件中，对某个标签，使用style属性来编写。

建议：初学者可以直接使用嵌入式来编写css。

css样式列表

Github配置

可以参照活动教程。