在此之前，我一直抱有不考研人生不够完整的思想，但从今天开始我将全心投入就业准备，系统地学习前端相关知识并在此记录。
在正式学习之前，我曾经参加过学校的web学习课程，但是是属于课程时间很少，只有几个周末的那种。但也正是这次经历，让我对前端开发产生了兴趣，也对其有了一定的了解。参与了这次学习之后，我便在后续的大作业里担任了前端的工作，由于能力不够，只能边学边做，好在结果还不错。
在之前的课程学习中，我学的是一些基础的html标签和布局格式，css样式和JavaScript都是直接写在html文件里，在大作业之后，我了解了Bootstrap栅格布局，还有一些新的JavaScript的使用。
前几天，我隐约有放弃考研的想法，于是在某站上看了一些基础前端开发的知识，以下为我对我的已知知识的记录，仅概括我认为比较重要和我记不太清的知识点。
前言
开发工具
在学校的课程学习中，老师授课要求使用的是hbuilder，我认为它很直观，页面也很舒服，对初学者非常友好，但是因为我的需求是就业，我之后的学习会使用vscode。
web标准的构成
主要包括 结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。web标准即是要求三者分开来写，基础阶段就是结构用html文件来写，表现用css文件来写，行为用JavaScript文件来写。
有一些快捷键很方便。
1.！+ tab召唤html文件基本骨架
2.Ctrl+L选中行，alt+上/下箭头移动代码，alt+shift+上/下箭头相当于
复制粘贴选中的代码行
有一些插件很方便。
1.页面显示
2.代码逻辑
3.自动格式化
html标签
<div>和<span>的区别和联系
两者都是负责布局的“盒子”，但是div只能单行显示，而一行可以显示多个span
特殊字符
代表空格
表格相关
align="center"用于设置表格在浏览器中居中
合并单元格：rowspan="合并单元格的个数"用于跨行合并；colspan="合并单元格的个数"用于 跨列合并。写上该代码后删除相应单元格。
表单
首先写一个表单域<form>,其它的代码写在表单域里，表单元素主要是<input> <select> <textarea>
<input>
<input>的使用主要是根据不同的type实现不同的输入，来收集用户信息。在设置选项时，注意把同类的选项设置成相同的name。
<!-- 把表单域里面的表单元素提交给后台服务器 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<!-- 普通按钮，js搭配使用 -->
<input type="button" value="获取验证码">
<input type="file" value="上传文件">
在<input>中有一个<lable>标签可以提升用户体验，举例来说，如以下代码和图片：
性别：<input type="radio" name="sex" value="男" checked="checked" id="sex"><label for="sex">男</label>
<input type="radio" name="sex" id="sex"><label for="sex">女</label>
<input type="radio" name="sex" id="小动物"><label for="小动物">小动物</label>
若不加
<lable>标签，在选择性别时只能点击圆圈，加上了之后，点击文字就可以切换选择，文字换成图片也可以达到这样的效果。
<select>
举例如下：
下拉表单：
<select name="shuzi">
<option>5</option>
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<textarea>
举例如下：
文本域：
<textarea name="message" id="feedback" cols="30" rows="10">
你的反馈
</textarea>
可以观察到，以上三个表单元素都应该有name属性，通过为每个表单元素设置唯一的 name 属性，可以在提交表单时，后端服务器能够根据这些名称来获取用户输入的值，以便进行进一步的处理和验证。这样，表单数据就可以准确地传递给后端服务器，并被正确地处理。
CSS
在学校课程的学习中，样式设计是直接写在相应的html文件里，即在<head>部分里加上<style>标签，在<style>里面写CSS代码。现在通过在<head>部分里加上以下代码，把CSS文件样式应用到html文件里。
<link rel="stylesheet" href="study.css"">
CSS的四种基础选择器
标签选择器
/* 首行缩进和行距*/
p {
text-indent: 2em;
line-height: 2em;
}
类选择器、多类名选择器
html文件
<div class="zhezhe">
hhh
</div>
CSS文件
.zhezhe {
color: blueviolet;
font-size: large;
}
<div class="zhezhe this">
hhh
</div>
.zhezhe {
color: blueviolet;
font-size: large;
}
.this {
font-style: italic;
font-family: 'Times New Roman', Times, serif;
}
id选择器
和以上的类选择器类似，但是类可以被多次使用，id是唯一的。
<div id="example">
死之结界
</div>
#example {
color: brown;
}
通配符选择器
给所有元素使用
* {
margin: 0;
padding: 0;
}
复合选择器
包括后代选择器、子选择器、并集选择器、伪类选择器等
后代选择器 (重要）
<h4>有序列表</h4>
<ol>
<li>1</li>
<li>2</li>
</ol>
ol li {
color: brown;
}
表示选择ol里面的所有li (后代元素)。
子选择器 (重要）
<div class="zixuanze">
<a href="#">son</a>
<p>
<a href="#">grandson</a>
</p>
</div>
/*子选择器，选最近的儿子 */
.zixuanze>a {
color: blue;
font-size: 50px;
text-decoration: none;
}
表示选择
zixuanze里面的所有直接后代(子元素) a。
并集选择器 (重要）
可以选择多组标签，类等，用逗号隔开。
p,
span {
color: yellow;
}
伪类选择器
a:link: 没有点击过的链接
a:visited: 点击过的链接
a:hover: 鼠标经过的链接
a:active: 鼠标正在按下还没有弹起鼠标的链接
a:link {
*/ color: aqua;
}
a:visited {
color: antiquewhite;
}
a:hover {
color: red;
}
a:active {
color: black;
}
input:focus {
background-color: aquamarine;
}
input:hover {
color: blue;
background-color: peru;
}
后面两条的举例:
