本文已参与「新人创作礼」活动，一起开启掘金创作之路。
做了一年多得SpringBoot全家桶，纯接口开发，完全实现了前后端分离了，但是项目上又来个项目不是前后端分离得，重新整理下之前得前端知识。
1.骨架
vscode直接！加tab快速生成骨架
<!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>
</body>
</html>
注释的写法
<!-- 注释内容 --!>
现在我们对骨架进行注释
<!--DOCTYPE：告诉浏览器使用什么规范（默认是html）-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="en">
<!--head标签代表网页头部-->
<head>
<!--meta 描述性标签，表示用来描述网站的一些信息-->
<!--一般用来做SEO（搜索）-->
<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代表主体-->
<body>
</body>
</html>
2.网页基本标签
2.1 标题标签
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
2.2 段落标签
<!--段落标签-->
<p>段落1</p>
<p>段落2</p>
2.3 换行标签
换行1 <br/> <!--换行标签-->
换行2 <br/>
<!--换行标签比较紧凑，段落标签有明显段间距-->
2.4水平线标签
<hr/> <!--水平线标签-->
2.5 粗体或者斜体
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体：<strong>I love you </strong><br />
斜体：<em>I love you </em><br />
2.6 空格
空格
3.图像标签和链接标签
3.1图像标签
alt图片未加载 title鼠标悬停
<img src="../xxx.jpg" alt="!图像不见了" title="图片">
3.2 链接标签
<a href="https://www.baidu.com">百度一下你就知道</a>
4.块元素和行内元素
块元素：独占一行
...
行内元素：不换行
5.列表标签
5.1 有序列表
每个前面有序号的意思，1.one 2two 3 three
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
5.2 无序列表
但是前面有个黑色大圈圈
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
5.3 自定义列表
前面啥也没得 没得1 2 3 也没得黑色大圈圈
<dl>
<dd>11</dd>
<dd>22</dd>
<dd>33</dd>
</dl>
6.表格
6.1 基本表格标签
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
6.2 表格样式
<table border="1px">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
7 视频和音频
src：资源路径
controls:控制条
autoplay:自动播放
<video src="D:dy1.mp4" controls autoplay></video>
<!--音频-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
8 页面结构
<!--页面头部-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
9 iframe内联框架
<iframe src="test.html" name="mainFrame" ></iframe>
10 表单语法
10.1 表单基本
<form action="xxx/xxx" method="get">
用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
密码：<input type="password" name="password" placeholder="请输入密码" required="required">
<input type="submit">
</form>
10.2 输入框
<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
10.3 密码框
<input type="password" name="password" placeholder="请输入密码" required="required">
10.4 按钮
<input type="button" name="btn1" value="按钮上文字"><
10.5 下拉框
<select name="location">
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
10.6 单选框
性别：<input type="radio" value="boy" name="sex"/>
<input type="radio" value="girl" name="sex"/>
10.7 多选框
爱好：
<input type="checkbox" value="b" name="hobby" checked >打篮球
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
10.8 文本框
反馈：
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
10.8 文件框
<input type="file" name="files">
<input type="button" name="upload" value="上传">
10.8 表单验证
10.8.1 邮箱验证
<!-- 邮箱验证-->
<input type="email" name="email">
10.8.2 URL验证
<!-- URL验证-->
<input type="url" name="url">
10.8.3 邮箱验证
<!-- 邮箱验证-->
<input type="email" name="email">
10.8.4 数字验证
<!-- 数字验证 min为最小值 max为最大值 step为每次增加或减小的数值大小-->
<input type="number" min="20" max="1000" step="10">
10.8.5 滑块
<!-- 滑块-->
<input type="range" name="voice" min="0" max="100" step="3">
10.8.6 搜索框
<!--搜索框-->
<input type="search" name="search">
<ol>
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<dl>
<dd>11</dd>
<dd>22</dd>
<dd>33</dd>
</dl>
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<table border="1px">
<tr>
<td colspan="2">1-1</td>
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
src：资源路径 controls:控制条 autoplay:自动播放
<video src="D:dy1.mp4" controls autoplay></video>
<!--音频-->
<audio src="xxx/xxx/xxx" controls autoplay></audio>
<!--页面头部-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
<iframe src="test.html" name="mainFrame" ></iframe>
<form action="xxx/xxx" method="get">
用户名：<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
密码：<input type="password" name="password" placeholder="请输入密码" required="required">
<input type="submit">
</form>
<input type="text" name="username" value="请输入用户名" maxlength="10" size="20">
<input type="password" name="password" placeholder="请输入密码" required="required">
<input type="button" name="btn1" value="按钮上文字"><
<select name="location">
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
性别：<input type="radio" value="boy" name="sex"/>
<input type="radio" value="girl" name="sex"/>
爱好：
<input type="checkbox" value="b" name="hobby" checked >打篮球
<input type="checkbox" value="s" name="hobby">唱rap
<input type="checkbox" value="d" name="hobby">跳舞
反馈：
<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
<!-- 邮箱验证-->
<input type="email" name="email">
<!-- URL验证-->
<input type="url" name="url">
<!-- 邮箱验证-->
<input type="email" name="email">
<!-- 数字验证 min为最小值 max为最大值 step为每次增加或减小的数值大小-->
<input type="number" min="20" max="1000" step="10">
<!-- 滑块-->
<input type="range" name="voice" min="0" max="100" step="3">
<!--搜索框-->
<input type="search" name="search">
