嗯哼君 渠源查看:3 回复:3 评论:3 创建时间:2020-04-21T12:03:20用户:嗯哼君 渠源查看:3 回复:3 评论:3 创建时间:2020-04-21T12:03:20
往期回顾：
1·众所周知HT·ML是一门编程语言：https://shequ.codemao.cn/community/279595
——————————————
一、新建文件
上期，我们做好了迎接HT·ML的准备。而今天，我们将要用所学的一点点知识，写出有生以来的第一个网页！
首先，让我们在任意一个地方新建一个文件夹，随意起名（我这里叫做“su-numen”了，即《玊兽》的英语）
然后我们打开Dw，同时按下“Ctrl+N”，弹出新建文件的界面，在该目录下新建一个HT·ML文件：
完成，就会变成这样：
二、编写代码
让我们来一句一句解释一下：
<!doctype html> #第一行表示声明，直译过来就是<文档的类型 html>
<html> #<html>表示代码的开头，基本所有的代码都必须在这下面
<head> #<head>表示这个html的“头部”，不会显示出来，我们暂时不用学习
<meta charset="utf-8">#<meta>的作用有很多，在这里是声明编码，我们也暂时不用管
<title>index</title> #<title>即“标题”，是你这个网站的主要内容
</head> #在其前面加上一个斜杠/，表示内容的结束，底下会再讲
<body> #<body>表示这个html的“身体”，也就是我们基本上写代码的地方
</body> #同<head>与</head>，表示一个范围
</html> #同上，<head></head>、<body></body>、<html></html>都是一样的这个模板对于我们初学者来说太过复杂，我们现在只需要理解其中的一部分即可：
首先是多次出现的斜杠/。在HT·ML中，我们一般都称这种在<>之中的单词，叫做“标签”。
那这个标签的范围有多大呢？我们便用<xxx>与</xxx>来标明范围。在这之中的内容，便受到这个标签的“限制”
<xxx>叫做“开放标签”，</xxx>叫做闭合标签。哪怕你造出一个凭空的开放标签叫做“<enhengjunzhenshuai>”，你也可以造出它的闭合标签"</enhengjunzhenshuai>"
PS：换句话说，开放标签与闭合标签之中的内容，都归它管！
而这个开放标签与闭合标签，没规定必须都在一行。也就是说，你可以把他们放到同一行里，也可以换行
我们先喵地把不相关的内容全部删掉，只剩下如下内容：
<!doctype html>
<html>
<body>
</body>
</html> 现在，让我们往里面添加些东西：
<!doctype html>
<html>
<body>
<h1>《玊兽》</h1>
<p>著者：嗯哼君 渠源</p>
</body>
</html>其实，H喵L中的大部分标签都不太注意缩进的（也就是在标签前空出两格）。但是为了可读性，也是为了我学Python留下的后遗症，我便统统缩进了23333
让我们先按下"Ctrl+S"保存，然后点击上方的“实时视图”（其他IDM需要将文件双击打开，或者拖到浏览器里）。如果你的效果和我的一样，那么就说明你成功了：
我们可以看出，我们新做出来的页面一无所有，只有一个标题与一行正文，但是它确实可以被称为一个“页面”
让我们再回到“代码页面”，解释一下新加的两行代码是啥意思：
<!doctype html>
<html>
<body>
<h1>《玊兽》</h1> #<h1>表示的是标题，从大到小一共可以有6个标题哦
<p>著者：嗯哼君 渠源</p> #<p>表示一段文字，无限制
</body>
</html>没错，你可以有<h1><h2><h3><h4><h5><h6>……
当然，标题出现的次数也是无限制的，比如你可以有两个大的标题<h1>，或者是跳过<h2>直接<h3>都是没问题的
就这样，我们喵地做出来了一个最简单的“页面”。而各标签具体的含义，我会放到下期讲（主要是怕字数限制2333）
——————————————
三、今日作业（当然不是强迫你2333）
1、基本任务：用类似的方法，最好能纯手打出那两行代码，将其中的内容改为你的作品内容。完成的或者有疑问的，可以在评论区里留言，让我们互帮互助鸭
2、进阶任务：尝试一下<h1>到<h6>的各标签，或者用好几个<p>来达到分段的效果
OK，本节课到此为止，十分感谢您的阅读！
PS：最后再说一声，#在HT·ML中可不是“注释”的意思，我只是为了方便这么写了，你们可千万不要模仿啊23333
