软件技术-零基础编写Web页面

2019-03-25 本文已影响5人 zhyuzh3d

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

使用VSCode开发网站页面，结合Golang开发服务端。

Hello world！

在项目文件夹中创建用于存放网页文件的web文件夹，在里面创建一个index.html文件。这里我们创建的是Golang的src/app/web文件夹。

然后在里面撰写html代码，注意Html语法与Golang完全不同，Html是标签化的语言，就是用很多标签元素表示页面上的元素（文字、图片、按钮什么的），<标签名属性="值">标签内容</标签>是每个元素的标准格式。

<html>

<head>
    <title>首页</title>
</head>

<body>
    <h1>Hello world!</h1>
</body>

</html>

几点说明：

这里有4个标签，html,head,title,body,h1,其中title和h1中间有文字内容。
这里其实有三层标签嵌套， $html \to head \to title$ 或者 $html \to body \to h1$ 。
html代表整个页面，它包含head头部和body主体两大块，几乎所有页面都应该是这样的结构。

保存之后，从文件夹中打开这个页面，可以看到效果，注意顶部标题栏显示的title是首页。

实时预览

每次修改代码都要切换到浏览器中刷新页面，感觉比较麻烦，我们来安装一个插件让页面自动刷新。

从Code的左侧扩展按钮打开扩展面板，搜索live server，然后安装install它。
安装之后，切换到index.html代码，在右下角状态栏出现Go Live按钮，点击就会弹起浏览器并打开当前页面。

如上图所示，你可以把这个浏览器窗口放在屏幕右侧，和Code并排。然后当你在Code中修改代码并保存的时候，右侧浏览器页面就会自动刷新。

优化界面

改进一下我们的index.html首页，修改body中间的内容：

<html>

<head>
    <title>我的首页</title>
</head>

<body>
    <div style="text-align:center;margin-top: 100px">
        <h1>~欢迎来到我的网站~</h1>
        <a href='/page/login.html'>点击注册</a>
    </div>
</body>

</html>

注意这几个提示：

h1和a标签都嵌套在div标签内，所以都会受到div限制；
style是标签属性，用来表示标签的样式，text-algin文字对齐居中center，margin-top是距离顶部的空白；
h1是最大的标题（h2..h5是更小的），a表示这个文字是可以点的链接，点击会跳转到href指向的URL。

保存后自动刷新如下图：

点击蓝色链接会跳转到一个Cannot Get "/login"错误页面，因为这个页面我们还没制作。

添加login页面

在web文件夹下添加page文件夹，在page下创建login.html文件，添加以下内容：

<html>

<head>
    <title>登录页</title>
</head>

<body>
    <div style="text-align:center;margin-top: 100px">
        <h1>~登录页~</h1>
    </div>
</body>

</html>

但这个时候我们在index.html首页中点击那个连接，仍然会跳转到错误页面，同时注意它的地址栏就会发现index.html和login.html这两个页面的URL地址不一样，一个是http://127.0.0.1:xxxx/src/app/web/index.html，另一个是简单的http://127.0.0.1:xxxx/page/login.html，明显后者看起来更合理。

设置Live Server的根目录

但是http://127.0.0.1:xxxx/page/login.html这个页面是打不开的，因为Live Server默认是把http://127.0.0.1:xxxx绑定到$GOPATH的目录的，但我们希望能绑定到src/app/web这个目录。

从Preference菜单（MacOS的Code菜单，Windows的File菜单）选择Settings设置，打开Setting设置面板，左侧从Extensions扩展列表中找到Live Sever Config，单击Edit in settings.json打开设置文件。

在设置文件中添加"liveServer.settings.root":"/src/app/web/"一行（上面一行要结尾要加英文逗号),然后settings.json看起来是这样：

{
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.root":"/src/app/web/"
}

注意格式必须正确，导数第二行内容结尾有英文逗号，最后一行结尾没有逗号。

注意这里的"/src/app/web/"是你的项目$GOPATH目录，如果不同的话你需要调整。

完成之后重新打开index.html页面的Go Live，浏览器内的链接就可以正常工作了。

但是至此为止，我们只是解决了Live Server的链接问题，如果我们把这些页面放到服务器上，还是不能让用户正常访问的，在下一节我们将继续学习如何手写一个简单的网页文件服务器。

欢迎关注我的专栏( つ•̀ω•́)つ【人工智能通识】

每个人的智能新时代

如果您发现文章错误，请不吝留言指正；
如果您觉得有用，请点喜欢；
如果您觉得很有用，欢迎转载~

END``