做为一个后端程序员，每次想到前端的时候都只有一个字：烦。很多时候一个功能80%的时间，我都花在前端的显示和逻辑上面去了，所有就让我萌发了系统学习前端的想法。我觉得我之所以前端开发效率底下主要是因为：没有系统学习前端知识，很多效果都是拿来就用，不太清楚整个处理流程和实现原理，导致效果不对后不知道如何解决。再就是js的弱语法，对于后端的我很不习惯。废话不多说了，看看我第一天的学习记录吧。
HTML5文件的整体结构
<!-- 告诉浏览器使用HTML5的标准解析文件.必须写在第一行 -->
<!DOCTYPE html>
<html>
<!-- head表示网页的头部，这里主要是对网页的整体说明 -->
<head>
<meta charset="utf-8" />
<title>这是一个标题</title>
</head>
<!-- body表示网页的主体内容 -->
<body>
</body>
</html>
HTML标签
<!-- 标题 -->
<h1>重要性</h1>
<h3>重要性</h3>
<h6>重要性</h6>
<!-- 斜体 -->
<i>2019.10.30</i>
<!-- 水平线 -->
<hr>
<!-- 段落 -->
<p>aaaaaaa</p>
<p>bbbbbbb</p>
<!-- 换行 -->
你好，<br>我想换行
<!-- 加粗 -->
<b>加粗</b>
<!--  表示空格 -->
<p>你 好</p>
<!-- 链接 href表示跳转地址。默认是在本窗口打开链接 -->
<a href="https://www.baidu.com">百度一下</a>
<!-- 链接 target="_blank"表示在新窗口打开链接 -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<!-- 图片 src表示图片地址 title表示鼠标划上去时的提示 alt表示图片加载失败后的文字 -->
<img src="img/logo.png" title="鼠标划上去时的提示" alt="图片加载失败后的文字" />
<!-- 无序列表。默认是实心圆的风格，即type="disc" -->
<ul>
<li>
无序列表
</li>
</ul>
<!-- type="circle"表示空心圆的风格 -->
<ul type="circle">
<li>
无序列表
</li>
</ul>
<!-- type="square"表示实心方块的风格 -->
<ul type="square">
<li>
无序列表
</li>
</ul>
<!-- 有序列表。默认是数字的风格，即type="1" -->
<ol>
<li>
有序列表
</li>
</ol>
<!-- type="i"表示小写罗马字母的风格，type="I"大写罗马字母的风格 -->
<ol type="i">
<li>
有序列表
</li>
</ol>
<!-- type="a"表示小写字母的风格，type="A"大写字母的风格 -->
<ol type="a">
<li>
有序列表
</li>
</ol>
<!-- 删除线 -->
<del>给文字增加删除线</del>
<!-- 将文字变成上标签 -->
10<sup>2</sup>
<!-- 给文字加上下划线 -->
<u>给文字加上下划线</u>
<!-- 把文字居中 -->
<center>文字居中</center>
<!-- 表格。border表示边框，cellspacing表示间距 -->
<table border="1px" cellspacing="0">
<!-- col表示一列。第一个表示第一列，第二个表示第二列，依次类推。 -->
<col width="200px" >
<!-- colgroup表示列分组。span="3"表示3列 -->
<colgroup span="3" width="300px"></colgroup>
<!-- tr表示一行 -->
<tr>
<!-- th表示表头。就相当于加了文字水平和加粗的td -->
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<!-- td表示一个单元格 -->
<td></td>
<!-- align表示排列方式，center表示居中 -->
<td align="center"></td>
<td></td>
<td></td>
<!-- rowspan="2"表示垂直方向上占据2个单元格的位置。
一般用于单元格的垂直合并 -->
<td rowspan="2"></td>
</tr>
<tr>
<!-- colspan="4"表示水平方向上占据4个单元格的位置。一般用于单元格的水平合并 -->
<td colspan="4"></td>
</tr>
</table>
<!-- 表单 action="https://27.123.129.12/test/login"表示提交的地址 method="get"
提交方式-->
<form action="https://27.123.129.12/test/login" method="get">
<!-- 文本输入框 -->
<input type="text" name="userName" />
<!-- 密码输入框 -->
<input type="password" name="password" />
<!-- 提交按钮 -->
<input type="submit" value="提交" />
<!-- 重置按钮 -->
<input type="reset" value="重置" />
</form>
<!-- 容器标签。div是一个块级元素，它包含的元素会自动换行。
span是行内元素，在它的前后不会换行。 -->
<div></div>
<span></span>
