第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`