eb前端-HTML

• HTML作用： 負(fù)責(zé)搭建頁(yè)面結(jié)構(gòu)和內(nèi)容 （蓋房子）
• 學(xué)習(xí)HTML主要學(xué)習(xí)的就是有哪些標(biāo)簽

文本相關(guān)標(biāo)簽

• h1-h6 文本標(biāo)題, 特點(diǎn): 獨(dú)占一行, 自帶上下間距, 字體加粗
• p 段落標(biāo)簽, 特點(diǎn): 獨(dú)占一行,自帶上下間距
• hr 水平分割線
• br 換行
• b 加粗
• i 斜體
• u 下劃線
• s 刪除線

列表標(biāo)簽

• 無(wú)序列表: ul和li 組合 unordered list list item 列表項(xiàng)
• 有序列表: ol和li 組合 ordered list
• 列表嵌套: 有序列表和無(wú)序列表可以任意無(wú)限嵌套 .

圖片標(biāo)簽img

• src: 資源路徑
• 相對(duì)路徑: 訪問(wèn)站內(nèi)資源

1. 圖片和頁(yè)面在同級(jí)目錄: 直接寫(xiě)圖片名
2. 圖片在頁(yè)面的上級(jí)目錄: ../圖片名
3. 圖片在頁(yè)面的下級(jí)目錄: 文件夾名/圖片名

• 絕對(duì)路徑: 訪問(wèn)站外資源, 圖片盜鏈, 有找不到圖片的風(fēng)險(xiǎn)

1. alt: 圖片不能正常顯示時(shí)顯示的文本
2. title: 圖片標(biāo)題
3. width/height: 設(shè)置寬高 , 只設(shè)置寬度時(shí)高度會(huì)自動(dòng)等比例縮放①像素②上級(jí)元素百分比

超鏈接a

• href: 資源路徑, 作用類似圖片標(biāo)簽的src
• a標(biāo)簽包裹文本為文本超鏈接, 包裹圖片為圖片超鏈接
• 頁(yè)面內(nèi)部跳轉(zhuǎn), 在目的地的元素里面添加id=xxx 然后在超鏈接里面添加href="#xxx"

表格table

• 相關(guān)標(biāo)簽: table tr表示行 td表示列 th表頭 caption標(biāo)題
• 相關(guān)屬性: border邊框 colspan跨列 rowspan跨行

表單form

• 作用: 獲取用戶輸入的各種信息 并提交給服務(wù)器
• 學(xué)習(xí)form表單主要學(xué)習(xí)的就是有哪些控件

分區(qū)標(biāo)簽

• 作用: 可以理解為是一個(gè)容器,將多個(gè)有相關(guān)性的標(biāo)簽進(jìn)行統(tǒng)一管理
• 塊級(jí)分區(qū)標(biāo)簽div: 特點(diǎn)是獨(dú)占一行
• 行內(nèi)分區(qū)標(biāo)簽span: 特點(diǎn)是共占一行
• 頁(yè)面區(qū)域如何劃分? 至少分為三大區(qū)(頭,體,腳) 每個(gè)大的區(qū)域再劃分n個(gè)小的區(qū)域
• HTML5的標(biāo)準(zhǔn)中新增了一些語(yǔ)義更強(qiáng)的分區(qū)標(biāo)簽,為了提高代碼的可讀性. 這幾個(gè)標(biāo)簽的作用和div一樣都是塊級(jí)分區(qū)標(biāo)簽

1. header頭
2. footer腳
3. main主體
4. section區(qū)域
5. nav 導(dǎo)航

CSS 層疊樣式表

• Cascading Style Sheet
• 作用: 美化頁(yè)面(裝修)

如何在HTML頁(yè)面中添加CSS樣式代碼

• 三種引入方式:

1. 內(nèi)聯(lián)樣式: 在標(biāo)簽的style屬性中添加樣式代碼, 弊端:不能復(fù)用
2. 內(nèi)部樣式: 在head標(biāo)簽里面添加一個(gè)style標(biāo)簽, 在標(biāo)簽體內(nèi)寫(xiě)樣式代碼, 可以實(shí)現(xiàn)復(fù)用但是只能本頁(yè)面復(fù)用
3. 外部樣式: 在單獨(dú)的css樣式文件中寫(xiě)樣式代碼, 在html頁(yè)面中通過(guò)link標(biāo)簽引入, 可以實(shí)現(xiàn)多頁(yè)面復(fù)用, 可以將html代碼和css樣式代碼分離

選擇器

• 作用: 通過(guò)選擇器找到頁(yè)面中的元素之后再添加樣式
• 1.標(biāo)簽名選擇器: 選取頁(yè)面中所有同名標(biāo)簽 格式: 標(biāo)簽名{樣式代碼}
• 2.id選擇器: 當(dāng)需要選擇頁(yè)面中某一個(gè)元素時(shí)使用 格式: #id{樣式代碼}
• 3.類選擇器: 當(dāng)需要選擇多個(gè)不相關(guān)的元素時(shí),給多個(gè)元素添加相同的class屬性,然后通過(guò)類選擇器進(jìn)行選擇 格式: .class{樣式代碼}
• 4.分組選擇器: 分組選擇器可以將多個(gè)選擇器合并成一個(gè) 格式: h4,#id,.class{樣式代碼}
• 5.屬性選擇器: 通過(guò)元素的屬性選擇元素 格式: 標(biāo)簽名[屬性名="屬性值"]{樣式代碼}
• 6.任意元素選擇器: 選擇頁(yè)面中所有標(biāo)簽 格式: *{樣式代碼}

復(fù)制整行快捷鍵 ctrl+D

注釋快捷鍵 ctrl+shift+/

快速進(jìn)入下一行 shift+回車

選擇器續(xù)

• 1.子孫后代選擇器: 通過(guò)元素之間的層級(jí)關(guān)系選擇元素 格式: body div div p{樣式代碼} 匹配body里面的div里面的div里面的所有p標(biāo)簽(包括后代)
• 2.子元素選擇器: 通過(guò)元素之間的層級(jí)關(guān)系選擇元素 格式: body>div>div>p{樣式代碼} 匹配body里面的div里面的div里面的所有p子元素(不包含后代)
• 3.偽類選擇器: 選擇的是元素的狀態(tài), 元素有哪些狀態(tài)? 包括:未訪問(wèn)狀態(tài),訪問(wèn)過(guò)狀態(tài),懸停狀態(tài),點(diǎn)擊狀態(tài) 格式: a:link/visited/hover/active:{樣式代碼}

顏色賦值

三原色: 紅綠藍(lán) ,red green blue rgb ,每個(gè)顏色的取值范圍0-255

顏色賦值的幾種方式:

• 顏色單詞: 常見(jiàn)顏色單詞都可以使用
• 6位16進(jìn)制賦值: #ff0000
• 3位16進(jìn)制賦值: #f00
• 3位10進(jìn)制賦值: rgb(255,0,0)
• 4位10進(jìn)制賦值: rgba(255,0,0,0-1) a=alpha代表透明度

背景圖片

• background-image:url("路徑") 設(shè)置背景圖片
• background-size:100px 200px 設(shè)置背景圖片尺寸
• background-repeat:no-repeat; 禁止重復(fù)
• background-position: 橫向 縱向; 設(shè)置背景圖片的位置,兩種方式: 1像素 2百分比

文本和字體相關(guān)樣式

• text-align:left/right/center; 文本水平對(duì)齊方式
• line-height:20px; 設(shè)置行高, 多行文本時(shí)可以控制行間距, 單行文本時(shí)可以控制垂直居中(因?yàn)槲谋灸J(rèn)是在當(dāng)前所在行內(nèi)居中)
• text-decoration:overline上劃線/underline下劃線/line-through刪除線/none去掉文本修飾
• text-shadow:顏色 x偏移值 y偏移值 濃度; 陰影
• font-size:20px; 設(shè)置字體大小
• font-weight:bold加粗/normal去掉加粗
• font-style:italic; 設(shè)置斜體
• font-family: xxx,xxx,xxx; 設(shè)置字體
• font:20px xxx,xxx,xxx; 這只字體大小+字體

元素的顯示方式display

• block: 塊級(jí)元素的默認(rèn)值, 特點(diǎn): 獨(dú)占一行 可以修改寬高, 包括: h1-h6 , p, div
• inline: 行內(nèi)元素的默認(rèn)值, 特點(diǎn): 共占一行 不可以修改寬高, 包括: span, b,i,s,u,超鏈接a
• inline-block:行內(nèi)塊元素默認(rèn)值, 特點(diǎn): 共占一行 并且可以修改寬高, 包括: img,input
• none: 隱藏元素
• 行內(nèi)元素不能直接修改寬高, 如必須修改則先將元素的顯示方式改成block或inline-block

盒子模型

• 盒子模型用來(lái)控制元素的顯示效果包括: 元素內(nèi)容content+外邊距margin+邊框border+內(nèi)邊距padding
• 元素內(nèi)容content:控制元素的顯示尺寸
• 外邊距margin:控制元素的顯示位置
• 邊框border:控制邊框效果
• 內(nèi)邊距padding:控制元素內(nèi)容的位置

盒子模型之內(nèi)容content

• 包括:width和height
• 賦值方式有兩種:①像素②上級(jí)元素的百分比
• 行內(nèi)元素不能直接修改寬高

盒子模型之外邊距margin

• 作用: 控制元素的顯示位置
• 賦值方式:

1. margin-left/right/top/bottom:10px; 單獨(dú)某個(gè)方向賦值
2. margin:10px; 四個(gè)方向賦值
3. margin:10px 20px; 上下10 左右20
4. margin:10px 20px 30px 40px; 上右下左 順時(shí)針賦值

• 行內(nèi)元素上下外邊距無(wú)效
• 上下相鄰彼此添加外邊距 取最大值
• 左右相鄰彼此添加外邊距 兩者相加
• 粘連問(wèn)題: 當(dāng)元素的上邊緣和上級(jí)元素的上邊緣重疊時(shí),給元素添加上外邊距會(huì)出現(xiàn)粘連問(wèn)題,給上級(jí)元素添加overflow:hidden解決

盒子模型之邊框border

• 賦值方式:

1. border:1px solid red; 給四個(gè)方向添加邊框
2. border-left/right/top/bottom:1px solid red; 單獨(dú)給某個(gè)方向添加邊框
3. border-radius:10px; 值越大越圓 當(dāng)值超過(guò)寬高的一半時(shí)為正圓(前提是正方形)

盒子模型之內(nèi)邊距padding

• 作用: 控制元素內(nèi)容的位置
• 賦值方式: 和外邊距類似

1. padding-left/right/top/bottom:10px; 單獨(dú)某個(gè)方向賦值
2. padding:10px; 四個(gè)方向賦值
3. padding:10px 20px; 上下和 左右賦值
4. padding:10px 20px 30px 40px; 上右下左順時(shí)針賦值

• 給元素添加內(nèi)邊距會(huì)影響元素的顯示寬高

CSS的三大特性

• 繼承: 元素可以繼承上級(jí)元素文本和字體相關(guān)的樣式,部分標(biāo)簽自帶的效果不受繼承影響, 比如超鏈接字體顏色
• 層疊:多個(gè)選擇器可能選擇到同一個(gè)元素,如果添加的樣式不同則全部層疊有效,如果作用的樣式相同 則由優(yōu)先級(jí)決定哪個(gè)生效
• 優(yōu)先級(jí): 指CSS中的選擇器具有優(yōu)先級(jí), 作用范圍越小優(yōu)先級(jí)越高, !important>id>class>標(biāo)簽名>繼承(屬于間接選中)

元素的定位方式

• 五種定位方式:

1. 靜態(tài)定位: position:static;
2. 相對(duì)定位: position:relative;
3. 絕對(duì)定位:
4. 固定定位: position: fixed;
5. 浮動(dòng)定位: float:left/right

靜態(tài)定位(文檔流定位)

• 格式: position:static; (默認(rèn)的定位方式)
• 特點(diǎn): 元素以左上為基準(zhǔn), 塊級(jí)元素從上往下排列,行內(nèi)元素從左向右依次排列, 默認(rèn)情況下 無(wú)法實(shí)現(xiàn)元素的層疊效果
• 如何控制元素的位置? 通過(guò)外邊距控制元素的位置

相對(duì)定位

• 格式: position:relative;
• 特點(diǎn): 元素不脫離文檔流(仍然占著原來(lái)的位置) ,可以實(shí)現(xiàn)元素的層疊效果
• 如何控制元素的位置? 通過(guò)left/right/top/bottom 控制元素的顯示位置,參照物是初始位置
• 應(yīng)用場(chǎng)景: 當(dāng)希望移動(dòng)某一個(gè)元素其它元素不受影響時(shí)使用相對(duì)定位, 相對(duì)定位可以實(shí)現(xiàn)元素的層疊

絕對(duì)定位

• 格式:
• 特點(diǎn): 元素脫離文檔流(不占原來(lái)的位置),可以實(shí)現(xiàn)元素層疊
• 如何控制元素的位置? 通過(guò)left/right/top/bottom控制位置,參照物為窗口(默認(rèn))或某一個(gè)上級(jí)元素(需要在上級(jí)元素中添加position:relative作為參照物)
• 應(yīng)用場(chǎng)景: 當(dāng)需要往頁(yè)面中添加一個(gè)元素并且不影響其它元素的顯示位置,并且可以實(shí)現(xiàn)層疊效果

固定定位

• 格式: position:fixed;
• 特點(diǎn): 脫離文檔流
• 如何控制元素的位置? 通過(guò)left/right/top/bottom相對(duì)于窗口做偏移
• 應(yīng)用場(chǎng)景: 當(dāng)需要將元素固定在窗口的某個(gè)位置時(shí)使用

浮動(dòng)定位

• 格式: float:left/right;
• 特點(diǎn): 脫離文檔流, 元素從當(dāng)前所在行向左或向右浮動(dòng),當(dāng)撞到上級(jí)元素邊緣或其它浮動(dòng)元素時(shí)停止.
• 浮動(dòng)元素一行裝不下時(shí)會(huì)自動(dòng)折行, 折行時(shí)有可能被卡住
• 當(dāng)元素的所有子元素全部浮動(dòng)時(shí),自動(dòng)識(shí)別的高度會(huì)為0,后面元素會(huì)頂上來(lái)導(dǎo)致顯示異常,通過(guò)給元素添加overflow:hidden可以解決此問(wèn)題
• 應(yīng)用場(chǎng)景: 當(dāng)需要將縱向排列的元素改成橫向排列時(shí)使用.

溢出設(shè)置overflow

• visible超出部分顯示(默認(rèn))
• hidden超出部分隱藏
• scroll 超出部分滾動(dòng)顯示

行內(nèi)元素垂直對(duì)齊方式vertical-align

• top 上對(duì)齊
• middle中間對(duì)齊
• bottom下對(duì)齊
• baseline基線對(duì)齊(默認(rèn))

元素的顯示層級(jí)z-index

當(dāng)兩個(gè)元素非靜態(tài)定位時(shí)可能存在層疊的問(wèn)題 通過(guò)z-index樣式控制顯示層級(jí), 值越大顯示越靠前

JavaScript

• 作用: 負(fù)責(zé)給頁(yè)面添加動(dòng)態(tài)效果
• 語(yǔ)言特點(diǎn):

1. 屬于腳本語(yǔ)言(不需要編譯直接由瀏覽器解析執(zhí)行)
2. 基于面向?qū)ο?/strong>
3. 屬于弱類型語(yǔ)言
4. 安全性強(qiáng): JS語(yǔ)言只能訪問(wèn)瀏覽器內(nèi)部的數(shù)據(jù),瀏覽器以外電腦上的數(shù)據(jù)禁止訪問(wèn).
5. 交互性強(qiáng): 因?yàn)镴S語(yǔ)言是嵌入到html頁(yè)面中最終執(zhí)行在客戶端的語(yǔ)言 可以和用戶直接進(jìn)行交互, 而像Java語(yǔ)言是運(yùn)行在服務(wù)器的語(yǔ)言和用戶交互需要借助于網(wǎng)絡(luò),所有交互性JS語(yǔ)言會(huì)更強(qiáng)一些

如何在HTML頁(yè)面中添加JS語(yǔ)言

• 三種引入方式:
• 內(nèi)聯(lián): 在標(biāo)簽的事件屬性中添加js代碼,當(dāng)事件觸發(fā)時(shí)執(zhí)行.

1. 事件: 是系統(tǒng)提供的一系列時(shí)間點(diǎn).
2. 點(diǎn)擊事件: 當(dāng)點(diǎn)擊元素時(shí)觸發(fā)的時(shí)間點(diǎn)

• 內(nèi)部: 在html頁(yè)面中的任意位置(推薦寫(xiě)在/body上面)添加script標(biāo)簽,標(biāo)簽體內(nèi)寫(xiě)js代碼
• 外部: 在單獨(dú)的js文件中寫(xiě)js代碼, 然后在html頁(yè)面中通過(guò)script標(biāo)簽的src屬性引入到html頁(yè)面

變量, 數(shù)據(jù)類型,運(yùn)算符,各種語(yǔ)句,方法,面向?qū)ο?/p>

變量

• JS屬于弱類型語(yǔ)言
• let和var關(guān)鍵字的區(qū)別, 作用域有區(qū)別

1. 使用let聲明的變量,作用域和Java語(yǔ)言的作用域類似
2. 使用var聲明的變量,不管在什么位置聲明 都相當(dāng)于是一個(gè)全局變量

數(shù)據(jù)類型

• JavaScript中只有對(duì)象類型
• 常見(jiàn)的對(duì)象類型包括:

1. 字符串: string 可以用單引號(hào)或雙引號(hào)修飾
2. 數(shù)值: number 相當(dāng)于Java中所有數(shù)值類型的總和
3. 布爾值: boolean true和false
4. 未定義: undefined 當(dāng)變量只聲明不賦值時(shí)屬于未定義

• 獲取變量類型的方法 typeof 變量;

運(yùn)算符

• 算數(shù)運(yùn)算符: + - * / % , JS中的除法會(huì)根據(jù)結(jié)果自動(dòng)轉(zhuǎn)換整數(shù)或小數(shù)
• 關(guān)系運(yùn)算符: > < >=<=!===和===
• ==: 先統(tǒng)一兩個(gè)變量的類型 再比較值 "666"==666 true
• ===:先比較類型,類型相同后再比較值 "666"===666 false
• 邏輯運(yùn)算符: && || !
• 賦值運(yùn)算符:=+=-=*=/=%=++ --
• 三目運(yùn)算符: 條件?值1:值2

各種語(yǔ)句:

• if else
• for
• while
• do while
• switch case

方法

• java: public 返回值類型 方法名(參數(shù)列表){方法體}
• JS: function 方法名(參數(shù)列表){方法體}
• 常見(jiàn)的四種方法:

1. 無(wú)參無(wú)返回值
2. 有參無(wú)返回值
3. 無(wú)參有返回值
4. 有參有返回值

• 三種聲明方法的格式:

1. function 方法名(參數(shù)列表){方法體}
2. let 方法名=function (參數(shù)列表){方法體}
3. let 方法名=new Function("參數(shù)1","參數(shù)2","方法體");

和頁(yè)面相關(guān)的方法

• 1.通過(guò)選擇器獲取頁(yè)面中的元素對(duì)象

let 元素對(duì)象=document.querySelector("選擇器")

• 2.獲取和修改元素的文本內(nèi)容

1. 元素對(duì)象.innerText="xxx"; 修改文本內(nèi)容
2. 元素對(duì)象.innerText 獲取文本內(nèi)容

• 3.獲取和修改input控件的值

1. 控件對(duì)象.value="xxx"; 修改
2. 控件對(duì)象.value 獲取

NaN

• Not a Number: 不是一個(gè)數(shù)
• isNaN(x) 判斷變量是否是NaN

JavaScript對(duì)象分類

• 內(nèi)置對(duì)象:包括string,number,boolean等
• BOM: Browser Object Model, 瀏覽器對(duì)象模型, 包括和瀏覽器相關(guān)的內(nèi)容
• DOM: Document Object Model, 文檔對(duì)象模型,包括和頁(yè)面標(biāo)簽相關(guān)的內(nèi)容

BOM瀏覽器對(duì)象模型

• window: 此對(duì)象里面的屬性和方法稱為全局的屬性和方法,訪問(wèn)時(shí)可以省略掉window.
• window中常見(jiàn)的方法:

1. alert("xxx")彈出提示框
2. confirm("xxx") 彈出確認(rèn)框
3. prompt("xxx") 彈出文本框
4. isNaN(x) 判斷變量是否是NaN
5. parseInt()和parseFloat() 把字符串轉(zhuǎn)成整數(shù)或小數(shù)
6. console.log() 控制臺(tái)輸出
7. let timer=setInterval(方法,時(shí)間間隔) 開(kāi)啟定時(shí)器
8. clearInterval(timer) 停止定時(shí)器
9. setTimeout(方法,時(shí)間間隔) 開(kāi)啟只執(zhí)行一次的定時(shí)器

• window對(duì)象中常見(jiàn)的屬性
• location位置

1. location.href 獲取和修改瀏覽器的請(qǐng)求地址
2. location.reload() 刷新頁(yè)面

• history歷史

1. history.length 獲取歷史頁(yè)面數(shù)量
2. history.back() 返回上一頁(yè)面
3. history.forward() 前往下一頁(yè)面
4. history.go(n) n=1是前往下1頁(yè)面 n=-1 返回上一頁(yè)面 n=2 前往下2個(gè)頁(yè)面 n=0代表刷新

DOM文檔對(duì)象模型

• 包含和頁(yè)面元素相關(guān)的內(nèi)容

• 1.通過(guò)選擇器獲取頁(yè)面中的元素對(duì)象

let 元素對(duì)象=document.querySelector("選擇器")

• 2.獲取和修改元素的文本內(nèi)容

1. 元素對(duì)象.innerText="xxx"; 修改文本內(nèi)容
2. 元素對(duì)象.innerText 獲取文本內(nèi)容

• 3.獲取和修改input控件的值

1. 控件對(duì)象.value="xxx"; 修改
2. 控件對(duì)象.value 獲取

• 4.創(chuàng)建元素對(duì)象

let 元素對(duì)象=document.createElement("標(biāo)簽名");

• 5.添加元素對(duì)象到某個(gè)元素里面

1. document.body.appendChild(元素對(duì)象);
2. 父元素.appendChild(元素對(duì)象);
3. 父元素.append(元素對(duì)象,元素對(duì)象,元素對(duì)象);

前端MVC設(shè)計(jì)模式

• MVC設(shè)計(jì)模式,其實(shí)就是將前端實(shí)現(xiàn)某個(gè)業(yè)務(wù)的所有代碼劃分為三部分
• Model: 模型, 指數(shù)據(jù)模型,這個(gè)數(shù)據(jù)一般來(lái)自于服務(wù)器
• View: 視圖, 指頁(yè)面標(biāo)簽內(nèi)容
• Controller:控制器, 指將數(shù)據(jù)展示到視圖中的過(guò)程代碼
• 前端MVC設(shè)計(jì)模式弊端: 需要在Controller控制器部分頻繁進(jìn)行DOM(遍歷查找元素的代碼)操作, 會(huì)影響執(zhí)行效率.

M,V,VM設(shè)計(jì)模式

• Model: 模型, 指數(shù)據(jù)模型,這個(gè)數(shù)據(jù)一般來(lái)自于服務(wù)器
• View: 視圖, 指頁(yè)面標(biāo)簽內(nèi)容
• ViewModel:視圖模型, 將頁(yè)面中可能發(fā)生改變的元素和某個(gè)變量在內(nèi)存中進(jìn)行綁定,當(dāng)變量的值發(fā)生改變時(shí)會(huì)從內(nèi)存中直接找到對(duì)應(yīng)的元素讓其改變.

Vue

• Vue框架是目前最流行的前端框架
• Vue對(duì)象相當(dāng)于MVVM設(shè)計(jì)模式中的VM, 負(fù)責(zé)將頁(yè)面中可能發(fā)生改變的元素和變量進(jìn)行綁定, 綁定完之后會(huì)不斷監(jiān)聽(tīng)變量的改變, 當(dāng)變量的值發(fā)生改變時(shí)會(huì)自動(dòng)找到對(duì)應(yīng)的元素并改變其顯示內(nèi)容.
• 相關(guān)指令:

1. {{變量}}:插值, 讓此處的文本內(nèi)容和變量進(jìn)行綁定
2. v-text="變量", 讓元素的文本內(nèi)容和變量進(jìn)行綁定
3. v-html="變量", 讓元素的html內(nèi)容和變量進(jìn)行綁定
4. v-bind:屬性名="變量", 讓元素的xxx屬性和變量進(jìn)行綁定 可以省略掉v-bind
5. v-model="變量", 雙向綁定, 當(dāng)變量的值發(fā)生改變頁(yè)面會(huì)跟著改變, 頁(yè)面的內(nèi)容改變時(shí)變量也會(huì)跟著改變,只有使用form表單中的控件時(shí)才會(huì)涉及到雙向綁定.
6. v-on:事件名="方法", 事件綁定 簡(jiǎn)寫(xiě)@事件名="方法" , 調(diào)用的方法必須聲明在Vue里面的methods里面

Vue指令(續(xù))

• v-for="(變量,i) in 數(shù)組"; 遍歷數(shù)組 同時(shí)重復(fù)生成當(dāng)前標(biāo)簽,數(shù)量和數(shù)組中對(duì)象的數(shù)量一致
• v-if="變量" , 變量值為true時(shí)顯示元素 ,為false時(shí) 刪除元素
• v-else 和v-if結(jié)合使用 取反
• v-show="變量" , 變量值為true時(shí)顯示元素 ,為false時(shí) 隱藏元素(需要頻繁切換顯示狀態(tài)時(shí)使用)

ElementUI

• 官網(wǎng)地址: https://element.eleme.cn

筆記保留，如有侵權(quán)請(qǐng)聯(lián)系刪除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

eb標(biāo)準(zhǔn)：

由于不同瀏覽器解析出來(lái)的網(wǎng)頁(yè)效果可能不同，所以需要通過(guò)web標(biāo)準(zhǔn)對(duì)其進(jìn)行約束使其一致，主要包括三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)：

結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類，主要指的是HTML。

表現(xiàn)標(biāo)準(zhǔn)：

表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

行為標(biāo)準(zhǔn)：

行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)，主要指的是 JavaScript。

初識(shí)HTML：

html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標(biāo)記語(yǔ)言” ，描述網(wǎng)頁(yè)的一種語(yǔ)言。

HTML發(fā)展：

XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)，可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language），更嚴(yán)格更純凈的 HTML 版本，作為一種 XML 應(yīng)用被重新定義的 HTML。

HTML中的注釋：

 <!-- 注釋標(biāo)簽：注釋的內(nèi)容 -->

條件注釋：

條件注釋的作用是：定義只有Internet Explorer才執(zhí)行條件注釋中的html標(biāo)簽。

    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網(wǎng)頁(yè)的跟標(biāo)簽,lang=""用來(lái)設(shè)置網(wǎng)頁(yè)語(yǔ)言，其值還有zh-CN中文簡(jiǎn)體、fr法語(yǔ)等，設(shè)置后當(dāng)系統(tǒng)設(shè)置語(yǔ)言和網(wǎng)頁(yè)語(yǔ)言發(fā)生沖突時(shí)會(huì)提示是否翻譯網(wǎng)頁(yè) -->
    <head> <!-- 網(wǎng)頁(yè)的頭部 -->
        <meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有g(shù)bk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開(kāi)啟移動(dòng)端視口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開(kāi)啟ios快捷啟動(dòng)方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設(shè)置iOS頂部通欄樣式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到數(shù)字不轉(zhuǎn)成電話號(hào)碼 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對(duì)IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 網(wǎng)站搜索關(guān)鍵字 -->
        <meta name='description' content='this is description'> <!-- 描述網(wǎng)站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!--  網(wǎng)站的圖標(biāo)，如果圖標(biāo)是gif圖，則需要改：type="image/gif"，引入網(wǎng)站圖標(biāo)另一種方法：命名為favicon.ico文件放到網(wǎng)站根目錄下 -->
        <link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base標(biāo)簽，定義這個(gè)網(wǎng)頁(yè)中a鏈接打開(kāi)窗口的方式，其值還有_self -->
        <title>標(biāo)題</title> <!-- 網(wǎng)站的標(biāo)題 -->
        <style type="text/CSS">  /* 用來(lái)寫(xiě)CSS代碼，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 網(wǎng)頁(yè)的主體 -->
        <h1>標(biāo)題</h1> <!-- 標(biāo)題標(biāo)簽，共六個(gè)級(jí)，分別為：h1~h6,大小逐級(jí)遞減，h1在一個(gè)網(wǎng)頁(yè)中只允許出現(xiàn)一次。 -->
        <p>段落</p> <!-- 段落標(biāo)簽 -->
        <hr/> <!-- 單線標(biāo)簽,所有單標(biāo)簽后面的關(guān)閉符均可以省略 -->
        <br/> <!-- 換行標(biāo)簽 -->
        </div></div> <!-- 無(wú)語(yǔ)義化標(biāo)簽布局用,上面的標(biāo)簽是語(yǔ)義化標(biāo)簽 -->
        <span>span</span> <!-- 無(wú)語(yǔ)義化標(biāo)簽分割用 -->                
        <strong>加粗</strong> <!-- 加粗標(biāo)簽 -->
        <b>加粗</b> <!-- 加粗標(biāo)簽 -->
        <i>傾斜</i> <!-- 傾斜標(biāo)簽 -->
        <em>傾斜</em> <!-- 傾斜標(biāo)簽 -->
        <s>刪除線</s> <!-- 刪除標(biāo)簽 -->
        <del>刪除線</del> <!-- 刪除標(biāo)簽 -->
        <u>下劃線</u> <!-- 下劃線標(biāo)簽 -->
        <ins>下劃線</ins> <!-- 下劃線標(biāo)簽 -->
        <img src="圖片路徑" alt="圖片無(wú)法加載，提示文字" title="鼠標(biāo)懸停，提示文體" border="2"/> <!-- 圖像標(biāo)簽，border是邊框?qū)傩裕瑆idth和height屬性設(shè)置圖像的寬度和高度 -->
        <a href="跳轉(zhuǎn)目標(biāo)" target="_self">鏈接的命名</a> <!-- 鏈接標(biāo)簽，target屬性為鏈接頁(yè)面打開(kāi)的方式，默認(rèn)值_self為自身打開(kāi)；_blank為新窗口打開(kāi)；_new為新窗口打開(kāi)，相同頁(yè)面只會(huì)打開(kāi)一個(gè);_top跳出框架-->
        <ul> <!-- 無(wú)序列表 -->
            <li>列表項(xiàng)1</li>
            <li>列表項(xiàng)2</li>
            <li>列表項(xiàng)3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,屬性type可以控制li序號(hào)的樣式，其屬性值有：1、A、a、I、i-->
            <li>中國(guó)</li>
            <li>美國(guó)</li>
            <li>英國(guó)</li>
        </ol>
        <dl> <!-- 自定義列表 -->
            <dt>分類1</dt> <!-- 分類名稱 -->
            <dd>分類1第1項(xiàng)</dd> <!-- 類的項(xiàng) -->
            <dd>分類1第2項(xiàng)</dd>
            <dt>分類2</dt>
            <dd>分類2第1項(xiàng)</dd>
            <dd>分類2第2項(xiàng)</dd>
        </dl>
        <table> <!-- 定義表格，table標(biāo)簽實(shí)際就是一個(gè)四方塊框框，里面有單元格才會(huì)顯示出表格的樣子 -->
        <caption>信息表</caption> <!-- 表格標(biāo)題 -->
        <tr> <!-- 定義行 -->
            <th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr> <!-- 定義行 -->
            <td>小明</td> <!-- 定義單元格，表格里面沒(méi)有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問(wèn)題可通過(guò)以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan