直接切入正题，对于Web前端，最基础的内容是 HTML、CSS、JavaScript三个东西，其中JavaScript是最为核心内容，如果说html和css决定一个前端工程师的下限，那么javascript将决定它的上限。
三者对于一个产品的关键词在于：
html:结构 ->（页面的内容结构）;
css:样式 -> (内容的外貌）;
javascript:动力 -> （使内容动起来的核心）;
在进入之前我们需要做哪些准备呢？你可能会需要这些编辑器（博主认为比较好用的工具）
Web开发的IDE（任选一款，均为官网链接，无脑安装即可）:
HBuilder:HBuilderX-高效极客技巧 (dcloud.io)
https://dcloud.io/hbuilderx.html
WebStorm: WebStorm: The Smartest JavaScript IDE, by JetBrainshttps://www.jetbrains.com/webstorm/
VSCode: Visual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/浏览器：
谷歌浏览器、火狐浏览器、Edge浏览器等主流浏览器均可，这里推荐谷歌浏览器，兼容性较高。
相关的环境配置，可以自行百度或者查阅相关博客和文档。
1.在认识什么是HTML之前，首先先了解一下网页，顾名思义网页就是我们平时打开浏览器所看到的内容，他们在web中有静态网页和动态网页。
静态网页：页面的内容和显示效果基本不会发生变化的网页。
动态网页：页面的内容可以随着时间、数据改变等操作而发生改变的网页。
2.HTML不是一种编程语言，是一种标记语言（全名超文本标记语言）。该标记语言拥有一套标记标签，HTML使用标记标签描述网页内容。内容包括标题、文本、图片、链接等。
下面是HTML的一个基本结构：
<!DOCTYPE html>
<html>
<!--头部，完成一个网页的相关设置-->
<head>
<meta charset="utf-8"><!--汉字编码--> <!--meta:元，主要用来完成对应设置的-->
<meta name="keywords" content=""><!--设置一个网站的搜索关键字-->
<meta name="description" content=""><!--网站的描述内容-->
<title>网页标题</title><!--标题-->
<!--设置网站小图标-->
<link rel="shortcut icon" href="#" type="image/png">
<style>
/*写样式的地方*/
</style>
<link rel="stylesheet" href="style.css"><!--用来引入外部样式文件-->
</head>
<!--主体-->
<body>
<p>这是一个段落</p>
</body>
<script>
// 放脚本代码的地方
</script>
</html>总体结构如图：
html中每一种标签都有自己对应的属性，当然标签也有很多，那么这么多，我们只需要记住常用的就行，不常用的我们需要知道有这个属性或者这个标签，这样在实际开发中可以节省很多事情。
注：在html中大部分标签都是成对存在的，只有少数标签单独存在。即
<p></p> <!--这是成对存在的-->
<img src="" alt="" title=""/> <!--这是单独存在的--> 那么基础标签：
<!-- 文本基础标签 -->
<!-- 标题标签有 h1-h6, 随着数字的增大标题的呈现效果会（改变）变小 -->
<h1>这是标题标签</h1>
<!-- 这是段落标签 -->
<p>这是段落标签</p>
<!-- 这是分区标签 -->
<div>html通过div标签来划分分区</div>
<!-- 行内文本标签，包裹的内容会显示到一行中 -->
<!-- 区别于<p></p>标签，p标签会另起一行 -->
<span>这是行内标签</span>
<!-- 这是换行标签，效果相当换行符，常用到的单标签之一 -->
<br>
<!-- 这是超链接标签，常用到的单标签之一 -->
<!-- href：链接地址， target:设置跳转方式， -->
<a href="" target=""></a>
<!-- 这是图片标签，常用到的单标签之一 -->
<!-- src:图片地址，本地地址/超链接地址， alt: 图片无法显示时的代替文本， title: 鼠标移动到此出时显示的文字 -->
<img src="" alt="" title="">
<!-- 文本格式化标签 -->
<!-- 文字变粗，strong表强调 -->
<b></b>
<strong></strong>
<!-- 文字斜体,em表强调 -->
<i></i>
<em></em>
<!-- 定义小型文本 -->
<small></small>
<!-- 定义上标、下标文本，分别是sup、sub -->
<sup>这是上标标签</sup>
<sub>这是下标标签</sub>2.2.1 列表标签
列表标签需要嵌套使用，分为有序列表、无序列表和定义列表
<!-- 列表标签 -->
<!-- ul：无序列表， ol： 有序列表， dl: 定义列表 -->
<!-- 这是无序列表 -->
<ul>
<li>这是一号</li>
<li>这是二号</li>
</ul>
<!-- 这是有序列表 -->
<ol>
<li>这是一号</li>
<li>这是二号</li>
</ol>
<!-- 这是定义列表 -->
<dl>
<dt>这是标题一</dt>
<dd>这是文本一</dd>
<dt>这是标题二</dt>
<dd>这是文本二</dd>
</dl>2.2.2 table表格标签
HTML内置有table表格,标签组成为：
table:主标签； thead: 表格头； tbody: 表格主体； tfoot: 表格表尾
th(table head)：表的键的标签，字体会自动加粗；
tr(table row):表的行，与th的区别在于文字不会加粗；
td(table date):表的数据，每一个格子内的数据；
例子看代码：
<!-- 表格标签 -->
<table border="1" cellpadding="0" cellspacing="0">
<!-- 表格的表头 -->
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- 表格的主体内容 -->
<tbody>
<tr>
<td>王五</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
</tr>
</tbody>
<!-- 表格的页脚内容 -->
<tfoot>
<tr align="center">
<td colspan="2">底部</td>
</tr>
</tfoot>
</table>
2.2.3 form表单标签
HTML的表单元素有： <input>, <textarea>, <button>, <select>
<form>表单允许用户在表单中输入信息的元素。
<input>标签：根据不同的 type 属性来改变输入的方式。
<textarea>标签： 富文本标签。
<button>标签： 定义一个按钮，button的类型会随着type的改变而改变。
<select>标签： 定义一个可选或者多选的下拉菜单，其中每个选项<option>
<!-- 表单标签 -->
<!-- action属性： 规定提交表单的表单地址 -->
<form action="">
<!-- input标签 -->
<!-- type="text": 定义文本的单行输入 -->
<input type="text">
<!-- type="password": 输入为密码，会隐藏且加密 -->
<input type="password">
<!-- radio类型： 单选按钮 -->
<input type="radio">
<!-- checkbox类型： 复选框 -->
<input type="checkbox">
<!-- button类型： 定义普通按钮 -->
<input type="button">
<!-- reset类型： 重置按钮 -->
<input type="reset">
<!-- file类型： 文件框 -->
<input type="file">
<!-- submit类型： 表单提交按钮 -->
<input type="submit">
<!-- textarea标签 -->
<!-- 富文本标签 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- button标签 -->
<!-- button：定义一个按钮，随着type不同而改变类型 -->
<button>普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<!-- select标签 -->
<!-- select: 定义可选或者多选下拉菜单，包括多个选项 option -->
<select name="" id="">
<option value="">选项一</option>
<option value="">选项二</option>
</select>
通过上面我们了解到HTML中一些常用的标签，可以看到每个标签后有的会跟随一些属性（如：value=""）。事实上每个标签都有这样的属性，比如：
id 属性：定义元素的唯一id,不能重复；
class 属性： 定义元素的类名;
style 属性： 定义元素的样式；
<!--具体案例-->
<div class="head" id="head" style="background: blue;"></div>那么让我们进一步了解标签的属性：
由于标签过多，并且每个标签属性值数量很多，具体细节可以参考W3school提供的HTML参考手册，查询相关的标签及其属性来使用：
HTML 声明 (w3school.com.cn)https://www.w3school.com.cn/tags/tag_doctype.asp
通过上述描述，如果你有实际操作过的话，相信你一定对HTML有所了解了，那么接下来我们再对上述进行一遍整理和拓展。
如果把一个界面比如成个方框，那么我们要做到就是使用这些标签填满这些方框，并通过CSS样式来改变它的表现形式。而这些标签在分为单标签、双标签的同时又分为块级和行内。
每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为block，成为“块级”元素(block-level)；而span元素的默认display属性值为inline，称为“行内”元素
块级元素：独占一行，一般情况下，宽度和高度根据内容来决定，同时还可以设置 width, height 两个属性来固定这个块。
包含以下标签：
<!-- 块级元素 -->
<address></address>、 <div></div>、 <dl></dl>、 <dt></dt>、 <dd></dd>、
<fieldset></fieldset>、 h1~h6、 <menu></menu>、 <p></p>、 <table></table>、 <ul></ul>等
行内元素：相邻的行内元素会排列在同一行里，一行排不下才会换行，其宽度随元素的内容而变化，行内元素设置width和height无效。
包含以下标签：
区别：
块级元素（block）
行内元素(inline)
在HTML中，编辑内容时，我们常常会使用一些字符，比如空格、大于号、小于号等，在html中我们使用转义字符来实现，其格式为 一个和号(&) + 实体名称(xxx) + 分号（;）：
| 显示结果 | 描述 | 实体字符 |
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| " | 引号 | " |
还有很多字符，需要了解可以自行百度。
该片文章到此结束，文章有不足之处还请指出，大家一起进步学习。
该栏未完待续......