前端学习笔记
前端学习的目录
前端基础是由html、css、js三部分构成，后又扩展到vue和react等框架。
1.html（超文本标记语言）负责页面整个框架的搭建，分为：用于显示信息的标签和用于收集信息的标签。
2.css（层叠样式单） 负责页面框架搭建完成后样式的制作。
3.javaScript(又称ECMAScript) 负责交互效果制作，分为：数据交互和效果交互。
a标签和iframe的使用
a标签和iframe的联合使用可以很好的实现后台管理系统的搭建，左侧为菜单栏用ul和li配合a标签写，右侧为iframe链接页面。
实现方法：a标签的target属性与iframe的name属性相同，当多个a标签的target与iframe的name属性值相同时就可以实现切换。（简易后台管理）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="1.html" target="iframe1"></a></li>
<li><a href="2.html" target="iframe1"></a></li>
<li><a href="3.html" target="iframe1"></a></li>
<li><a href="4.html" target="iframe1"></a></li>
<li><a href="5.html" target="iframe1"></a></li>
</ul>
<iframe src="" frameborder="0" name="iframe1"></iframe>
</body>
</html>
css类选择器及优先级
css选择器分为类选择器、ID选择器、标签选择器和通用选择器，以及上述选择器的组合起来构成的选择器。
1.通用选择器用星号 * 表示，匹配HTML文档中的每个元素。常用于清除HTML元素的默认内外边距：* { margin: 0; padding: 0; }
2.标签选择器通过具体的标签名称匹配文档内所有同名的标签p { color: blue; }
3.ID选择器用井号 # 表示，匹配具有指定ID属性的标签：#nav { color: red; }
4.类选择器用句号 . 表示，匹配具有指定class属性的标签：black { color: black; }
优先级：
1.同级别的最后写的优先级越高（仅限于相同的样式，不同的样式的会被共同吸收）
2.选择器越长越详细的话，优先级越高
3.id选择器>类选择器>标签选择器
css选择器细节点
当css选择元素添加样式时，有时会因为一个空格导致样式添加的错误，本文会从div.aa 和div .aa这两个区别进行验证。
div.aa选择的是类名为aa的div元素，而div .aa 选择的是div当中类名为aa的元素，两个选择器只差距一个空格但是选择的元素却不是相同的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 200px;
height: 200px;
background-color: skyblue;
}
div .aa {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="aa">
</div>
</div>
<div class="aa">
asdasd
</div>
</body>
</html>
div .aa时选择的元素
div.aa时选择的元素
css属性中的transfrom中的translate只能使用于块级元素，不是块级元素会无效果。块级、内联级、内联块（行内块）区别如下：
1.块级元素，独占一行，对宽度和高度都支持，div，h1~h6,li
2. 内联级元素，不独占一行，对宽度和高度不支持 span a
3.内联块元素，不独占一行，对宽度和高度支持，如input，img