前台1

Web开发

1.Web前端：基础Html静态页面 css样式表 JavaScript动态的特效

基本的概念：URL: http://localhost:port/path/file

http这是一种无状态的连接协议

Web开发的基本结构：

C/S结构

B/S结构 Java的主要开发结构

[图片上传失败...(image-c1a172-1568650925008)]

前端的开发工具：HBuilder WebStorm VScode Sublim

文档 1.W3C 2. https://www.runoob.com

2.Html(超文本标记语言) 版本 html4 html5

3.CSS层叠样式表：负责页面的排版以及美化

· CSS 指层叠样式表 (Cascading Style Sheets)

· 样式定义如何显示 HTML 元素

· 样式通常存储在样式表中

· 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

· 外部样式表可以极大提高工作效率

· 外部样式表通常存储在 CSS 文件中

· 多个样式定义可层叠为一

[图片上传失败...(image-6ce4ba-1568650925007)]

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置

2. 外部样式表

3. 内部样式表（位于 标签内部）

4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

总结：以上三种样式是有优先级的 内联样式>内部样式>外部样式。

内部样式表>外部样式表有一个前提：外部样式表一定要写在内部样式表的前面。总体来说：就近原则（离被设置元素越近优先级就越高）

CSS 类选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

类选择器：.选择器名称

Id选择器与类选择器的区别？

相同点：可以应用于任何html元素

不同点：

1. id选择器只能在文档中使用一次而类选择器可以使用多次

2. 可以使用类选择器为一个元素同时设置多个样式，而id选择器是不可以的。

子元素选择器：使用（>）主要用于选择指定标签元素的第一代子元素

后代选择器：可以使用（空格）用于选择指定标签元素下的后代元素

总结：>作用于元素的第一代后代 空格：作用于元素的所有后代

通用选择器（*）：它的作用是匹配html中所有的标签元素

分组选择器：element,element

注意：

1. CSS是具有继承性的：它就是一种规则，它允许样式不仅应用于某个特定的html标签元素，而且也可以应用其后代

2. CSS是具有特殊性的，从例子中可以看到green生效了？为什么呢？浏览器会根据一个权值一判断使用哪一种样式。使用的是权值最高的样式。

权值的定义：标签的权值为1 类选择器的权值为10 ID选择器权值为100

P span 它的权值如何计算：1+1=2

P span .waring 它的权值是：12

3. CSS具有层叠性：当权值相同的时候，后面的样式会覆盖前面的样式

4. 重要性 !important

元素的分类

Html中的标签分类：块级元素 内联元素（行内元素） 内联块级元素

常见的块级元素：

…

常见的内联元素:

常见的内联块元素：

块级元素

…

。块级元素的设置 display:block 作用：将元素显示为块级元素

块级元素的特点：

1. 每个块级元素都会从新的一行开始（独占一行）

2. 元素的高度 宽度 行高 顶边距以及底边距都是可以设置的

3. 如果元素不设置宽度，它是本身父容器的100%（和父元素的一样）

行内元素（内联元素 inline）特点：

1. 在同一行显示

2. 元素的宽度以及高度是不可以设置的

3. 元素的宽度就是它包含文字或图片的宽度，是不可变的

内联块（inline-block）:就是同时具备内联元素以及块级元素的特点

元素的特点：

1. 和其它元素在同一行来显示的

2. 元素的宽度以及高度是可以设置的

盒子模型

Margin外边距

Padding 内边距

Border 边框

盒子模型的宽度以及高度和平时理解的是不一样的，CSS内定义的宽度以及高度指的是填充以里的内容范围。

[图片上传失败...(image-a347c3-1568650925007)]

CSS的布局模型（3种）

1. 流动模型(Flow)

2. 流动模型它是网页默认的布局方式，块级元素，它会垂直分布，因为块级元素默认的宽度为100%，而内联元素在此模型下是从左到右水平分布的。

3. 浮动模型(Float)

4. 层模型（Layer）:它有三种类型 绝对定位 相对定位 固定定位

绝对定位：需要用到position:absolute表示绝对定位，它可以将元素从文档流是拖离出来，然后可以使用一些属性left right top bottom相对于其最近的一个具有定位的属性的父包含块进行绝对定位，如果不存在，它会相对于body元素（相对于浏览器的窗口）

相对定位：需要用到position:relative可以使用一些属性left right top bottom来确定元素在正常文档流中的偏移位置。偏移前的位置保留不动

[图片上传失败...(image-3e022f-1568650925007)]

[图片上传失败...(image-910ec8-1568650925007)]

NPM:包管理工具，通过这个命令可以在NPM服务上安装所有需要的前端框架

NPM如何安装：NodeJS https://nodejs.org/en/

安装之后到命令窗口输入Npm –version

Npm install 所要安装的框架

JavaScript

1. JS的作用

2. ECMAScript(标准、核心部分) ES3 ES5 ES6 ES7

3. JavaScript的组成部分

a) ECMAScript(标准、核心部分) 基本的语法

b) DOM(Document Object Model文档对象模型)

c) BOM(浏览对象模型)

4. js可以写在什么地方

a) 可以写在head头里

b) 可以写在body的最后

c) 区别：如果写在头里面，当页面加载的时候首先会执行js,然后才会加载其它的内容，如果写在body里面：它会先加载页面的内容，然后再执行js脚本

5.js可以写入输出 对事件做出反应 改变html的内容

可以改变样式 可以对表单做验证

6. ECMAScript中有5种简单数据类型：

Undefined、Null、Boolean、Number和String。还有一种复杂数据类型——Object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。

7. 函数的声明

1.普通的函数声明

function box(num1, num2) {

return num1+ num2;

}

2.使用变量初始化函数

var box= function(num1, num2) {

return num1 + num2;

};

Js中除了自定义对象之外还提供了一些内置对象：String

Date Array

Array:在文档中提供了三个属性

|

constructor

|

返回对创建此对象的数组函数的引用。

|
|

length

|

设置或返回数组中元素的数目。

|
|

prototype

|

使您有能力向对象添加属性和方法。

|

函数的总结

1.当一个函数没有明确的返回值的时候，返回的值就是undefined

2.在使用return的时候，函数就会停止执行。并返回指定的值(具体的值/函数)。

3.return会返回唯一的一个值，那么也可以返回一个函数

4.匿名函数

d) 如何定义

function(){

return “这是一个匿名函数”

}

5. 函数的自执行

(function(){

alert("这是一个自执行函数");

})();

//如果有参数

(function(age){

alert(age);

})(10);

6. 在JS中函数的参数也可以传递函数function

function box(sumFunction,num) {

return sumFunction(num);

}

var sum= function(num){

return num+10;

}

var result= box(sum,10);

alert(result);

BOM: 浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

浏览器对象模型包含的对象：

· Window: 所有浏览器都支持 window 对象。它代表浏览器的窗口。

· Navigator

· Screen

· History：对象包含浏览器历史。****history.back()****history.forward()

· Location: 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。

HTML DOM 树

[图片上传失败...(image-27b17c-1568650925005)]

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

· JavaScript 能够改变页面中的所有 HTML 元素

· JavaScript 能够改变页面中的所有 HTML 属性

· JavaScript 能够改变页面中的所有 CSS 样式

· JavaScript 能够对页面中的所有事件做出反应

Window对象的方法

|

setInterval()

|

按照指定的周期（以毫秒计）来调用函数或计算表达式。

|
|

setTimeout()

|

在指定的毫秒数后调用函数或计算表达式。

|
|

alert()

|

显示带有一段消息和一个确认按钮的警告框。

|
|

confirm()

|

显示带有一段消息以及确认按钮和取消按钮的对话框。

|
|

prompt()

|

显示可提示用户输入的对话框。

|

注意:setInterval（code执行多次）与setTimeout（指定的毫秒后code执行一次）的区别

Location对象：href reload()

History对象：

|

back()

|

加载 history 列表中的前一个 URL。

|
|

forward()

|

加载 history 列表中的下一个 URL。

|
|

go()

|

加载 history 列表中的某个具体页面。

|

Window.document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

|

getElementById()

|

根据id来查询节点元素

|
|

getElementsByName()

|

返回带有指定名称的对象集合。

|
|

getElementsByTagName()

|

返回带有指定标签名的对象集合。

|

作业：

编写一个html页面，需要使用CSS来实现导航栏的效果

[图片上传失败...(image-66e73d-1568650925005)]

关于Html,css,js的基础

P ul ol hr br strong em form input a img

Span div table select option header nav

Section footer aside

表单的元素：text password button submit reset

Radio checkbox file hidden date textarea

CSS:

外部样式表：不需要