HTML鍏ラ棬鈥斺€斾簰鍔ㄥ紡鎺ㄩ€佸垵灏濊瘯
甯屾湜鍊熶簰鍔ㄥ紡寰俊鎺ㄩ€佸鍔犵敤鎴鋒椿璺冨害鐨勪竴娆″皾璇曘€?
0.鑳屾櫙
銆€銆€鐤儏鍘熷洜锛屽鑷磋澶氬ぇ浼楀枩闂諱箰瑙佺殑浣撹偛娲誨姩鍋滄憜锛屼絾鍗氫富鍜岄槦鍙嬩滑杩愯惀鐨勪綋鑲茬ぞ鍥㈠叕浼楀彿涓嶈兘鍋滄憜銆備負浜嗗埄鐢ㄥ綋涓嬬嚎涓婃椿鍔ㄩ鐜囬珮鐨勫鏈哄鍔犲叧娉ㄩ噺锛屽姞涔嬪井淇℃帹閫佺殑浜掑姩鎬у凡鎴愪負瓒嬪娍锛屽崥涓繪墦绠楀拰闃熷弸浠皾璇曞疄鐜頒簰鍔ㄥ紡鎺ㄩ€侊紝鍦ㄦ鍒嗕韓涓€浜涜嚜宸辨暣鐞嗙殑缁忛獙銆備笉濂㈡眰杈懼埌鈥滄秱灏忕摱瀛愨€濃€滅偣浜姹夆€濈瓑娲誨姩鐨勯闈＄▼搴︼紝浣嗘眰鎵€鏈夊姫鍔涜兘寰楀埌鐢ㄦ埛婊磋鍙€?
1.HTML鏍煎紡绠€浠?/h3>
銆€銆€瓒呮枃鏈爣璁拌瑷€锛堣嫳璇細HyperText Markup Language锛岀畝绉幫細HTML锛夋槸涓€绉嶇敤浜庡垱寤虹綉椤電殑鏍囧噯鏍囪璇█銆傚弬鑰冩潵婧愶細鑿滈笩鏁欑▼缃戠珯銆?
銆€銆€HTML鏂囦歡鐢辨枃浠跺ご銆佷富浣撶瓑閮ㄥ垎缁勬垚锛屾渶澶х殑鐗圭偣鏄爣绛懼寲绠＄悊銆?
銆€銆€娉ㄦ剰锛屼竴涓爣绛撅紙渚嬪a鏍囩锛夌殑寮€濮嬩笌缁撳熬鍒嗗埆鐢?lt;a></a>琛ㄧず锛屼篃鍙互琛ㄧず涓?lt;a />锛岄儴鍒嗕笉瑙勮寖鐨凥TML鏂囨。浼氱渷鐣ュ悗闈㈢殑</a>銆?銆€銆€鏍囩鐨勫唴瀹規斁鍦ㄤ袱涓皷鎷彿涔嬮棿锛屾爣绛劇殑灞炴€ф斁鍦ㄥ皷鎷彿"閲?锛屽儚杩欐牱锛?lt;style type="text/css">锛岃〃绀簊tyle鏍囩鐨則ype灞炴€т負"text鎴栬€卌ss"
銆€銆€锛堟敞锛欳SS鏄眰鍙犳牱寮忚〃(Cascading聽Style聽Sheets)锛屼互涓嬫槸浠庤彍楦熸暀绋嬬綉绔欎笂鎼繃鏉ョ殑CSS绠€鍗曚粙缁?
- 鏍峰紡瀹氫箟濡備綍鏄劇ず聽HTML 鍏冪礌
- 鏍峰紡閫氬父瀛樺偍鍦ㄦ牱寮忚〃涓?/li>
- 鎶婃牱寮忔坊鍔犲埌 HTML 4.0 涓紝鏄負浜嗚В鍐沖唴瀹逛笌琛ㄧ幇鍒嗙鐨勯棶棰?/li>
- 澶栭儴鏍峰紡琛ㄥ彲浠ユ瀬澶ф彁楂樺伐浣滄晥鐜?/li>
- 澶栭儴鏍峰紡琛ㄩ€氬父瀛樺偍鍦燙SS 鏂囦歡涓?/li>
- 澶氫釜鏍峰紡瀹氫箟鍙眰鍙犱負涓€涓?/li>
2.绀轟緥
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
body {background-color:white}
p {color:purple}
</style>
</head> 2.1 鎻掑叆鏂囧瓧
p鏍囩浠ｈ〃涓€娈佃瘽(paragraph)锛屽彲浠ヨ缃鏍兼牱寮忋€侀〉闈綅缃瓑锛屾垜浠鏄劇ず鐨勬枃瀛楀湪杩欓噷鏀懼湪<span>鏍囩涓嬶紝澶у鎶娾€滆鐪嬮锛氫互涓嬪摢涓槸鈥濈敤闇€瑕佹樉绀虹殑鍐呭鏇挎崲鍗沖彲銆?
鍙﹀锛屾垜浠敞鎰忓埌涓嬮潰浠ｇ爜绗?琛岀殑span鏍囩澶氫簡涓€涓猚olor: rgb(204, 0, 0);鐨刢olor灞炴€э紝璇存槑瀵矽繖鍗婂彞璇濃€滀腑鍥戒箳涔撶悆闃熼槦鏈嶇殑涓繪祦棰滆壊鈥濈殑瀛椾綋棰滆壊杩涜浜嗚缃紝涓轟簡绐佸嚭鏄劇ず銆傞鑹插氨鏄疪GB鏍煎紡鐨?204, 0, 0)锛屽鏋滅涓€涓弬鏁?=255涓斿悗涓や釜鍙傛暟涓?锛屽嵆涓虹函姝ｇ殑绾㈣壊銆?
<body>
<p style="max-width: 100%;min-height: 1em;white-space: normal;margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;">
<span style="font-size: 15px;">
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 璇風湅棰橈細浠ヤ笅鍝釜鏄? </span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">涓浗涔掍箵鐞冮槦闃熸湇鐨勪富娴侀鑹? </span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">锛? </span>
</span>
<br />
</p> 2.2 鎻掑叆鍥劇墖
浠ヤ笅鐨勫唴瀹圭敱澶氫釜section鏍囩宓屽鏋勬垚锛屾垜浠彧闇€瑕佹浛鎹笅闈?.3鑺傜浜屼釜浠ｇ爜妗嗕腑绗?琛岀殑background-image鍚庨潰璺熺潃鐨剈rl鍗沖彲銆?
闇€瑕佹敞鎰忕殑鏄紝鏇挎崲鏃跺彧闇€瑕佹洿鏀逛腑闂寸殑鍥劇墖閾炬帴锛屽紑濮嬪鐨?(" 鍜岀粨灏劇殑 ") 閮戒笉闇€瑕佸姩銆?
url("https://baike.so.com/gallery/listghid=first&pic_idx=1&eid=1395020&sid=1474879") 2.3娣誨姞 鐐瑰嚮-鍒囨崲鍒拌儗鏅浘鐗?鍔ㄧ敾
銆€銆€鐢熸垚鍔ㄧ敾鐨勬爣绛句負svg锛岀敤svg缁樺浘鐨勬枃绔犱竴鎼滀竴澶ф妸锛屽湪姝や笉璧樿堪浜嗐€俿vg涓嬮潰鐨勫叿浣撳姩鐢誨姩浣滄爣绛句負animate锛屼互涓嬮潰鐨勫姩鐢繪爣绛句負渚嬶細绠€渚胯搗瑙侊紝鎴戜滑鍙叧娉╢ill銆乫rom銆乼o銆乨uration銆乥egin鏍囩銆?- fill="freeze"浠ｈ〃鍔ㄧ敾鏁堟灉灞曠ず瀹屾瘯鍚庝繚鐣欙紝鍙€夌浉瀵瑰簲鐨勫睘鎬т負"remove"锛屼唬琛ㄥ畬鎴愬悗鍘婚櫎鍔ㄧ敾鏁堟灉銆?/li>
- from鍜宼o浠ｈ〃鐘舵€佺殑鍙樺寲锛?0"浠ｈ〃閫忔槑锛?1"浠ｈ〃瀹屽叏涓嶉€忔槑锛屼粠1鍙樹負0鍗充負鈥滃浘鐗囨秷澶扁€濇晥鏋滐紝鍙嶄箣锛屸€滃浘鐗囧嚭鐜扳€濄€俠tw, 鍏朵粬鏍囩鍙兘鏈夌殑灞炴€pacity涔熸槸閫忔槑搴︾殑鎰忔€濄€?/li>
- begin浠ｈ〃鍔ㄧ敾瑙﹀彂鏈哄埗锛屽彲閫夊€間負鐐瑰嚮"click"銆佺偣鍑?婊炲悗鏃堕棿"click+0.1s"銆佹墦寮€椤甸潰鍚庝竴瀹氭椂闂村唴鑷姩瑙﹀彂"2000ms"銆?0.16s"绛夈€?/li>
- duration浠ｈ〃鍔ㄧ敾瀹屾垚闇€瑕佺殑鏃堕暱銆?/li>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s"
</animate> 銆€銆€浠ヤ笅鏄竴涓畬鏁磗ection鐨勫唴瀹癸紝鍖呭惈浜嗗浘鐗囨樉绀虹殑box浣嶇疆銆佸ぇ灏忥紝鍥劇墖閾炬帴锛屽姩鐢繪晥鏋溿€?
銆€銆€瑕佸疄鐜扮殑鏁堟灉鏄紝鎵撳紑椤甸潰鏃跺睍绀虹孩鑹插浘鐗囷紝鐐瑰嚮鍥劇墖鍚庢樉绀哄紶缁х韬潃瑗跨孩鏌跨倰楦¤泲鑹茬悆鏈嶅浘鐗囥€?
銆€銆€绾㈣壊鍥劇墖涓嶆槸鎻掑叆鐨勫閮ㄥ浘鐗囷紝鍙粯鍒剁孩鑹插～鍏呯煩褰㈠緱鍒幫紝鎼滅儲<rec>鏍囩鍗沖彲銆?
銆€銆€绾㈣壊鍥劇墖鐨勫姩鐢繪槸鈥滅偣鍑?绔嬪埢浠?涓嶉€忔槑鍒?閫忔槑鈥濓紝鐐瑰嚮鍚庯紝鎺ョ潃浼氳Е鍙戣儗鏅浘鐗囷紙绉戠+鐞冩湇鍥劇墖锛夌殑鍔ㄧ敾鈥滅偣鍑?0.1s鍚?浠?閫忔槑鍒?涓嶉€忔槑鈥濄€?
<section style="box-sizing: border-box;font-size: 16px;">
銆€鈥︹€? <section style="background-image: url("https://baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€銆€鈥︹€?</section> 3.绀轟緥鐨勫畬鏁翠唬鐮?/h3>
娉ㄦ剰锛氬井淇″叕浼楀彿缂栬緫鍣ㄦ棤娉曠洿鎺ュHTML浠ｇ爜杩涜杞崲锛屽彲浠ュ厛鍦ㄥ叾浠栫紪杈戝櫒涓偣鍑籬tml杞崲鎸夐挳杞崲鍚庯紝閫夋嫨澶嶅埗姝ｆ枃锛堣€屼笉鏄紪杈戞涓殑浠ｇ爜锛夌矘璐村埌寰俊鍏紬鍙風紪杈戝櫒涓€?
浠?35缂栬緫鍣╤ttps://www.135editor.com/涓轟緥锛屽厛鐐瑰嚮HTML杞崲鎸夐挳锛屽啀閫夋嫨鍙充晶-寰俊澶嶅埗鍗沖彲銆傚彟澶栧彲鐐瑰嚮鍙充晶-鎵嬫満棰勮锛屽湪鎵嬫満绔壂鎻忎複鏃堕摼鎺ユ煡鐪嬫晥鏋溿€傚涓嬪浘鎵€绀猴細
聽
绀轟緥鐨勫畬鏁翠唬鐮佸涓嬶細
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<style type="text/css">
body {background-color:white}
p {color:purple}
</style>
</head>
<body>
<p style="max-width: 100%;min-height: 1em;white-space: normal;margin-left: 16px;margin-right: 16px;line-height: 1.75em;letter-spacing: 0.5px;font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box !important;overflow-wrap: break-word !important;">
<span style="font-size: 15px;">
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;"> 璇風湅棰橈細浠ヤ笅鍝釜鏄? </span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;box-sizing: border-box;color: rgb(204, 0, 0);">涓浗涔掍箵鐞冮槦闃熸湇鐨勪富娴侀鑹? </span>
<span style="font-size: 15px;text-align: left;font-family: mp-quote, -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;">锛? </span>
</span>
<br />
</p>
<section style="box-sizing: border-box;font-size: 16px;">
<section style="text-align: center;margin-top: 10px;margin-right: 0%;margin-left: 0%;box-sizing: border-box;" powered-by="xiumi.us">
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section style="background-image: url("https://baike.so.com/gallery/list?ghid=first&pic_idx=1&eid=1395020&sid=1474879");background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;background-attachment: scroll;width: 95%;margin-left: auto;margin-right: auto;box-sizing: border-box;"><section class="group-empty" style="display: inline-block;width: 100%;height: 105px;vertical-align: top;overflow-y: auto;border-style: none;border-width: 0px;border-radius: 10px;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;"></section></section><section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(255, 0, 0);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;">
</section>
<section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(0, 0, 255);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
<section style="display: inline-block;vertical-align: top;width: 33.33%;padding: 3px;box-sizing: border-box;">
<section style="box-sizing: border-box;" powered-by="xiumi.us">
<section class="group-empty" style="display: inline-block;width: 95%;height: 105px;vertical-align: top;overflow-y: auto;border-width: 0px;border-radius: 10px;border-style: none;border-color: rgb(62, 62, 62);box-sizing: border-box;-webkit-overflow-scrolling: touch;">
</section>
<section style="box-sizing: border-box;margin-top: -105px;height: 105px;">
<section class="top-div" style="height: 100%;box-sizing: border-box;">
<svg class="svg-layout-content root-svg" width="95%" height="100%" xmlns="http://www.w3.org/2000/svg" style="box-sizing: border-box;transform: rotateZ(0deg);-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-o-transform: rotateZ(0deg);width: 95%;" opacity="1">
<animate class="init-width-animation" attributename="width" style="box-sizing: border-box;" fill="freeze" to="95.00%" from="95.00%" begin="0s" duration="0.01">
</animate>
<animate attributename="width" style="box-sizing: border-box;" fill="freeze" to="0" from="1" duration="0.01" begin="click + 0.1s">
</animate>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="box-sizing: border-box;">
<svg class="rect-content" width="100%" height="100%" style="box-sizing: border-box;">
<rect width="100%" height="100%" style="box-sizing: border-box;opacity: 1;fill: rgb(255, 0, 255);" x="0%">
</rect>
</svg>
<svg style="width: 100%;height: 100%;box-sizing: border-box;" version="1.1" xmlns="http://www.w3.org/2000/svg">
</svg>
</svg>
<animate attributename="opacity" style="box-sizing: border-box;" fill="freeze" dur="0.1" begin="click" from="1" to="0">
</animate>
</svg>
</section>
</section>
</section>
</section>
</section>
<section style="margin-top: 10px;box-sizing: border-box;" powered-by="xiumi.us">
<section style="color: rgb(165, 165, 165);box-sizing: border-box;">
<p style="text-align: center;white-space: normal;box-sizing: border-box;">娆㈣繋鍏蟲敞xx涔掑崗锛?
<br style="box-sizing: border-box;" />鈻? </p>
</section>
</section>
</body 聽
鍚庤鈥斺€?
銆€銆€鍐欒繖绡囧崥瀹㈠墠锛屽崥涓繪浘绾犵粨浜庤繖浠芥湰搴旇礎鐚粰绀懼洟瀹ｄ紶閮ㄧ殑鍐呴儴璧勬枡鏄惁搴旇鍏箣浜庝紬锛屼絾鏈€缁堣涓哄紑婧愭湁鍔╀簬鎴愰暱锛屽喌涓旀簮浠ｇ爜+鎶€鏈祫鏂欐湰鏄叕寮€鐨勶紝搴斿澶氬垎浜氦娴併€傚崥涓諱綔涓哄墠绔皬鐧斤紙鐢氳嚦鍙互璇存槸澶栬浜洪兘涓嶄負杩囷級鍓嶅悗鍒╃敤绾?-6涓皬鏃舵悳闆嗘暣鐞嗕簡鐩稿叧璧勬枡锛屽笇鏈涘姫鍔涙病鏈夌櫧璐癸紝涔熶絾鎰塊€愭ⅵ涔嬭礬鑳藉鍧氭寔锛岀珛姝や負璇併€?
銆€銆€浜斾竴鍔沖姩鑺傦紝瑕佹洿鍔犲姫鍔涘晩锛?
聽