HTML5

HTML5和HTML事件

注意：行內代碼的為H5新增事件

Window事件屬性：

針對 window 物件觸發的事件（應用到 標簽）

Form事件

由HTML表單內的影片觸發的時間，應用到幾乎所有HTML元素，但最常用在form元素中

keyboard事件

Mouse事件

由滑鼠或類似用戶動作觸發

Media事件

有媒介，比如視頻影像和音頻處罰的事件，適用于所有HTML元素，但常見于媒介元素中

input的type屬性值

HTML

HTML5

HTML5離線儲存

拖拽釋放

拖拽是H5中非常常見的功能，為了讓元素可以拖動需要添加draggable 屬性
注意：鏈接和圖片是默認可拖動的 不需要額外添加draggable 屬性

• 在拖拽目標上觸發事件（源元素）：
  • ondragstart：開始拖動元素時觸發
  • ondrag：元素正在拖動時觸發
  • ondragend：用戶完成元素拖拽后觸發
• 釋放目標時觸發的事件（目標元素）：
  • ondragenter：當被滑鼠拖動的物件進入其容器范圍內觸發
  • ondragover：當某被拖動的物件在另一物件容器范圍內拖動時觸發
    • 注意：在拖動元素時，每隔 350 毫秒會觸發 ondragover 事件，
  • ondragleave：當被滑鼠拖動的物件離開其容器范圍內觸發
  • ondrop：在一個拖動程序中，釋放滑鼠時觸發

自定義屬性 data-id

方便的保存并適用資料

• 設定自定義屬性：element.setAttribute(name, value);

• 獲取自定義屬性：element.getAttribute(name, value);

• 從指定的元素中洗掉一個屬性：removeAttribute()

H5新增獲取方法：dataset

<div id="one" data-wenbo="yiran" ></div>

var one = document.getElementById('one')
console.log(one.dataset.wenbo) //yiran
one.dataset.wenbo = 'wenbo'
console.log(one.dataset.wenbo) //wenbo

語意化標簽

• header：section或page頁眉
• nav：導航連接
• footer：section或page頁腳
• aside：頁面內容之外的內容
• article：文章
• section：section，部分

音頻視頻

audio和video

• 自動播放：在標簽屬性中添加autoplay
• 音頻視頻相關方法，屬性以及事件

畫布Canvas

canvas 標簽定義圖片
canvas本身是沒有繪圖能力的，所有的繪制作業必需在JavaScript內部完成

image 是通過物件的形式描述圖片的,canvas 通過專門的 API 將圖片繪制在畫布上.

<canvas id="canvas"></canvas>
<script>
  var c = document.getElementById('canvas')
  // 畫一個矩形
  var ctx = c.getContext('2d')
  ctx.fillStyle = '#ccc'
  ctx.fillRect(0, 0, 100, 150)
  // 畫一個直線
  ctx.moveTo(0, 0)
  ctx.lineTo(200, 200)
  ctx.stroke();
</script>

Canvas相關方法，屬性

地理位置API Geolocation

navigator.geolocation.getCurrentPosition()：獲取用戶當前位置，傳參是兩個回呼函式，一個成功時，一個失敗時

• Geolocation物件其他方法：
  • watchPosition()：回傳用戶的當前位置，并繼續回傳用戶移動時的更新位置，
  • clearWatch()：停止watchPosition()方法

navigator.geolocation.getCurrentPosition((res) => {
console.log('獲取用戶位置成功：', res)
}, (err) => {
console.log('獲取失敗，錯誤資訊：', err)
})

localStorage和sessionStorage

• localStorage：存盤大小5M左右，資料可長期保存在本地，同源域名視窗中共享資料，
• sessionStorage：存盤大小5M左右，與localStorage類似，但是儲存資料僅當前視窗有效，關閉視窗自動洗掉，

H5 瀏覽器存盤

• cookie
• localStorage
• sessionStorage
• indexedDB
• WebSQL
• window變數

表單控制元件

• email：郵箱
• url：連接
• number：數字
• range：范圍選擇
• Date pickers：日期時間選擇
  • data month week time datetime datetime-local
• search：搜索
• color：顏色選擇

新的技術web worker 和web socket

Web Worker
Web Worker 適用教程

為JavaScript創造多執行緒環境，允許在主執行緒穿件worker執行緒，將一些任務分配給后者運行，在主執行緒運行的同時，Worker執行緒在后臺運行，兩者互不干擾，當Worker執行緒完成計算任務，再把結果回傳給主執行緒，
注意：Worker執行緒一旦新建成功，就會始終運行，不會被主執行緒上的活動打斷，在使用完畢后，需要及時關閉，

Web Socket

HTML5提供的一種在單個TCP連接上進行全雙工通訊的協議，

Web Socket使得客戶端和服務器之間的資料交換變得更加簡單，允許服務器端主動向客戶端推送資料，在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持續性的連接，并進行雙向資料傳輸，**

CSS3

顏色：新增RGBA，HSLA模式

• RGBA：background-color: rgba(179, 133, 133, 0.5);
• HSLA：background-color: hsla(120, 60%, 70%, 0.3)
  • hsla(hue, saturation, lightness, alpha)：
  • hue：色相，色彩的基本屬性，平常所說的顏色，
  • saturation：飽和度，色彩的純度，越高色彩越純，低則逐漸變灰，取值0-100%
  • lightness：亮度，增加亮度，顏色會向白色變化，減少會向黑色變化，取值0-100%，
  • alpha：透明度，取值0-1之間，代表透明度，

文字陰影

• text-shadow: h-shadow v-shadow blur color;
  • h-shadow：必需，水平陰影的位置，允許負值
  • v-shadow：必需，垂直陰影的位置，允許負值
  • blur：可選，模糊的距離
  • color：可選，陰影的顏色

邊框陰影

box-shadow: h-shadow v-shadow blur color;

圓角

border-radius:左上 右上 右下 左下;

盒子模型

盒子模型包括：外邊框margin，邊框border，內邊框padding，和內容content

背景相關

• background-size：指定背景圖片的大小
• 語法：background-size: length|percentage|cover|contain;
  - length：設定圖片寬高，第一個值寬度第一個值高度，如只有一個值，第二個值設定為auto
  - percentage：百分比設定寬高，
  - cover：保持影像縱橫比將影像縮放成完全覆寫背景定位區域的最小大小
  - contain：保持影像縱橫比將影像縮放成完全覆寫背景定位區域的最大大小
• background-origin：規定圖片相對于什么位置來定位
• 語法：background-origin: padding-box|border-box|content-box;
  - padding-box：背景相對于內邊框來定位（默認）
  - boder-box：背景相對于邊框盒來定位
  - content-box：背景相對于內容框來定位
• background-clip：規定背景的繪制區域
• 語法：background-clip: border-box|padding-box|content-box;
  - padding-box：背景被剪切到邊框盒
  - boder-box：背景被剪切到內邊框盒
  - content-box：背景被剪切到內容框

漸變

線性漸變

• 語法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction：方向角度 單位deg
  • color-stop1,color-stop2,...：漸變顏色，可以有多個顏色節點

重復線性漸變：

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

徑向漸變

• 語法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  • shape：形狀，可以是circle 或 ellipse
  • size：漸變大小：引數有closest-side，farthest-side，closest-corner，farthset-corner

例如：

background-image: radial-gradient(circle, red, yellow, green);
background-image: radial-gradient(circle at 100% 100%, red, yellow, green);
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);

重復徑向漸變

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

過度

• transition：過渡允許在規定時間內平滑的改變屬性值
  • 過渡可以連寫，一個transition寫多個過渡，
  • transition：過渡簡寫，一個屬性中設定四個過渡屬性
  • transition-property：規定應用過渡的的CSS屬性名稱
  • transition-duration：定義過渡效果花費的時間、
  • transition-timing-function：規定過渡效果的時間曲線，
    • linear ，ease ，ease-in ，ease-out ，ease-in-out ，cubic-bezoer(n,n,n,n)
  • transition-delay：規定過渡效果何時開始，以秒或者毫秒計

自定義影片

• animation：
• 語法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • animation-name：指定要系結到選擇器的關鍵幀的名字
  • animation-duration：影片指定需要多少秒或多少毫秒完成
  • animation-timing-function：設定影片如何完成一個周期
  • animation-delay：設定影片在啟動前的延遲間隔
  • animation-iteration-count：定義影片播放的詞素
  • animation-direction：是否應該輪流反向播放影片
  • animation-fill-mode：當影片不播放時，要應用到元素的樣式
  • animation-play-state：指定影片是否再整運行或已暫停
  • @keyframes：創建影片，指定一個CSS樣式和影片將逐步從目前的樣式更改為新的樣式

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

使用：

   animation: myfirst 5s;
   -webkit-animation: myfirst 5s; /* Safari 與 Chrome */

媒體查詢

• 針對不同的媒體型別(根據螢屏大小)定義不同的樣式，
• 語法：
• @media mediatype and|not|only (media feature) {
•    CSS-Code;
• }
• mediatype：媒體型別
  • print：列印機和列印預覽
  • screen：用于電腦螢屏，平板電腦，智能手機
  • speech：應用于螢屏閱讀器等發聲設備

//如果檔案寬度小于 300 像素則修改背景顏色(background-color):
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

邊框圖片

語法：border-image: source slice width outset repeat|initial|inherit;

transform

transform：
2D轉換：

• translate(X,Y)：從當前位置移動元素到指定位置
• rotate(deg)：根據給定角度旋轉元素
• scale(X,Y)：增加或減少元素默認值1
• scaleX(X)：增加或減少元素寬度
• scaleY(Y)：增加或減少元素高度
• skewX(X)：使元素沿X軸傾斜給定角度
• skewY(Y)：使元素沿Y軸傾斜給定角度
• skew(X,Y)：使元素沿X,Y軸傾斜給定角度
• matrix()：把所有2D變換合成為一個
  • matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3D轉換：

• rotate3d(x,y,z,angle)
• rotateX(deg)：使元素繞其X軸旋轉
• rotateY(deg)：使元素繞其Y軸旋轉
• rotateZ(deg)：使元素繞其Z軸旋轉
• translate3d(x,y,z)
• translateX(x)：移動用于X軸
• translateY(y)：移動用于Y軸
• translateZ(z)：移動用于Z軸
• scale3d(x,y,z)：3D縮放
• scaleX(x)
• scaleY(y)
• scaleZ(z)

transform其他相關樣式

• transform-style：指定嵌套元素是怎樣在三維空間中呈現，
  • flat：所有子元素再2D平面呈現
  • preserve-3d：表示所有子元素再3D空間中呈現
• transform-origin：設定元素轉換中心點
  • X軸
  • Y軸
  • Z軸

字體圖示

特殊的一種字體，通過這種字體顯示給用戶的就像一個個圖片一樣
優點：不會變形，加載速度快，可以使用CSS來控制它的大小和顏色，
以阿里iconfont為例：

unicode參考

unicode是字體再網頁端最原始的應用方式

• 優點：
  • 兼容行最好，支持ie6+，及所有現代瀏覽器
  • 支持按字體的方式去動態調整圖表達大小顏色
• 缺點：
  • 不支持多色，多色圖示會自動取色
• 使用步驟：
  • 第一步：拷貝專案下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
//支持網路地址
@font-face {
  font-family: 'iconfont'; 
  src: url('//at.alicdn.com/t/font.eot');
  src: url('//at.alicdn.com/t/font.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font.woff2') format('woff2'),
  url('//at.alicdn.com/t/font.woff') format('woff'),
  url('//at.alicdn.com/t/font.ttf') format('truetype'),
  url('//at.alicdn.com/t/font.svg#iconfont') format('svg');
}

• 第二步：定義使用iconfont的樣式

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

• 第三步：挑選相應圖示并獲取字體編碼，應用于頁面

<i >&#x33;</i>

font-class參考

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題，

• 與unicode相比，優點：
  • 兼容性良好，支持ie8+，及所有現代瀏覽器，
  • 相比于unicode語意明確，書寫更直觀，可以很容易分辨這個icon是什么，
  • 因為使用class來定義圖示，所以當要替換圖示時，只需要修改class里面的unicode參考，
• 缺點：
  • 本質上還是使用的字體，所以多色圖示還是不支持的，
• 使用步驟：
  • 第一步：拷貝專案下面生成的fontclass代碼

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

• 第二步：挑選相應圖示并獲取類名，應用于頁面

<i ></i>

symbol參考

全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法，

• 這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：
  • 支持多色圖示了，不再受單色限制，
  • 通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式，
• 缺點：
  • 兼容性較差，支持 ie9+,及現代瀏覽器，
  • 瀏覽器渲染svg的性能一般，還不如png，
• 使用步驟：
  • 第一步：拷貝專案下面生成的symbol代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

• 第二步：加入通用css代碼（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

• 第三步：挑選相應圖示并獲取類名，應用于頁面：

<svg  aria-hidden="true">
    <use xlink:href="https://www.cnblogs.com/yevin/p/#icon-xxx"></use>
</svg>

彈性布局

flex：CSS3的一種全新布局

提供一種更有效的方式來對一個容器中的子元素進行排列，對其和分配空白空間

• flex-direction：指定子元素在父容器中的位置（用來調整主軸的方向）
  • row：橫向從左到右排列（默認）
  • row-reverse：翻轉橫向排列，從后往前排
  • column：縱向排列
  • column-reverse：反轉縱向排列，從后往前排
• justif-content：內容對其，元素在彈性容器上的對其方式（主軸）
  • flex-start：默認值，所有元素在開始位置緊挨著填充
  • flex-end：所有元素在尾部緊挨著填充
  • center：容器內元素居中緊挨著布局
  • space-between：平均分布在改行上，兩邊緊挨著容器
  • space-around：平均分布在改行上，兩邊留有一半的間隔空間
• align-items：設定元素在側軸方向的對其方式
  • flex-start：默認值，側軸的開始位置對其
  • flex-end：側軸的結束位置對其
  • center：中間位置對其
  • baseline：基線對其，不會拉伸高度
  • stretch：拉伸對其，子元素不用設定高度
• flex-wrap：指定彈性盒子的子元素換行方式
  • nowrap：默認，不換行，會溢位容器
  • wrap：換行
  • wrap-reverse：反轉wrap排列
• align-content：子元素在側軸的對其方式（多行模式）
  • stretch - 默認，各行將會伸展以占用剩余的空間，
  • flex-start - 各行向彈性盒容器的起始位置堆疊，
  • flex-end - 各行向彈性盒容器的結束位置堆疊，
  • center -各行向彈性盒容器的中間位置堆疊，
  • space-between -各行在彈性盒容器中平均分布，
  • space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半，
• align-self：自身在側軸方向的對齊方式
  • auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'，
  • flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界，
  • flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界，
  • center：彈性盒子元素在該行的側軸（縱軸）上居中放置，（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度），
  • baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其它情況下，該值將參與基線對齊，
  • stretch：如果指定側軸大小的屬性值為auto，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照min/max-width/height屬性的限制，
• 彈性布局子元素屬性：
  • order：用整數來定義排列書序，數值小的排在前面
  • margin：設定為auto時可以在兩軸上水平居中
  • flex：指定彈性子元素如何分配空間

標籤：Html/Css

上一篇：unapp一鍵登錄

下一篇：CSS @property，讓不可能變可能