整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML5是一種用于構(gòu)建現(xiàn)代網(wǎng)站和應(yīng)用程序的最新版本的HTML標(biāo)準(zhǔn)。下面介紹HTML5的15個(gè)常用新特性和如何使用它們：
1.語(yǔ)義標(biāo)簽：HTML5引入了一些新的語(yǔ)義標(biāo)簽，如<header>、<nav>、<article>、<section>、<aside>和<footer>，用于更好地描述網(wǎng)頁(yè)內(nèi)容的結(jié)構(gòu)。
2.視頻和音頻：HTML5允許在網(wǎng)頁(yè)上嵌入視頻和音頻，通過(guò)使用<video>和<audio>標(biāo)簽來(lái)實(shí)現(xiàn)。可以使用controls屬性添加播放器控制條。
3.畫(huà)布：HTML5的<canvas>標(biāo)簽可以用于在網(wǎng)頁(yè)上繪制圖形、動(dòng)畫(huà)和其他復(fù)雜的視覺(jué)效果。
4.SVG：HTML5支持可縮放矢量圖形（SVG），可以使用SVG標(biāo)簽在網(wǎng)頁(yè)上繪制矢量圖形和動(dòng)畫(huà)。
5.地理位置：HTML5允許網(wǎng)頁(yè)獲取用戶的地理位置信息，可以使用navigator.geolocation API實(shí)現(xiàn)。
6.Web存儲(chǔ)：HTML5引入了本地存儲(chǔ)機(jī)制，包括localStorage和sessionStorage，可以在瀏覽器端存儲(chǔ)數(shù)據(jù)。
7.Web Workers：HTML5允許通過(guò)Web Workers在后臺(tái)線程中執(zhí)行JavaScript代碼，以提高網(wǎng)頁(yè)性能和響應(yīng)速度。
8.WebSocket：HTML5引入了WebSocket協(xié)議，可以實(shí)現(xiàn)瀏覽器和服務(wù)器之間的實(shí)時(shí)通信。
9.WebRTC：HTML5支持WebRTC技術(shù)，可實(shí)現(xiàn)瀏覽器之間的點(diǎn)對(duì)點(diǎn)音視頻通信。
10.微數(shù)據(jù)：HTML5的微數(shù)據(jù)機(jī)制可以讓網(wǎng)頁(yè)上的內(nèi)容更容易被搜索引擎識(shí)別和解釋。
11.拖放：HTML5支持拖放操作，可以使用draggable屬性和ondrag事件實(shí)現(xiàn)。
12.表單控件：HTML5引入了一些新的表單控件，如日期選擇器、顏色選擇器、范圍選擇器等。
13.歷史API：HTML5的歷史API可以讓網(wǎng)頁(yè)在不刷新頁(yè)面的情況下改變URL，實(shí)現(xiàn)更好的用戶體驗(yàn)。
14.全屏API：HTML5的全屏API可以讓網(wǎng)頁(yè)全屏顯示，提供更好的視覺(jué)效果和用戶體驗(yàn)。
15.CSS3：雖然不是HTML5的一部分，但HTML5通常與CSS3一起使用。CSS3提供了更多的樣式和動(dòng)畫(huà)效果，如過(guò)渡、變換、動(dòng)畫(huà)等。
結(jié)語(yǔ)
牽手 持續(xù)為你分享各類知識(shí)和軟件 ，歡迎訪問(wèn)、關(guān)注、討論 并留下你的小心心?
么是HTML、HTML5
HTML（Hypertext Markup Language）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言，它通過(guò)標(biāo)記來(lái)描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。HTML標(biāo)準(zhǔn)不斷更新，目前最新的版本是HTML5。
HTML5是HTML的第五個(gè)版本，是一種用于創(chuàng)建現(xiàn)代Web應(yīng)用程序的標(biāo)準(zhǔn)。它包含了許多新的功能和API，例如Canvas、Audio、Video、Web Storage、Web Worker、Geolocation等，可以實(shí)現(xiàn)更出色的用戶體驗(yàn)和更多的交互特性。與之前的HTML版本相比，HTML5具有更強(qiáng)的兼容性和更好的語(yǔ)義化，支持移動(dòng)設(shè)備和桌面設(shè)備上的應(yīng)用程序開(kāi)發(fā)。
H5是HTML5的簡(jiǎn)稱嗎
答：在絕大一部分人眼中，H5通常是指基于HTML5、CSS3、JavaScript等一系列的技術(shù)開(kāi)發(fā)的移動(dòng)應(yīng)用程序，包括網(wǎng)頁(yè)游戲、移動(dòng)商城、移動(dòng)社交、移動(dòng)閱讀等應(yīng)用。H5應(yīng)用通常具有良好的跨平臺(tái)性，用戶不需要下載安裝即可直接在瀏覽器中使用，具有更好的用戶體驗(yàn)和易用性。
所以，就此定義，通常所說(shuō)的 H5并非是HTML5的簡(jiǎn)稱。
直觀解釋HTML5和H5
HTML5：超文本標(biāo)記語(yǔ)言，是一套標(biāo)準(zhǔn)。
H5：一套技術(shù)的簡(jiǎn)稱，包含了 HTML5、CSS3、JavaScript等一系列的技術(shù)。
結(jié)語(yǔ)
牽手 持續(xù)為你分享各類知識(shí)和軟件 ，歡迎訪問(wèn)、關(guān)注、討論 并留下你的小心心?
前端界面顯示的速度一般要求是：60fps
10ms中處理的流程為：
javascript > style > layout > paint > composite
如果JS的操作影響到了界面樣式的變化，則有上面的處理流程
如果style的操作影響到布局，則會(huì)進(jìn)入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint
避免head標(biāo)簽JS堵塞
異步加載JS: HTML5 的script 屬性 defer
JS寫(xiě)在body后面
Tips: 可能有時(shí)候JS庫(kù)，還沒(méi)加載完就要執(zhí)行了，可能會(huì)報(bào)錯(cuò)
減少 head 中的 CSS 資源
CSS 會(huì)影響到 layout ，寫(xiě)在Body里面會(huì)界面閃爍，但寫(xiě)在Head里面如果太多會(huì)影響渲染
不要寫(xiě)太多base64，雖然很方便，但會(huì)改變文件大小
如果CSS文件沒(méi)有達(dá)到三位數(shù)的大小，可以直接寫(xiě)到Html界面中，因?yàn)槿绻褂猛怄湗邮剑瑒t可能會(huì)花費(fèi)更多時(shí)間，如DNS解析，建立鏈接，下載等
優(yōu)化圖片，使用響應(yīng)式圖片，圖片的srcset 屬性，會(huì)有兼容問(wèn)題
<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>
使用picture按需加載，需要寫(xiě)在HTML中，如果使用JS來(lái)調(diào)用，則無(wú)效
<picture>
<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優(yōu)化屬性，不過(guò)會(huì)有兼容問(wèn)題: type='image/webp'
<source srcset='baner_w800.jpg' media="(max-width:800px)">
<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標(biāo)簽，只有img標(biāo)簽才會(huì)觸發(fā)onload事件; picture 與 source 都不觸發(fā) layout
</picture>
判斷瀏覽器是否支持：
var supportSrcset='srcset' in document.createElement('img');
var surportPicture='HTMLPictureElement' in window;
延遲加載
<picture>
<source data-srcset="photo_w350.jpg 1x, photo_w640.jpg 2x">
<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫(xiě)為此值不會(huì)報(bào)錯(cuò)，也對(duì)瀏覽器友好
</picture>
監(jiān)聽(tīng)Scroll事件
showImage(leftSpace=500){
var scrollTop=$window.scrollTop(), $containers=this.$imgContainers, scrollPosition=$window.scrollTop() + $window.height();
for(var i=0; i < $containers.length; i++){
//如果快要滑到圖片的位置了
var $container=$containers.eq(i);
if($container.offset().top - scrollPosition < leftSpace) {
this.ensureImgSrc($container);
}
}
}
ensureImgSrc($container) {
var $source=$container.find("source");
if($source.length && !$source.attr("srcset")){
$source.attr("srcset", $source.data("srcset"));
}
var $img=$container.find("img:not(.loading)");
if($img.length && $img.attr("src").indexOf("http://") < 0){
$img.attr("src", $img.data("src"));
this.shownCount++;
}
}
init(){
//初始化
var leftSpace=0;
this.showImage(leftSpace);
//滑動(dòng)
$window.on("scroll", this, this.throttleShow);
}
ensureImgSrc($container){
//如果全部顯示，off掉window.scroll
if(this.shownCount >=this.allCount){
$window.off("scroll", this.throttleShow);
}
}
指定圖片尺寸，避免 reflow
作用
第一個(gè)是把200變成304，避免資源重新傳輸，
第二個(gè)是讓瀏覽器直接從緩存取，連http請(qǐng)求都不用了，這樣對(duì)于第二次訪問(wèn)頁(yè)面是極為有利的。
開(kāi)啟壓縮 gzip
server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript
}
緩存 Cache-Control
location ~* \.(jpg|gif|png|webp) {
expires 30d;
}
location ~* \.(css|js) {
expires 1d;
}
此方法會(huì)在返回的請(qǐng)求響應(yīng)頭中添加 Cache-Control: max-age=604800 ， 且 max-age 的優(yōu)先級(jí)會(huì)大于 last-modified
開(kāi)啟 nginx last-modified 字段，在響應(yīng)頭中： last-modified 字段接收nginx的數(shù)據(jù)，在請(qǐng)求頭中： If-Modified-Since 字段返回給nginx
這個(gè)辦法得查手冊(cè)
使用etag，在響應(yīng)頭中是： Etag 字段 ，在請(qǐng)求頭中會(huì)記錄在 If-None-Match 字段
server {
etag on;
}
DNS預(yù)讀取
<link rel="dns-prefection" > # 在Head標(biāo)簽中添加相應(yīng)的域名，由于它是并行的，不會(huì)堵塞頁(yè)面渲染
HTML優(yōu)化
刪除注釋、縮進(jìn)，除了 pre 或 code 這樣的標(biāo)簽不能刪除，其它的都可以
代碼優(yōu)化
例如說(shuō)html別嵌套太多層，否則加重頁(yè)面layout的壓力
CSS的選擇器別寫(xiě)太復(fù)雜，不然匹配的計(jì)算量會(huì)比較大
JS的濫用閉包，閉包會(huì)加深作用域鏈，加長(zhǎng)變量查找的時(shí)間
代替圖片 或 LocalStorage、 Offline Storage
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
