HTML 入门教程

· · 科技·工程

编写网页需要做的准备。

HTML

HTML（Hyper Text Markup Language）即超文本标记语言，是构建网站的基石，目前 HTML 已发展到第五代。了解更多。

HTML 的核心就是标签，那么笔者就在这篇文章中介绍极小一部分。

来一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>欢迎来到我的主页！</title>
    <link rel="stylesheet" type="text/css" href="/static/css/index.css">
</head>
<body>
    <form action="/save" method="post" enctype="multipart/form-data">
        <p>上传头像：<input type="file" name="picture" required></p>
        <p>用 户 名：<input name="user" required></p>
        <p>密    码：<input type="password" name="pwd" required></p>
        <p>再次输入：<input type="password" name="pwd2" required></p>
        <p>性    别：
                 <input name="sex" type="radio" value="girl">女
                 <input name="sex" type="radio" value="boy">男
        </p>
        <button>提交</button>
    </form>
    <h3>{{error}}<h3>
</body>
</html>

观察到，标签是有单双之分的。常用标签 <img> 就是单标签，仅由一个标签组成。而 p 和 h1 等等就是双标签，通常是 <标签>内容</标签> 的格式组成。

接下来就具体的讲一下标签以及更庞大的结构。

首先首尾是 <html lang='en'></html>，暂时不需要改变。

接下来主要有两个部分：<head></head> 和 <body></body>。

head 中包含 <title></title>，里面的内容也就是你浏览网页时显示在最顶端的标签，在网址的上方，另外还有样式表的成分，之后再讲样式表。

body 中的是核心部分，接下来具体讲一讲里面的标签。

p 标签

<p></p> 是用来显示文字的标签，不加任何效果，较为朴素。举个例子：

<p>洛谷是一个知名网站。</p>

显示效果为：

洛谷是一个知名网站。

h1~h6 标签

这六个标签就是一级标题到六级标题。你可以打开网页验证文章 n 级标题对应的标签是否是 hn。举例：

<h3>四级标题</h3>
<h4>上为三级标题</h4>

显示效果为：

四级标题

上为三级标题

a 标签

这是存放链接的标签。点击网页上的链接可实现跳转，就比如我上文给出的关于 HTML 的资料的链接，其实，背后的 HTML 代码长这样：

<a href="https://baike.baidu.com/item/Html/97049">了解更多</a>

注意这里的 href 属性，要学会与下文的属性区分。

img 标签

引用一张图片：

HTML 长这样：

<img src="https://cdn.luogu.com.cn/upload/image_hosting/gxb1lgqz.png" alt="仙境">

最重要的是 src 属性，后面跟上洛谷上传的图片链接，alt 则是我在编辑文章时添加的备注，也记一记。

audio 标签

<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。<source>是一个空元素，为图片、音乐、视频指定一个或多个媒体资源。

材料来自这里。

常见代码：

<audio controls src="音频路径.mp3"></audio>

input 输入框

有时网页上会用到输入框，这里总结 5 种，自己看后面的备注了解吧。

<input type="text"><!--文本框-->
<input type="radio"><!--单选框-->
<input type="password" name="pwd" required><!--密码框-->
<input type="file" name="xxxing" required><!--按钮框-->
<input type="date"><!--文件框-->

这些输入框经常在 form 表单里出现，就比如你登录洛谷时填写的密码框，记得灵活运用。

form 表单

进入本文的重点了。

form 表单用于获取不同类型的用户输入数据，将用户输入数据提交给 web 服务器，表单使用 http 协议提交数据。

接下来一起认识一堆标签和属性。

之前已经给出了模板代码，你应该发现 p 标签中可以包含 input 标签，其实 label 标签也是在其中使用的，这里给出一段很短的示例代码。

<p>
    <label for="">密 码：</label>
    <input type="password" name="password">
</p>

再来一个下拉列表的模板：

<select name="problem">
    <option value="0">毕业高校</option>
    <option value="1">所学专业</option>
</select>

div 与模板语法

div 标签可定义 HTML 文档中的一个分隔区块或者一个区域部分。div 标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。由于它经常与 CSS 组合使用，笔者在下一期中再来介绍。这里给出一段 div 与模板语法结合的代码：

{% for diary in diaries %}
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-4">
           <img src='static/images/{{ diary["mood"] }}.png'  alt="..." title='{{ diary["mood"] }}'>
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">{{diary["title"]}}</h5>
            <p class="card-text">{{diary["content"]}}</p>
            <p class="card-text"><small class="text-muted">{{diary["date"]}}</small></p>
          </div>
        </div>
      </div>
    </div>
{% endfor %}

这里运用了循环的模板语法，与 Python 中的循环对比，发现上面语句多了 {%...%}，删去了结尾的冒号，并且在下面加上了 {% endfor %}。常见的模板语法标志还有 {{变量名}}，表示数学表达式或编程上下文中的变量名称，用于传输变量。

补充说明

笔者一时只能回想起来这么多内容，下一期继续补充。另外展示一些用法。

图标跳转：

<a href="路由名"><img src="图片地址" title="说明文字"></a>

span 标签的用法：

<p>
  <span>提示文字</span>
  <input type="...">提示文字</input>
</p>

textarea 标签的用法：

 <textarea name="content"></textarea>

背景图：

<body style="background-image:url('/static/images/{{last_mood}}背景.jpg');">

文章开头给出的 HTML 需要与 Python 结合使用，这里给出它对应的 Python 代码。之后也会发布相关文章解释这份代码。

鸣谢这篇文章，对本文的创作提供了一些支持。

CSS

下转文章 /sq570kev。