这是我参与「第四届青训营」笔记创作活动的的第1天，

前言

我参加青训营也是因为现在马上步入大四实习的任务变重了，必须要对自己的前端知识要一次系统的整理希望通过这次活动我可以有很多收获。

HTML的介绍

超文本标记语言（英語：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

步入HTML

这里我们从一个hello world案例开始吧。
首先初始化,在编辑器打一个'！'，再使用tab键,初始化一个html文件。
完成代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

首先，你看到了一堆带着尖括号(< >）的东西，这种用尖括号括起来的东西就叫做标签。有的标签（比如<title>）后面会跟着一个对应的</title>，前者叫做开始标签，后者叫做结束标签，那么一个开始标签和一个对应的结束标签框进来的东西就叫做一个非空元素。没有对应开始结束（比如上面的<meta>）的元素我们就叫做一个空元素。

我们先简单了解一下其中一些部分代表的含义，剩下的部分不用去深究，因为后面肯定会将得到。 <!DOCTYPE html>这个标签（严格来讲不算标签，其实是给浏览器的一种指令）是在告诉浏览器这个文档的html版本，以让浏览器决定如何渲染，如果没有这个标签，那么浏览器就会以非常远古的HTML版本来渲染网页。

<html> </html>这个标签被称为文档的根标签，代表着整个html文档的开始和结束，网页上面的内容都是要写在这个里面的。

<head> </head>代表网页的头部标签，头部一般写有控制整个网页内容的东西（比如样式表、编码格式等）。而其中的<title> </title>标签就代表着网页的标题。

<body> </body>标签里面就是网页本体的内容了。

与其他大部分语言不同的是，HTML的标签是不区分大小写的（我印象中除了它之外好像只有Fortran是这样的）。也就是说你写<html>、<HTML>甚至是<HtMl>都是可以的。
我们一般把内容写入<body> </body>
完成代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>hello world</p>
</body>
</html>

这里<p> </p>在HTML标签中,标签用于定义段落,它可以将整个网页分为若千个段落。

标题标签

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

有序，无序以及自定义列表标签

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>Coffee</li>
        <li>Milk</li>
    </ul>
    <ol>
        <li>Coffee</li>
        <li>Milk</li>
    </ol>
    <dl>
        <dt>Coffee</dt>
            <dd>Black hot drink</dd>
        <dt>Milk</dt>
            <dd>White cold drink</dd>
    </dl>
</body>
</html>

22字节青训营HTML部分

前言