I have three days leading end of the world
Recently I fell in love with the second element, feeling the animation of the little sister really are so beautiful, how no previously thought hey. So to the students to come and study Japanese entry word book and wanted to visit with Japanese culture, of course browse the blog a second element Gangster between certain times inadvertently, I feel very heart (you can look at the way <a herf = " https://zouwang.vip/ ">). I wanted to review and in-depth knowledge about the front end, and constantly create their own blog and apply to the nearest Android and applets learning. ---
DAY1——HTML
1, the compiler choice
Viewed find many online recommendation, and ultimately recommended the two
（1) VS CODE
Recommended reason: Plug really good, not just for front-end development, learning C, Python can mused, you can download any theme, highlighting the code support, there are many other functions, we heard recently released web will end vs code.
(2) Sublime
Recommended reason: very light, also a few M, the effect can download themes, I was the first choice, it is better VS CODE cool.
2, study documents
Distance learning has been a front-end is the N can not remember Shashi Hou. In fact nothing, but fortunately a little English foundation, facing documents off now
Here I direct the tutorial files downloaded W3c
There do not understand and search for like
3, grasp the main points
vs code html basic format quickly import
Enter a post created .html file! - Enter before it.
We only need to edit the content between the head and body
First, let me head --- which information is generally not show up, but recorded a lot of useful information you this HTML file., For example, we want to import css css files, or writing are performed in the head.
Besides body --- the meaning of the text, we want to show up in a web page, where you can also add effects to make web pages js move it.
A simple look at the effect of FIG.
<!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, three ways
It is recommended to use the first two
The first two in the link and style and are written in the head .html
To a presentation:
<!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, selector
On a first view of the obvious
css basic format is the case, of course, id and class selectors
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>效果图显示：
写在最后，就是一些入门级别的记录，在后面也会不断学习新的技术，有好看的设计也会分享嘞。