前言：现在对于程序员这一行的技术要求越来越高了，前端一手jquery走天下的时代已经过去，后端也不单单是会个SSM的增删改就可以找到工作，前后端分离已经普遍实现，作为后端人员的我们，在一般的公司可能很难接触到大并发集群等，更别说上手经历一次实际的操作了，更多的还是业务型接口的开发，但是我们不能满足现状，必须要想着提高自己各方面能力，在需要的时候可以从兵器库中拿出来。前端的一些知识之前算是一直在接触，但是当时写的是JSP页面，html+css+jquery，现如今更多的DOM操作早已由各种前端框架去操作，数据驱动模型，甚是方便，所以我决定系统的有规划的从前端开始整理一遍，虽然对html、css、js、es6、vue有一些了解但是不是太系统，知识掌握不扎实，希望这次可以边巩固边记录下来，也可以给大家一个参考，尤其是后端想接触前端一些知识的童鞋。
开发工具
我目前使用的是VSCODE，还有Dreamweaver、HBuilder等，大家可以自行选择，使用工具主要是因为比较方便，有提示，还可以自动格式化，如果想用文本也可以开发，开发之后修改后缀名为html，用浏览器打开就可以看到效果。
学习路线
HTML—>CSS—>JS—>ES6—>VUE
基础概念可能不会说太多，更多的是一些运用。
整体结构
<html>
<head>头信息</head>
<body>体信息</body>
</html>
- 头信息：我们可以规定编码格式以及标题，还可以写CSS或JS代码，或者引入外部的CSS文件或JS文件。
- 体信息：就是我们网页要展示的内容，通过填写各类标签，来实现我们想要的效果。
- 标签：一个HTML页面就是由标签组成的，犹如盖房子般，上面的大结构像房子的房梁，各式各样的砖和屋内的陈设就像我们写的各种标签，一般都是成对出现的<></>,个别的是单个出现，例如br(换行)、hr(横线)。
- 属性：标签只是实现了基本我们想要的效果，如果想要实现特定的效果，还需要给标签加上特定的属性。
- 元素：标签加内容加属性就是元素。
基本元素
标题
h标签会自动粗体，大写其中的内容，并自动换行。
总共有六个标题标签<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>数字越大，标题越小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body style="text-align: center;">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</body>
</html>
效果：
段落
p标签即段落标签，会自动换行，p标签以外的内容都会重起一行，不会跟在p标签内容的后面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落</title>
</head>
<body style="text-align: center;">
<p>这是段落标签</p>段落标签外的内容
</body>
</html>
效果：
粗体
b标签和strong标签都可以实现粗体的效果。
区别：b是bold的缩写，仅仅表示该文本是粗体，并不暗示这段文字的重要性。
strong虽然也是粗体，但是更多的是强调语义上的加重，提醒用户该文本的重要性。在SEO(搜索引擎优化)的时候，也更加容易帮助 用户找到重点内容，推荐使用strong。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粗体</title>
</head>
<body style="text-align: center;">
<b>这是b标签</b>
<strong>这是strong标签</strong>
</body>
</html>
效果：
斜体
i标签和em标签都可以实现斜体效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>斜体</title>
</head>
<body style="text-align: center;">
<i>这是i标签</i>
<em>这是em标签</em>
</body>
</html>
效果：
预格式
pre标签，当我们在网页上显示代码时，不使用pre标签我们写的代码会输出成一行，使用pre标签则会按照我们写的格式输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>预格式</title>
</head>
<body style="text-align: center;">
public static void main(String args[]){
System.out.println("没在pre标签内");
}
<pre>
public static void main(String args[]){
system.out.println("在pre标签内");
}
</pre>
</body>
</html>
效果：
删除效果
del标签即删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>删除效果</title>
</head>
<body style="text-align: center;">
<del>删除此行</del>
</body>
</html>
效果：
下划线
ins标签即下划线标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下划线</title>
</head>
<body style="text-align: center;">
<ins>下划线</ins>
</body>
</html>
效果：
图像
img标签即图像标签，需要设置其属性src指定图像的路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图像</title>
</head>
<body style="text-align: center;">
<img src="/Users/liuzhenyu/Downloads/20190414165045567.jpg" />
</body>
</html>
效果：
超链接
a标签即用来显示超链接，href属性设置链接跳转的地址。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body style="text-align: center;">
<a href="http://www.baidu.com">百度</a>
</body>
</html>
效果：
表格
table标签用于显示一个表格，theadtr标签表示一行，td标签表示一个单元格。
width属性设置table的宽度或者td的宽度
border属性可以设置表格的边宽
colspan属性可以设置td水平合并
rowspan属性可以设置td垂直合并
bgcolor可以设置tr或者td的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body style="text-align: center;">
<table width="100%" border="1">
<tr bgcolor="red">
<td width="70%" colspan=2>水平合并</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan=2 bgcolor="blue">垂直合并</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
</table>
</body>
</html>
效果：
列表
ul标签代表无序列表，ol标签代表有序列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表</title>
</head>
<body style="text-align: center;">
<ul>
<li>无</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ul>
<ol>
<li>有</li>
<li>序</li>
<li>列</li>
<li>表</li>
</ol>
</body>
</html>
效果：
块标签
div标签和span标签
这两种标签都是布局用的，这种标签本身没有任何显示效果，通常是用来结合CSS进行页面布局。
div是块元素，会自动换行；span是内联元素，不会换行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块标签</title>
</head>
<body>
<div style="height: 100px;width: 200px;background-color: green;">
DIV标签
</div>DIV会换行
<span style="background-color: blue;">SPAN标签</span>SPAN不会换行
</body>
</html>
效果：
字体
font标签表示字体，常用的属性有color和size，分别表示颜色和大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
</head>
<body>
<font color="green" size="1">字体可以修改颜色和大小</font>
<font color="red" size="10">字体可以修改颜色和大小</font>
</body>
</html>
效果：
内联框架
iframe标签即内联框架，通过内联框架可以实现在网页中插入其他网站的网页。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<iframe src="https://how2j.cn/" width="800px" height="400px"></iframe>
</body>
</html>
效果：
结尾
未完待续，今天先写这么多，有问题的地方大家指出来，共同进步！！！
这是我觉得不错的学习网站之一，里面还是比较全面的，如果大家都能学完，保证可以找到一个不错的工作，点击进去看看吧！
