我的三天前端世界
最近爱上了二次元，感觉动漫里的小姐姐实在都太漂亮了，以前怎么就没觉得哎。于是向同学要来了日语入门学习和单词书，想来拜访一下日本文化，当然了在某次不经意间浏览了一位大佬的二次元博客，感觉十分心动
**我的三天前端世界 **
最近爱上了二次元，感觉动漫里的小姐姐实在都太漂亮了，以前怎么就没觉得哎。于是向同学要来了日语入门学习和单词书，想来拜访一下日本文化，当然了在某次不经意间浏览了一位大佬的二次元博客，感觉十分心动（可以看一下呀<a herf=" https://zouwang.vip/ ”>）。便想复习并深入一下前端的知识，不断打造自己的博客并运用到最近的Android和小程序学习中。
DAY1——HTML
1、编译器选择
看过蛮多网上推荐的，最终还是推荐出两款
（1) VS CODE
推荐原因：插件真的很不错，不仅仅适用于前端开发，学习C、Python等皆可以，主题可以任意下载，代码支持高亮，还有很多别的功能，听说最近将会发布web端 vs code。
(2) Sublime
推荐原因：很轻便，也就几M，主题效果可以下载，我是选择最初的，不如VS CODE炫酷。
2、学习文档
距离上一次学习前端已经是N 记不清楚啥时候了。其实也没啥，还好有点英语底子，对着文档现学现用
这里我直接下载了W3c的教程文件
有不懂的就搜索就好
3、掌握要点
vs code html基本格式快速导入
创建好.html文件后输入一个 ！-回车 便可以了。
我们需要编辑的只有head和body之间的内容
首先说head---其信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息.，比如我们要导入css文件或者书写css都在head中进行。
再说body---正文的意思,是我们要在网页中展现出来的，在此还可以加上js效果让网页动起来呢。
看一个简单效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>day1-html练习</title>
</head>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
<body>
DAY2——CSS
1、三种方式
这里推荐使用前两种
前两种中link和和style均写在.html的head中
来个演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/index.css">
<title>day2-css练习</title>
</head>
<body>
<div class="box">
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>
</div>
</body>
</html>
.box{
color: red;
}
2、选择器
先上个obvious的图
css基本格式就是如此，当然还有id和class选择器
id 选择器以 "#" 来定义，class选择器用法可见上例所示，还是用一张图表示
3、盒子模型
直接上图啦~
每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
（1）内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像，或是一个视频播放器。它的尺寸为内容宽度（或称 content-box 宽度）和内容高度（或称 content-box 高度）。它通常含有一个背景颜色（默认颜色为透明）或背景图像。
如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height，和 max-height 控制。
（2）内边距区域 padding area 由内边距边界限制，扩展自内容区域，负责延伸内容区域的背景，填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。
（3）边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 css属性 background-clip 来改变。
（4）外边距区域 margin area 由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。
当然一个页面也可以由多个盒子构造，就像是html中所涉及的table一样，看个图吧
当然这只是一个初步认识，在网上还有更多嵌套、重叠等等方法可以去学习呢
4、颜色选择
颜色一般简单设计中选取关键字或十六进制就好，在代码中会智能提示，选择自己喜欢的呀。
DAY3——JavaScript
学习js的时候最直观的感受就是我这不是在复习Java么？？？
其实每一门编程语言都大同小异，只是在语法上细微的区别罢了，所以复习起来也很快吧。
1、不同的认知
（1）严格相等
===严格相等
var num = 0;
var obj = new String("0");
var str = "0";
var b = false;
console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true
console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false
console.log(obj === null); // false
console.log(obj === undefined); // false
（2）语法
var 变量名 = 初始化值;
（3）方法对象
1.var 方法名 = function(形式参数列表){
方法体
}
2.function 方法名称(形式参数列表){
方法体
}
其他在运用上js的API明显是少于Java的，所以有不懂得查查用用就会快速上手
2、BOM
Browser Object Model 浏览器对象模型
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象
（1）Window：窗口对象
一些常用方法:
1. 与弹出框有关的方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close() 关闭浏览器窗口。
* 谁调用我 ，我关谁
open() 打开一个新的浏览器窗口
* 返回新的Window对象
3. 与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：
1. js代码或者方法对象
2. 毫秒值
* 返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
属性:
1. 获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document
特点:
* Window对象不需要创建可以直接使用 window使用。 window.方法名();
* window引用可以省略.方法名();
（2）Location：地址栏对象
1. 创建(获取)：
1. window.location
2. location
2. 方法：
* reload() 重新加载当前文档。刷新
3. 属性
* href 设置或返回完整的 URL。
（3）History：历史记录对象
1. 创建(获取)：
1. window.history
2. history
2. 方法：
* back() 加载 history 列表中的前一个 URL。
* forward() 加载 history 列表中的下一个 URL。
* go(参数) 加载 history 列表中的某个具体页面。
* 参数：
* 正数：前进几个历史记录
* 负数：后退几个历史记录
3. 属性：
* length 返回当前窗口历史列表中的 URL 数量。
3、DOM
Document Object Model 文档对象模型
核心：
DOM - 针对任何结构化文档的标准模型
-
Document：文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment:注释对象
-
Node：节点对象，其他5个的父对象
核心DOM模型：
* Document：文档对象
1. 创建(获取)：在html dom模型中可以使用window对象来获取
1. window.document
2. document
2. 方法：
1. 获取Element对象：
1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3. 属性
* Element：元素对象
1. 获取/创建：通过document来获取和创建
2. 方法：
1. removeAttribute()：删除属性
2. setAttribute()：设置属性
* Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
4、自己写个轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<style type="text/css">
/*标题样式*/
p {
text-align: center;
font-size: 50px;
color:aqua;
font-family: fantasy;
}
.imgBox{
border-top: 2px solid aqua;
width: 1280px;
height: 500px;
margin: 0 auto;
}
.imgBox img{
width: 100%;
height: 300px;
margin: 0 auto;
padding-top:30px;
}
.img1{
display: block;
}
.img2{
display: block;
}
.img3{
display: block;
}
</style>
</head>
<body>
<p>图片轮播</p>
<div class="imgBox">
<!--图片在我本地-->
<img class="img-slide img1" src="../img/banner_1.jpg" alt="1">
<img class="img-slide img2" src="../img/banner_2.jpg" alt="2">
<img class="img-slide img3" src="../img/banner_3.jpg" alt="3">
</div>
<script type="text/javascript">
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
var index=0;
//改变图片
function ChangeImg() {
index++;
var a=document.getElementsByClassName("img-slide");
if(index>=a.length) index=0;
for(var i=0;i<a.length;i++){
a[i].style.display='none';
}
a[index].style.display='block';
}
//设置定时器，每隔3秒切换一张图片
setInterval(ChangeImg,3000);
</script>
</body>
</html>
效果图显示：
写在最后，就是一些入门级别的记录，在后面也会不断学习新的技术，有好看的设计也会分享嘞。
