1. 前端是做什么的？
前端是做 IT系统工程的，负责信息化系统的设计、建设，包括设备、系统、数据库、应用系统的建设。
2. 开发流程
开发流程
具体的开发路程请见 百度脑图——便捷的思维工具
3. 前端开发的核心语言
HTML——结构CSS——样式JS——行为
超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。
标记语言：当我们把特定的英文单词放入到我们的标记（单标记：</>、双标记<></>）当中，我们的标记具有了新的语义，而由具有特定语义的标记的规范，我们可以称之为标记语言。
当我们将英语单词放入到标记当中，这时候我们可以称之为 标签（单标签、双标签）。
HTML的基本结构
head 中的元素
描述
<head>
定义了文档的信息
<title>
定义了文档的标题
<base>
定义了页面链接标签的默认链接地址
<link>
定义了一个文档和外部资源之间的关系
<meta>
定义了HTML文档中的元数据
<script>
定义了客户端的脚本文件
<style>
定义了HTML文档的样式文件
1. CSS 的引入方式
内联样式表
内联样式表
内部样式表
写在<head></head>内部
内部样式表
外部样式表
单独写在一个文件中，通过 link 进行引入
rel：当前引入文件和文件本身的关系
type：当前引入文件的编码格式
href：用于书写引入外部样式所处位置
外部样式表
2. CSS 选择器
当我们使用内联样式的时候，CSS 样式可以明确的修改我们想要修改样式的标签。如果我们把 CSS 样式写在内部或者外部的时候，就需要通过 CSS 选择器来选出我们想要修改样式的标签。
CSS 选择器分为三种
标签名选择器div{width:100px;…}
会直接选择某一类标签，会针对这一类标签全部生效。
优先级：1类选择器。div{width:100px;…}
使用类选择器时，需要我们给标签写上类名，如<div class="div"></div>。类选择器会针对某一类具有相同类名的标签，同名 class 可以存在多个。
优先级：10ID 选择器#div{width:100px;…}
使用 ID 选择器时，需要我们给标签写上 ID 名，如<div id="div"></div>。ID 选择器就会针对这一个 ID 名的标签，同名 ID 只能存在一个。
优先级为：100
3. 引入方式的优先级
内联>内部 和 外部；
内部 和 外部 谁生效
如果选择器优先级相同的话，谁后引入谁生效。如果选择器优先级不同，选择器优先级高的生效。
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；。如下图所示。
盒模型
1. content（盒子模型中的内容）
下面通过一个 Demo 一起来学习 盒模型
Demo
通过上面的这一段代码，我们可以在页面中看到一个宽高分别为100px的红色块。从这里可以看出，盒模型中的content不仅可以设置宽高（内联元素除外）还可以加背景。（在浏览器中按F12即可打开如上图的开发者工具）
1.1. background 的使用
background-color 设置背景颜色
属性值即是颜色值有五种写法
英文 如 red,yellow,blue,cyan…十六进制 如 #ffffff…十六进制简写 如 #fff…rgb 如 rgb（255,0,255）…rgba 如 rgba（255,255,255,0.5）…
background-image 设置背景图片
background-image=url（"图片路径"）;
background-position 设置背景定位
background-position 有两个属性值，第一个一般为横向偏移量，第二个一般为纵向偏移量。如果只设置一个数值，另一个数值默认是 center。
属性值可以用：left、right、top、bottom、center 以及 像素。
backfround-repeat 设置背景的重复方式
默认值为 repeat 会将背景铺满整个盒模型。repeat-x 背景横向平铺。repeat-y 背景纵向平铺。no-repeat 不重复。
background 的复合写法
书写顺序为： 颜色、图片、定位、重复方式。
background-attachment 设置背景图片是否随页面滚动
background-attachment 的默认值为 scroll 即背景图片随着页面的滚动而滚动。也可以填写 fixed 即背景图片不会随着页面滚动，但是会造成偏移量，一般不使用。
接下来稍微修改一下 Demo，看一下例子。
Demo.webp
可以看到简书的背景图是固定不动的，将background-attachment: fixed;注释掉即可观察到偏移量了。
2. padding（盒子模型中的内边距）
还是用一个栗子来看看内边距到底是什么。
Demo
当我的鼠标移到 div 标签上是，显示出来 div 的宽高是 300 x 300 。
这是因为我给 div 设置了 width: 100px; height: 100px;所以 div 的宽高为 100 x 100，中间那块就是 100 x 100。
另外我给 div 设置了 padding: 100px;所以 div 的上右下左四个方向都有了 100px 的内边距，为图中外面一圈所示的，因为内边距是在盒子内部的，所以内边距会把我们的盒子撑大。
所以 div 的宽为：padding-left + width+ padding-right=100 + 100 + 100。同理 div 的高为：padding-top + height + padding-bottom=100 + 100 + 100。
从上面的式子中可以知道 padding 是分 上右下左 的，我们也可以给每一个边设置不同的宽度。例如 上右下左 分别为 10px 20px 30px 40px 就可以这样写。
但是这样写还是太过于麻烦了，还有一种更加简洁的写法。
这种写法同样能够实现 上右下左 分别为 10px 20px 30px 40px 的内边距。
当然，padding 的属性值可以填写 1 —— 4 个不等，不同个数的属性值所控制的方向如下图所示。
padding 属性值所对应的边
3. border（盒子模型中的边框）
在原来的基础上给 div 加上 border
border
可以看到 border 也是算在盒模型之内的，border 同样会影响盒模型的大小。我用的是 border 的复合写法，其中包括 边框的宽度 、边框的样式、边框的颜色，我们也可以拆开来写。属性的写法见下图。
border
4. margin（盒子模型中的外边距）
margin 和 padding 比较相似，但是 margin 是在盒子之外的，用来控制盒子与盒子之间的位置。margin 可以设置负数。
margin 有两种特殊情况
如果两个元素是兄弟关系时，第一个元素的 margin-bottom 与 第二个元素的 margin-top 产生叠压
margin 的叠压
从代码上来看，红色块与蓝色块的距离应该是 红色块的 margin-bottom，加上蓝色块的 margin-top，但实际上是取盒子之间最大的 margin 值。但是 margin-right 与 margin-left 就不是这样的情况。
如果两个元素是父子关系，子级第一个元素的 margin-top 会传递给父级
然后给 div_2 设置 margin-top: 50px;
margin-top 的传递。png
这明明不是我想要的效果，那怎么才能够解决这个问题呢？下面一起来看一下解决办法。
给父级设置 border给父级设置 padding给父级设置 overflow:"hidden";
办法已经告诉你们了，具体的还得你们自己去试。
接下来看一下盒模型的实际大小的计算
横向：border-left + padding-left + width + padding-right + border-right
纵向：border-top + padding-top + height + padding-bottom + border-bottom
五 javascript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。[1]
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript
ECMAScript，描述了该语
javascript组成
言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。[3]
是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。[5]
嵌入动态文本于HTML页面。
对浏览器事件做出响应。
读写HTML元素。
在数据被提交到服务器之前验证数据。
检测访客的浏览器信息。
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。
项目中不需要加载jquery这种庞大的js插件要使用到ajax这种功能该如何办呢？下面和大家分享几种利用javascript实现原生ajax的方法
|
