在Vue中，用watch來響應數據的變化，示例代碼如下，
第一種方式
<input type="text" v-model="userName"/>
//監聽當userName值發生變化時觸發
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
第一種方式有一個缺點： 就是當值第一次綁定的時候 不會執行監聽函數，只有當值改變的時候才會執行。
如果我們想在第一次綁定的時候執行此監聽函數，則需要設置immediate為true。比如當父組件向子組件動態傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執行函數，此時就需要將immediate設為true。
第二種方式
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
immediate表示在watch中首次綁定的時候，是否執行handler，值為true則表示在watch中聲明的時候，就立即執行handler方法，值為false，則和一般使用watch一樣，在數據發生變化的時候才執行handler。
當需要監聽一個對象的改變時，普通的watch方法無法監聽到對象內部屬性的改變，只有data中的數據才能夠監聽到變化，此時就需要deep屬性對對象進行深度監聽。
第三種方式
<input type="text" v-model="cityName.name" />
data (){
return {
cityName:
{
name:'北京',
location: '中國'
}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注：監測為對象的時候，newVal == oldVal
此時會給cityName的所有屬性都加上監聽函數，如果屬性較多時，每個屬性值的變化都會執行handler。如果只需要監聽對象中的一個屬性值，則可以做以下優化：使用字符串的形式監聽對象屬性：
watch: {
'cityName.name': {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
數組的變化不需要深度監聽;
在watch中不要使用箭頭函數，因為箭頭函數中的this是指向當前作用域.
首先讓我們了解一下前端路由：路由router全部配置在前端，根據用戶權限判斷可以進入哪些頁面
缺點：
vue初始化的時候需要掛載全部路由，對性能有影響
安全性低，用戶可以在地址欄跳轉到無權訪問的頁面（可優化）
動態路由則是根據用戶信息獲取權限，簡單來說就是根據用戶信息獲取其對應的權限，生成對應的路由掛載，然后動態渲染有權限的菜單于側邊欄
實現
定義靜態路由（登錄或者公用頁面）、動態路由，vue初始化時只掛載靜態路由
用戶登錄后，拿到用戶token，調接口拿到動態路由權限DynamicRoutes，將DynamicRoutes和定義的動態路由比較，篩選出相應的用戶可訪問路由表
執行router.addRoutes(DynamicRoutes)添加動態路由
使用vuex存儲路由表，根據vuex中可訪問的路由渲染側邊欄sidebar
// beforeEach中
if (getToken() && getToken() !== 'undefined') {
// 權限判斷
if (!store.state.app.menuPermissions) {
/ 獲取后臺給的權限數組 /
return new Promise((resolve, reject) => {
getPermissionList().then(response => {
if (response.data.stat === 1) {
const userRouter = response.data.data
// 檢查并生成新的路由表
const DynamicRoutes = ChecAndSetPermissionRouter(userRouter)
// 默認使/重定向到第一個有效的路由
for (let i = 0, leni = DynamicRoutes.length; i < leni; i++) {
if (DynamicRoutes[i].children.length > 0) {
DynamicRoutes[i].path = '/'
DynamicRoutes[i].redirect = DynamicRoutes[i].children[0].path
break
}
}
DynamicRoutes.push({ path: '', redirect: '/404', hidden: true }) // 全局404
/ 生成左側導航菜單 /
store.dispatch('SetMenuPermissions', DynamicRoutes)
/ 動態添加路由 /
router.addRoutes(DynamicRoutes)
// / 完整的路由表 /
store.dispatch('SetRouterPemissions', [...constantRouterMap, ...DynamicRoutes])
next(to)
}
}).catch(error => {
router.push('/404')
// / 生成左側導航菜單 */
store.dispatch('SetMenuPermissions', [])
next()
reject(error)
})
})
}
if (to.path === '/login') {
next({ path: '/' })
} else {
next()
}
} else {
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(/login?redirect=${to.path}) // 否則全部重定向到登錄頁
}
}
踩坑來了
Q：為什么404 頁面一定要最后加載，放置在靜態路由中會怎么樣？
放在靜態路由里，后面的所以頁面都會被攔截到404，所以應該獲取動態路由權限之后push
Q：權限獲取成功，不跳轉新生成的動態路由，跳404？
beforeEach中router.addRoutes之后的next()可能會失效，因為可能next()的時候路由并沒有完全add完成，可替換成next(to)，重新進入router.beforeEach這個鉤子，這時候再通過next()來釋放鉤子，就能確保所有的路由都已經掛在完成了。
Q：$router.addRoutes()動態添加的路由怎么刪除掉？
在開發中，有新增編輯刪除菜單并要求左側邊欄菜單及時更新的需求，如果直接addRoutes，warn如下：
解決：addRoutes之前要清除掉上次addRoutes的路由，所以操作菜單調取權限后重新初始化router，進行matcher賦值
// DynamicRoutes是權限路由
const createRouter = () => new Router({
mode: 'hash',
routes: []
})
const newRouter = createRouter()
// resetRouter()
this.$router.matcher = newRouter.matcher
this.$router.addRoutes(DynamicRoutes)
Q：莫名其妙的無限循環
vue-admin-template，遇到二級菜單children為空的權限，報錯如下：
解決：按照github-issues上方法，在SidebarItem.vue里改一下data就好了（沒想通為啥）
// 更改后如下，return {}
data() {
this.onlyOneChild = null
return {}
}
附：ChecAndSetPermissionRouter
import { dynamicRouterMap } from '@/router'
export function ChecAndSetPermissionRouter(permissionDatas) {
// 獲取到權限hashmap
var permissionHashMap = null
permissionHashMap = GetPermissionHashMap(permissionDatas)
// 標記路由表
var newDynamicRouterMap = []
newDynamicRouterMap = objDeepCopy(dynamicRouterMap)
newDynamicRouterMap.forEach(item => {
MarkRouter(null, item, permissionHashMap)
})
// 重設路由表
for (let i = 0; i < newDynamicRouterMap.length; i++) {
if (ResetRouter(newDynamicRouterMap, newDynamicRouterMap[i])) {
i-- // 注意：防止移除后索引錯位
}
}
return newDynamicRouterMap
}
function GetPermissionHashMap(permissionDatas) {
var permissionHashMap = {}
permissionDatas.forEach(item => {
SetKeyValueOfNodes(null, item, permissionHashMap)
})
return Object.assign({}, permissionHashMap)
}
// 深拷貝，遞歸重新設置前端路由表，避免數據復用
function objDeepCopy(source) {
var sourceCopy = source instanceof Array ? [] : {}
for (var item in source) {
sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]
}
return sourceCopy
}
// 為權限hashmap的屬性賦值,新增屬性tempKey/tempKey2
function SetKeyValueOfNodes(p, c, permissionHashMap) {
// 需要匹配的組合類型
var tempKey = (p ? p.name : 0) + '' + c.name
var tempKey2 = c.name + '' + c.name
// 賦值
permissionHashMap[tempKey] = 1
permissionHashMap[tempKey2] = 1
// 遞歸遍歷子節點賦值
if (c.children != null && c.children.length > 0) {
c.children.forEach(item => {
SetKeyValueOfNodes(c, item, permissionHashMap)
})
}
}
// 標記路由表
function MarkRouter(p, c, permissionHashMap) {
var key = (p ? p.meta.title : 0) + '_' + c.meta.title
// 使用拼接的key作為參考標記去匹配有權限的路由表
if (HasPermission(key, permissionHashMap)) {
if (p != null) {
p.keep = true // 保留當前節點
}
if (c != null) {
c.keep = true
}
}
if (c.children && c.children.length > 0) {
c.children.forEach(item => {
MarkRouter(c, item, permissionHashMap)
})
}
}
// 校驗后端接口是否存在當前節點
function HasPermission(key, permissionHashMap) {
return permissionHashMap[key] === 1
}
// 重置路由表
function ResetRouter(p, c) {
if (c == null) {
return false
}
if (p.children && !c.keep) {
p.children.splice(p.children.indexOf(c), 1)
return true
} else if (!c.keep) {
p.splice(p.indexOf(c), 1)
return true
}
if (c.children && c.children.length > 0) {
for (let i = 0; i < c.children.length; i++) {
if (ResetRouter(c, c.children[i])) {
i-- // 注意：防止移除后索引錯位
}
}
}
return false
}
禁用繼承屬性inheritAttrs和$attrs的使用
Index.html:
<div id="app">
<test-input
v-bind:class="class1"
v-bind:style="{fontSize:17+'px'}"
v-bind:test1='test1'
test2="test2"
placeholder="placeholder test3"
></test-input>
</div>
Index.js:
Vue.component('test-input', {
inheritAttrs: false,
template: <label ><br /> <p v-bind="$attrs">測試</p><br /> <input v-bind="$attrs"><br /> </label>
})
new Vue({
el:'#app',
data:{
class1:'class1note',
test1:'test1note',
test2:'test2note',
},
})
頁面結果：
當將屬性修改為：inheritAttrs: true,的時候
頁面的結果：
包含了所有的屬性：
最后總結：
當inheritAttrs的屬性值為true（不寫該行屬性的結果同true，也就是inheritAttrs默認為true），組件的根元素會自動繼承所有的屬性！當為false的時候，根元素只會繼承注冊的屬性，自建的屬性不會繼承！！
attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“ attrs:它包含了父組件所有的自建屬性！可以通過v-kind=“attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“attrs”將所有自建屬性賦給想要的元素上！！
重分組介紹
語法：<?for-each-group: BASE-GROUP;GROUPING-ELEMENT?>
用法：重分組可以把XML數據做重新分組，這樣數據的展示就不一定必須按照XML數據的結構顯示。例如原來的XML數據結構是CD類別->CD信息（名稱，年份，國家，價格），我們可以用重分組功能按CD年份->CD國家來顯示.
重分組應用
1 按照和XML數據不同的結構顯示數據
XML數據格式如下：
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
。。。。。
</CATALOG>
報表打算按照國家和年份重新分組，用到的重分組如下：
<?for-each-group:CD;COUNTRY?>
<?for-each:current-group();YEAR?>
1
2
這里的current-group()表示當前COUNTRY組下的子分組
2 顯示PIVOT報表
XML數據如下：
<ROWSET>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>1000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2005</YEAR>
<QUARTER>Q2</QUARTER>
<SALES>2000</SALES>
</RESULTS>
<RESULTS>
<INDUSTRY>Motor Vehicle Dealers</INDUSTRY>
<YEAR>2004</YEAR>
<QUARTER>Q1</QUARTER>
<SALES>3000</SALES>
</RESULTS>
。。。。
</ROWSET>
如果想按年份生成PIVOT表，可以用如下TAG實現：
<?for-each-group@column:RESULTS;YEAR?>
<?YEAR?>
<?end for-each-group?>
<?for-each-group:RESULTS;INDUSTRY?>
<?for-each-group@cell:current-group();YEAR?>
<?sum(current-group()//SALES)?>
<?end for-each-group?>
<?end for-each-group?>
這里的@cell是給每個組生成一個CELL
vue中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎組件了”，于是就關閉了vue說明文檔。
實際上，插槽的概念很簡單，下面通過分三部分來講。這個部分也是按照vue說明文檔的順序來寫的。
進入三部分之前，先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題這里就點出來了，是顯示不顯示和怎樣顯示。
由于插槽是一塊模板，所以，對于任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個空殼子，因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板將來就顯示在哪塊。
首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設置name屬性。
單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了。
下面通過一個例子來展示。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
<h3>這里是子組件</h3>
-
<slot></slot>
-
</div>
-
</template>
在這個例子里，因為父組件在<child></child>里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。
-
<div class="tmpl">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
最終的渲染結果如圖所示：
-
-
注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。
匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的組件，這三個插槽被父組件用同一套css樣式顯示了出來，不同的是內容上略有區別。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<child>
-
<div class="tmpl" slot="up">
-
<span>菜單1</span>
-
<span>菜單2</span>
-
<span>菜單3</span>
-
<span>菜單4</span>
-
<span>菜單5</span>
-
<span>菜單6</span>
-
</div>
-
<div class="tmpl" slot="down">
-
<span>菜單-1</span>
-
<span>菜單-2</span>
-
<span>菜單-3</span>
-
<span>菜單-4</span>
-
<span>菜單-5</span>
-
<span>菜單-6</span>
-
</div>
-
<div class="tmpl">
-
<span>菜單->1</span>
-
<span>菜單->2</span>
-
<span>菜單->3</span>
-
<span>菜單->4</span>
-
<span>菜單->5</span>
-
<span>菜單->6</span>
-
</div>
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
// 具名插槽
-
<slot name="up"></slot>
-
<h3>這里是子組件</h3>
-
// 具名插槽
-
<slot name="down"></slot>
-
// 匿名插槽
-
<slot></slot>
-
</div>
-
</template>
顯示結果如圖：
可以看到，父組件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板默認關聯匿名插槽。
最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數據的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫
-
匿名插槽
-
<slot></slot>
-
具名插槽
-
<slot name="up"></slot>
但是作用域插槽要求，在slot上面綁定數據。也就是你得寫成大概下面這個樣子。
-
<slot name="up" :data="data"></slot>
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
},
-
}
我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。
-
<child>
-
html模板
-
</child>
寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內容呢？
正因為作用域插槽綁定了一套數據，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內容可以顯示子組件插槽綁定的。
我們再來對比，作用域插槽和單個插槽和具名插槽的區別，因為單個插槽和具名插槽不綁定數據，所以父組件是提供的模板要既包括樣式由包括內容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內容；而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數據的前提下）。
下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數據，數據使用的都是子組件插槽自己綁定的那個人名數組。
父組件：
-
<template>
-
<div class="father">
-
<h3>這里是父組件</h3>
-
<!--第一次使用：用flex展示數據-->
-
<child>
-
<template slot-scope="user">
-
<div class="tmpl">
-
<span v-for="item in user.data">{{item}}</span>
-
</div>
-
</template>
-
-
</child>
-
-
<!--第二次使用：用列表展示數據-->
-
<child>
-
<template slot-scope="user">
-
<ul>
-
<li v-for="item in user.data">{{item}}</li>
-
</ul>
-
</template>
-
-
</child>
-
-
<!--第三次使用：直接顯示數據-->
-
<child>
-
<template slot-scope="user">
-
{{user.data}}
-
</template>
-
-
</child>
-
-
<!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
-
<child>
-
我就是模板
-
</child>
-
</div>
-
</template>
子組件：
-
<template>
-
<div class="child">
-
-
<h3>這里是子組件</h3>
-
// 作用域插槽
-
<slot :data="data"></slot>
-
</div>
-
</template>
-
-
export default {
-
data: function(){
-
return {
-
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
-
}
-
}
-
}
結果如圖所示：
以上三個demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。
https://github.com/cunzaizhuyi/vue-slot-demo
hexo pc機上的配置 (一切操作都是在git bash)
安裝git
安裝nodejs
安裝hexo
備注：用 npm 安裝話經常出現卡住而導致無法正常安裝，解決辦法就是修改 npm 的安裝源，
這里選擇淘寶 NPM 鏡像，這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本，同步頻
率目前為 10分鐘 一次以保證盡量與官方服務同步。
npm config set registry https://registry.npm.taobao.org
創建 你的Hexo 目錄
mkdir "your hexo dir name"
//創建一個自定義的hexo目錄，比如我就在用戶根目錄創建了一個myhexo文件夾（macOS）
cd "your hexo dir name" //進入到剛剛創建的目錄
安裝 hexo-cli
npm install -g hexo-cli
初始化該文件夾
hexo init
安裝hexo的擴展插件
npm install
等執行成功以后安裝兩個插件， hexo-deployer-git 和 hexo-server ,這倆插件的作用分別是使用Git自動部署，和本地簡單的服務器。
npm install hexo-deployer-git --save
npm install hexo-server --save
到這里hexo的本地搭建已經基本結束了。
打開hexo
hexo g
hexo server
git用戶
創建以用于提交
git config --global user.name "yourname"
git config --global user.email "youremail
生成ssh公鑰密鑰
cd ~/.ssh
ssh-keygen -t rsa -C "你的email"
-----------------------------------------------------------------------------------------------------------------
linux (ubuntu + 阿里云) 服務器上的配置
安裝nginx
切換至root用戶
sudo su root
apt-get install nginx
查看nginx版本
nginx -v
啟動nginx
service nginx start
可以查看nginx的端口號
ps -aux | grep nginx
啟動后，在網頁重輸入ip地址，即可看到nginx的歡迎頁面。至此nginx安裝成功
cd /etc/nginx
vim sites-available/default
因為我們是拿nginx做 Web 服務器，所以我們需要安裝部署好nginx,我們可以專門為hexo創建一個部署目錄，比如我創建了/home/xufushen/hexo文件夾，并把nginx的配置文件nginx.conf中的部署目錄改為/home/xufushen/hexo，配置文件在/etc/nginx/conf里；同樣可以使用默認目錄，nginx的默認目錄為/var/www/html.
安裝node.js
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
apt-get install -y nodejs
安裝git
apt-get install -y git
創建一個git用戶
sudo adduser git
雖說現在的倉庫只有我們自己在使用，新建一個 git 用戶顯得不是很有必要，但是為了安全起見，還是建議使用單獨的 git 用戶來專門運行 git 服務
添加證書登入
mkdir .ssh
mkdir authorized_keys
剛在在本地創建或者已經擁有的公鑰，也就是 ~/.ssh/id_rsa.pub 文件里的內容添加到服務器的 /home/git/.ssh/authorized_keys 文件中，如上所說，添加公鑰之后可以防止每次 push 都輸入密碼。 (使用Xftp軟件直接將文件拖入)
初始化 Git 倉庫
可以將git倉庫放到自定義位置，我是將其放在 /xufushen/blog/ 目錄下的
sudo mkdir /xufushen/blog/
cd /xufushen/blog/
git init --bare blog.git
使用 --bare 參數，Git 就會創建一個裸倉庫，裸倉庫沒有工作區，我們不會在裸倉庫上進行操作，它只為共享而存在。
配置 git hooks
我們這里要使用的是 post-receive 的 hook，這個 hook 會在整個 git 操作過程完結以后被運行.關于hooks的內容詳情點擊這里
在 blog.git/hooks 目錄下新建一個 post-receive 文件
cd /var/repo/blog.git/hooks
編輯這個文件
vim post-receive
設置這個文件的可執行權限
chmod +x post-receive
改變 blog.git 目錄的擁有者為 xufushen 用戶
chown -R xufushen:gxufushenit blog.git
禁用 xufushen 用戶的 shell 登錄權限
出于安全考慮，我們要讓 xufushen 用戶不能通過 shell 登錄?？梢跃庉?/etc/passwd 來實現
vim /etc/passwd
#將
git:x:1001:1001:,,,:/home/git:/bin/bash
#改成
git:x:1001:1001:,,,:/home/git:/usr/bin/git-shell
這樣 xufushen 用戶可以通過 ssh 正常使用 git，但是無法登錄 shell。 至此，服務器環境的搭建已經基本結束。
配置本地_config.yml文件,完成自動化部署
配置 hexo 的 deploy
修改 hexo 目錄下的 _config.yml 找到 deploy, 修改為：
deploy:
ype: git
repo: xufushen@47.100.184.175:/home/xufushen/blog/blog.git
branch: master
repo的地址為你自己的地址以及 git 倉庫目錄
使用hexo blog
新建文章：
hexo new "post name"
生成 & 部署：
hexo clean && hexo g && hexo d
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在搭建的過程遇到的問題
連到服務器后無法連接到repository
這是因為你在創建blog.git與hexo文件時要把的歸屬用戶與用戶組更改為創建的用戶
UML類圖幾種關系的總結，泛化 = 實現 > 組合 > 聚合 > 關聯 > 依賴
在UML類圖中，常見的有以下幾種關系: 泛化（Generalization）, 實現（Realization），關聯（Association)，聚合（Aggregation），組合(Composition)，依賴(Dependency)
泛化（Generalization）
【泛化關系】：是一種繼承關系，表示一般與特殊的關系，它指定了子類如何特化父類的所有特征和行為。例如：老虎是動物的一種，即有老虎的特性也有動物的共性。
【箭頭指向】：帶三角箭頭的實線，箭頭指向父類
實現（Realization）
【實現關系】：在這里插入圖片描述是一種類與接口的關系，表示類是接口所有特征和行為的實現.
【箭頭指向】：帶三角箭頭的虛線，箭頭指向接口
關聯（Association)
【關聯關系】：是一種擁有的關系，它使一個類知道另一個類的屬性和方法；如：老師與學生，丈夫與妻子關聯可以是雙向的，也可以是單向的。雙向的關聯可以有兩個箭頭或者沒有箭頭，單向的關聯有一個箭頭。
【代碼體現】：成員變量
【箭頭及指向】：帶普通箭頭的實心線，指向被擁有者
上圖中，老師與學生是雙向關聯，老師有多名學生，學生也可能有多名老師。但學生與某課程間的關系為單向關聯，一名學生可能要上多門課程，課程是個抽象的東西他不擁有學生。
聚合（Aggregation）
【聚合關系】：是整體與部分的關系，且部分可以離開整體而單獨存在。如車和輪胎是整體和部分的關系，輪胎離開車仍然可以存在。
聚合關系是關聯關系的一種，是強的關聯關系；關聯和聚合在語法上無法區分，必須考察具體的邏輯關系。
【代碼體現】：成員變量
【箭頭及指向】：帶空心菱形的實心線，菱形指向整體
小技巧：空心菱形表示聚合，好聚好散，所以生命周期可以不同。
組合(Composition)
【組合關系】：是整體與部分的關系，但部分不能離開整體而單獨存在。如公司和部門是整體和部分的關系，沒有公司就不存在部門。
組合關系是關聯關系的一種，是比聚合關系還要強的關系，它要求普通的聚合關系中代表整體的對象負責代表部分的對象的生命周期。
【代碼體現】：成員變量
【箭頭及指向】：帶實心菱形的實線，菱形指向整體
依賴(Dependency)
【依賴關系】：是一種使用的關系，即一個類的實現需要另一個類的協助，所以要盡量不使用雙向的互相依賴.
【代碼表現】：局部變量、方法的參數或者對靜態方法的調用
【箭頭及指向】：帶箭頭的虛線，指向被使用者
各種關系的強弱順序：
泛化 = 實現 > 組合 > 聚合 > 關聯 > 依賴
下面這張UML圖，比較形象地展示了各種類圖關系：
在這里主要是跟大家介紹一下在js中如何使用異常捕獲機制，包括try，catch，finally與我們主動拋出異常throw的用法
使用異常捕獲機制可以讓我們在項目中對一些可能出錯的地方作出一些預防措施，讓我們能夠更加快速精準的找出代碼錯誤，
也能夠讓我們后面的代碼不受前面的錯誤影響繼續執行，話不多說，看代碼，圖解在下方。
<script>
console.log(1)
try {
console.log(2)
console.log(num) // 出錯，那么try塊級語句出錯地方后面的代碼都不會執行
console.log(3)
} catch (e) { // e就是try語句中出錯的錯誤信息，我們可以在這里捕獲到并做處理
console.log(e)
} finally { // finally里面的代碼不管前面是否出錯都會執行
console.log(4)
}
console.log(5) // try里面出錯并不會影響外層代碼的執行
console.log('-------------------------------------------------')
function test() {
var a = true
if (a) {
throw '出錯啦??！' // throw是我們主動拋出異常，后面可跟字符串或者對象
}
console.log(6) // 這里的代碼在上面拋出異常之后就不會被執行
}
try {
console.log(7)
test()
console.log(8)
} catch (e) {
console.log(e) // 上面我們主動拋出錯誤，所以e就相當于我們拋出錯誤的內容
}
console.log(9)
</script>
一、HTML簡介
HTML 俗稱網頁，就是我們打開瀏覽器訪問任何一個網站所看到的都是由 HTML 頁面提供的（或者與 HTML 技術相關的內容提供）。
HTML 全稱為 HyperText Markup Language，被譯為超文本標記語言。所謂的超文本就是不僅只有文本內容，包括鏈接、音頻和視頻、圖像等內容。所謂標記語言，簡單來說就是元素。也就是說，HTML 提供一系列的元素來構成一個頁面中最基礎的內容。
HTML 是一種描述 Web 文檔結構和語義的語言，它由元素組成，每個元素可以有一些屬性或文本。
當你保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 文件后綴。
編寫HTML代碼的工具：
記事本
sublime text
hbuilder
webstorm
vscode
pycharm – python代碼 也可以寫html代碼
二、第一張網頁
一個頁面有且只有一個根標簽是html， 元素一般包含 和 兩個元素，也就是 HTML 的頭部和主體內容。
<html>
<head>
<title>網頁的標題</title>
</head>
<body>
<!-- 這是一個文本框 -->
<input type="text"></input>
</body>
</html>
1
2
3
4
5
6
7
8
9
HTML標簽：由尖括號包圍：
成對出現： <p></p> ,即開標簽和閉標簽.
屬性： 定義在開標簽中，如input標簽中的type屬性
簡寫： 開閉標簽之間的內容是標簽體，如果標簽體為空，則可以簡寫：
注釋： 是注釋標簽
HTML文檔在瀏覽器中被解釋運行,展示的不是源碼而是渲染之后的效果
三、HTML頭部
< head > 元素包含了當前 HTML 頁面的所有頭部元素，在 < head > 元素內必須定義 < title > 元素，還可以定義 < script >、< link > 等元素。
這些 HTML 的頭部元素定義了當前頁面的標題、編碼、使用的腳本或樣式等信息。
1、title元素
< title >元素定義了當前HTML頁面的標題
<title>百度一下，你就知道</title>
1
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AGycI1jQ-1578023422160)(HTML.assets/1530668619163.png)]
2、meta元素
元素提供了 HTML 頁面的元數據（Metadata），元數據是存儲數據的信息。
通常用于設置頁面的編碼、描述、關鍵詞、作者等信息。
元素不會顯示在頁面中，但會被瀏覽器解析。
2.1 定義網頁內容的編碼格式
<meta charset="utf-8">
1
2.2 定義HTML頁面關鍵字，用于搜索引擎
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
1
2.3 定義HTML頁面描述
<meta name="description" content="百知教育IT培訓,java培訓,PHP培訓,UI培訓,H5培訓,linux培訓,大數據培訓,Python人工智能,IT行業培訓領跑者,高薪就業 ">
1
2.4 定義HTML頁面作者
<meta name="author" content="百知教育">
1
四、HTML主體
1、body元素
標簽定義文檔的主體。 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等）。body元素中包含的內容（子標簽）是用戶可以看到的。
一個 HTML 文件只能存在一個 標簽。
2、HTML元素基本構成
2.1 元素類型
HTML 是標記語言，所謂標記就是指頁面中的元素（元素也可以叫做標簽）。一個完整的 HTML 頁面都是由眾多不同的元素組成的。
閉合元素：必須包含開始元素和結束元素，如果沒有結束元素會產生意料之外的錯誤。
<title>百知教育Python人工智能培訓</title>
<p>這是一個段落標簽</p> <!--該標簽的作用是表示一個段落，會有換行-->
1
2
空元素：也可以叫做單元素，只需要開始元素，而不需要結束元素。
<meta name="description" content="渥瑞達Web前端培訓">
<br/> <!-- 換行 -- >
1
2
3
2.2 HTML屬性
屬性是設置在HTML元素中的，用于為元素添加附加信息。屬性一般都是定義在開始元素中，并且是以“名稱/值”對出現
<input type="text" /> <!-- 這是一個文本框 -->
<input type="button" value="點我" /> <!-- 這是一個按鈕 -->
1
2
3
五、HTML文本
1、標題元素
HTML 提供了 6 個標題元素，由大到小依次為 <h1> 到 <h6>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
1
2
3
4
5
6
7
8
9
10
11
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Gpmb9nTx-1578023422163)(HTML.assets/1530670234313.png)]
2、段落
元素定義段落
: 瀏覽器會自動地在段落的前后添加空行 ```html
這是一個段落.
1
這是另一個段落.
注意： 在html中手動換行無效<br />
<br />
3、換行<br />
元素定義的段落內容是不會自動換行的，如果換行需要使用 br 元素<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LbaNYf1L-1578023422165)(HTML.assets/1530670731312.png)]<br />
<br />
4、水平線<br />
在瀏覽器中顯示一條水平線（分隔線）效果。<br />
屬性：size=“10” color=“red” width=“100px 或者 50%” align=“left/right/center”<br />
<br />
10像素高 顏色 寬度 對齊方式<br />
<br />
<body><br />
<span style="white-space:pre;"> </span>生活賦予我們一種巨大的和無限高貴的禮品，這就是青春：充滿著力量，充滿著期待志愿，充滿著求知和斗爭的志向，充滿著希望信心和青春。<br />
<span style="white-space:pre;"> </span><br><br />
<span style="white-space:pre;"> </span><hr size="1" width="100%" color="red"/><br />
<span style="white-space:pre;"> </span>人所缺乏的不是才干而是志向，不是成功的能力而是勤勞的意志。<br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nK6UOf0r-1578023422166)(HTML.assets/1530671029915.png)]<br />
<br />
5、文本修飾<br />
5.1 粗體字<br />
這是一段正常未加粗的文本內容.<br />
<br><br />
<b>這是一段加粗之后的文本內容.</b><br />
<br><br />
<strong>粗體--著重強調</strong><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Va3GdgFK-1578023422168)(HTML.assets/1530672074778.png)]<br />
<br />
5.2 斜體字<br />
<i>這是一段斜體的文本內容.</i><br />
1<br />
5.3 下劃線<br />
<body><br />
<span style="white-space:pre;"> </span>證明人：<u>百知教育</u><br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-aJY0EaxC-1578023422169)(HTML.assets/1530671768110.png)]<br />
<br />
5.4 刪除線<br />
<body><br />
<span style="white-space:pre;"> </span><del>這是一段要被刪除的文字</del><br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-X4f2bCuN-1578023422172)(HTML.assets/1530671905293.png)]<br />
<br />
5.5 下標文字<br />
<body><br />
<span style="white-space:pre;"> </span>H<sub>2</sub>O<br />
</body><br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-E8DEONkQ-1578023422179)(HTML.assets/1530672009385.png)]<br />
<br />
5.6 上標文字<br />
32 = 9<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NTEZhEkv-1578023422180)(HTML.assets/1530672138124.png)]<br />
<br />
5.7 小號字<br />
正常文字<br />
<small>小號文字</small><br />
1<br />
2<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6KckvEOc-1578023422182)(HTML.assets/1530672191397.png)]<br />
<br />
5.8 大號字<br />
<body><br />
<span style="white-space:pre;"> </span><small>小號文字</small><br />
<span style="white-space:pre;"> </span>正常文字<br />
<span style="white-space:pre;"> </span><big>大號文字</big><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCJaBbhq-1578023422184)(HTML.assets/1530672254286.png)]<br />
<br />
六、圖像與鏈接<br />
1、圖像元素<br />
元素引入外部圖像， 元素是空元素。<br />
<br />
1.1 src屬性<br />
<span style="white-space:pre;"> </span>src 屬性（必需），表示引入圖像的 URL 地址。<br />
<br />
<img src="images/img.png"><br />
1<br />
圖像可以是本地地址，也可以是網絡地址。<br />
<br />
<img src="https://himg.bdimg.com/sys/portrait/item/c8764d725f6c6963656e6365g872fc876872f.jpg"><br />
1<br />
1.2 圖像大小<br />
width 和 height 屬性用于設置圖像顯示的寬度和高度。<br />
<br />
<img src="img.png" width="350" height="233" /><br />
1<br />
1.3 圖像定位(了解)<br />
align 屬性用于設置圖像顯示的位置。<br />
<br />
left：水平方向居左。<br />
right：水平方向居右。<br />
top：垂直方向居上。<br />
bottom：垂直方向居下。<br />
middle：居中。<br />
<img src="img.png" width="350" height="233" align="right" /><br />
1<br />
1.4 alt屬性<br />
<img src="abcdef.png" alt="無法加載圖片"/><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-evR6GiGo-1578023422185)(HTML.assets/1530673186561.png)]<br />
<br />
2、超鏈接<br />
2.1 用法<br />
href 屬性（必需），表示指定跳轉的 URL 地址<br />
<br />
<a >百知教育</a><br />
1<br />
2.2 打開方式： target 屬性<br />
元素的 target 屬性用于設置鏈接的打開方式。<br />
<br />
_blank：在新窗口打開鏈接。<br />
_self：在當前窗口打開鏈接。<br />
<a target="_blank">百知教育</a><br />
1<br />
2.3 錨點<br />
<body><br />
<span style="white-space:pre;"> </span><a name="postion"></a> <!-- 定義錨點 --><br />
<span style="white-space:pre;"> </span><!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#postion">定位到postion的位置</a> <!-- 鏈接到錨點 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
2.4 回到頂部的空鏈接<br />
<body><br />
<span style="white-space:pre;"> </span><!-- 頁面其它內容<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span>...<br />
<span style="white-space:pre;"> </span> --><br />
<span style="white-space:pre;"> </span><a href="#">回到頂部</a> <!-- 回到頂部 --><br />
</body><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
七、列表<br />
1、無序列表<br />
1.1 定義無序列表<br />
元素定義無序列表，用于列出頁面上沒有特定次序的條目。<br />
<ul><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-8MFYHQJB-1578023422187)(HTML.assets/1530684550787.png)]<br />
<br />
1.2 type屬性<br />
定義列表的項目符號的類型<br />
<br />
disc：實心圓，默認值。<br />
circle：空心圓。<br />
square：實心矩形。<br />
<ul type="circle"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ul><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-gCwhGGdG-1578023422188)(HTML+CSS_pic/1530684771419.png)]<br />
<br />
2、有序列表<br />
2.1 定義有序列表<br />
<ol><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ofA5U8WE-1578023422190)(HTML.assets/1530684878880.png)]<br />
<br />
2.2 type屬性<br />
1：數字值，默認值。<br />
a 或 A：小寫或大寫字母。<br />
i 或 I：小寫或大寫羅馬數字。<br />
<ol type="a"><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>北京市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>上海市</li><span style="white-space:pre;"> </span><br />
<span style="white-space:pre;"> </span><li>重慶市</li><br />
</ol><br />
1<br />
2<br />
3<br />
4<br />
5<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3l1LPm9P-1578023422191)(HTML.assets/1530685009075.png)]<br />
<br />
3、自定義列表<br />
<dl><br />
<dt>北京</dt><br />
<dd>海淀</dd><br />
<dd>昌平</dd><br />
<dd>朝陽</dd><br />
<dt>廣東</dt><br />
<dd>廣州</dd><br />
<dd>深圳</dd><br />
<dd>東莞</dd><br />
</dl><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
八、表格<br />
1、表格使用<br />
表格由 < table > 標簽來定義。每個表格均有若干行（由 標簽定義），每行被分割為若干單元格（由 標簽定義）。<br />
<br />
<table><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JL9Sjv2t-1578023422196)(HTML.assets/1530685462072.png)]<br />
<br />
2、表格屬性<br />
屬性名稱<span style="white-space:pre;"> </span>描述<br />
width 和 height<span style="white-space:pre;"> </span>設置表格的寬度和高度<br />
align<span style="white-space:pre;"> </span>設置表格的對齊方式<br />
border<span style="white-space:pre;"> </span>設置表格的邊框寬度<br />
bgcolor<span style="white-space:pre;"> </span>設置表格的背景顏色<br />
cellpadding<span style="white-space:pre;"> </span>設置內邊距（單元格邊框與內容之間的距離）<br />
cellspacing<span style="white-space:pre;"> </span>設置外邊距（單元格之間的距離）<br />
bordercolor<span style="white-space:pre;"> </span>邊框顏色<br />
<table border="1" cellspacing="0" bgcolor="gray" bordercolor="red" width="300px" height="100px" align="left"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3bucqAYt-1578023422198)(HTML.assets/1530685943196.png)]<br />
<br />
3、tr元素<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、left、center<span style="white-space:pre;"> </span>左右對齊方式<br />
valign<span style="white-space:pre;"> </span>top 、middle 、bottom<span style="white-space:pre;"> </span>垂直對齊方式<br />
bgcolor<span style="white-space:pre;"> </span>rgb(xxx,xxx,xxx)、colorName<span style="white-space:pre;"> </span>背景顏色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr align="center"><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr align="right" valign="top" bgcolor="blue"><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-737Gkc1r-1578023422199)(HTML.assets/1530695272576.png)]<br />
<br />
4、td元素<br />
元素是定義表格的數據單元格。<br />
屬性名稱<span style="white-space:pre;"> </span>值<span style="white-space:pre;"> </span>描述<br />
align<span style="white-space:pre;"> </span>right、center、left<span style="white-space:pre;"> </span>設置水平對齊方式<br />
valign<span style="white-space:pre;"> </span>top、middle、bottom<span style="white-space:pre;"> </span>設置垂直對齊方式<br />
width和height<span style="white-space:pre;"> </span>pixels 、%<span style="white-space:pre;"> </span>設置單元格的寬和高<br />
colspan和rowspan<span style="white-space:pre;"> </span>number<span style="white-space:pre;"> </span>設置單元格的跨列和跨行數量<br />
bgcolor<span style="white-space:pre;"> </span>rbg()、colorName<span style="white-space:pre;"> </span>單元格背景色<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td align="center">第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td valign="top">第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td width="300px">第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td bgcolor='red'>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-IcLpE6Ii-1578023422201)(HTML.assets/1530697152946.png)]<br />
<br />
合并行和列<br />
<br />
<table border="1" cellspacing="0" width="500px" height="200px"><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td colspan="2">第2行，第1列</td><span style="white-space:pre;"> </span> <br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第3行，第1列</td><br />
<span style="white-space:pre;"> </span><td rowspan="2">第3行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第4行，第1列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-z6ythYQ4-1578023422203)(HTML.assets/1530697074613.png)]<br />
<br />
5、表格標題caption<br />
元素用于定義表格的標題，必須緊隨 元素之后，且只能對每個表格定義一個標題。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>表格標題</caption><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第1行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第1行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>第2行，第1列</td><br />
<span style="white-space:pre;"> </span><td>第2行，第2列</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-V3X7gcxe-1578023422204)(HTML.assets/1530697414224.png)]<br />
<br />
6、表頭thead、tbody表主體、tfoot表腳注<br />
標簽定義表格的表頭。<br />
<table border="1" cellspacing="0" width="500px" height="100px"><br />
<span style="white-space:pre;"> </span><caption>信息</caption><br />
<span style="white-space:pre;"> </span><thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><th>姓名</th> <!-- 定義表頭單元格 會加粗顯示 --> <br />
<span style="white-space:pre;"> </span><th>性別</th><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span></thead><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Tom</td><br />
<span style="white-space:pre;"> </span><td>boy</td><br />
<span style="white-space:pre;"> </span></tr><br />
<span style="white-space:pre;"> </span><tr><br />
<span style="white-space:pre;"> </span><td>Linda</td><br />
<span style="white-space:pre;"> </span><td>girl</td><br />
<span style="white-space:pre;"> </span></tr><br />
</table><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
tfoot 元素應該與 thead 和 tbody 元素結合起來使用。 （比較少用）<br />
<br />
九、表單<br />
1、form 元素<br />
表單用標簽描述，表單內部可以有多個子標簽，用來完成用戶信息的收集，并發送請求給服務器。<br />
<br />
屬性：action=“xxx” method=“get/post”<br />
<br />
請求地址 請求方式<br />
<br />
http://www.baidu.com?uname=abc&passwd=123<br />
<form action="http://www.baidu.com" method="get"><br />
<span style="white-space:pre;"> </span>username:<input type="text" name="uname" id="uname115"/><br/> # abc<br />
<span style="white-space:pre;"> </span>password:<input type="text" name="passwd" id="pwd115"/><br/> # 123<br />
<span style="white-space:pre;"> </span><input type="submit" value="提交" id="sub115"/><br />
</form><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
2、表單元素<br />
元素有很多不同類型，根據不同的 type 屬性來決定。<br />
<br />
用戶名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nLWfznhF-1578023422206)(HTML.assets/1530757524606.png)]<br />
<br />
type屬性：<br />
類型名稱<span style="white-space:pre;"> </span>描述<br />
text<span style="white-space:pre;"> </span>文本輸入框<br />
password<span style="white-space:pre;"> </span>密碼框<br />
radio<span style="white-space:pre;"> </span>單選按鈕<br />
checkbox<span style="white-space:pre;"> </span>復選框<br />
button<span style="white-space:pre;"> </span>按鈕<br />
submit<span style="white-space:pre;"> </span>提交按鈕<br />
reset<span style="white-space:pre;"> </span>重置按鈕<br />
file<span style="white-space:pre;"> </span>文件域<br />
name屬性 ：標簽的普通的屬性，相當于別名，是每個輸入控件的重要屬性==請求參數名。<br />
<br />
id屬性 ： 標簽的唯一標識名，不能重復。<br />
<br />
value屬性 ：標簽的普通屬性，是中藥屬性==請求參數值。<br />
<br />
2.1 文本框<br />
用戶名：<input type="text" name="txt" /> <!-- text表示文本框--><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-H6IYvY3p-1578023422207)(HTML.assets/1530758139189.png)]<br />
<br />
用戶名：<input type="text" name="pwd" value="Mr_lee" maxlength="10" readonly="readonly" /><br />
1<br />
2.2 密碼框<br />
密碼：<input type="password" name="pwd" value="123456" /><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7Nk9Lys0-1578023422208)(HTML.assets/1530758213655.png)]<br />
<br />
2.3 單選按鈕<br />
<!-- name：值必須一樣，value：表示提交表單時的值 checked:默認選中--><br />
<input type="radio" name="sex" value="1">男 <br />
<input type="radio" name="sex" value="0" checked="checked">女<br />
1<br />
2<br />
3<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XP3i844U-1578023422210)(HTML.assets/1530758647865.png)]<br />
<br />
2.4 復選框<br />
<input type="checkbox" name="course" value="Mysql">Mysql<br />
<input type="checkbox" name="course" value="HTML">HTML<br />
<input type="checkbox" name="course" value="Linux">Linux<br />
<input type="checkbox" name="course" value="Django">Django<br />
1<br />
2<br />
3<br />
4<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-r5mPRrZ3-1578023422211)(HTML.assets/1530758924865.png)]<br />
<br />
2.5 按鈕<br />
<input type="button" name="btn" value="點我"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ozchiqAW-1578023422214)(HTML.assets/1530759170832.png)]<br />
<br />
2.6 提交按鈕<br />
<input type="submit" name="sub_btn" value="提交"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kIOKVxLo-1578023422215)(HTML.assets/1530759206331.png)]<br />
<br />
2.7 重置按鈕<br />
<input type="reset" name="set_btn" value="重置"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-cG06duKx-1578023422217)(HTML.assets/1530759252821.png)]<br />
<br />
2.8 文件域<br />
<br />
<input type="file"><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-mHkQp3fZ-1578023422219)(HTML.assets/1530759404657.png)]<br />
<br />
2.9 文本域<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-406qSTUX-1578023422221)(HTML.assets/1530759866508.png)]<br />
<br />
3、下拉選框<br />
選擇課程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b9rrRffX-1578023422222)(HTML.assets/1530759604602.png)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-9sgjtXvT-1578023422223)(HTML.assets/1530759682014.png)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>®<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
ile"><br />
<br />
<br />
[外鏈圖片轉存中...(img-mHkQp3fZ-1578023422219)]<br />
<br />
##### 2.9 文本域<br />
<br />
```html<br />
<textarea name="txtInfo" rows="4" cols="20">aa</textarea><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
[外鏈圖片轉存中…(img-406qSTUX-1578023422221)]<br />
<br />
3、下拉選框<br />
選擇課程：<br />
<select name="course"><br />
<span style="white-space:pre;"> </span><option value="1">Java</option><br />
<span style="white-space:pre;"> </span><option value="2" selected="selected">C++</option><br />
<span style="white-space:pre;"> </span><option value="3">PHP</option><br />
</select><br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
[外鏈圖片轉存中…(img-b9rrRffX-1578023422222)]<br />
<br />
4、表單綜合實例<br />
[外鏈圖片轉存中…(img-9sgjtXvT-1578023422223)]<br />
<br />
十、特殊符號<br />
顯示結果<span style="white-space:pre;"> </span>描述<span style="white-space:pre;"> </span>實體名稱<br />
空格<span style="white-space:pre;"> </span> <br />
<<span style="white-space:pre;"> </span>小于號<span style="white-space:pre;"> </span><<br />
><span style="white-space:pre;"> </span>大于號<span style="white-space:pre;"> </span>><br />
©<span style="white-space:pre;"> </span>版權（copyright）<span style="white-space:pre;"> </span>©<br />
®<span style="white-space:pre;"> </span>注冊商標<span style="white-space:pre;"> </span>®<br />
?<span style="white-space:pre;"> </span>商標<span style="white-space:pre;"> </span>?<br />
<br />
<br />首先編寫一個簡單的容器：
<style>
width: 600px;
height: 100vh;
overflow-y: auto;
}
width: 100%;
}
width: 50%;
float: left;
margin: 20px 0;
list-style: none;
}
width: 200px;
height: 200px;
overflow: hidden;
margin: 0 auto;
border: 1px solid #999999;
}
width: 100%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
<div id="content">
<ul>
</ul>
</div>
然后，編寫js代碼：
let imageArr = [{
img_url: "http://www.lexilisi.com/Uploadpth/c45cc952-dcb7-493c-a171-357d1b820b37.png",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_3.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_4.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_5.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_6.jpg",
}, {
img_url: "http://xiaobanyou.com/static/images/xby_user_799.jpg",
}];
const lazyLoad = (src) => {
//加載loading動畫
let _image = new Image();
_image.src = './loading.gif';
//加載需要展示的圖片
let image = new Image();
image.src = src;
//加載成功，將loading圖片路徑改成對應的真實路徑
image.onload = _ => image.src = .currentTarget.src;
//加載失敗，將loading圖片路徑改成默認圖片路徑
image.onerror = _ => _image.src = './error.png';
return _image;
}
let _content = document.getElementById('content');
let _ul = _content.getElementsByTagName('ul');
imageArr.forEach(value => {
let _li = document.createElement('li');
let _p = document.createElement('p');
let _image = lazyLoad(value.img_url);
_p.appendChild(_image);
_li.appendChild(_p);
_ul[0].appendChild(_li);
})
展示效果如圖：
每個圖片都是異步加載，加載完成后：
藍藍設計的小編 http://www.syprn.cn