前端
前端（H5）：HTML+CSS+JS+各种框架
HTML：超文本标记语言，（效果+标签名），网页结构
CSS：层叠样式表，（效果+单词），美化网页
JavaScript（JS）：弱脚本语言，页面中的交互行为
Vue：是一个渐进式框架，用于单页面应用（项目）开发
标签的分类：
1、块属性标签：br、p、div、h1-h6、ul、li
1.1、单独占一行，这个标签的前后不允许其他标签内容出现。
1.2、CSS设置时，设置宽高有效
2、行属性标签：a、span
2.1、可以在一行中显示的标签
2.2、CSS设置时，设置宽高无效
3、行内块标签：img、input、button
2.1、可以和行属性标签在一行显示
2.2、CSS设置时，设置宽高有效
改变标签的属性：
display：用于定义建立布局时元素生成的显示框类型。其取值如下：
inline：此元素将显示为行元素（行内元素display的默认值）
block：此元素指定为块元素（块元素display的默认值）
inline-block：将对象呈现为内联元素，对象内的元素块级展示。行块元素
none：隐藏元素
一、HTML语言介绍
HTML：超文本标记语言。
超文本：一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。简单说不仅可以加载文本还可以加载图片、视频、音频等。
标记语言：由标签组成的语言，标记语言不是编程语言。如：<html></html>
文本text：汉字、符号、英文
超文本：汉字、符号、英文、图片、视频、音频、超链接......
标记：标签
使用标签来表示汉字、符号、英文、图片、视频、音频、超链接......
学习HTML就是学习官方定义好的标签二、HTML常见标签
常见标签分类介绍： 文本标签、多媒体标签、列表标签、链接标签、表格标签、表单标签、架构标签、字符实体、无意义标签已经html5的语义标签
html标签分为双边标签和单边标签
双边标签，例如：<div></div>
单边标签，例如：<img/>
标签的属性：
在标签开始中写<标签开始 属性名="属性值">
标签的关系：
1、父标签、子标签、兄弟标签
html不严格区分大小写，建议写成小写
<!DOCTYPE html>
<!-- 语言为英文 -->
<html lang="en">
<head>
<!-- 字符编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 网页适配器，有了它的存在，可以适配移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 导航栏标题 -->
<title>Document</title>
</head>
<body>
<!-- 主题内容 -->
</body>
</html>1、常见标签
1、标题标签 h1-h6
h1最大标签 h6最小标签
<h1>最大标题</h1>
2、段落标签 p
<p>床头明月光</p>
<p>疑似地上霜</p>
3、行内标签 span
你好<span>李焕英</span> 打印效果是 你好 和李焕英 是同一行，且他们之间有一个空格
3、加粗 b
<b>被加粗的文字</b>
4、倾斜 i
<i> 被倾斜的文字</i>
<b> <i> 被加粗且被倾斜的文字 </i></b>
注意：<b>和<i>谁放在前面都可以，只要后面的对应上就行
5、换行 单边标签 br
第一行文字<br>第二行文字
6、分割线 hr
设置属性： <开始标签 属性名="属性值" 属性名="属性值">
color 颜色 使用英文单词 rgb #000000 三原色 红橙黄 例如红色#FF0000 十六进制
width 宽度 单位为像素，即px
size 高度 单位为像素，即px
一行文字 <br>
<hr color="green" width="2200px" size="10px">
7、字体标签 font
color 颜色 （单词、rgb、十六进制）
size 大小 1-7 默认是3
face 设置字体样式，比如楷体
<font color="pink" size="3" >我是字体</font>
8、文本居中标签 center
<center>居中的字体</center>
9、上标签和下标签
上 sup 下 sub
<sup> 寒冰</sup> 亚索 <sub> 滑板鞋</sub>
10、头部标签
<head></head>
紧跟在<html>标签之后，主要用于封装其他位于文档头部的标签，如<title>、<meta>、<link>、<style>
11、文本下划线 u
<u> 寒冰</u> 在文本下面出现一条下划线
2、特殊标签
2.1、图片标签
图片标签 单边标签 img
src 链接图片的路径
width 宽度 单位px 只设置宽，高会根据图片本身的比例自动匹配
height 高度 单位px
alt 替代文本，由于某种原因，图片无法显示时，会使用替代文本替代图片内容
title 文本提示，鼠标悬浮的提示信息如果想要图片占满整个容器(和容器大小保持一致)，可以通过设置图片的宽高都是100%来实现。
相对路径和绝对路径要搞明白
第二张图片的路径：<img src="img/11.jpg">
第一张图片的路径：<img src="../img/11.jpg">
例如：
<img src="img/11.jpg" width="200px" height="300px">
<img src="img/11.jpg" width="200px">
<img src="img/11.jpg" width="200px" title="我是小可爱" alt="555...">
2.2、多媒体标签（添加的时候，直接拖进项目中即可）
2.1 音频标签 audio 支持格式：MP3、WAV、OGG
1、src 链接路径
2、controls 显示播放控件
3、loop 循环播放
4、muted 默认静音
2.2 视频标签 video 支持格式：MP4、WEBM、OGG
1、src 链接路径
2、controls 显示播放控件
3、loop 循环播放
4、muted 默认静音
5、width和height 宽和高
多媒体标签：
例如：<audio src="img/1.mp3" controls loop muted></audio>
例如：<video src="img/2.mp4" width="1000px" controls loop muted></video>2.3 列表标签
有序列表 ol > li (li是子列表)
无序列表 ul > li (li是子列表)
有序和无序列表都有type属性去设置前面符号的样式（数字、字母、罗马数字等）
有序列表：A、a、I、i、1 (默认type="1")
无序列表：disc实心圆、square方块、circle空心圆 (默认type="disc")
资源路径：
1、绝对路径
这里的路径指的是网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。
2、相对路径：页面与其他资源的相对路径
./表示当前路径
../表示上一级路径
.../表示上两级路径3、超链接标签
超链接标签 a
href 跳转的地址
href="#" 回到顶部
href="javaScript:void(0)" 禁止a标签跳转
target 指定打开资源的方式
target=_self 在本页面进行跳转
target=_blank 打开新的选项卡进行跳转
举例如下：
<a href="http://www.baidu.com"> 点我跳转百度</a><br>
<a href="#"> 返回顶部</a><br>
<a href="javaScript:void(0)"> 禁止跳转</a><br>
<a href="http://www.baidu.com" target="_self"> 点我跳转百度</a><br>
<a href="http://www.baidu.com" target="_blank"> 点我跳转百度</a><br>4、表格标签
HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成
1、标签
1.1、table 父标签，相当于表格的容器
border 表格边框的宽度
width和height 表格的宽度和高度
cellspacing 设置单元格之间的间隙
cellpadding 设置内容和边框的间距
bgcolor 表格的背景颜色
align 对其方式
1.2、tr 用来定义行，写在<table>标签内
bgcolor 表格的背景颜色
align：定义表格行的内容对其方式
1.3、td 用来定义列(单元格)，写在<tr>标签内
rowspan：规定单元格可横跨的行数
colspan：规定单元格可横跨的列数
1.4、th 定义表头单元格
1.5、caption 表格的标题
2、属性
(1)、bordercolor 表格边框的颜色
(2)、cellpadding 设置内容和边框的间距
(3)、align 参数为center居中、left左对齐、right右对齐
设置在table上，代表表格在浏览器上的位置
设置在tr上，代表该行字体的位置
设置在td上，代表该单元格字体的位置
(4)、rowspan 合并行
(5)、colspan 合并列
快速生成表格标签
table>tr*4>td*3 然后按tab 会自动生成4行3列的表格
实战如下：
<!--表格标签，两行三列-->
<table border="1px" bordercolor="green" width="300px" height="200px"
bgcolor="pink" cellspacing="0" cellpadding="10px" align="center">
<caption>
<h2>信息表</h2>
</caption>
<tr align="center">
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td>21</td>
<td>运动</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>品茶</td>
</tr>
<tr>
<td>王二</td>
<td>36</td>
<td>跑步</td>
</tr>
</table>
<br>
<br>
<!--合并行与合并列-->
<table border="1px" bordercolor="green" width="300px" height="200px"
bgcolor="pink" cellspacing="0" cellpadding="10px" align="center">
<tr align="center">
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr>
<td>张三</td>
<td rowspan="2">49</td> <!--将张三和李四的年龄合并起来-->
<td>运动</td>
</tr>
<tr>
<td>李四</td>
<td>品茶</td>
</tr>
<tr>
<td colspan="3" align="center">跑步</td> <!--将王二这一行信息合并成一个单元格-->
</tr>
</table>三、框架标签
在我们查看一些后台管理系统的时候，经常看到如下布局，此布局采用了框架布局，通过红色框体我们发现，整个页面被分成了三部分。
把屏幕分为三部分。20%、20%,剩余的60% * 代表匹配剩下的所有
<frameset rows="20%,20%,*">
<frame src="top.html"></frame> <!--top.html里面的内容为XXX管理系统-->
<frame src="left.html"></frame> <!--left.html里面的内容为我是左部分-->
<frame src="left.html"></frame> <!--left.html里面的内容为我是左部分-->
</frameset>1、框架标签 frameset 子标签 frame
2、注意：框架标签跟body标签冲突，需要删除body标签
3、分割的思想：先上下分割，再把下部分左右分割 rows是上下分割 cols是左右分割
4、noresize="none" 禁止通过滑动调整区域大小
格式化代码快捷键：alt+shift+f上部、下左、下右
<!--将整个界面分为上下两部分-->
<frameset rows="20%,*">
<frame src="top.html"></frame>
<!--把剩下的部分看成一个整体，用frameset标签表示，再左右分割 -->
<frameset cols="20%,*">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
</frameset>完整代码如下：
框架标签.html文件内容如下：
<!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>
<!--将整个界面分为上下两部分-->
<frameset rows="20%,*">
<frame src="top.html"></frame>
<!--把剩下的部分看成一个整体，用frameset标签表示，再左右分割 -->
<!--noresize="none" 禁止通过滑动调整区域大小-->
<frameset cols="20%,*" noresize="none">
<frame src="left.html"></frame>
<!--右部分设置name名称为rightss-->
<frame src="right.html" name="rightss"></frame>
</frameset>
</frameset>
</html>dome01.html文件内容如下：
<!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>
古诗词1
古诗词1
古诗词1
</body>
</html>dome02.html文件内容如下：
<!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>top.html文件内容如下：
<!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>
<!--滚动标签 marquee-->
<marquee>
<h2>欢迎来到后台管理系统</h2>
</marquee>
</body>
</html>left.html文件内容如下：
<!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>
<center>
<!--让超链接跳转的页面在右部分进行显示，需要设置target属性值=右部分的name值-->
<a href="dome01.html" target="rightss">第一页</a><br>
<a href="dome02.html" target="rightss">第二页</a><br>
</center>
</body>
</html>right.html文件内容如下：
<!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>四、表单标签
HTML表单标签 HTML表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包并发送给服务器，从而实现用户与web服务器的交互。 表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。
1.1、HTML表单标签
<form>是在页面中创建出一个表单，表单标签在HTML中是没有展示效果的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。
form属性：
action 数据提交的路径，指定数据提交的服务器地址
method 数据提交的方式，常用取值：get、post 默认值为get
get：请求参数会拼接在URL后面，url长度会有限制4KB
post：浏览器会将数据放到http请求消息体中，请求参数无限制
enctype 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式：
1)、application/x-www-form-urlencoded：默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得
效率低下(也就是说上传文本格式的文件)
2)、multipart/form-date：指定传输数据为二进制数据，比如图片、mp3、文件。
3)、text/plain：纯文本的传输。空格转换为“+”号，但不对特殊字符编码。1.2、输入域标签
<input>标签用户获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。
input属性：
id 为当前组件提供一个唯一的标识。不会在页面上显示，服务于css和js
type 定义表单输入项input的组件类型。
name 为当前组件提供一个名称服务器，会根据当前的名称获取当前组件提供的数据。(标签的名字，可以重复)
value 为当前组件设置值。value属性的设置策略：
1)、文本框、密码框这样的表单输入项，可以不强制指定valve，因为用户可以自由输入
2)、单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定valve，那么提交上
去的只有on
checked 设置单选框/复选框的默认选中状态(全选、反选)
readonly 设置该标签的参数值只读，用户无法手动更改，但是数据可以正常提交
placeholder 输入框的提示消息
readonly 只读
disabled 禁用
maxlength 设置允许输入的最大的长度
checked 单选框和复选框的默认选中
type类型有以下几种：
1)、text：文本框，只能输入单行文字
2)、password：密码框 进行铭文加密
3)、radio：单选框。 设置多个单选框只能选中一个，需要设相同的name值；name值不同时，单选框也能同时选好几个
4)、checkbox：复选框
5)、email：邮箱框
6)、button：普通按钮
7)、file：文件框
8)、date：日期框
9)、reset：重置按钮 重置表单内容
10)、submit：提交按钮 提交form表单
11)、hidden：隐藏框
1.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>Document</title>
</head>
<body>
<!--form标签-->
<form action="https://www.baidu.com" method="get">
<!-- 表单控件 -->
<input type="text" name="username" value=""><br>
<!-- 提交按钮-->
<input type="submit" value="点我">
</form>
<form action="https://www.baidu.com" method="get">
账号：<input type="text" name="username" value="" placeholder="请输入账号" disabled><br>
密码：<input type="password" name="password" value=""><br>
账号：<input type="text" name="username" value="123456" placeholder="请输入账号" readonly><br>
密码：<input type="password" name="password" value="" maxlength="6"><br>
<!--设置多个单选框只能选中一个，需要给相同的name值，如果name值不同，则单选框也能同时选择几个-->
性别：<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="woman">女
<br>
爱好：<input type="checkbox" name="hobby" value="CG">唱歌
<input type="checkbox" name="hobby" value="TW">跳舞
<input type="checkbox" name="hobby" value="TJT" disabled>弹吉他
<input type="checkbox" name="hobby" value="TYY" checked>听音乐
<br>
<br>
邮箱：<input type="email" name="email" value=""><br>
<input type="button" value="普通按钮"><br>
日期框：<input type="date" name="riqi" value=""><br>
文件框：<input type="file" name="wenjian" value=""><br>
<input type="hidden" name="隐藏框" value=""><br>
<input type="reset" name="chongzhi" value="重置按钮"><br>
<input type="submit" value="点我提交表单"><br>
</form>
</body>
</html>1.4、下拉框标签
<select> 提供一个下拉列表框，让用户进行选择。
<option> 下拉列表的列表项
下拉框标签
(1)、下拉列表框 select > option
(2)、属性
multiple 将下拉列表展开显示，可以选中多个
(3)、默认选中 selected
(4)、禁止选中 disabled
(5)、分组 optgroup
label 组名
(6)、name 下拉表框的名字
1.5、文本域标签
HTML提供了多行输入的文本控件：<textarea>
<textarea>的属性
cols 设置文本域的列数
rows 设置文本域的行数
如果内容想要提交，必须得定义name属性1.6、表单标注
<label> 为表单定义标注五、布局标签
Div是一个块级语言，默认没有任何样式，需要配合css一起使用才能发挥作用，用div+css可以制作出精美的网页；
扩展：介绍一个块级标签(行内标签)：span
说明：
div：块级元素，单独占一行，一般作为容器，一块一块的用来布局
span：行内元素，一行排开，用于同行中不同效果，用span包六、实体字符
有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。
常用的有以下几种：
空格、大于号、小于号、双引号、版权符号
实体字符表如下：
七、实战代码：
<!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>
<!--下拉框标签-->
<select name="school" id="school">
<optgroup label="分组1">
<option value="XX">小学</option>
<option value="ZX">中学</option>
</optgroup>
<optgroup label="分组2">
<option value="DX" selected>大学</option>
<option value="YLY" disabled>养老院</option>
</optgroup>
</select>
<br>
<!--文本域标签-->
<!--textarea加回车可直接输出下面语句 -->
<textarea cols="30" rows="10">来了，老弟</textarea>
<br>
<br>
<br>
<!--实体字符标签-->
<input type="text"><br>
<input type="text">
<br>
©
<br>
<br>
<br>
<!--div和span标签-->
<div>我是DIV</div>
<div>我是DIV</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>