第一讲 HTML初识

文科编程系列课程-Web开发

第一讲 HTML初识

1 标记（Mark）

1.1 文本中的标点

中国古代书籍中，一般不加标点符号，而是通过文意、语感、语气助词、语法结构等进行断句。像全国卷高考语文中的文言文题目就涉及到文章的断句。

如今，在现代汉语中，我们有一套完整的标点符号系统。在《中华人民共和国国家标准 标点符号用法》里给出了这样的定义：标点符号是辅助文字记录语言的符号，是书面语的有机组成部分，用来表示语句的停顿、语气以及标示某些成分（主要是词语）的特定性质和作用。

试一试
给这句话加上标点：
今天发了古代汉语这本教材但封面上的代这个字印得不太清楚

答案：今天发了《古代汉语》这本教材，但封面上的“代”这个字印得不太清楚。

这句话里用到了书名号《》、双引号“”、逗号，和句号。，我们首先来看书名号。书名号在《中华人民共和国国家标准 标点符号用法》（以下简称《用法》）中提出的作用就是标示语段中出现的各种作品的名称。也就是说，如果想要告知读者某一个句子成分具有作品名称的含义，我们就可以在它的前后两端分别加上《 》这样的标注，从而赋予它一个新的含义。
我们再来看句号。句号在《用法》中提出的作用是用于句子末尾，表示陈述语气。也就是说，如果要告知读者某一陈述句结束了，则可以使用。这样的标注，来表示句子的界限。

1.2 标点符号的特点

我们根据上一节涉及到的这些标点符号，可以概括出以下特点：

1. 标点符号有的是成对搭配出现的，例如书名号《》和双引号“”；有的是独自出现的，例如逗号，和句号。。
2. 标点符号是属于语义层面的标记，有助于我们理解语义，但并不是我们语义加工的对象。
3. 标点符号是一套约定俗称的符号系统。

1.3 从标点到标签

标点符号可以完成语义层面的标记，那我们如何在形式层面进行标记呢？也就是说，我们如何标记它的样式呢？具体而言，如果想在一句话中强调一个词，我该如何进行标记呢？

我们以加粗为例，请大家类比标点符号，思考如何在一句话中表示“汉语言”这个词被加粗？
我是一位坚强的汉语言学生。

我们可以模仿标点符号，继续设计一套标记符号系统，用一对特殊的符号例如▶◀来表示内部的词加粗，但如果需要标记下划线呢？标记字的颜色、大小、字体、间距等等呢？如果针对每个需求都设计特定的符号予以表示，那这将是一种非常不经济的方式，这不符合我们使用语言对于便利的追求。

那么拓宽思路，标记不一定只是一个字符，也可以是一些字符的组合，那请大家思考，有没有一种利用现成的材料来轻松地达到我们的目的的方法呢？

我们想到了词语，我们的词语是现成的，那么我们是否可以通过词语来完成标记呢？这是一个好主意。

加粗的英语是strong，我们可以试一下这样标注：
我是坚强的strong汉语言strong的学生。

那如果这句话是英语呢？
I am a strong strong linguistics strong student.
显然，用于标记的词语和句子中本身存在的词语混在一起，难以分辨。

我们需要将用于标记的词语和文中的词语区别开，那么我们可以给用于标记的词语左右加上个尖括号，成为一个标签，来表示这是一个标记，而不是句子中的词语。

那就变成了
I am a strong <strong> linguistics <strong> student.

那现在从一段标记文本中摘抄出

孤<strong>舟<strong>蓑笠翁<strong>独钓<strong>寒<strong>江雪

显然，因为这只是一个片段，没有上下文语境，我们无法判断出究竟哪个部分是加粗强调的。因此，我们还需要再此基础上进一步类比标点符号进行改进，将成对儿的标签彼此可以配对。于是，我们在后一个标签加上斜杠/，形成形如<> </>的标签对。
即：

我是坚强的<strong>汉语言</strong>的学生。

2 HTML

2.1 HTML的概念

这样由形如<> </>标签组成的语言即为HTML语言。

至此我们就可以针对HTML给出一个定义，HTML全称为Hyper Text Markup Language，即超文本标记语言。所谓的“超”指的是超越普通纯文本的存在形式，即包含诸如视频、图片等多媒体，包含输入框、按钮等控件的文本。标记就指的我们刚刚认识到的标签。
HTML本质上是一个类似于标点符号系统的语言，它通过规范化的标签在纯文本中实现嵌入丰富的内容。

2.2 HTML5

H5是HTML5的简称，是结合了 HTML4.01 的相关标准的革新。HTML5因其轻量，内容丰富，编辑简单的特点被众多新媒体平台关注，成为活动营销、运营涨粉的利器。

2.3 HTML实践

请大家实际操作，动手尝试刚刚学习到的语句。
第一步，打开VSCode，创建HTML文件。

第二步，写入语句。

第三步，打开浏览器，查看运行结果。

3 课后作业

作业内容如下：

• 创建一个HTML，使用本节课涉及到的<strong></strong>标签完成对所需强调内容的标注。
• 尝试使用<i></i> <li></li> <p></p>标签，并自主探究这些标签的作用。
• 自己的疑问和困惑，以及完成作业时遇到的困难。

请将作业HTML语句和运行结果截图等放至word内，并将word文档按文科编程Web-姓名-学号格式命名。

命名示例：文科编程Web-张三-01200600

声明
本讲义仅用于文科编程教学，是针对于文科生编程学习的定制化讲授模式，其中个别概念的阐释及举例或与计算机专业领域有些微出入，还请各位大咖包涵！
本人资历尚浅，欢迎各位博主批评指正！