前言
本文主要对学习前端知识的一些记录，如html、css的格式、API、用法等的记录，为方便理解与记忆会实现一些案例。
一、HTML
html相当于页面的骨架。
1.标签
（1）注释：
（2）标题：h1 h2 h3 h4 h5 h6（h1最大）
（3）段落：p
（4）换行：br （单标签）
（5）格式化标签（行内元素）
加粗：strong / b
倾斜：em / i
删除线：del / s
下划线：ins / u
（6）图片：img （单标签），其中src属性指定图片的路径（绝对路径、相对路径、网络路径），width与height设定图片大小（单位px为像素），alt显示图片挂了设置的文字。
<img src="" alt="">
（7）超链接：a
<a href=""></a>
（8）表格标签
table：表示整个表格
tr：表示行；
td：表示表中的一个单元；
th：表示表头；
<table border="2px" width="500px" height="300px" cellspacing="0">
<tr>
<th>课程</th>
<th>成绩</th>
</tr>
<tr>
<td>数据库</td>
<td>99</td>
</tr>
<tr>
<td>JAVA</td>
<td>90</td>
</tr>
</table>
（9）列表标签
有序列表标签：ol
无序列表标签：ul
列表项：li
自定义列表标签：dl dt（列表头）
（10）表单标签（为了和用户交互）
form标签：进行前后端交互，功能是构造一个HTTP请求。
input标签：有很多形态，这些形态表示不同的效果。
<input type="text">
<input type="password">
<!--单选框（radio）单选框需要设置相同的属性name才会有互斥效果 checked可以设置默认选项 通过设置id使用lable将for中的选项也设置为可以点击它选上-->
<!--radio name不同则具有互斥性-->
<input type="radio" name="" id="" checked="">
<lable for=""></lable>
<!-- 复选框（checkbox）可以选择多个 -->
<input type="" name="" checked="">
<!-- button按钮 搭配js使用 -->
<input type="button" value="这是一个按钮" onclick="alert('hello')">
<!-- 提交按钮 搭配form表单使用 -->
<input type="submit" value="这是一个提交按钮">
<!-- 文件选择框 -->
<input type="file">
（11）select下拉菜单，里面的option为选择,selected为默认选中。
<select>
<option>北京</option>
<option>深圳</option>
<option selected="selected">上海 </option>
<option>广州</option>
<option>其他</option>
</select>
（12）多行编辑框textare，可以多行文本框，而input只能写一行。
<textarea cols="30" rows="10"></textarea>
（13）无语义标签
div：默认是独占一行的块级元素；
span：默认是不独占一行的行内元素。
这两个搭配css和js就可以实现刚才语义化标签的大部分。
2.简历页面实现
代码如下（示例）：
<!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>
<h1>某某某</h1>
<h2>基本信息</h2>
<p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.doubanio.com%2Fview%2Fgroup_topic%2Fraw%2Fpublic%2Fp324978774.jpg&refer=http%3A%2F%2Fimg9.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669211206&t=81347a13c3ce1d01656af3db71d1e73f" alt="" width="500px" height="300px">
</p>
<div>求职意向：Java开发工程师</div>
<p>联系电话：12345678912</p>
<p>邮箱：xxx@qq.com</p>
<div>
<a href="http://github.com">我的github</a>
</div>
<div>
<a href="https://blog.csdn.net/qq_45283185?type=blog">我的博客</a>
</div>
<h2>教育背景</h2>
<ol>
<li>xxxx-xxxx 某某小学 小学</li>
<li>xxxx-xxxx 某某中学 初中</li>
<li>xxxx-xxxx 某某中学 高中</li>
<li>xxxx-xxxx 某某大学 计算机专业 本科</li>
</ol>
<h2>专业技能</h2>
<ul>
<li>Java基础语法扎实</li>
<li>数据结构可以独立实现并熟练应用</li>
<li>熟练应用mysql相关sql语句</li>
<li>熟知多线程、网络相关知识</li>
</ul>
<h2>我的项目</h2>
<ol>
<li>
<h3>留言墙</h3>
<p>开发时间：2022年11月到2022年12月</p>
<p>功能介绍：</p>
<ul>
<li>支持留言发布</li>
<li>支持匿名留言</li>
</ul>
</li>
<li>
<h3>学习小助手</h3>
<p>开发时间：2022年9月到2022年11月</p>
<p>功能介绍：</p>
<ul>
<li>支持错题检索</li>
<li>支持同学探讨</li>
</ul>
</li>
</ol>
<h2>个人评价</h2>
<p>在校期间，学习成绩优异。</p>
</body>
</html>
3.填写简历页面实现
代码如下（示例）：
<!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>填写简历</title>
</head>
<body>
<h2>请填写简历信息</h2>
<table>
<tr>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" id="male">
<label for="male">
<img src="D:\pCode\Front\html\男.png" height="15px" alt="">男
</label>
<input type="radio" name="gender" id="female">
<label for="female">
<img src="D:\pCode\Front\html\女.png" height="15px" alt="">女
</label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<select>
<option>--请选择年份--</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--请选择日期--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</td>
</tr>
<tr>
<td>就读学校</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>应聘岗位</td>
<td>
<input type="checkbox" id="front">
<label for="front">前端开发</label>
<input type="checkbox" id="front_end">
<label for="front_end">后端开发</label>
<input type="checkbox" id="text">
<label for="text">测试开发</label>
<input type="checkbox" id="depOps">
<label for="depOps">运维开发</label>
</td>
</tr>
<tr>
<td>掌握技能</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td>项目经历</td>
<td>
<textarea cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" id="check">
<label for="check">我已仔细阅读过公司的招聘要求</label>
</td>
</tr>
<tr>
<td></td>
<td>
<a href="https://blog.csdn.net/qq_45283185?spm=1011.2415.3001.5343">查看我的状态</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h3>请应聘者确认</h3>
<ul>
<li>以上信息真实有效</li>
<li>能够尽早去公司实习</li>
<li>能接受公司的加班文化</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
二、CSS
css相当于给页面化妆。
1.语法规则
（1）css引入方式
a.内部样式
css可以嵌入到html里面，使用style标签放在里面。
如下代码里的div部分为选择器，针对页面上的哪个元素生效，css具体设置的属性通过使用键值对，若干属性都放在{}里，属性之间用;来分割，键值对之间用:分割。
<style>
div {
color: red;
}
</style>
b.内联样式
<div style="color: red">
这是内联样式
</div>
c.外部样式
代码如下（示例）：
<head>
<!-- link标签 引入.css文件 注入html -->
<link rel="stylesheet" href="test.css">
</head>
<body>
<!-- 写一个.css 使用link标签注入html -->
<div>
这是外部样式
</div>
</body>
（2）css选择器
选择器描述了你要选择页面中的哪些元素， {}的样式针对这些元素生效。
a.标签选择器
div、p是选择的元素，{}的样式针对这些元素生效。
代码如下（示例）：
<style>
div {
color: red;
font-size: 40px;
}
p {
color: green;
font-size: 50px;
}
</style>
<div>div标签选择器1</div>
<div>div标签选择器2</div>
<p>p标签选择器</p>
b.类选择器
这里的类与Java的面向对象的类不一样，只是一个名字。
其中.one表示css的类名，引入的时候不用‘.’；类选择器允许多个元素引入同一个类。
代码如下（示例）：
<style>
.one {
color: green;
}
</style>
<div>类选择器1</div>
<div class="one">类选择器2</div>
<div>类选择器3</div>
<p class="one">类选择器</p>
c.id选择器
每个元素都有一个id属性，值应该要在页面中是唯一的，使用id选择器来选中到对应的元素上。
代码如下（示例）：
<style>
#the-one {
color: red;
}
#the-two {
color: green;
}
</style>
<p id='the-one'>id选择器1</p>
<p id='the-two'>id选择器2</p>
d.通配符选择器
代码如下（示例）：
<style>
* {
}
</style>
d.复合选择器
后代选择器：在指定的元素里面选择要选择的元素。
子选择器（a>b）：只对a的孩子b有效。
并集选择器
代码如下（示例）：
<!-- <style>
<!-- a.后代选择器:在指定的元素里面选择要选择元素 -->
ul li {
color: green;
}
<!-- b.子选择器 只对孩子生效 -->
ol>li {
color: red;
}
<!-- c.并集选择器-->
div,p {
color: green;
font-size: 40px;
}
</style>
<ul>
<li>后代1
<div>孙孙</div>
</li>
<li>后代2</li>
</ul>
<ol>
<li>后代3
<p>孙子</p>
</li>
<li>后代3</li>
</ol> -->
<div>
并集选择器
</div>
<p>
并集选择器
</p> -->
e.伪类选择器
hover：表示鼠标放上去变化；
active：表示鼠标点一下变化。
代码如下（示例）：
<style>
div {
color: red;
font-size: 100px;
}
/* 鼠标放上去变色 */
div:hover {
color: chartreuse;
font-size: 50px;
}
/* 鼠标点一下变色 */
div:active {
color: plum;
font: size 150px;;
}
button {
color: black;
}
button:hover {
color: cyan;
}
button:active {
color: pink;
}
</style>
<div>伪类选择器</div>
<button>按钮</button><span>按一下变色</span>
css里面还有很多选择器，这里介绍了一些常用的。
（3）常用属性
a.指定字体名称：font-family
b.字体粗细程度:font-weight
c.字体颜色:color
设置颜色有三种方式：英文red、green；rgb(r,g,b,a):分别为红绿蓝以及a代表透明度；十六进制表示#fff。
d.文字的位置：text-align
e.文字的装饰（给文字加上下划线、上划线、删除线）:text-decoration
e.文字的缩进：text-indent
f.行高（文字+行间距）：line-height
g.有关于背景
背景颜色：background-color
背景图片：background-image
背景平铺：background-repeat（repeat、no-repeat、repeat-x、repeat-y）
背景位置：background-position（可以用center、left、right、top、bottom表示位置，也可以用坐标或者百分比）
背景大小：background-size（length、percentage、cover、contain）
代码如下（示例）：
<style>
div {
font-family: "微软雅黑";
font-weight: 800;
background-color: black;
color: paleturquoise;
text-align: center;
}
h1 {
font-family: "楷体";
font-weight: normal;
background-color: rgb(136, 168, 173);
color: #f121f1;
text-align: left;
}
p {
font-family: "幼圆";
font-weight: 1000;
background-color: #f121f2;
color: rgb(0,255,128);
text-align: center;
}
</style>
<div>字体 字体 字体</div>
<h1>这是一级标题</h1>
<p>颜色 颜色</p>
h.关于圆角矩形
border可以设置周线的样式、粗细和颜色；
border-radius（值越大，弧线越强烈）；
四周的弧度也可以设置，如下：
boeder-top-left-radius
boeder-top-right-radius
boeder-bottom-right-radius
boeder-bottom-left-radius
代码如下（示例）：
<style>
button {
width: 200px;
height: 200px;
background-color: turquoise;
border:2px solid black;
border-radius: 50%;
}
</style>
<button>按钮</button>
i.元素的显示模式
display属性可以针对行内/块级元素相互转换；也可以让元素隐藏。
j.内边距：padding
k.外边距：margin
l.弹性布局
display:flex，控制盒子的位置和排列方式。
justify-content，设置主轴上的子元素排列方式。
align-items，设置侧轴上的元素排列方式。
代码如下（示例）：
<style>
/* 消除浏览器自带格式 */
* {
padding: 0;
margin: 0;
}
div {
width: 300px;
height: 400px;
background-color: pink;
background-image: url(./QQ图片.jpg);
background-size: 100px 200px;
background-repeat: no-repeat;
background-position: center;
display: flex;
/* justify-content: center; */
justify-content: space-around;
/* justify-content: flex-start;
justify-content: flex-end; */
/* 实现垂直居中 */
align-items: center;
}
div>span {
width: 10px;
height: 100px;
background-color:tomato;
line-height: 100px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
这里只是记录了一些html、css常用的标签，其他的还有很多。