整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本標(biāo)簽: 32
例:
<dl>
<dt>標(biāo)題1</dt>
<dd>內(nèi)容11</dd>
<dd>內(nèi)容12</dd>
<dt>標(biāo)題2</dt>
<dd>內(nèi)容21</dd>
<dd>內(nèi)容22</dd>
</dl>
target="...",決定鏈接源在什么地方顯示(用戶自定義的名字,_blank,_parent,_self,_top);
rel="...",發(fā)送鏈接的類型;
rev="...",保存鏈接的類型;
accesskey="...",指定該元素的熱鍵;
shape="...",允許我們使用已定義的形狀定義客戶端的圖形鏡像(default,rect,circle,poly);
coord="...",使用像素或者長度百分比來定義形狀的尺寸;
tabindex="...",使用定義過的tabindex元素設(shè)置在各個元素之間的焦點獲取順序(使用tab鍵使元素獲得焦點).
action="...",接收數(shù)據(jù)的服務(wù)器的URL;
method="...",HTTP的方法(get,,post),其中g(shù)et是被反對使用的;
enctype="...",指定MIME(Internet媒體類型);
onsubmit="...",當(dāng)提交表單時發(fā)生的內(nèi)部事件;
noreset="...",在重新設(shè)置表單時發(fā)生的內(nèi)部事件;
target="...",決定把內(nèi)容顯示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按鈕的狀態(tài)設(shè)置為不能;
name="...",按鈕的控制名,value="...",按鈕的值;
type="...",按鈕的類型(button,,submit,,reset);
type="...",用于輸入控件的類型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一個單選鈕設(shè)置為選中的狀態(tài);
disabled="...",把控件的狀態(tài)設(shè)置為不能使用;
readonly="...",只對輸入密碼的文本框使用;
size="...",表示以像素為單位的除了文本框和密碼框控件之外的其它控件的寬度,它是用來指定字符的數(shù)目;
src="...",一個圖像控件的URL;
maxlength="...",指定可以輸入的最多的字符數(shù)目;
alt="...",另外一種文本描述;
usemap="...",到客戶端圖形鏡像的URL;
align="...",被反對.控制對齊方式(left,,center,,right,,justify);
tabindex="...",通過定義的tabindex值確定在不同元素之間獲得焦點的順序;
onfocus="...",當(dāng)元素獲得焦點時發(fā)生的事件;
onblur="...",當(dāng)元素失去焦點時發(fā)生的事件;
onselect="...",當(dāng)元素被選中時發(fā)生的事件;
onchang="...",當(dāng)元素狀態(tài)被改變時發(fā)生的事件;
accept="...",允許上載的文件類型.
scr="...",定義在幀中顯示的內(nèi)容的來源;
frameborder="...",定義幀之間的邊界(0或1);
align="...",被反對,控制對齊方式(left,,center,,right,,justify);
height="...",幀的高度,width="..."幀的寬度;
架是將一個頁面劃分為若干個窗口, 每一個窗口都是獨立;
要實現(xiàn)框架必須使用框架型的DTD;
框架就像一個窗戶是由窗格和玻璃組成;
框架中不能有body及body子標(biāo)記;
框架是由框架集(frameset)和框架頁(frame)組成;
格式：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<frameset>
<frame />
<frame />
</frameset>
</html>框架標(biāo)簽:
<frameset></frameset> 放在一個框架文檔的<body>標(biāo)簽之前, 也可以嵌在其他框架文檔中;
框架中不能有body及body子標(biāo)記, 框架是由框架集(frameset)和框架頁(frame)組成;
<frameset rows="value,value"> 定義一個框架內(nèi)的行數(shù), 可用像素值或高度百分比;
<frameset cols="value,value"> 定義一個框架內(nèi)的列數(shù), 可用像素值或?qū)挾劝俜直?
<frameset cols="120,*"></frameset>
<frameset cols="25%,50%,25%"></frameset>
<frameset rows="120,*"></frameset>
<frameset rows="25%,50%,25%"></frameset>
frameborder 框架邊框顯示屬性
該屬性用于指定框架周圍是否顯示邊框, 取值有1(顯示邊框, 默認(rèn)值)和0(不顯示邊框)。
framespacing 該屬性用于指定框架之間的間隔, 以像素為單位。
如果不設(shè)置該屬性，則框架之間沒有間隔。
border 指定邊框?qū)挾葘傩?/p>
該屬性用于指定邊框的寬度, 只有在frameborder屬性為1時有效。
bordercolor 指定邊框顏色
<noframes></noframes> 定義在不支持框架的瀏覽器中顯示什么提示;
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html"/>
<frame src="frame_b.html"/>
<frame src="frame_c.html"/>
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</frameset>
</html><frame> 定義一個框架內(nèi)的單一窗或窗區(qū)域;
<frame src="url"> 規(guī)定框架內(nèi)顯示的html文檔;
<frame name="name"> 命名框架或區(qū)域以便別的框架可以指向它;
<frame marginwidth=""> 定義框架左右邊緣的空白大小,必須大于等于1;
<frame marginheight=""> 定義框架上下邊緣的空白大小,必須大于等于1;
<frame scrolling=""> 設(shè)置框架是否有滾動欄,其值可以是"yes","no",或"auto";
<frame noresize> 禁止用戶調(diào)整一個框架的大小;其值只有一個"noresize"
<frame src="frame_a.htm" longdesc="w3school.txt" /> longdesc屬性指向了帶有框架內(nèi)容長描述的頁面：
<iframe></iframe> 創(chuàng)建一個內(nèi)聯(lián)的框架;
src 定義在框架中顯示的內(nèi)容的來源;
frameborder 規(guī)定是否顯示框架周圍的邊框。(0或1);
align 控制對齊方式(left、right、middle、top、bottom);
height 框架的高度,
width 框架的寬度;
marginheight 定義 iframe 的頂部和底部的邊距。
marginwidth 定義 iframe 的左側(cè)和右側(cè)的邊距。
scrolling 規(guī)定是否在 iframe 中顯示滾動條(yes、no、auto)。
name 規(guī)定 iframe 的名稱。
bordercolor 指定邊框顏色
<iframe src ="/index.html" frameborder="0" bordercolor="red">
<p>Your browser does not support iframes.</p>
</iframe>
關(guān)于框架集<frameset></frameset>中屬性cols rows分割方法理解
<frameset cols="40%,2*,*"> 將窗口分為40%，40%，20%
<frameset cols="100,200,*"> 將窗口分為100像素，200像素和剩下的700像素
<frameset cols="100,*,*"> 將100像素以外的窗口平均分配
<frameset cols="*,*,*"> 將窗口分為三等份
<frameset rows="*,*,*"> 總共有三個按列排列的幀,每個幀占整個瀏覽器窗口的1/3
<frameset cols="40%,*,*"> 總共有三個按行排列的幀,第一個幀占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個幀
<frameset rows="40%,*" cols="50%,*,200">
以上"*"表示剩余部分
總共有六個幀,先是在第一行中從左到右排列三個幀,然后在第二行中從左到右再排列三個幀,即兩行三列,
所占空間依據(jù)rows和cols屬性的值,其中200的單位是像素
屬性匯總:
frameset(框架集)
rows 它是將框架集劃分為上下型
cols 它是將框架劃分為左右型
border 是用于設(shè)置框架的邊框粗細(xì)
frameborder 是用于設(shè)置是否顯示邊框, 取值：yes|no或1|0
bordercolor 用于設(shè)置框架邊框的顏色
frame(框架頁)
noresize 是否可以調(diào)整小窗口的大小
name 用于設(shè)置小窗口的名稱
src 小窗口的url
scroll 是否顯示滾動條 yes|no|auto
實例: iframe滿屏方案
、網(wǎng)絡(luò)加載
通過dns-prefetch屬性可以讓瀏覽器提前解析資源或接口對應(yīng)的服務(wù)器IP地址，避免在請求中發(fā)起DNS解析請求，節(jié)省請求時間
利用preload，prefetch，preconnect屬性我們可以在<head>內(nèi)部聲明式的書寫資源獲取請求，提前加載非首屏但又較重要的資源，避免在滿足首屏優(yōu)先加載的情況下，反而忽略了其他次重要資源的加載
HTTP緩存包括強(qiáng)緩存（Cache-Control，Expire）和協(xié)議緩存（Last-modified, Etag）兩種。其中，協(xié)議緩存資源每次都會向服務(wù)端發(fā)送請求來判斷資源是否過期，未過期則返回304，在網(wǎng)絡(luò)極其卡頓的情況下，這個304請求有可能堵塞整個頁面的資源加載
移動端的網(wǎng)絡(luò)資源有限，為了盡快讓用戶看到有意義的首屏，我們需要盡可能的保持首屏需要加載的資源越小越好
將首屏關(guān)鍵樣式內(nèi)聯(lián)至頁面中，保證最快速度看到帶有基本樣式的首屏，避免用戶端出現(xiàn)較長時間的白屏?xí)r間
內(nèi)聯(lián)關(guān)鍵代碼也是為了讓用戶第一時間感受到頁面已經(jīng)加載成功，但是內(nèi)聯(lián)代碼不能將所有代碼都內(nèi)聯(lián)至HTML中，因為這些代碼每次都會伴隨HTML下載下來，加大HTML文件的體積，也無法讓代碼在不同的網(wǎng)頁間提供復(fù)用的功能
GZIP對于文本資源（JS，CSS文件）有較高的壓縮效率，通常可以減少70%的體積
增大加載時間，用戶體驗較差
移動端網(wǎng)絡(luò)資源有限，為了讓這些不重要的代碼不影響首屏渲染，可以延遲一小段時間再加載
每一次AJAX請求都會將當(dāng)前域名中的所有COOKIE值傳遞給服務(wù)端
頁面發(fā)送請求時，會先經(jīng)過SW的腳本，這樣可以讓我們通過編程的方式來制定我們需要緩存的文件，同時，緩存在service worker中的文件，可以讓用戶離線訪問
HTTP2.0協(xié)議可以提升網(wǎng)絡(luò)鏈路的復(fù)用性，提升資源加載效率
標(biāo)簽的語義化提高代碼的可維護(hù)性，在頁面加載CSS失敗時也不至于很難看。同時，需要保持標(biāo)簽最小化，無意義的標(biāo)簽可以利用偽類表示
減少網(wǎng)絡(luò)傳輸?shù)奈募笮?/p>
iframe 內(nèi)資源的下載進(jìn)程會阻塞父頁面靜態(tài)資源的下載與 CSS 及 HTML DOM 的解析
減少網(wǎng)絡(luò)傳輸?shù)奈募笮?/p>
按需加載，減少網(wǎng)絡(luò)傳輸?shù)奈募笮?/p>
可能阻塞頁面的加載
提高解析css的效率
自動幫助我們添加瀏覽器頭，避免意想不到的瀏覽器兼容性問題
CSS的解析過程是從右往左逆向匹配，使用CSS通配符會增加解析的計算量
box-shadow、border-radius、filter這些屬性繪制前都需要瀏覽器進(jìn)行大量的計算
width、height、top、left、right、bottom、margin等屬性的變更都會觸發(fā)頁面的重排，在移動端環(huán)境中頻繁的重排會導(dǎo)致動畫卡頓
在移動端兼容性好、性能好、更具有可操控性
setTimeout和setInterval在動畫執(zhí)行存在性能問題，且無法準(zhǔn)確的控制幀數(shù)
對開啟GPU硬件加速的標(biāo)簽，瀏覽器將把它提升到一個單獨的圖層，并通過GPU進(jìn)行預(yù)處理
will-change的作用告訴瀏覽器哪些屬性將要變化，讓他可以提前做好準(zhǔn)備
減少代碼大小，根據(jù)頁面需求按需加載資源，最下化用戶需要加載的資源大小加快頁面展示的速度
節(jié)省內(nèi)存和減少監(jiān)聽事件的注冊
避免頻繁的無效的操作，避免頁面的卡頓
setInterval可能存在指令堆積的問題，導(dǎo)致頁面卡頓
頁面的重排重繪很耗性能，尤其是重排
移動端網(wǎng)絡(luò)條件有限，圖片越大加載時間越長，合理使用工具壓縮圖片，可以兼顧圖片質(zhì)量和圖片大小
減少文件傳輸?shù)拇笮。苊獬霈F(xiàn)圖片尺寸使用不當(dāng)?shù)膯栴}，小icon用大圖
減少http請求數(shù)，不過當(dāng)我們的http協(xié)議升級至1.1，2.0之后，雪碧圖減少http請求數(shù)的效果并不明顯
避免用戶提前加載過多無用的資源，浪費用戶流量
在較大像素比的屏幕下加載小尺寸的圖片，圖片會模糊；在較小像素比的屏幕下加載大尺寸的圖片，會浪費用戶流量和cdn流量
將圖片轉(zhuǎn)換成base64格式可以減少http請求數(shù)量，但是，不能對較大尺寸的圖片使用base64格式，因為base64算法會提升三分之一的文件大小
我們只需要頁面需要的字體文件即可，不需要浪費流量加載用戶不需要的資源
使用font-display屬性可以避免在字體加載過程中，不顯示文字的問題
快速完美的還原界面
加強(qiáng)用戶體驗，加速首屏體驗，通過有意義的ui讓用戶提前得到反饋
Google推出的網(wǎng)頁性能跑分工具，可以較全面的了解網(wǎng)站的性能
幫助我們快速找到首屏未使用的代碼
這里以webpack舉例，使用Scope Hoisting后打包的文件，文件體積更小，代碼運行時創(chuàng)建的函數(shù)作用域更少，提升JS的啟動速度
我是一個莫得感情的代碼搬運工，每周會更新1至2篇前端相關(guān)的文章，有興趣的老鐵可以掃描下面的二維碼關(guān)注或者直接微信搜索前端補(bǔ)習(xí)班關(guān)注。
精通前端很難，讓我們來一起補(bǔ)補(bǔ)課吧！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
