这是我参与[第四节青训营]笔记创作活动的第1天。 今天的课程主要是概述了前端的包括内容，和HTML中的一些常见标签。下面是我根据听课内容及自身学习的整理。

一、HTML概述

HTML，超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 前端三件套为HTML，CSS，Javascript，网页由这三样组成，为了便于理解，我们可以将HTML看做名词，用来构建整个网页的骨架；CSS则是形容词，帮助我们将骨架修饰的更加好看；那么JavaScript就是动词，可以将我们构建的静态网页动起来，实现一些功能。

二、HTML实例

这是一个最基础的HTML实例。一个完整的HTML页面由三部分组成，首先是声明部分： ，意为声明此为HTML5文档；其次是被标签包裹的头部分，其中标签包裹的内容为此页面的标题，也就是我们在浏览网页时看见的页面头，如下图所示。

style标签可写入的内容为css代码，以及外部资源的引入。 最后则是body部分，我们可以在里面添加标签，写入的标签就是此HTML页面的可见内容。

三、常见的HTML标签

我将以淘宝官网为例，介绍一些常用的HTML标签。

我们从头开始浏览此网页，首先就是导航栏部分，通常在HTML中构建导航栏使，我们会将整个导航栏看作是一个大的盒子，用div标签来表示；然后将导航栏内容根据位置划分为两部分，左右两边分别为一个小盒子，分别存放导航栏的内容。 做好了存放内容的主体，我们要考虑如何做里面一项一项的内容，在这里我们可以使用列表来构建。 列表分为有序列表和无序列表，有序列表用ol标签表示，无序列表用ul标签标示，而列表中的内容，则用li标签来包裹显示。 无序列表：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

运行后：

有序列表：

<ol>
<li>Coffee</li>\
<li>Milk</li>\
</ol>

运行后：

在构建完导航栏整体结构后，我们可以添加文字，再通过CSS将其变成与图片相同的样子。

接下来我们来看网页中最常见的图片和连接是怎么做出来的。

图片语法格式：

<img src="*url*" alt="*some_text*">

src为引入图片的地址，alt为图像定义一串预备的可替换的文本,在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。

链接语法格式：

<a href="url">链接文本</a>

href属性描述了链接的目标。

一个网页中包含其他各种标签：例如标题标签h1-h6,h1代表最大标签，h6代表最小标签；段落表示为p标签；表格为form标签等等，如此多种，在此不多赘述。