软件技术-零基础编写Web页面
欢迎关注我的专栏( つ??ω??)つ【人工智能通识】
使用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代表整个页面，它包含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“
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 软件技术-零基础编写Web页面
