标签：box 对象 前端 世界 边框 三天 world hello 属性
我的三天前端世界
最近爱上了二次元，感觉动漫里的小姐姐实在都太漂亮了，以前怎么就没觉得哎。于是向同学要来了日语入门学习和单词书，想来拜访一下日本文化，当然了在某次不经意间浏览了一位大佬的二次元博客，感觉十分心动（可以看一下呀<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>效果图显示：
写在最后，就是一些入门级别的记录，在后面也会不断学习新的技术，有好看的设计也会分析嘞。
标签：box,对象,前端,世界,边框,三天,world,hello,属性 来源： https://www.cnblogs.com/wangzheming35/p/11826456.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。