引言

前端需要的三个东西：html，css，js；其中的html相当于人的骨骼，css相当于人的高矮胖瘦与外貌，js相当于人的思想；我分享的顺序也会按照这个顺序来。

简介

我们新建一个html文件，输入感叹号，敲下回车，会发现自动补齐以下代码：

<!DOCTYPE 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>

!DOCTYPE html

document type的简写，它并不是 HTML 标签，也没有结束标签。
它是文档的声明，即告诉浏览器当前 HTML 是用什么版本编写的。DOCTYPE的声明必须是 HTML 文档的第一行，位于html标签之前。

html

我们所有代码的根，所有的代码都要在里面写。

其中的lang="en"为语言，我们需要把语言改成zh。

head里的meta常用于定义页面的说明，关键字，最后修改日期，和其它的元数据。这些元数据将服务于浏览器（如何布局或重载页面），搜索引擎和其它网络服务。这个不是重难点，只需要你看一下这篇文章了解一下即可。

title是我们html的标题，标题左侧的小图片要自定义的话，也需要我们自己写代码，即：

<link rel="icon" href="https://q2.qlogo.cn/headimg_dl?dst_uin=2749909223&spec=5" />

我们的样式文件(css)，js代码也要写在里面，即：

<!DOCTYPE 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>
  <link rel="icon" href="https://q2.qlogo.cn/headimg_dl?dst_uin=2749909223&spec=5" />
  <style></style>
  <script></script>
</head>
<body>
  
</body>
</html>

但是这里会有一个坑，先按下不表，后续我会解释到。

body

我们的html代码都要写在这里面，js代码也可以写在这里面，即：

<!DOCTYPE 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>
  <link rel="icon" href="https://q2.qlogo.cn/headimg_dl?dst_uin=2749909223&spec=5" />
  <style></style>
  <script></script>
</head>
<body>
  <p>霜序廿</p>
  <script></script>
</body>
</html>