html5 瀛︿範鎬荤粨

Posted 2021-06-15 鐢熶俊鏉傝

鍓嶈█

---

 html5銆乧ss瀛︿範鎬荤粨銆傛瘡澶╄姳涓€涓皬鏃剁殑瀛︿範鏃堕棿锛岀粡杩囦袱鍛ㄥ瀛︿範锛岀粓浜庡 html 鍜?css 鍩烘湰瑙勫垯鏈変簡涓€瀹氱殑浜嗚В銆傝娉曡櫧鐒舵尯绠€鍗曪紝浣嗙煡璇嗙偣杩樻槸寰堝鐨勶紝鎯宠瀹屽叏鎺屾彙闇€瑕佸緢闀挎椂闂寸殑绉疮銆傚鏋滀负浜嗙帺鐜╁彧闇€瑕佸涔爃tml 鍜?css 鍩烘湰瑙勫垯灏卞彲浠ヤ簡锛屽洜涓洪€氳繃杩欎袱涓煡璇嗙偣灏卞彲浠ュ啓涓€涓畝鍗曠殑缃戦〉浜嗭紝https://1156054203.github.io杩欐槸鎴戝啓鐨勫皬缃戦〉锛屾柊鎵嬩笂璺ぇ瀹惰澶氬叧鐓э紒馃榾馃榾馃榾

html 缃戦〉瑙勫垯

---

  html瑙勫垯鏈韩涓嶉毦锛岄毦鍦ㄧ煡璇嗙偣寰堝鍜屾妧宸с€俬tml鏄爣绛捐瑷€锛屾晠鎵€鏈夊唴瀹归兘鏄斁鍦ㄥ搴旂殑鏍囩涓紝濡?<h1>杩欐槸涓€涓狧1鏍囬</h1>锛岃繖鏄〃绀哄啓浜嗕竴涓爣棰橈紝鍚屾椂杩欎釜鏍囩鐨勮涔夋槸涓€绾ф爣棰橈紝璇箟鏈韩瀵规牸寮忔病鏈変粈涔堝奖鍝嶏紝浣嗘槸涓嶈涔辩敤鏈夎涔夌殑鏍囩銆傚洜涓烘祻瑙堝櫒鎼滅储缃戦〉灏辨槸闈犺繖浜涜涔夋爣绛炬潵妫€绱㈢綉椤碉紝濡傛灉杩囧浣跨敤鐨勮瘽娴忚鍣ㄤ細闄嶄綆椤甸潰鍦ㄦ悳绱㈢粨鏋滀腑鐨勬帓搴忥紝娌℃湁鐨勮瘽娴忚鍣ㄦ棤娉曟绱㈠埌銆?/p>

html 鏍囩鍒嗙被

---

鍦╤tml涓厓绱犲氨鏄爣绛撅紝甯冨眬涓父鐢ㄧ殑鏈変笁绉嶆爣绛撅紝鍧楀厓绱犮€佸唴鑱斿厓绱犮€佸唴鑱斿潡鍏冪礌锛屼簡瑙ｈ繖涓夌鍏冪礌鐨勭壒鎬э紝鎵嶈兘鐔熺粌鐨勮繘琛岄〉闈㈠竷灞€銆?/p>

鍧楀厓绱狅紝涔熷彲浠ョО涓鸿鍏冪礌锛屽竷灞€涓父鐢ㄧ殑鏍囩濡傦細div銆乸銆乽l銆乴i銆乭1~h6銆乨l銆乨t銆乨d绛夌瓑閮芥槸鍧楀厓绱狅紝瀹冨湪甯冨眬涓殑琛屼负锛?/p>

1銆佹敮鎸佸叏閮ㄧ殑鏍峰紡

2銆佸鏋滄病鏈夎缃搴︼紝榛樿鐨勫搴︿负鐖剁骇瀹藉害100%

3銆佺洅瀛愬崰鎹竴琛屻€佸嵆浣胯缃簡瀹藉害

鍐呰仈鍏冪礌锛屼篃鍙互绉颁负琛屽唴鍏冪礌锛屽竷灞€涓父鐢ㄧ殑鏍囩濡傦細a銆乻pan銆乪m銆乥銆乻trong銆乮绛夌瓑閮芥槸鍐呰仈鍏冪礌锛屽畠浠湪甯冨眬涓殑琛屼负锛?/p>

1銆佹敮鎸侀儴鍒嗘牱寮忥紙涓嶆敮鎸佸銆侀珮銆乵argin涓婁笅銆乸adding涓婁笅锛?/p>

2銆佸楂樼敱鍐呭鍐冲畾

3銆佺洅瀛愬苟鍦ㄤ竴琛?/p>

4銆佷唬鐮佹崲琛岋紝鐩掑瓙涔嬮棿浼氫骇鐢熼棿璺?/p>

5銆佸瓙鍏冪礌鏄唴鑱斿厓绱狅紝鐖跺厓绱犲彲浠ョ敤text-align灞炴€ц缃瓙鍏冪礌姘村钩瀵归綈鏂瑰紡

鍐呰仈鍧楀厓绱狅紝涔熷彨琛屽唴鍧楀厓绱狅紝鏄柊澧炵殑鍏冪礌绫诲瀷锛岀幇鏈夊厓绱犳病鏈夊綊浜庢绫诲埆鐨勶紝img鍜宨nput鍏冪礌鐨勮涓虹被浼艰繖绉嶅厓绱狅紝浣嗘槸涔熷綊绫讳簬鍐呰仈鍏冪礌锛屾垜浠彲浠ョ敤display灞炴€у皢鍧楀厓绱犳垨鑰呭唴鑱斿厓绱犺浆鍖栨垚杩欑鍏冪礌銆傚畠浠湪甯冨眬涓〃鐜扮殑琛屼负锛?/p>

1銆佹敮鎸佸叏閮ㄦ牱寮?/p>

2銆佸鏋滄病鏈夎缃楂橈紝瀹介珮鐢卞唴瀹瑰喅瀹?/p>

3銆佺洅瀛愬苟鍦ㄤ竴琛?/p>

4銆佷唬鐮佹崲琛岋紝鐩掑瓙浼氫骇鐢熼棿璺?/p>

5銆佸瓙鍏冪礌鏄唴鑱斿潡鍏冪礌锛岀埗鍏冪礌鍙互鐢╰ext-align灞炴€ц缃瓙鍏冪礌姘村钩瀵归綈鏂瑰紡銆?/p>

杩欎笁绉嶅厓绱狅紝鍙互閫氳繃display灞炴€ф潵鐩镐簰杞寲锛屼笉杩囧疄闄呭紑鍙戜腑锛屽潡鍏冪礌鐢ㄥ緱姣旇緝澶氾紝鎵€浠ユ垜浠粡甯告妸鍐呰仈鍏冪礌杞寲涓哄潡鍏冪礌锛屽皯閲忚浆鍖栦负鍐呰仈鍧楋紝鑰岃浣跨敤鍐呰仈鍏冪礌鏃讹紝鐩存帴浣跨敤鍐呰仈鍏冪礌锛岃€屼笉鐢ㄥ潡鍏冪礌杞寲浜嗐€?/p>

CSS鐩掑瓙妯″瀷瑙ｉ噴

鍏冪礌鍦ㄩ〉闈腑鏄剧ず鎴愪竴涓柟鍧楋紝绫讳技涓€涓洅瀛愶紝CSS鐩掑瓙妯″瀷灏辨槸浣跨敤鐜板疄涓洅瀛愭潵鍋氭瘮鍠伙紝甯姪鎴戜滑璁剧疆鍏冪礌瀵瑰簲鐨勬牱寮忋€傜洅瀛愭ā鍨嬪緢閲嶏紝寤鸿澶у濂藉ソ鐞嗚В锛岀洅瀛愭ā鍨嬬ず鎰忓浘濡備笅锛?/p>

h鐩掑瓙妯″瀷

鎶婂厓绱犲彨鍋氱洅瀛愶紝璁剧疆瀵瑰簲鐨勬牱寮忓垎鍒负锛氱洅瀛愮殑瀹藉害(width)銆佺洅瀛愮殑楂樺害(height)銆佺洅瀛愮殑杈规(border)銆佺洅瀛愬唴鐨勫唴瀹瑰拰杈规涔嬮棿鐨勯棿璺?padding)銆佺洅瀛愪笌鐩掑瓙涔嬮棿鐨勯棿璺?margin)銆?/p>

娴姩

html鍦ㄥ竷灞€鐨勮繃绋嬩腑浼氱粡甯镐娇鐢ㄦ诞鍔紝灏辨槸璁╀竴涓厓绱犳诞鍔ㄨ劚绂绘枃妗ｆ祦鏉ュ埌杈炬弧鎰忕殑甯冨眬鏁堟灉锛屼笉杩囦娇鐢ㄤ簡娴姩鍚庡氨寰楁敞鎰忛珮搴?span class="mq-36">濉岄櫡鐨勯棶棰橈紝鍚﹀垯灏变細瀵艰嚧椤甸潰甯冨眬绱婁贡銆?/p>

鏈€鍚?/span>