3. 用vscode的live server打造方便的开发环境

什麽是live server?

如果有看我之前的文章就会知道它是一个vscode的插件，可以即时预览更新的程序码，这类型的功能叫做hot reload，能更快速的开发。

假设没有用会怎麽样?

如果没有开发经验的人应该还不知道痛苦，有经验的应该都知道一直按重刷，你的手会不听使唤。

接着上一集的程序码

<!DOCTYPE html>
<html lang="en"><!--本站为英文版(繁体中文为 zh-hant 或 zh-tw)-->
<head>
    <meta charset="UTF-8"><!--宣告档案室UFT-8编码，加上，防止乱码-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--用当前浏览器的版本渲染-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--前一篇介绍的-->
    <title>my first web</title><!--网站标题-->
</head>
<body>
    <p>this is the first web</p>
    
</body>
</html>

如果有看我前几集的人应该都熟悉了<head></head>和<body></body>还有<html></html>的作用了(如果还没看过，可以按下下面的连结)，但是上面的程序码应该还有一些是没看过的，没关系，我今天带你看。

html快速入门 ：http://www.pcnet.idv.tw/pcnet/html/html.htm

<!DOCTYPE html>

有没有人跟我一样，看到了这个就吓到了，其实这个符号是宣告这份文件是一份html的文件。

介绍文件：https://www.fooish.com/html/doctype.html

<meta xxx>

<meta xxx>是在网站上对搜寻引擎的说明，而我在上面加了注解可以去看看。

UFT-8编码

编码就是一种增加字元数的设计，毕竟，世界上千千万万种语言，文字数量难以想像，而有人就想到了使用编码的方式来表示各种语言。例如：© -> &copy。还有更多编码的方式，而uft-8只是其中一种。早期的中文其实大家更倾向於使用另一个编码big-5，而後因为uft-8的稳定性而胜过它。

uft-8 维基百科：https://en.wikipedia.org/wiki/UTF-8
big5 维基百科：https://en.wikipedia.org/wiki/Big5

<meta http-equiv="X-UA-Compatible" content="IE=edge">

这个宣告的标前其实很复杂，如果初学可以先不用加上，假设你对此有兴趣，你可以参考以下文章

【HTML教学】X-UA-Compatible设置IE兼容模式： https://injerry.pixnet.net/blog/post/57042465

设定Live server来看看上一篇做的网站

设定live server
首先，按下左侧列的延伸模组(蓝色箭头)，然後在输入框输入live server(白色箭头)(通常打到live就会跑出来)，接着按下Live server的标志(红色箭头)，最後按下右边的安装(绿色按钮)(我的已经安装过了所以没有显示)，等待片刻，直到安装完成(画面跟我一样)，然後重新打开(重做上篇的动作，把资料夹拉到vscode图示 )。重启後，按下右下角的Go Live的按钮。
按go live

看成果拉

按下去後它应该会用你的预设浏览器开启你的网页，如果没有，你可以自己去到http://127.0.0.1:5500，你应该会很有成就感，终於完成人生中第一个网站了。
我的网站
好啦，这是我做的，之後有机会再来介绍。

结尾

今天介绍了常见的head中的meta标签，还有vscode的live server，讲真的在一开始学就搞清楚head里面摆的东东，真的很重要。最後，如果记不的里面的程序码是正常的，要善常运用Google来查询，就算再厉害的高手，脑子里并不是充满着看起来可怕的程序码，而是充满着思考逻辑和解决事情的能力。
/images/emoticon/emoticon08.gif


<<:  [Git] authentication with ssh key

>>:  DE2_115(DAY3)以niosii去控制板子上的sdram

Backtrader - 新增策略

以下内容皆参考 Backtrader 官网 昨天使用了 backtrader 将 shioaji 的...

我的 QA 道路之你怎麽又被炒了

嗨各位~ 今天是今年的最後一天, 这篇想来分享一下我自身QA的经历, 我知道你们想看的是到底为甚麽会...

部署 Google App Script 专案(1)

今天要接着完成部署 GAS 专案并且让 Line Bot 可以简单的回应验证码给使用者。 将先前的 ...

[D08] placeholder

写在前面 placeholder placeholder placeholder placehold...

Day15-Overloading

函式多载(overloading)，今天顺着蚂蚁书的顺序先讨论函式多载(overloading)与样...