今天心血来潮,想搞个自己的网页玩玩,之前一直没动手,今天就来试试看。
我得有个地方写代码。我电脑里头有之前下载的VSCode,听说这玩意儿挺好使,就用它。打开VSCode,新建一个文件,保存的时候,我给它起个名字叫“*”。这名字随便起的,关键是后面这个“.html”,告诉电脑这是个网页文件。
有文件,接下来就是往里头填东西。我记得网页得有个基本结构,就像盖房子得先搭框架一样。我在网上搜一下,复制这么一段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
</body>
</html>
这段代码,我大概能看懂个意思。最外头是<html></html>包起来,里头分两块,一个是<head></head>,一个是<body></body>。听说<head>里头放的是一些网页的配置信息,<body>里头放的是网页上能看到的内容。我先在<title></title>中间写上“我的第一个网页”,那一会儿打开网页,浏览器标签上应该显示这个。
有骨架,接下来就是在<body>里头填内容。我先写个“Hello, World!”,这算是程序员的传统。直接在<body>和</body>中间打上这几个字就行。
加点料
光秃秃的几个字,看着也太单调。我琢磨着加点别的。听人家说,<p></p>是段落标签,我试着把“Hello, World!”用这个包起来,看看效果。
<body>
<p>Hello, World!</p>
</body>
然后,我又加一行字:“这是我做的第一个网页!”也用<p></p>包起来。
<body>
<p>Hello, World!</p>
<p>这是我做的第一个网页!</p>
</body>
保存文件,双击打开“*”,浏览器里头就显示出这两行字!有点意思!
我觉得,还得加个标题,看起来更像个样子。听说<h1></h1>是最大的标题,我就用它。在<body>的最上头,我加这么一行:
<body>
<h1>我的个人主页</h1>
<p>Hello, World!</p>
<p>这是我做的第一个网页!</p>
</body>
光是文字,还是有点单调。我想加个列表,列出我喜欢的东西。听说<ul></ul>是无序列表,<li></li>是列表项,我试试:
<body>
<h1>我的个人主页</h1>
<p>Hello, World!</p>
<p>这是我做的第一个网页!</p>
<p>我喜欢的东西:</p>
<ul>
<li>看电影</li>
<li>听音乐</li>
<li>打游戏</li>
</ul>
</body>
保存,刷新浏览器,列表出来!
今天就先折腾到这儿,虽然简单,但好歹是我亲手做出来的第一个网页,还挺有成就感的!以后再慢慢学,加点图片、链接啥的,让它更丰富些!