本文内容很简单,从零开始操作一个bootstrap模板。
准备工作
- 安装visual studio code(或其他文本编辑器)
- 安装Chrome浏览器,开发者模式(windows: F12,mac:Option+Command+I)
- 登录Github,注册一个账号,并下载Github desktop
编码
首先去找个Bootstrap模板,这个东西相当于已经做好的一个网站。可以在这里找一个。
下载好一个,解压以后,就可以看到结构了。
打开目录下的index.html
,应该可以在浏览器里看到样子。
修改index.html
里的内容,保存之后,刷新浏览器就可以看到效果。
Tip:使用Ctrl+F
可以快速定位你要找的部分。比如你要查找页面上某段文字,可以在html
文件中使用查找来定位。
常见html标签
超链接<a>
<a>
标签就是常见的链接,它里面可以包含一段文字,使用href
属性可以链接到你想跳转的地址。
举例:
<a href="http://www.baidu.com">点击我可以跳转到百度</a>
使用target="_blank"
可以新开标签页。
链接地址可以使用相对地址,比如当前的页面是index.html
,如果要链接到index.html
文件的那个目录下的about.html
,那么就可以用:
<a href="about.html">点击我可以跳转about页面</a>
图片<img>
<img>
标签将会在页面上引入一张图片,使用src
属性引入图片链接即可:
![](images/eg_tulip.jpg)
这里的地址跟上面的a
标签是一个意思。
分割标签<div>
当你要在页面上包含一系列内容和其他标签,又想不到用什么标签时,你可以用div
标签。
<div>这是一段话</div>
<div>
<div>子内容</div>
![](images/eg_tulip.jpg)
</div>
对于初学者来说,div
标签最大的作用就是换行。
段落标签<p>
p
标签表示一段话,用法也很简单:
<p>这是一段话,这是一个<a href="http://www.baidu.com">链接</a></p>
CSS样式知识
CSS可以有3种方式来影响页面:
- 外部式:建立一个css文件,在
html
文件中,在head
标签中建立link
标签来引用。 - 嵌入式:在
html
文件中,使用style
标签编写。 - 内联式:在
html
文件中,对某个标签,使用style
属性来编写。
建议:初学者可以直接使用嵌入式来编写css。
Github配置
可以参照活动教程。