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