从零开始用github架设静态网站入门(2) - HTML & Bootstrap

讲完一开始的设置，紧接着就要到关键的程序部份了，而所谓的HTML是属於一种标签语言，本身并没有一般程序的逻辑判断等功能，只是把你要放在这个网页里的每个元素贴上一个又一个的标签，然後让浏览器了解要用什麽方式来处理他们。

HTML

在上一篇我们已经用到了一些最基本的标签，除了它们之外我们还会一并介绍一些其他常用到的标签。

html : 最基本的标签，其他所有html标签都要包在这里面。

head : 大部分在这里的东西都不会显示在网页页面中，主要包含一些与其他资源的连结标签。

link : 外部连结标签，用来指定外部资源的路径。 Ex:

<link rel="stylesheet" href="css/style.css"> 这里我们指出了要连结的路径是”css/style.css”，这是我们之後会自己写的一个CSS设定档，而我们用rel告诉浏览器这个连结是属於一个设定样式用的档案。

script : 用来引入Javascript的标签，我们直接在标签内部编写Javascript的程序(并不推荐，会造成程序码混乱)，或是用src引入.js来执行，在这种情况下，浏览器会把script标签内的程序执行完毕後，再接着处理其他HTML标签。Ex:

<script src="script.js"></script>，浏览器会先执行完"script.js"这个档案的程序後，再处理其他标签。

title : 显示网页标题的标签。

body : 网页主体的标签，大部分会在网页中出现的内容都写在这个标签中。

div : 一个无语意的容器，有点像是在收纳杂物的时候你总是会希望有个小盒子把不同的杂物区隔开来，然後你可以在盒子上面贴一些其他的属性标签来标示为它做修饰，但它本身并没有什麽特别的功能，就只是一个盒子而已。

section : 其实这有点难讲，我查过蛮多说明文件，结论是大体而言他做为一个标示文章段落的容器使用，但硬是要把它像是div一样拿来装别的东西也是可以…

h1 : 文字标题标签，里面放标题类的文字。

p : 文字段落标签，里面放段落中的文字(废话)。

a : 锚标签，我知道这个词很烂，但我也没找到更好的版本了(摊手)，这个标签多用来作为一个超连结指向一个地址。Ex:

<a >href="files/NTHU_LinTzuHsuan_MasterThesis.pdf" target="_blank">Paper</a>在这个例子中，我们会显示一个”Paper”的超连结，指向href所指定的地址，而target则标示了我们希望这个连结以新分页的形式开启。

以上就是在这个专案里大部分会用到的HTML标签了，直接用这些标签其实就可以完成我们的专案了，但是做出来的东西会非～常的朴素，为了把它修饰的好看一点，并加上一些有趣的功能，我们就要用到Bootstrap啦。

Bootsrap

Bootstrap是一个开源的网页设计套件，基本上提供了非常多已经写好的小组件模板，以及很好用的网格式排版系统，组件模板让开发者在设计网页的时候可以直接在已经做好的元件上客制修改，大幅减少工作量；网格式排版系统则让版面调整更简洁，直接考虑整体比例就好，不用在1px1px的调整，它甚至连不同装置的显示方式都帮你预设好了，真的是福音啊～

我主要是从"Bootstrap教学 - 利用HTML + CSS，完整编写网站外观示范"学习Bootstrap的，排版的成品基本上也差不太多，如果有我讲的不清楚的部分也很推荐看这个影片看看能不能解答。

引入

目前我是使用跟影片一样的Bootstrap 4.6版本，5.0的版本在语法上会有一些不同，想要调用这个版本的Bootstrap，要先引入官方所写好的一些脚本。进到官网之後，点选"v4.6.x docs "，就可以在下方找到我们需要的CSS & JS引入程序码了。找到之後，由於这是在布局网页时会需要的元素，所以我们写在head标签里面。

网格系统

网格系统应该能算是Bootstrap最大的卖点之一了，我想许多人提到Bootstrap第一个想到的也是这个特点吧。所谓的网格系统，指的是Bootstrap帮使用者把整个页面纵切成12等分，使用者在排版的时候只要考虑所需要的文字或图片板块要占多少比例就可以了，一些细节的设定，我们在下方的程序码区域会更仔细的介绍。

            <div class="container"> 
<!-- 每一块板块，我们都要先用<div>标签当作容器，因为最上层的<div>没有其他意义，所以我们用"container"属性，透过Bootstrap让浏览器知道包在这个标签内的东西要属於同一个区块 -->
                <div class="row"> 
<!-- 接下来，我们希望这个区域内有两个平行的区块(两行)，所以再加入两个<div>并用"row"属性，在这个属性内的文字在超过板块宽度後会自动换行 -->
                <div class="col-md-8 offset-md-2 text-center">
<!-- 在这里我们才设定文字版块的详细属性，"col-md-8"代表我们主要想显示在电脑萤幕上，并且用8个纵列的宽度；"offset-md-2"代表我们希望在左边先空2个纵列宽，这样就可以达到置中的效果了；"text-center"则表示我们希望这里的文字置终於板块，而不是从左开始 -->
                    <h2>关於作者</h2>
                </div>
                </div>
                <div class="row"> 
<!-- 第二个平行的区块 -->
                    <div class="col-md-4 text-center">
                        <img id="mypic" src="pictures/69874555_p0_master1200.jpg"> 
<!-- 这是一个图片标签，代表我希望在这里显示一个图片，并给他一个id名，以便之後用CSS修饰 -->
                        <h2 style="font-size: 20; font-weight: 600;">林子轩<br>(Lin Tzu Hsuan)</h2> 
<!-- 这里的style是CSS的语法，因为像这里有跟别的<h2>有不同的样式需求，所以直接写在这里客制化，而不是写在css档内 -->
                    </div>
                    <div class="col-md-8 text-left">
                        <p style="font-size: 20;margin-bottom: 5;" class="lead">研究领域:音讯处理、DeepLearning、ML</p>
                        <h3 style="font-size: 15; margin-bottom: 30; font-weight: 600;">清华大学 资讯应用与系统研究所<br>台湾大学 工商管理系企业管理组</h3>
                        <p>近年来，於现在的的音讯处理技术中...(some words)</p>
                        <p>在这个系统中...(some words)</p>
                    </div>
                </div>
            </div>

元件修饰

除了网格系统外，Bootstrap也提供了很多预设好的工具供开发者使用，像是按钮、下拉选单等等，在这里我们会先说到一些比较简单常见的部分。这边我们一样直接使用程序码来讲解比较快。

            <div class="jumbotron">
<!-- 这次我们使用"jumbotron"属性，这是一个有底色且无边界的板块比较适合标题区块使用，虽然Bootstrap有提供其他附加属性让开发者更改jumbotron的样式，但我觉得直接用CSS来修改比较直观(ex:底色用"background"修改) -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <h1>Real-time pop music accompaniment generation according to vocal melody by deep learning models</h1>
                            <p class="lead">基於人声旋律的流行音乐即时伴奏生成系统</p> '
<!-- "lead"属性可以强调指定的文字 -->
                            <a class="btn" href="files/NTHU_LinTzuHsuan_MasterThesis.pdf" target="_blank">Paper</a> </p> 
<!-- "btn"属性会调用Bootstrap提供的按钮样板，会有一些基本的点选反应之类的，算是简约好看的风格；像这个按钮我们希望可以打开一个PDF档案，所以用"herf"指向那个档案的地址 -->
                            <a class="btn" href="https://github.com/tw40210/Hierarchica_remake" target="_blank" style=" 
                            margin-left: 33px;
                            background: #01B468;
                            ">Github</a> 
<!-- 这个按钮是希望连结到一个外部网站，所以在"href"中放入那个网站的网址，另外用"target"属性告诉浏览器，我希望这个网站以新分页的形式开启 -->
                        </div>
                    </div>
                </div>
            </div>

到这里为止，我们介绍了基本的网站HTML架构，以及Bootstrap的基础应用，用这些技术我们已经可以搭建出文字排版简约的基本网站了，赶快去试试看吧!

相关文章

从零开始用github架设静态网站入门(1) - 介绍&环境搭建
从零开始用github架设静态网站入门(2) - HTML & Bootstrap
从零开始用github架设静态网站入门(3) - CSS客制化
从零开始用github架设静态网站入门(4) - 其他小功能制作
从零开始用github架设静态网站入门(5) - 部署到Github Pages