第9章前端开发口述题

时间 2019-11-10

标签前端开发口述繁體版

原文原文链接

前端到底是什么？javascript

前端即网站前台部分，运行在PC端，移动端等浏览器上展示给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计可以适应各类屏幕分辨率，完美的动效设计css

网页最主要由3部分组成：结构、表现和行为。网页如今新的标准是W3C，目前模式是HTML、CSS和JavaScript。html

Web前端能作什么？前端

公司官网（在PC经过浏览器来访问公司网站）移动端网页（在手机上来浏览公司信息、小游戏等）移动端APP（例如：淘宝、去哪儿旅游、携程等）微信小程序（微信最新推出的功能，随用随装，不占用手机空间）皮皮虾咱们走可乐在厨房红牛在冰箱66666。前端开发所学技术由简单到难，因此在不少网站上你会看到“七天入门前端”的视频博客等等，也就是说一星期就学会了HTML+CSS。那么最基本的页面你就能够书写了。html5

为何要学习前端开发

咱们为何要学习前端开发，由于咱们的课程定位是Python全栈开发，也就是说咱们不只要掌握后端开发的技术还要掌握必定程度的前端开发技术。经过前面课程的学习，相信你们都已经掌握了Python基础语法、函数、面向对象、网络编程及数据库相关的内容。上面说的那些内容都是属于后端开发范畴的，在接下来的这个章节咱们将一块儿来学习一下前端部分的内容，那么前端的核心内容有三部分，学习HTML+CSS是没有什么逻辑可言的。跟前面的课程可能存在必定的差别，但愿同窗们放下内心的包袱，跟着老师慢慢进入到前端开发。java

前端开发都有哪些内容

咱们知道，用所谓的网页三剑客已经不能知足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页如今新的标准是W3C，目前模式是HTML、CSS和JavaScript。node

三部分都是作什么的

（1）HTML是什么？jquery

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来讲，网页就是用HTML语言制做的。HTML是一门描述性语言，是一门很是容易入门的语言。

（2）CSSios

CSS，全称“（层叠样式表）”。之后咱们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
（3）JavaScript



（4）HTML、CSS和JavaScript的区别 咱们都知道前端技术最核心的是HTML、CSS和JavaScript这三种。可是这三者到底是干吗的呢？JavaScript是一门脚本语言。

“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为

HTML简介

HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于建立网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其余信息结合起来，展示出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其余信息（包括例如文本的结构和表示信息等）与原来的文本结合在一块儿，可是使用标记（markup）进行标识。程序员

文件后缀名规范

文件后缀通常使用.html或.htm .html与.htm均是静态网页后缀名，网页文件没有区别与区分，html与htm后缀网页后缀能够互换，对网页彻底没有影响同时也没有区别。能够认为html与htm没有本质区别，惟一区别即多与少一个“l”。

HTML标签

HTML做为一门标记语言，是经过各类各样的标签来标记网页内容的。咱们学习HTML主要就是学习的HTML标签。

那什么是标签呢？

1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。
2. HTML中标签**一般**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。
开始标签和结束标签之间的就是标签的内容。
3. 标签之间是能够嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。
4. HTML标签不区分大小写，`<h1>`和`<H1>`是同样的，可是咱们一般建议使用小写，由于大部分程序员都以小写为准。

首先，<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签以前，代表该文档是HTML5文档。

<html></html> 称为根标签，全部的网页标签都在<html></html>中。
<head></head> 标签用于定义文档的头部，它是全部头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签，头部标签在下一节中会有详细介绍。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部份内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不一样的标签在浏览器上会显示出不一样的效果，因此咱们须要记住最多见的标签的特性。

HTML注释

不管咱们学习什么编程语言，必定要重视的就是注释，我我的一直把注释当作是代码之母。 HTML中注释的格式:



<!--这里是注释的内容-->

注意：注释中能够直接使用回车换行。

而且咱们习惯用注释的标签把HTML代码包裹起来。如：

<!-- xx部分 开始 -->
    这里放你xx部分的HTML代码
<!-- xx部分 结束 -->

HTML注释的注意事项：

HTML注释不支持嵌套。
HTML注释不能写在HTML标签中。

meta标签

Meta标签介绍：

元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不一样的属性又有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能。

经常使用的meta标签：

http-equiv属性

它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

name属性

主要用于页面的关键字和描述，是写给搜索引擎看的，关键字能够有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。



<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城">

<!--标题-->
<title>路飞学城</title>
<!--icon图标（网站的图标）-->
<link rel="icon" href="fav.ico">
<!--定义内部样式表-->
<style></style>
<!--引入外部样式表文件-->
<link rel="stylesheet" href="mystyle.css">
<!--定义JavaScript代码或引入JavaScript文件-->
<script src="myscript.js"></script>

标题标签一般用来制做文章或网站的标题。

ol标签的属性：

type：列表标识的类型

1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符

列表标识的起始编号

默认为1

ul标签的属性： type：列表标识的类型

disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识

图片标签 `<img/>`

一个网页除了有文字，还会有图片。咱们使用<img/>标签在网页中插入图片。

语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />

注意：

src设置的图片地址能够是本地的地址也能够是一个网络地址。
图片的格式能够是png、jpg和gif。
alt属性的值会在图片加载失败时显示在网页上。
还能够为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度

<div>
     <span>与行内元素展现的标签<span>
     <span>与行内元素展现的标签<span>
     <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
     <img src="./finance-right.png" alt="人工智能实战"  style="width: 200px;height: 200px">
 </div>

浏览器查看效果：行内块元素

与行内元素在一行内显示
能够设置宽度和高度
span标签能够单独摘出某块内容，结合css设置相应的样式

其余标签

换行标签 `<br>`

<br>标签用来将内容换行，其在HTML网页上的效果至关于咱们平时使用word编辑文档时使用回车换行。

分割线 `<hr>`

<hr>标签用来在HTML页面中建立水平分隔线，一般用来分隔内容

特殊符号

浏览器在显示的时候会移除源代码中多余的空格和空行。全部连续的空格或空行都会被算做一个空格。须要注意的是，HTML代码中的全部连续的空行（换行）也被显示为一个空格。

特殊字符

在上一个实例中，咱们演示了HTML中输入空格、回车都是没有做用的。要想输入空格，须要用特殊符号 --  。

经常使用的特殊字符：

内容	代码
空格	` `
>	`>`
<	`<`
&	`&`
¥	`¥`
版权	`©`
注册	`®`

表格标签 table

表格由<table> 标签来定义。每一个表格均有若干行（由 <tr> 标签订义），每行被分割为若干单元格（由<td>标签订义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等

表单标签 form

表单是一个包含表单元素的区域
表单元素是容许用户在表单中输入内容，好比：文本域(textarea)、输入框(input)、单选框（）

表单的做用

表单用于显示、手机信息，并将信息提交给服务器

语法：



<form>容许出现表单控件</form>

为何能设置属性呢？

其实呢，你能够这样简单理解，由于最终咱们这些标签会经过css去美化，经过javascript来操做，那么这些标签咱们能够当作是一个对象，对象就应该有它本身的属性和方法。那么你像上面说到input标签，type=‘button’就是它的属性，onclick=‘addclick()’就是它的方法。

关于标签属性的注意事项：



1.HTML标签除一些特定属性外能够设置自定义属性，一个标签能够设置多个属性用空格分隔，多个属性不区分前后顺序。
2.属性值要用引号包裹起来，一般使用双引号也能够单引号。
3.属性和属性值不区分大小写，可是推荐使用小写。

标签分类

HTML中标签元素三种不一样类型：块状元素，行内元素，行内块状元素。

经常使用的块状元素：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

经常使用的行内元素

<a> <span> <br> <i> <em> <strong> <label>

经常使用的行内块状元素：

<img> <input>

块级元素特色：display:block;

一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。独占一行

二、元素的高度、宽度、行高以及顶和底边距均可设置。

三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。

行内元素特色：display:inline;

一、和其余元素都在一行上；

二、元素的高度、宽度及顶部和底部边距不可设置；

三、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状元素的特色：display:inline-block;

一、和其余元素都在一行上；

二、元素的高度、宽度、行高以及顶和底边距均可设置

注意

咱们能够经过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局作好了准备。

标签嵌套规则

块元素能够包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️

<a href=”#”><span></span></a> ✔️

<span><div></div></span> ❌

块级元素不能放在p标签里面，好比

<p><ol><li></li></ol></p> ❌

<p><div></div></p> ❌

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

h一、h二、h三、h四、h五、h六、p

li元素能够嵌入ul，ol，div等标签

9.1.7两张图要记

CSS

CSS的出现解决了下面两个问题(css的好处)：

将HTML页面的内容与样式分离。
提升web开发的工做效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式一般又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优点

1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减小网页的代码量，增长网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS？

咱们一般会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，而后在HTML文件中经过link标签引用该CSS文件便可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

CSS语法能够分为两部分：

选择器
声明

声明由属性和值组成，多个声明之间用分号分隔。

网页中引用CSS样式

内联样式
行内样式表
外部样式表
- 连接式
- 导入式

内嵌方式

style标签

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

行内样式

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>

外联样式表-连接式

link标签

index.css

p {
  color: green;
}

而后在HTML文件中经过link标签引入：

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

外联样式表-@import url()方式导入式

了解便可。

index.css

@import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

连接式与导入式的区别

一、<link/>标签属于XHTML,@import是属性css2.1
二、使用<link/>连接的css文件先加载到网页当中，再进行编译显示
三、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
四、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来讲就是无效的

基础选择器包括：

标签选择器
类选择器
ID选择器
通用选择器

标签选择器

顾名思义就是经过标签名来选择元素：

示例：

p {
  color: red;
}

将全部的p标签设置字体颜色为红色。

ID选择器

经过元素的ID值选择元素：

示例：

#i1 {
  color: red;
}

将id值为i1的元素字体颜色设置为红色。

类选择器

经过样式类选择元素：

示例：

.c1 {
  color: red;
}

将全部样式类含.c1的元素设置字体颜色为红色。

通用选择器

使用*选择全部元素：

* {
  color: black;
}

高级选择器

后代选择器

由于HTML元素能够嵌套，因此咱们能够从某个元素的后代查找特定元素，并设置样式：

div p {
  color: red;
}

从div的全部后代中找p标签，设置字体颜色为红色。

儿子选择器

div>p {
  color: red;
}

从div的直接子元素中找到p标签，设置字体颜色为红色。

毗邻选择器

div+p {
  color: red;
}

找到全部紧挨在div后面的第一个p标签，设置字体颜色为红色。

弟弟选择器

div~p {
  color: red;
}

找到全部div标签后面同级的p标签，设置字体颜色为红色。

属性选择器

除了HTML元素的id属性和class属性外，还能够根据HTML元素的特定属性选择元素。

根据属性查找

[title] {
  color: red;
}

根据属性和值查找

找到全部title属性等于hello的元素：

[title="hello"] {
  color: red;
}

找到全部title属性以hello开头的元素：

[title^="hello"] {
  color: red;
}

找到全部title属性以hello结尾的元素：

[title$="hello"] {
  color: red;
}

找到全部title属性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}

找到全部title属性(有多个值或值以空格分割)中有一个值为hello的元素：

[title~="hello"] {
  color: red;
}

表单经常使用

input[type="text"] {
  backgroundcolor: red;
}

分组选择器

分组

当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：

div,p {
  color: red;
}

为div标签和p标签统一设置字体为红色的样式。

一般，咱们会分两行来写，更清晰:

div,
p {
 color: red;
}

伪类选择器

经常使用的几种伪类选择器。

没有访问的超连接a标签样式：

a:link {
  color: blue;
}

访问过的超连接a标签样式：

a:visited {
  color: gray;
}

鼠标悬浮在元素上应用样式：

a:hover {
  background-color: #eee; 
}

鼠标点击瞬间的样式：

a:active {
  color: green;
}

input输入框获取焦点时样式：



input:focus {
  outline: none;
  background-color: #eee;
}

伪元素

介绍经常使用的伪元素。

first-letter

用于为文本的首字母设置特殊样式。

例如：

p:first-letter {
  font-size: 48px;
}

before

用于在元素的内容前面插入新内容。

例如：

p:before {
  content: "*";
  color: red;
}

在全部p标签的内容前面加上一个红色的*。

after

用于在元素的内容后面插入新内容。

例如：

p:after {
  content: "?";
  color: red;
}

在全部p标签的内容后面加上一个蓝色的?。

选择器的优先级

咱们如今已经学过了不少的选择器，也就是说咱们有不少种方法从HTML中找到某个元素，那么就会有一个问题：若是我经过不用的选择器找到了相同的一个元素，而且设置了不一样的样式，那么浏览器究竟应该按照哪个样式渲染呢？也就是不一样的选择器它们的优先级是怎样的呢？

是先来后到呢仍是后来居上呢？通通不是，它是按照下面的选择器的权重规则来决定的。

注意：

还有一种不讲道理的!import方式来强制让样式生效，可是不推荐使用。由于大量使用!import的代码是没法维护的。

字体相关CSS属性介绍

font-family

字体系列。

font-family能够把多个字体名称做为一个“回退”系统来保存。若是浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

若是设置成inherit，则表示继承父元素的字体。

font-weight

字重（字体粗细）。

取值范围：

值	描述
normal	默认值，标准粗细
bord	粗体
border	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

font-size

字体大小。

p {
  font-size: 14px;
}

若是设置成inherit表示继承父元素的字体大小值。

color

设置内容的字体颜色。

支持三种颜色值：

十六进制值如: ＃FF0000
一个RGB值如: RGB(255,0,0)
颜色的名称如: red

p {
  color: red;
}

字体属性

text-align

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐默认值
right	右对齐
center	居中对齐
justify	两端对齐

line-height

行高

text-decoration

文字装饰。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

背景属性

经常使用背景相关属性：

属性	描述
background-color	规定要使用的背景颜色。
background-image	规定要使用的背景图像。
background-size	规定背景图片的尺寸。
background-repeat	规定如何重复背景图像。
background-attachment	规定背景图像是否固定或者随着页面的其他部分滚动。
background-position	规定背景图像的位置。
inherit	规定应该从父元素继承background属性的设置。

background-repeat取值范围：

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承background-repeat属性的设置。

background-attachment取值范围：

值	描述
scroll	默认值。背景图像会随着页面其他部分的滚动而移动。
fixed	当页面的其他部分滚动时，背景图像不会移动。
inherit	规定应该从父元素继承background-attachment属性的设置。

background-position取值范围：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	若是只设置了一个关键词，那么第二个值就是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。若是只设置了一个值，另外一个值就是50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其余的 CSS 单位。若是只设置了一个值，另外一个值就是50%。能够混合使用`%`和`position`值。

示例：

body {
  background-color: red;
  backgraound-image: url(xx.png);
  background-size: 300px 300px;
  background-repeat: no-repeat;
  background-position: center 
}

简写：

body { 
  background: red url(xx.png) no-repeat fixed center/300px 300px; 
}

行内元素：

与其余行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。

块级元素：

霸占一行，不能与其余任何元素并列；
能接受宽、高。若是不设置宽度，那么宽度将默认变为父亲的100%。

块级元素和行内元素的分类：

在之前的HTML知识中，咱们已经将标签分过类，当时分为了：文本级、容器级。

从HTML的角度来说，标签分为：

文本级标签：p、span、a、b、i、u、em。
容器级标签：div、h系列、li、dt、dd。

　　PS：为甚么说p是文本级标签呢？由于p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。

如今，从CSS的角度讲，CSS的分类和上面的很像，就p不同：

行内元素：除了p以外，全部的文本级标签，都是行内元素。p是个文本级，可是是个块级元素。
块级元素：全部的容器级标签都是块级元素，还有p标签。

块级元素和行内元素的相互转换

咱们能够经过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。

块级元素能够转换为行内元素：

一旦，给一个块级元素（好比div）设置：

display: 
inline;

那么，这个标签将当即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：

此时这个div不能设置宽度、高度；
此时这个div能够和别人并排了

行内元素转换为块级元素：

一样的道理，一旦给一个行内元素（好比span）设置：

display: block;

那么，这个标签将当即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：

此时这个span可以设置宽度、高度
此时这个span必须霸占一行了，别人没法和他并排
若是不设置宽度，将撑满父亲

PS:标准流里面的限制很是多，致使不少页面效果没法实现。若是咱们如今就要并排、而且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

盒模型

width:内容的宽高

height:内容的高

padding:内边距

border:边框

margin:外边距

盒模型的概念

在CSS中，"box model"这一术语是用来设计和布局时使用，而后在网页中基本上都会显示一些方方正正的盒子。咱们称为这种盒子叫盒模型。

盒模型有两种：标准模型和IE模型。咱们在这里重点讲标准模型。

什么是标准文档流

宏观的将，咱们的web页面和ps等设计软件有本质的区别，web 网页的制做，是个“流”，从上而下，像 “织毛衣”。而设计软件，想往哪里画东西，就去哪里画

标准文档流下有哪些微观现象？

1.空白折叠现象

多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，若是在一行内写img标签，就解决了这个问题，可是咱们不会这样去写咱们的html结构。这种现象称为空白折叠现象。

2.高矮不齐，底边对齐

文字还有图片大小不一，都会让咱们页面的元素出现高矮不齐的现象，可是在浏览器查看咱们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写

若是在一行内写文字，文字过多，那么浏览器会自动换行去显示咱们的文字。

浮动

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

none: 表示不浮动，默认
left: 表示左浮动
right：表示右浮动

为何要清除浮动

在页面布局的时候，每一个结构中的父元素的高度，咱们通常不会设置。（为何？）

你们想，若是我初版的页面的写完了，感受很是爽，忽然隔了一个月，老板说页面某一块的区域，我要加点内容，或者我以为图片要缩小一下。这样的需求在工做中很是常见的。真想打他啊。那么此时做为一个前端小白，确定是去每一个地方加内容，改图片，而后修改父盒子的高度。那问题来了，这样不影响开发效率吗？答案是确定的。

photoshop 取xy轴像素位置

1,放大图像后用矩形框选中你要定位的图层

2，CTRL+T 自由变换

3，属性栏上方会出来XY坐标

相对定位

相对定位:相对于本身原来的位置定位

现象和使用：

1.若是对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。

2.设置相对定位以后，咱们才可使用四个方向的属性： top、bottom、left、right

特性：

1.不脱标

2.形影分离

3.老家留坑

用途：

1.微调元素位置

2.作绝对定位的参考（父相子绝）绝对定位会说到此内容。

参考点：

本身原来的位置作参考点

绝对定位

特性：

1.脱标 2.作遮盖效果，提成了层级。设置绝对定位以后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：

1、单独一个绝对定位的盒子

1.当我使用top属性描述的时候是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

2、以父辈盒子做为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不必定是爸爸，它也能够是爷爷，曾爷爷。

2.若是父亲设置了定位，那么以父亲为参考点。那么若是父亲没有设置定位，那么以父辈元素设置定位的为参考点

3.不只仅是父相子绝，父绝子绝，父固子绝,都是以父辈元素为参考点

做用：页面布局常见的“父相子绝”，必定要会！！！！

绝对定位的盒子居中

当作公式记下来吧！

*{
   padding: 0;
   margin: 0;
}
.box{
   width: 100%;
   height: 69px;
   background: #000;
}
.box .c{
   width: 960px;
   height: 69px;
   background-color: pink;
   *margin: 0 auto;*/
   position: relative;
   left: 50%;
    margin-left: -480px;
   /*设置绝对定位以后，margin:0 auto;不起任何做用，若是想让绝对定位的盒子居中。当作公式记下来 设置子元素绝对定位，而后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
 }

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖，提高层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
若是用bottom描述，那么是以浏览器的左下角为参考点

做用： 1.返回顶部栏 2.固定导航栏 3.小广告

这个东西很是简单，它有四大特性，每一个特性你记住了，页面布局就不会出现找不到盒子的状况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，无论相对定位，绝对定位，固定定位，均可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0若是你们都没有z-index值，或者z-index值同样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

Javascript简介

web前端有三层：

HTML:从语义的角度，描述页面的结构
CSS:从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（提高用户体验）

JavaScript的组成

ECMAScript 5.0:定义了js的语法标准：包含变量、表达式、运算符、函数、if语句 for循环 while循环、内置的函数
DOM :操做网页上元素的API。好比让盒子显示隐藏、变色、动画 form表单验证
BOM:操做浏览器部分功能的API。好比刷新页面、前进后退、让浏览器自动滚动

for循环遍历列表是最经常使用的对数据的操做，在js中但愿你们熟练使用for循环的书写方式

//输出1~10之间的数
for(var i = 1;i<=10;i++){
     console.log(i)
 }

课堂练习：输入1~100之间全部数之和

var sum = 0;
for(var j = 1;j<=100;j++){
    sum = sum+j
}
console.log(sum);

for循环嵌套的练习

document.write(''); 往浏览器文档中写

for(var i=1;i<=3;i++){

 　　for(var j=0;j<6;j++){
        document.write('*')
    }

   document.write('<br>')
 }

小做业：

1.在浏览器中输出直角三角形

*  
** 
***
****
*****
******

代码：

for(var i=1;i<=6;i++){ //控制的行数
   for(var j=1;j<=i;j++){ //控制的*
      　　document.write("*")；
   }

     document.write('<br>')；
}

2.在浏览器中输出等腰三角形

*  
        ***  
        ***** 
       ******* 
      ********* 
     ***********

代码：

for(var i=1;i<=6;i++){ //控制行数，一共显示6行 记得换行document.write('<br>');

        //控制咱们的空格数
        for(var s=i;s<6;s++){
            document.write('&nbsp;');
        }
        //控制每行的输出*数
        for(var j=1;j<=2*i-1;j++){
            document.write('*');
        }
        document.write('<br>');
   }

JSON字符串:

var jsonStr ='{"name":"alex", "password":"123"}' ;

JSON对象：

var jsonObj = {"name":"alex", "password":"123"};

JSON字符串转换JSON对象

var jsonObject= jQuery.parseJSON(jsonstr);

JSON对象转化JSON字符串

var jsonstr =JSON.stringify(jsonObject );

DOM

概念

所谓DOM,全称 Docuemnt Object Model 文档对象模型，毫无疑问，此时要操做对象，什么对象？文档对象

在文档中一切皆对象，好比html,body,div,p等等都看作对象，那么咱们如何来点击某个盒子让它变色呢？

DOM 为文档提供告终构化表示，并定义了如何经过脚原本访问文档结构。目的其实就是为了能让js操做html元素而制定的一个规范。

解析过程

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。而后操做的时候修改的是该元素的属性。

DOM能够作什么

找对象（元素节点）
设置元素的属性值
设置元素的样式
动态建立和删除元素
事件的触发响应：事件源、事件、事件的驱动程序

清楚DOM的结构

获取文档对象：document
获取html：document.documentElement
获取body: document.body

获取其它DOM（事件源）的三种方式

var oDiv1 = document.getElementById("box1");      //方式一：经过id获取单个标签

var oDiv2 = document.getElementsByTagName("div")[0];     //方式二：经过 标签名 得到 标签数组，因此有s

var oDiv3 = document.getElementsByClassName("box")[0];  //方式三：经过 类名 得到 标签数组，因此

事件源：引起后续事件的html标签。
事件：js已经定义好了（见下图）。
事件驱动程序：对样式和html的操做。也就是DOM。

代码书写步骤以下：（重要）
（1）获取事件源：document.getElementById(“box”); //相似与ios语言的UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操做

样式属性操做

所谓样式属性，就是对以前所讲解的style标签中的属性进行操做，而且经过js控制盒模型的属性（width,height等），控制盒子的显示隐藏（display:none|block）,控制盒子的颜色切换（background：red|green）等等

首先，你们明确一点，你是要操做文档对象了，要遵循事件三步走

获取事件源
事件
事件驱动程序

值的操做

所谓值的操做，就是对前闭合标签和后闭合标签中间的文本内容的设置和获取。

双闭合标签： innerText或者innerHTML
单闭合标签：除了img标签，就剩input了，使用value进行赋值

标签属性操做

所谓标签属性,就是对标签中（字面上看到的）属性的操做。好比像每一个标签中id，class，title、img

标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等

插入节点

插入节点有两种方式，它们的含义是不一样的。

方式1：

父节点.appendChild(新的子节点);

解释：父节点的最后插入一个新的子节点。

方式2：

父节点.insertBefore(新的子节点,做为参考的子节点);

解释：

在参考节点前插入一个新的节点。
若是参考节点为null，那么他将在父节点最后插入一个子节点。

删除节点

格式以下：

父节点.removeChild(子节点);

解释：用父节点删除子节点。必需要指定是删除哪一个子节点。

若是我想删除本身这个节点，能够这么作：

node1.parentNode.removeChild(node1);

定时器

在js中有两种定时器：

一次性定时器：setTimeout()
周期性循环定时器: setInterval()

setTimeout()

只在指定的时间后执行一次

/定时器 异步运行  
function hello(){  
alert("hello");  
}  
//使用方法名字执行方法  
var t1 = window.setTimeout(hello,1000);  
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
window.clearTimeout(t1);//去掉定时器

setInterval()

在指定时间为周期循环执行

/实时刷新  时间单位为毫秒  
setInterval('refreshQuery()',8000);   
/* 刷新查询 */  
function refreshQuery(){  
  console.log('每8秒调一次') 
}

两种方法根据不一样的场景和业务需求择而取之，

对于这两个方法，须要注意的是若是要求在每隔一个固定的时间间隔后就精确地执行某动做，那么最好使用setInterval，而若是不想因为连续调用产生互相干扰的问题，尤为是每次函数的调用须要繁重的计算以及很长的处理时间，那么最好使用setTimeout

BOM的介绍

浏览器对象模型。

操做浏览器部分功能的API。好比让浏览器自动滚动。

window对象是JavaScript中的顶级对象。
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，能够省略window

location对象的属性

href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议通常是http、https
search 查询字符串

HTML5 存储技术 localStorage sessionStorage

对浏览器来讲，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，并且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储） ：为每个数据源维持一个存储区域，在浏览器打开期间存在，包括页面从新加载

localStorage（长期存储） ：与 sessionStorage 同样，可是浏览器关闭后，数据依然会一直存在

API

sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

1.保存数据到本地

let info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2.从本地存储获取数据

var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3.本地存储中删除某个保存的数据

sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.删除全部保存的数据

sessionStorage.clear();
localStorage.clear();

5.监听本地存储的变化

Storage 发生变化（增长、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其余页面改变 Storage

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

浏览器查看方法

1. 进入开发者工具
1. 选择 Application
1. 在左侧 Storage 下查看 Local Storage 和 Session Storage

`jQuery`

层级选择器

// 后代选择器
        console.log($('div p'))
        $('div p').css('color','red')

        // 子代选择器
        $('div >p').css('background','green')

        // 毗邻选择器 匹配 全部紧接在#brother元素后的下一个元素
        $('#brother+ li').css('color','yellow')

        // 兄弟选择器
        // 匹配全部#brother以后的全部兄弟姐妹元素
        $('#brother~li').css('background','#996633')

        // :first  获取第一个元素
        $('li:first').text('真的吗？')
        // :last 获取最后一个元素
        $('li:last').html('真的吗？')



:first  获取第一个元素
        $('li:first').text('真的吗？')
        //:last 获取最后一个元素
        $('li:last').html('我是最后一个元素？')

        //:odd 匹配全部索引值为奇数的元素，从0开始计数
        $('li:odd').css('color','green');

        //:even 匹配全部索引值为偶数的元素，从0开始计数
        $('li:even').css('color','red')

        //:eq(index) 获取给定索引值的元素 从0开始计数
        $('li:eq(1)').css('font-size','30px')

        //:gt(index)匹配全部大于给定索引值的元素
        $('li:gt(1)').css('font-size','40px')

        //:lt(index) 匹配全部小于给定索引值的元素
        $('li:lt(1)').css('font-size','40px')

        //一个给定索引值的元素
        console.log($('p:eq(3)').text())

//属性选择器

        //标签名[属性名] 查找全部含有id属性的该标签名的元素
        $("li[id]").css('color','red')

        //[attr=value] 匹配给定的属性是某个特定值的元素
        $('li[class=what]').css('font-size','30px')

        //[attr!=value] 匹配全部不含有指定的属性，或者属性不等于特定值的元素
        $('li[class!=what]').css('color','darkgreen')

        //匹配给定的属性是以某些值开始的元素
        $('input[name^=username]').css('background','red')

        //匹配给定的属性是以某些值结尾的元素
        $('input[name$=222]').css('background','yellow')
        //匹配给定的属性是以包含某些值的元素
        $("button[class*='btn']").css('background','#0000FF')

jquery对象和DOM对象转换

DOM对象转换成jquery对象

var box = document.getElementById('box');
console.log($(box));

jquery对象转化成DOM对象

第一种方式：

$('button')[0]

第二种方式：

$('button').get(0)

show

概念:显示隐藏的匹配元素语法：show(speed,callback) 参数：

speed：三种预约速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
callback:在动画完成时执行的函数，每一个元素执行一次

例：
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
</script>

hide

hide(speed,callback)跟show使用方法相似，表示隐藏显示的元素。

能够经过show（）和hide（）方法，来动态控制元素的显示隐藏

toggle

若是元素是可见的，切换为隐藏的；若是元素是隐藏的，切换为可见的。

slideDown

概念：经过高度变化（向下增大）来到动态地显示全部匹配的元素，在显示完成后触发一个回调函数

用法和参数跟上面相似

slideUp

经过高度变化（向上减少）来动态地隐藏全部匹配的元素，在隐藏完成后可选地触发一个回调函数。

用法和参数跟上面相似

slideToggle

概念:经过高度变化来切换全部匹配元素的可见性，并在切换完成后可选地触发一个回调函数

跟toggle用法相似

fadeIn

概念：经过不透明度的变化来实现全部匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化

fadeOut

概念：经过不透明度的变化来实现全部匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。

fadeTo

概念：把全部匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。

fadeToggle

概念：经过不透明度的变化来开关全部匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说全部匹配的元素的高度和宽度不会发生变化。

实现淡入淡出的效果就是使用此方法

animate

概念：用于建立自定义动画的函数

语法：animate(params,[speed],[fn])

参数：

params:一组包含做为动画属性和终值的样式属性和及其值的集合

speed:三种预约速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

fn:在动画完成时执行的函数，每一个元素执行一次。

stop

概念：中止全部在指定元素上正在运行的动画

语法：stop([clearQueue],[jumpToEnd])

参数：

clearQueue:若是设置成true，则清空队列。能够当即结束动画。

gotoEnd:让当前正在执行的动画当即完成，而且重设show和hide的原始样式，调用回调函数等

delay

概念：用来作延迟的操做

语法：delay(1000)，一秒以后作后面的操做

jquery的属性操做

jquery对象有它本身的属性和方法，咱们先研究一下jquery的属性操做。
jquery的属性操做模块分为四个部分：html属性操做，dom属性操做，类样式操做和值操做

html属性操做：是对html文档中的属性进行读取，设置和移除操做。好比attr()、removeAttr()

DOM属性操做：对DOM元素的属性进行读取，设置和移除操做。好比prop()、removeProp()

类样式操做：是指对DOM属性className进行添加，移除操做。好比addClass()、removeClass()、toggleClass()

值操做：是对DOM属性value进行读取和设置操做。好比html()、text()、val()

attr

概念：设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //设置值
        //1.设置一个值 设置div的class为box
        $('div').attr('class','box')
        //2.设置多个值，参数为对象，键值对存储
        $('div').attr({name:'hahaha',class:'happy'})

removeAttr

从每个匹配的元素中删除一个属性

prop

prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。

removeProp

用来删除由.prop()方法设置的属性集

addClass（添加多个类名）

为每一个匹配的元素添加指定的类名。
$('div').addClass("box"):添加一个类名

$('div').addClass("box box2"):添加多个类名

removeClass

从全部匹配的元素中删除所有或者指定的类。

$('div').removeClass('box')移除指定的类

$('div').removeClass()移除所有的类

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
        })

toggleClass

若是存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass('active')
})

html

获取值：

html() 是获取选中标签元素中全部的内容

设置值：设置该元素的全部内容会替换掉标签中原来的内容

$('ul').html('<a href="#">百度一下</a>')
    //可使用函数来设置全部匹配元素的内容
$('ul').html(function(){
    return '哈哈哈'
})

text

获取值：

text() 获取匹配元素包含的文本内容

设置值：
设置该全部的文本内容
注意：值为标签的时候不会被渲染为标签元素只会被当作值渲染到浏览器中

val

获取值：

val()用于表单控件中获取值，好比input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')

插入操做

1、父元素.append(子元素) 追加某元素父元素中添加新的元素

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈'
//jquery中的dom操做
//1.append(content)追加  往父元素中添加新的元素
//content:string | element | jquery元素
$('ul').append('<li>1233</li>')
$('ul').append(oli)
//若是直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操做
$('ul').append($('#app'))

2、子元素.appendTo(父元素) 追加到某元素子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('hu')

3、prepend（）前置添加，添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

4、prependTo 后置添加，第一个元素添加到父元素中

$('<a href="#">路飞学诚</a>').prependTo('ul')

5、父.after(子) 在匹配的元素以后插入内容与子.insertAfter(父)

$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')

6、父.before(子) 在匹配的元素以前插入内容与子.insertBefor(父)

$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')

二、复制操做

clone() 克隆匹配的DOM元素而且选中这些克隆的副本

$('button').click(function() {

  // 1.clone()：克隆匹配的DOM元素而且选中这些克隆的副本。
 // 2.clone(true)：元素以及其全部的事件处理而且选中这些克隆的副本(简言之，副本具备与真身同样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

三、替换操做

1、replaceWith()：将全部匹配的元素替换成指定的HTML或DOM元素。

//将全部的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将全部h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

2、replaceAll():用匹配的元素替换掉全部 selector匹配到的元素

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

四、删除操做

1、remove() 删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

2、detach() 删除节点后，事件会保留

var $btn = $('button').detach()
 //此时按钮能追加到ul中
 $('ul').append($btn)

3、empty(): 清空元素中的全部后代节点




//清空掉ul中的子元素，保留ul
$('ul').empty()

position

获取匹配元素相对父元素的偏移位置

offset

获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性：top 和 left

$("p").offset()
$('div').offset().top
$("p").offset().left

scrollTop

获取匹配元素相对滚动条顶部的偏移文档被卷起的像素值

scrollLeft

获取匹配元素相对滚动条左侧的偏移文档被卷起的像素值

//获取匹配元素相对滚动条顶部的偏移  文档被卷起的像素值
$(document).scrollTop()
$(document).scrollLeft()

//监听文档滚动的jquery方法
$(document).scroll(function(){
    console.log($(document).scrollTop())
    console.log($(document).scrollLeft())

 })

1.jQuery的load()方法

jQuery load()方法是简单但强大的AJAX方法。

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$("selector").load(url,data,callback);

//get()方式
  $.ajax({
     url:'./data/index.txt',
     type:'get',
     dataType:'text',
     success:function(data){
        $('p').html(data);

     },
     error:function(error){
        console.log(error)
     }

jquery的getJSON方法

jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中

语法: $.getJSON(url,[data],[callback])

//post()方式
$.ajax({
   url:'/index',
   type:'post',
   data:{name:'张三',age:12},
   success:function(data){
      $('p').html(data);
   },
   error:function(error){
      console.log(error)
}

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。

它用于开发响应式布局、移动设备优先的 WEB 项目

Bootstrap支持移动设备优先

也就是说使用Bootstrap能够在移动设备上运行。为了确保适当的绘制和触屏缩放，须要在<head>之中添加viewport元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap重置样式

为了加强跨浏览器表现的一致性，咱们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

布局容器

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器。咱们提供了两个做此用处的类。注意，因为 padding 等属性的缘由，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

栅格系统

栅格系统的鼻祖是 https://960.gs/.

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列

栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局，你的内容就能够放入这些建立好的布局中。下面就介绍一下 Bootstrap 栅格系统的工做原理：

栅格参数

使用单一的一组 .col-md-* 栅格类，就能够建立一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一块儿的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕
设备上变为水平排列。全部“列（column）必须放在 ” .row 内。

在模态框中须要注意两点：

1. 第一是.modal，用来把 <div>的内容识别为模态框。
2. 第二是.fade class。当模态框被切换时，它会引发内容淡入淡出。
aria-labelledby="myModalLabel" ，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（好比点击在相关的按钮上）。
<div class="modal-header"> ，modal-header 是为模态窗口的头部定义样式的类。
class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。
data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。
class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。
class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。
data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <!-- 加载 Bootstrap 的全部 JavaScript 插件。你也能够根据须要只加载单个插件。 -->
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //经过jquery控制模态框弹出
                $('#delete').click(function(){
                    $('#myModal').modal({
                        keyboard:false
                    })
                })

            })

第9章 前端开发 口述题

为何要学习前端开发

前端开发都有哪些内容

三部分都是作什么的

HTML简介

文件后缀名规范

HTML标签

那什么是标签呢？

HTML注释

meta标签

图片标签 <img/>

其余标签

换行标签 <br>

分割线 <hr>

特殊符号

特殊字符

表格标签 table

表单标签 form

表单的做用

为何能设置属性呢？

关于标签属性的注意事项：

标签分类

注意

标签嵌套规则

什么是CSS?

css的优点

如何使用CSS？

网页中引用CSS样式

内嵌方式

行内样式

外联样式表-连接式

外联样式表-@import url()方式 导入式

连接式与导入式的区别

标签选择器

ID选择器

类选择器

通用选择器

高级选择器

后代选择器

儿子选择器

毗邻选择器

弟弟选择器

属性选择器

根据属性查找

根据属性和值查找

表单经常使用

分组选择器

分组

伪类选择器

伪元素

first-letter

before

after

选择器的优先级

字体相关CSS属性介绍

font-family

font-weight

font-size

color

字体属性

text-align

line-height

text-decoration

背景属性

块级元素和行内元素的分类：

块级元素和行内元素的相互转换

块级元素能够转换为行内元素：

行内元素转换为块级元素：

盒模型

width:内容的宽高

height:内容的高

padding:内边距

border:边框

margin:外边距

盒模型的概念

什么是标准文档流

1.空白折叠现象

2.高矮不齐，底边对齐

3.自动换行，一行写不满，换行写

浮动

第9章前端开发口述题

图片标签 `<img/>`

换行标签 `<br>`

分割线 `<hr>`

外联样式表-@import url()方式导入式

`jQuery`