初识HTML文件，创建自己的第一个网页！

news2024/11/17 13:46:09

本文旨在初步介绍HTML（超文本标记语言），帮助读者理解HTML中的相关术语及概念，并使读者在完成本文的阅读后可以快速上手编写一个属于自己的简易网页。

一、HTML介绍

HTML(全称HyperText Markup Language，超文本标记语言)，自从诞生伊始就作为万维网的信息表示语言，包括我们今天所见的网页，本质上也就是HTML所描述的文件通过web浏览器显示出效果供用户使用。

“HyperText”（超文本）指的是不同的HTML文件之间可以进行相互的连接，编写者可以在自己的HTML文件内部链接其他的HTML文件。

“Markup”（标记）指的是HTML文件通过使用“标记”来注明文本、图片、音频、超链接等内容，我们通常把这些标记的内容称为元素。比如相对较为常见的标记有：<head>,<body>,<h1>,<p>,<li>,<img>......

总的来说，HTML定义了网页内容的含义与结构，是网页的本体与内核，正是一个又一个HTML文件搭建出了我们目前所见到的令人叹为观止的互联网世界。

二、HTML编辑器

与C++、python、java等编程语言不同，HTML作为一种标记语言并不需要在特殊的环境配置下进行编写，甚至可以使用系统自带的notepad(记事本)进行HTML文件的编写。当然，通过notepad来进行HTML文件的编写有诸多不方便之处，这里推荐读者使用VS Code进行HTML文件的编写操作（笔者会在VS Code中进行代码的编写）。当然，你也可以使用其他优秀的HTML编辑器，如:Sublime Text、Brackets、HbuilderX等，或者你也可以选择在线的HTML编辑网站，如codepen(https://codepen.io/)。Anyway,it depends on you~

三、HTML文件基本框架

在这一部分，我们将介绍一个简单的HTML文件的基本组成。

首先，我们需要创建一个空白的HTML文件，后缀为.html。

在VS Code中内置了HTML的基本框架，我们输入!，按下回车,一个基础的HTML文件框架就出现了。

我们主要关注两个部分，首先是head部分，head部分是HTML文件的头文件，包含了该HTML的一些基本信息，比如说明了该HTML界面采用UTF-8编码格式，<title></title>标签之间的就是该页面的标题。我们按下F5运行网页，会出现一个空白的浏览器界面，标题即为Document,此外在之后学习更多的知识后，我们会知道在<head>标签下还包括了一些链接文件，如链接到CSS文件、JavaScript文件等。

然后是body部分，body部分就是我们用来设计网页的地方了，现在body部分没有任何内容，因此显示的是一个空白界面，接下来笔者将介绍如何编写我们HTML文件的body部分的代码。

四、HTML文件的标记元素

在前面我们提到过HTML不是一门编程语言，而是一种由定义内容结构的标记元素组成的标记语言。我们可以使用这些标记元素来包围各种各样的内容，使之在页面上被区分成不同的区块，呈现出不同的样式和效果。标记元素的基本写法是<xx></xx>(xx为标记元素名称)，前者称为开始标记、后者称为结束标记，作用如字面所示，标志着元素的开始与结束，中间盛放元素的具体内容。

接下来我将给出一系列在HTML文件中经常出现的元素，掌握了这些元素之后，制作一个简单的网页是不成问题的。

①章节标题元素：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,表示六个不同级别的章节标题，h1级别最高，区别在于字号大小的不同。

②列表元素：<ol>表示有序列表，<ul>表示无序列表，二者包含条目元素<li>。

③段落元素：<p>表示文本的一个段落。

④超链接元素:：<a>通过该标签的href属性实现超链接的功能。

⑤容器元素：<div>、<span>都表示容器，用于将HTML文件划分成不同区域。

⑥文字处理元素：<em>表示着重符号、<b>表示加粗符号、<i>表示斜体符号、<strong>表示粗体符号、<sub>表示下标符号、<sup>表示上标符号。

⑦图片和多媒体元素:<audio>表示音频元素、<img>表示图片元素、<video>表示视频元素。

⑧其他常见功能元素：<br>标记换行符号；<input>常见基于表单的交互式控件......

五、实战HTML文件编辑,创建属于自己的第一个网页！

掌握了HTML文件的基本元素概念及写法之后，我们就可以开始着手编写自己的代码了，笔者在这里做一个简单的诗歌展示页作为示范。(其中img和audio是笔者事先准备好的素材，大家可以选用自己喜欢的素材与文本内容自由发挥~)

(代码如下，供参考)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poem</title>
</head>
<body>
    <h1>不可知</h1>
    <h3>【阿根廷】博尔赫斯</h3>
    <br>
    <img src="moon.jpg" alt="">
    <br>
    <p><i>月亮不知道她的恬静皎洁，</i></p>

    <p><i>甚至不知道自己是<strong>月亮</strong>；</i></p>

    <p><i>砂砾不了解自己是砂砾。</i></p>

    <p><i>任何事物都不了解它独特的模样。</i></p>

    <p><i>象牙的棋子和摆弄它们的手，</i></p>

    <p><i>和抽象的棋艺都毫无关系。</i></p>

    <p><i>人们欢少倍多的<strong>命运</strong></i></p>

    <p><i>也许是冥冥中某个主宰的工具，</i></p>

    <p><i>这些事我们<strong>不得而知</strong>；</i></p>

    <p><i>把他叫做上帝并不解决问题，</i></p>

    <p><i>恐惧、疑虑和有头无尾的祈祷，</i></p>

    <p><i>都是白费力气，<strong>徒劳无益</strong>。</i></p>

    <p><i>哪一张弓射出我这只箭？</i></p>

    <p><i>目标又是哪一座<strong>高山之巅</strong>？</i></p>

    <audio controls src="music.mp3"></audio>
</body>
</html>

最后呈现出来的界面效果是这样的：