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

作者 : 开心源码 本文共2300个字,预计阅读时间需要6分钟 发布时间: 2022-05-12 共141人阅读

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


使用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,其中titleh1中间有文字内容。
  • 这里其实有三层标签嵌套,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>

注意这几个提醒:

  • h1a标签都嵌套在div标签内,所以都会受到div限制;
  • style是标签属性,用来表示标签的样式,text-algin文字对齐居中centermargin-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.htmllogin.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页面

发表回复