HTML備忘錄HTML備忘錄

HTML澶?蹇?褰?

1. src??href???哄??

• src ?? source ??缂╁??锛?????澶??ㄨ?婧???浣?缃?锛?????????瀹瑰?浼?宓??ュ?版??妗ｄ腑褰?????绛炬???ㄤ?缃?锛??ㄨ?鋒? src 璧?婧??朵?灏??舵??????璧?婧?涓?杞藉苟搴??ㄥ?版??妗ｅ??锛?渚?濡? js ????锛?img ?劇???? frame 绛???绱???

  <script src =??xx.js??></script>

  褰?娴?瑙??ㄨВ???拌?ュ??绱??訛?浼??????朵?璧?婧???涓?杞藉??澶???锛??村?闆?璇ヨ?婧???杞姐??缂?璇????ц?瀹?姣?锛??劇????妗??剁????绱?涔?濡?姝わ?绫諱技浜?灏???????璧?婧?宓??ュ?????绛懼????杩?涔???涓轟?涔?灏?js ?????懼?ㄥ??ㄨ??涓???澶撮?ㄣ??
• href ?? Hypertext Reference ??缂╁??锛?????缃?缁?璧?婧????ㄤ?缃?锛?寤虹????褰?????绱?锛????癸???褰?????妗ｏ??炬?ワ?涔??寸???炬?ワ?濡????ㄦ??妗ｄ腑娣誨??

  <link href=??common.css?? rel=??stylesheet??/>

  ?ｄ?娴?瑙??ㄤ?璇???璇ユ??妗ｄ負 css ??浠訛?灏變?骞惰?涓?杞借?婧?骞朵?涓?浼???姝㈠?瑰?????妗ｇ??澶????? 杩?涔???涓轟?涔?寤鴻??浣跨??link ?瑰??ュ??杞?css锛???涓???浣跨??import ?瑰?

2. script??绛句腑defer??async???哄??

濡???娌℃??defer??async灞??э?娴?瑙??ㄤ?绔??沖??杞藉苟?ц??稿?????????瀹?涓?浼?绛?寰???缁???杞界????妗ｅ??绱?锛?璇誨???闆氨浼?寮?濮???杞藉???ц?锛?杩??峰氨?誨?浜???缁???妗ｇ????杞姐??

async:寮?姝ュ??杞?s????锛???杞藉??????绔??蟲?ц?js????锛?杩??朵??葷?html瑙ｆ??锛?锛?骞朵?澶?涓???璁?sync??js???????戒?浼????ч『搴??ц???锛?涓????ㄤ???杞界??涓??瑰?锛?

defer:寮?姝ュ??杞?s????锛???tml瑙ｆ??瀹???涔???

DOMContentLoaded

浜?浠惰Е???ц?涔??????ц?js??????浠訛???涓?澶?涓?defer??????浼????ч『搴??ц???(涓????ㄤ?涓?dom???寵??????????杞?

[澶??懼?劇??杞?瀛?澶辮觸,婧?绔????芥???茬???炬?哄??寤鴻??灏??劇??淇?瀛?涓??ョ?存?ヤ?浼?(img-EfiUKk2P-1676968329313)(https://my-learning-data.oss-cn-hongkong.aliyuncs.com/imgs/defer%E5%92%8Casync%E7%9A%84%E5%8C%BA%E5%88%AB.png)]

???蹭唬琛?s????缃?缁???杞芥?堕?達?绾㈣?蹭唬琛?s?????ц??堕?達?缁胯?蹭唬琛?tml瑙ｆ????

3. 甯哥?ㄧ??meta??绛?/h3>

<meta>

????杩?TML??妗ｇ?????版??锛?渚?濡?缃?椤電????杩般???抽??瀛???浣???绛?

???版??(Metadata),??浠ョ??瑙ｄ負??杩版?版?????版??淇℃????

???版??涓?浼??劇ず?ㄥ?㈡?風??锛?浣???浼?琚?娴?瑙??ㄨВ??锛????朵? Web ???¤??ㄣ??杩??烽??杩?杩?浜???杩頒俊??灏辯?ラ??濡?浣??昏В??姝ょ?椤墊?版????

甯哥?ㄧ??meta??绛?

<!-- 璁懼??椤甸??嬌?ㄧ??瀛?绗?????  -->
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
<!--??浠ョ?ㄤ?璁懼??缃?椤電???版???堕?淬??涓????椤佃???锛?蹇?椤誨?版???″?ㄤ????頒?杈??? -->
<meta http-equiv="expires" content="Fri, 12 Jan 2018 18:18:18 GMT">
<!--绂?姝㈡?瑙??ㄤ????拌?＄???虹??缂?瀛?涓?璁塊??椤甸?㈠??瀹廣?? -->
<meta http-equiv="Pragma" content="no-cache">
<!--???ㄥ?鋒?闆苟?????伴〉???? -->
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com">
<!-- 璁劇疆cookie, 濡???缃?椤佃???锛??ｄ?瀛?????cookie灏?琚????ゃ??-->
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT锛? path=/">
<!--寮哄?堕〉?㈠?ㄥ???绐??ｄ互??绔?椤甸?㈡?劇ず,?ㄦ?ラ?叉?㈠??浜哄?ㄦ??堕??璋??ㄨ??宸辯??椤甸???? -->
<meta http-equiv="Window-target" content="_top">
           

璇?娉?	??涔?
<meta charset="UTF-8" >	charset 锛??ㄦ?ユ??杩?TML??妗ｇ??缂???绫誨??
<meta name="keywords" content="?抽??璇?" />	keywords 锛?椤甸?㈠?抽??璇?
<meta name="description" content="椤甸?㈡??杩闆??瀹? />	description 锛?椤甸?㈡??杩?/td>
<meta http-equiv="refresh" content="0;url=" />	refresh 锛?椤甸?㈤??瀹??????鋒??/td>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">	viewport 锛?????绉誨?ㄧ??锛???浠ユ?у?惰??ｇ??澶у???姣?渚?
<meta name="robots" content="index,follow" />	??绱㈠???绱㈠??瑰?

name=viewport

涓???

content

???版??浠ヤ???绉?锛?

• width viewport

  锛?瀹藉害(?闆??device-width)

• height viewport

  锛?楂?搴??闆??device-height)

• initial-scale

  锛???濮?缂╂?炬??渚?

• maximum-scale

  锛???澶х緝?炬??渚?

• minimum-scale

  锛???灏?缂╂?炬??渚?

• user-scalable

  锛???????璁哥?ㄦ?風緝??yes/no锛?

name=robots

涓???

content

???版??浠ヤ???绉?锛?

• all

  锛???浠跺?琚?妫?绱??涓?椤甸??????炬?ュ??浠ヨ??ヨ???

• none

  锛???浠跺?涓?琚?妫?绱??涓?椤甸??????炬?ヤ???浠ヨ??ヨ???

• index

  锛???浠跺?琚?妫?绱??

• follow

  锛?椤甸??????炬?ュ??浠ヨ??ヨ???

• noindex

  锛???浠跺?涓?琚?妫?绱??

• nofollow

  锛?椤甸??????炬?ヤ???浠ヨ??ヨ????

4. img??srcset灞??х??浣???/h3>

<img/>

??绱???

srcset

灞??х?ㄤ?娴?瑙??ㄦ?規??瀹藉害????绱?瀵?搴??ュ??杞界?稿????劇??璧?婧???

璇?娉?锛?

<img srcset="?????闆??1 [???舵?′歡锛?瀹藉害/??绱?瀵?搴?,[?????闆??2 [???舵?′歡2]],... />

濡????劇???闆????????瀹??′歡锛???璇ュ?闆??涓哄?????規?锛??沖?ㄦ???戒腑?朵??規??????典?锛?浣跨?ㄨ?ュ?劇??锛?????浣跨?ㄥ?戒腑???劇????

<img srcset="image/pic_300.jpg 300w,
	image/pic_800.jpg 800w,
	image/pic_1300.jpg 1300w"
/>
           

?ㄤ?????璁懼???绱?DPR涓?锛?姣?寮??劇???劇ず??????瑙??ｅ?藉害锛?viewport锛??′歡锛?

DRP(璁懼???绱?)	pic_300	pic_800	pic_1300
1	viewport<=300px	300px<viewport<=800px	800px<viewport<=1300px
2	viewport<=150px	150px<viewport<=400px	400px<viewport<=650px
3	viewport<=100px	100px<viewport<=267px	267px<viewport<=433px

??涓烘病??涓??ㄧ???′歡锛???浠ユ?瑙??ㄤ????╂????杩?1300px???′歡锛??籌?杩???浼??劇ずpic_1300??

<img srcset="image/pic_300.jpg 300w,
	image/pic_800.jpg 800w,
	image/pic_1300.jpg 1300w,
	image/pic_default.jpg"
/>
           

杩?????澶?璁劇疆涓???ic_default锛??沖?ㄦ???戒腑?朵??′歡?訛??劇ずpic_default???劇????锛?瑙??ｂ??1300px?訛?

sizes璇?娉?

sizes="濯?浣??′歡1 [妲界??瀹藉害1],[濯?浣??′歡2 [妲界??瀹藉害2]],..."
           

sizes="(max-width: 360px) 340px, 128px"

sizes灏辨????榛?璁ゆ?劇ず128px, 濡???瑙??哄?藉害<=360px, ???劇ず340px??

瀵逛?妲界??瀹藉害锛???浠ヤ嬌?ㄥ??绱???rem绛??垮害??浣?锛?浣???涓???浣跨?ㄧ?懼??姣???

?ㄥ??涔?浜?sizes灞??у??锛?娴?瑙??ㄤ?渚?娆℃?ц?浠ヤ???浣?锛?

1???ョ??褰???璁懼?瀹藉害锛?

2??渚?娆℃???izes灞??у??琛ㄤ腑绗?涓?涓?涓虹????濯?浣??′歡锛?

3???ョ??璇ュ??浣??′歡瀵瑰???妲界??澶у?锛?

4????杩?妲界??澶у?锛???杞藉?瑰???srcset??琛ㄤ腑涓?妲界??澶у????ヨ????懼????

杩?涔???涓轟?涔?锛?sizes灞??у?椤婚????srcset灞??э???srcset?村??浠ヨ?辯?sizes灞??т嬌?ㄧ??????浜???

chrome娴?瑙??ㄨ?璇???????????

<img srcset="image/pic_300.jpg 300w,
	image/pic_800.jpg 800w,
	image/pic_1300.jpg 1300w,
	image/pic_default.jpg"
/>
           

?拌薄锛?瀹???娴?璇?杩?绋?涓?锛?????娴?瑙??ㄦ?ｅ父锛?浣???璋鋒??Chrome娴?瑙?????ㄥ?绐??ｄ?澶ф??灏???杩?绋?涓???????锛?灏?绐??ｇ疆浜???灏?锛??鋒?闆??锛???娓???瀹斤?杩?涓?杩?绋?涓??劇??浼?????锛?浣?????灏?娴?瑙??ㄦ??绐???杩?绋?涓?锛??劇??涓???????锛??ㄨ?璇?宸ュ?蜂腑锛??瑰?誨?瑰??劇??锛?娓??ょ?瀛???锛???浼??㈠???????

????锛?Chrome娴?瑙??ㄥ?ㄧ?瀛?涓???楂???杈ㄧ???劇???訛?涓?浼???杞戒???杈ㄧ?????劇???繪?挎?㈤????杈ㄧ???劇??

瑙ｅ?蟲?規?锛?浣跨??icture锛???浠ュ?濂界??瑙???hrome杩?涓???漢??缂?瀛???棰?锛?浠ｇ??濡?涓?锛?

<picture>
	<source media="(max-width:500px)" srcset="image/pic_300.jpg" />
	<source media="(max-width:800px)" srcset="image/pic_800.jpg" />
	<source media="(min-width:800px)" srcset="image/pic_1300.jpg" />
  <img src="image/pic_300.jpg" />
</picture>
           

5. web worker????瑙?/h3>

6. head??绛劇??浣????浠ュ??蹇?椤誨??绱?

<head>

??绛劇?ㄤ?瀹?涔???妗ｇ??澶撮???瀹???????澶撮?ㄥ??绱???瀹瑰?ㄣ??

<head>

涓?????绱???浠ュ??ㄨ????????绀烘?瑙??ㄥ?ㄥ?????懼?版?峰?琛ㄣ????渚???淇℃??绛???

??妗ｇ??澶撮?ㄦ??杩頒???妗ｇ????绉?灞??у??淇℃??锛???????妗ｇ????棰?????Web 涓???浣?缃?浠ュ?????朵???妗ｇ???崇郴绛???缁?澶у??版??妗ｅご?ㄥ???????版???戒?浼???姝ｄ?涓哄??瀹規?劇ず缁?璇昏????

涓?杩?浜???绛懼???ㄥ??head ?ㄥ??锛?

<base>, <link>, <meta>, <script>, <style>, <title>

??

?朵腑

<title>

瀹?涔???妗ｇ????棰?锛?瀹??? head ?ㄥ??涓???涓?蹇???????绱???

7. ??妗ｅ０??锛?Doctype锛???<!Doctype html>??浣?浣??? 涓ユ?兼ā寮?涓?娣鋒??妯″?濡?浣??哄??锛?瀹?浠???浣???涔??

**??妗ｅ０????浣????**??妗ｅ０????涓轟???璇?娴?瑙????瑙ｆ?????搴?璇ヤ互浠?涔??鳳?html??xhtml锛???妯″??ユ覆????妗ｏ?涓?????娓叉??妯″?浼?褰卞??娴?瑙??ㄥ??CSS 浠ｇ????饩? JavaScript ??????瑙ｆ????瀹?蹇?椤誨０????TML饨?妗ｇ??绗?饧?琛???褰???

HTML

??妗ｄ嬌?ㄤ?涔???????

HTML

?ュ????锛?杩??鋒?瑙??ㄦ???芥???у０?????????ユ?ｇ‘??瑙ｆ????

<!Doctype html>??浣????

<!doctype html>

??浣??ㄥ氨??璁╂?瑙??ㄨ??ユ????妯″?锛?浣跨?ㄦ???扮??

HTML5

?????ヨВ??娓叉??椤甸???濡???涓???锛?娴?瑙??ㄥ氨浼?杩??ユ販??妯″?锛???浠???瑕??垮??姝ょ被???靛??????

娴?瑙??ㄦ覆??椤甸?㈢??涓ょ?妯″?锛?????杩?document.compatMode?峰??锛?锛?

• CSS1Compat锛?????妯″?(涓ユ?兼ā寮?)(Strick mode)锛?榛?璁ゆā寮?锛?娴?瑙??ㄤ嬌??3C??????瑙ｆ??娓叉??椤甸?????ㄦ????妯″?涓?锛?娴?瑙??ㄤ互?舵????????楂????????伴〉???娴?瑙??ㄦ????code>W3C????瑙ｆ??浠ｇ????
• BackCompat锛???寮?妯″?(娣鋒??妯″?)(Quick mode)锛?娴?瑙??ㄤ嬌?ㄨ??宸辯????寮?妯″?瑙ｆ??娓叉??椤甸?????ㄦ??寮?妯″?涓?锛?椤甸??互涓?绉?姣?杈?瀹芥?劇???????煎?圭???瑰??劇ず??娣鋒??妯″???甯告ā????寮?娴?瑙??ㄧ??琛?涓猴?浠ラ?叉?㈣??绔??規??娉?宸ヤ???

?哄??锛?缃?椤典腑??

DTD

锛??存?ュ獎???頒嬌?ㄧ????涓ユ?兼ā寮?杩???娴?瑙?妯″?锛???浠ヨ??code>DTD??浣跨?ㄤ?杩?涓ょ??瑰????哄???????稿?熾??

• 濡?????妗ｅ????涓ユ?肩??

  DOCTYPE

  锛??ｄ?瀹?涓???浠ヤ弗?兼ā寮????幫?涓ユ??DTD ????涓ユ?兼ā寮?锛?锛?
• ????杩?娓?

  DTD

  ??

  URI

  ??

  DOCTYPE

  锛?涔?浠ヤ弗?兼ā寮????幫?浣???杩?娓?

  DTD

  ??娌℃??

  URI

  锛?缁?涓?璧?婧???璇?绗??灏辨??澹版?????????闆??锛?浼?瀵艱?撮〉??互娣鋒??妯″????幫??? URI ??杩?娓?DTD ????涓ユ?兼ā寮?锛?娌℃?? URI ??杩?娓?DTD ????娣鋒??妯″?锛?锛?

• DOCTYPE

  涓?瀛??ㄦ??褰㈠?涓?姝ｇ‘浼?瀵艱?存??妗ｄ互娣鋒??妯″????幫?DTD涓?瀛??ㄦ?????煎?涓?姝ｇ‘????娣鋒??妯″?锛?锛?

• HTML5

  娌℃??

  DTD

  锛???姝や?灏辨病??涓ユ?兼ā寮?涓?娣鋒??妯″????哄??锛?

  HTML5

  ???稿?瑰?芥?劇??璇?娉?锛?瀹??版?訛?宸茬?灏藉???藉ぇ??瀹??頒??????煎??HTML5 娌℃??涓ユ?煎??娣鋒??涔???)??

DTD(Document Type Definition) ??涓?濂??充???璁扮????璇?娉?瑙?????DTD ??涓?绉?淇?璇?XML??妗ｆ?煎?姝ｇ‘???????規?锛?????杩?姣?杈?XML??妗ｅ??DTD??浠舵?ョ????妗ｆ????????瑙???锛???绱?????绛句嬌?ㄦ?????ｇ‘?? ??琚???琛??闆０??浜? XML ??妗ｄ腑锛?涔???浣?涓轟?涓?澶??ㄥ??ㄣ??

?昏??瑷?涔?锛?涓ユ?兼ā寮?璁╁??涓?娴?瑙??ㄧ?涓??ц?涓?濂?瑙???锛?娣鋒??妯″?淇?璇?浜??х?绔???姝ｅ父杩?琛???