大家好,今天小编来为大家解答以下的问题，关于html5布局教程，html5 布局这个很多人还不知道，现在让我们一起来看看吧！

本文目录：

1. HTML5都有哪些学习要点
2. 学HTML5需要什么基础,怎么入门
3. 怎么搭建html5 bootstrap框架布局
4. html5页面怎么布局

HTML5都有哪些学习要点

1銆?鍓嶇椤甸潰閲嶆瀯銆備富瑕佸唴瀹逛负PC绔綉绔欏竷灞€銆丳hotoshop宸ュ叿鍙婂垏鍥俱€丠5绉诲姩绔綉椤靛竷灞€銆丠TML5+CSS3鏂扮壒鎬т笌浜や簰銆傚涔犵洰鏍囨槸瀹屾垚PC绔綉绔欏竷灞€锛屽彲瀹炵幇鍝嶅簲寮忓竷灞€锛屼竴濂椾唬鐮侀€傞厤 PC绔€佺Щ鍔ㄧ銆佸钩鏉胯澶囩瓑銆?br/>2銆?鍓嶅悗绔綉椤典氦浜掋€備富瑕佸唴瀹逛负JavaScript璇硶鍏ㄩ潰杩涢樁銆丒S6鍒?ES10鏂拌娉曞疄璺点€乯Query搴旂敤鍙婃彃浠朵娇鐢ㄣ€佽璁℃ā寮忓強鎻掍欢缂栧啓銆佸皝瑁匤S宸ュ叿搴撳強WebAPIS銆丄JAX+PHP+MySQL鍓嶅悗绔氦浜掋€佸墠绔伐绋嬪寲涓庢ā鍧楀寲搴旂敤浠ュ強PC绔叏鏍堝紑鍙戦」鐩瓑銆傚涔犵洰鏍囨槸鍙互鎺屾彙鍓嶇宸ョ▼鍖栧伐鍏凤紝濡?git銆乬ulp銆亀ebpack绛夛紝鎼缓椤圭洰鍙婂紑鍙戦」鐩€?br/>3銆?Node.js+鍓嶇妗嗘灦銆備富瑕佸唴瀹逛负Node.js鍏ㄩ潰杩涢樁銆並oa2+MongoDB鎼缓鏈嶅姟銆乂ue.js妗嗘灦銆丷eact.js妗嗘灦銆佸皬绋嬪簭浜戝紑鍙戜笌灏忕▼搴忔鏋躲€佸師鐢烝PP涓庢贩鍚圓PP銆佹暟鎹彲瑙嗗寲涓庢闈㈠簲鐢ㄧ瓑銆傚涔犵洰鏍囨槸鎺屾彙妗岄潰搴旂敤鍙婂彲瑙嗗寲澶ф暟鎹紝瀹炵幇澶嶆潅鏁版嵁灞曠ず绫婚」鐩紝鑳藉鐙珛瀹屾垚鍓嶅悗鍙扮浉鍏冲姛鑳斤紝鑳滀换HTML5鍏ㄦ爤寮€鍙戝伐绋嬪笀鑱屼綅銆傚緢澶氬涔爓eb鍓嶇鐨勬湅鍙嬮兘甯屾湜鍦ㄥ鎴愬悗鑳芥壘鍒颁竴浠芥弧鎰忕殑宸ヤ綔锛屾墍浠ユ垜浠湪瀛︿範杩囩▼涓竴瀹氳娉ㄦ剰瀹炴垬缁忛獙鐨勭Н绱紝濡傛灉浣犳墍瀛︾殑涓滆タ瀵逛紒涓氭病鏈夌敤锛岄偅浣犳墍鍋氱殑涓€鍒囬兘鏄棤鐢ㄥ姛銆?

学HTML5需要什么基础,怎么入门

銆€銆€闅忕潃绉诲姩浜掕仈缃戠殑鍙戝睍锛寃eb鍓嶇閫愭笎鍙楀埌浼佷笟鐨勯噸瑙嗭紝鍓嶇寮€鍙戜汉鍛樼殑钖祫涔熸按娑ㄨ埞楂橈紝瓒婃潵瓒婂鐨勪汉鐪嬪ソ鍓嶇琛屼笟鐨勫彂灞曪紝鎯宠杞鍔犲叆銆備笅闈紝缁欏ぇ瀹跺垎浜竴浠絯eb鍓嶇瀛︿範璺嚎鍥撅紝甯屾湜瀵瑰垵瀛﹁€呮湁鎵€甯姪銆俉eb鍓嶇琛屼笟鐨勫彂灞曪紝璁╁墠绔汉鍛樿兘瀹屾垚姣斾互鍓嶆洿澶氱殑鑱岃矗鑼冨洿锛屾墍浠ユ湭鏉ュ墠绔彲浠ュ鍙ｅ緞灏变笟锛屽墠鏅潪甯稿ソ銆?/p>

瀵逛簬闆跺熀纭€鐨勪汉鑰岃█锛岃鎬庝箞瀛︿範web鍓嶇鍛?

1銆?鍓嶇椤甸潰閲嶆瀯銆備富瑕佸唴瀹逛负PC绔綉绔欏竷灞€銆丳hotoshop宸ュ叿鍙婂垏鍥俱€丠5绉诲姩绔綉椤靛竷灞€銆丠TML5+CSS3鏂扮壒鎬т笌浜や簰銆傚涔犵洰鏍囨槸瀹屾垚PC绔綉绔欏竷灞€锛屽彲瀹炵幇鍝嶅簲寮忓竷灞€锛屼竴濂椾唬鐮侀€傞厤 PC绔€佺Щ鍔ㄧ銆佸钩鏉胯澶囩瓑銆?/p>

2銆?鍓嶅悗绔綉椤典氦浜掋€備富瑕佸唴瀹逛负JavaScript璇硶鍏ㄩ潰杩涢樁銆丒S6鍒?ES10鏂拌娉曞疄璺点€乯Query搴旂敤鍙婃彃浠朵娇鐢ㄣ€佽璁℃ā寮忓強鎻掍欢缂栧啓銆佸皝瑁匤S宸ュ叿搴撳強WebAPIS銆丄JAX+PHP+MySQL鍓嶅悗绔氦浜掋€佸墠绔伐绋嬪寲涓庢ā鍧楀寲搴旂敤浠ュ強PC绔叏鏍堝紑鍙戦」鐩瓑銆傚涔犵洰鏍囨槸鍙互鎺屾彙鍓嶇宸ョ▼鍖栧伐鍏凤紝濡?git銆乬ulp銆亀ebpack绛夛紝鎼缓椤圭洰鍙婂紑鍙戦」鐩€?/p>

3銆?Node.js+鍓嶇妗嗘灦銆備富瑕佸唴瀹逛负Node.js鍏ㄩ潰杩涢樁銆並oa2+MongoDB鎼缓鏈嶅姟銆乂ue.js妗嗘灦銆丷eact.js妗嗘灦銆佸皬绋嬪簭浜戝紑鍙戜笌灏忕▼搴忔鏋躲€佸師鐢烝PP涓庢贩鍚圓PP銆佹暟鎹彲瑙嗗寲涓庢闈㈠簲鐢ㄧ瓑銆傚涔犵洰鏍囨槸鎺屾彙妗岄潰搴旂敤鍙婂彲瑙嗗寲澶ф暟鎹紝瀹炵幇澶嶆潅鏁版嵁灞曠ず绫婚」鐩紝鑳藉鐙珛瀹屾垚鍓嶅悗鍙扮浉鍏冲姛鑳斤紝鑳滀换HTML5鍏ㄦ爤寮€鍙戝伐绋嬪笀鑱屼綅銆傚緢澶氬涔爓eb鍓嶇鐨勬湅鍙嬮兘甯屾湜鍦ㄥ鎴愬悗鑳芥壘鍒颁竴浠芥弧鎰忕殑宸ヤ綔锛屾墍浠ユ垜浠湪瀛︿範杩囩▼涓竴瀹氳娉ㄦ剰瀹炴垬缁忛獙鐨勭Н绱紝濡傛灉浣犳墍瀛︾殑涓滆タ瀵逛紒涓氭病鏈夌敤锛岄偅浣犳墍鍋氱殑涓€鍒囬兘鏄棤鐢ㄥ姛

怎么搭建html5 bootstrap框架布局

濡備綍浣跨敤Bootstrap

閽堝Bootstrap鐨?HTML

娓呭崟•鏄竴涓湁鐢ㄧ殑妗嗘灦HTML鏂囦欢锛岀敤浜庣粨鍚堜娇鐢?Bootstrap涓庝竴涓浐瀹氬竷灞€鍜屽搷搴旂壒鎬э細
娓呭崟•鐢ㄤ簬Bootstrap椤圭洰鐨勫熀鏈鏋?HTML鏂囦欢(listing1.html)

缂╁皬鐗堟湰

鍦?Bootstrap涓嬭浇涓紝璇锋敞鎰忥紝姣忎釜CSS鍜?JavaScript鏂囦欢鏈変袱涓増鏈彲鐢?渚嬪bootstrap.js鍜?bootstrap.min.js)銆傜涓€绉嶅舰寮忔槸涓€涓父瑙勬枃浠讹紝绗簩绉嶅舰寮忔槸鍘嬬缉鏂囦欢鎴?鈥滅缉灏忔枃浠垛€濄€傚氨鍍忓湪鏈枃涓竴鏍凤紝浣跨敤缂╁皬鐗堟湰鍗冲彲瀹炵幇鏈€鏈夋晥鐨勯〉闈㈠姞杞姐€?br/>listing1.html鐨勫紑濮嬩箣澶勭殑DOCTYPE澹版槑灏嗗叾鏍囪涓轰竴涓?HTML5鏂囦欢銆俬ead鍏冪礌鍐呯殑meta鏍囪鎺у埗绉诲姩鐨勫皬灞忓箷甯冨眬銆?涓烘柟渚胯捣瑙侊紝鎴戝皢瀹冧滑绉颁綔meta/viewport鏍囪銆?榛樿鎯呭喌涓嬶紝澶у鏁扮Щ鍔ㄨ澶囨寜姣斾緥缂╁皬Web椤甸潰锛屼娇涔嬮€傚簲灞忓箷澶у皬锛屽氨鍍忓湪妗岄潰娴忚鍣ㄧ獥鍙ｄ腑涓€鏍枫€傝繖灏辨槸涓轰粈涔堣澶氱綉绔欎笂鐨勬枃鏈拰鍥惧儚鍦ㄦ墜鏈烘祻瑙堝櫒涓湅璧锋潵寰堝皬鐨勫師鍥犮€俶eta/viewport澹版槑涓殑initial-scale=1.0閮ㄥ垎绂佺敤浜嗚繖涓€琛屼负锛屽憡璇夎澶囪淇濇寔椤甸潰鐨勫師鏈夊昂瀵搞€傝澹版槑琛ㄧずWeb璁捐浜哄憳(鍦ㄦ湰渚嬩腑涓?Bootstrap)宸茬粡瀹屾垚浜嗗疄鐜拌緝灏忓睆骞曠殑鍝嶅簲寮忚璁¤繖涓€浠诲姟锛屾墍浠ュ湪榛樿鎯呭喌涓嬶紝娌″繀瑕侀噰鐢ㄨ洰鍔涙柟娉曘€?

html5页面怎么布局

1锛夊儚<span>杩欐牱鐨勮鍐呮爣璁帮紝瀹氫箟瀹冪殑margin-top鍜宮argin-bottom鏄棤鏁堢殑锛岄櫎闈炰綘鎶婂畠璁剧疆涓哄潡鐘跺厓绱犳墠鍙互銆侱isplay:block

2锛夊浜庡潡鐘跺厓绱狅紝浣犲彲浠ヨ嚜鐢辩殑浣跨敤澶栬竟璺濇潵瀹氫箟鐗堝紡鍜屽厓绱犱箣闂寸殑璺濈銆傜被浼?DIV绛夌瓑锛?br/>3锛夋棤璁轰粈涔堝厓绱狅紝涓€鏃﹁缃负鏄诞鍔ㄦ樉绀猴紝灏辨嫢鏈変簡瀹屾暣鐨勭洅妯″瀷缁撴瀯锛屾垜浠氨鍙互浣跨敤澶栬竟璺濓紝鍐呰竟璺濓紝杈规锛岄珮鍜屽鏉ユ帶鍒剁殑澶у皬浠ュ強涓庡叾浠栧璞′箣闂寸殑浣嶇疆鍏崇郴銆?br/>4锛夋诞鍔ㄦ槸浠庣綉椤靛竷灞€鐨勮搴︽潵瀹氫箟鍏冪礌鐨勬樉绀猴紝鑰岃鍐呭拰鍧楃姸灞炴€т富瑕佹槸浠庡厓绱犺嚜韬殑鎬ц川鏉ュ畾鍏舵樉绀虹殑銆?br/>5锛夊綋鍏冪礌娌℃湁瀹氫箟杈规鏃讹紝鍙互鎶婂唴杈硅窛浣滀负澶栬竟璺濅娇鐢ㄣ€傛湁鏃跺€欏杈硅窛浼氭湁閲嶅彔鐜拌薄鐨勩€?br/>6锛夊綋涓哄厓绱犲畾涔夎儗鏅浘鍍忔椂锛屽唴杈硅窛鍖哄煙鍐呭彲浠ユ樉绀鸿儗鏅浘鍍忥紝鑰屽澶栬竟璺濆尯鍩熸潵璇达紝鑳屾櫙鍥惧儚鏄揪涓嶅埌鐨勶紝浠栨案杩滈兘鏄€忔槑鐘舵€?br/>7锛夌敤div+css璁捐缃戦〉缁撴瀯鏃讹紝璁捐甯堟弧鑴戝瓙閮芥槸缃戦〉鍐呭锛岃€岄潪鍐呭鎵€鍛堢幇鐨勬晥鏋溿€?br/>8锛夊潡鐘跺厓绱狅細涓嶇鍧楃姸鍏冪礌瀹藉害鏄灏戯紝浠栨€讳細鑷姩鍗犳嵁涓€琛岋紝鍥犱负鍦ㄤ粬鏈熬闄勫姞浜嗕竴涓崲琛岀锛岃€岃鍐呭厓绱犳病鏈夎繖涓壒鐐广€傚潡鐘跺厓绱犳湁瀹屾暣鐨勭洅妯″瀷缁撴瀯锛屽彲浠ュ畾涔夊搴﹀拰楂樺害锛岃€岃鍐呭厓绱犳病鏈夎繖涓壒鎬э紝鏃犳硶閫氳繃楂樺害鏉ユ敼鍙樻枃鏈鐨勮楂樸€?br/>鍧楀厓绱犵殑浠ｈ〃鏍囪div

琛屽唴鍏冪礌鐨勪唬琛ㄦ爣璁?span锛岃鍐呮爣璁颁笉鍏峰缁勭粐缁撴瀯妗嗘灦

9锛夌綉椤靛竷灞€鍒嗕负锛氳嚜鐒跺竷灞€锛屾诞鍔ㄥ竷灞€锛?瀹氫綅甯冨眬

10锛夊綋涓€涓厓绱犺瀹氫箟涓烘诞鍔ㄦ樉绀烘椂锛屽嵆瀹氫箟涓哄潡鐘跺厓绱犮€傚苟涓旇鍏冪礌灏变細鏀剁缉鑷韩浣撶Н涓烘渶灏忕姸鎬併€傛墍浠ワ紝搴旇鏈変釜濂界殑涔犳儻鍗虫妸娴姩鍏冪礌璁剧疆楂樺拰瀹姐€傚鏋滄病鏈夎缃紝鍒欏厓绱犱細鎸夌収瀹冩墍鍖呭惈鐨勫唴瀹瑰ぇ灏忔潵纭畾瀹冪殑澶у皬銆?br/>11锛夊綋鍏冪礌娴姩鍚庯紝鍛ㄨ竟鐨勫璞′細鑷姩鐜粫娴姩鍏冪礌鍛ㄥ洿锛屽舰鎴愪竴绉嶇幆缁曞叧绯汇€?br/>12锛夊潡鐘跺厓绱犱箣闂寸殑澶栬竟璺濅細鏈夐噸鍙犵幇璞★紝浣嗘槸娴姩鍏冪礌涔嬮棿鐨勫杈硅窛涓嶄細鍙戝０閲嶅彔鐜拌薄銆?br/>13锛夋诞鍔ㄥ厓绱犵Щ鍔紝涓婄Щ锛歮argin-top:-**;涓嬬Щ锛歮argin-botom:-*px,鍏朵粬浠ユ绫绘帹銆?br/>14锛変竴鑸畾浣嶅厓绱狅紙缁濆鎴栨槸鐩稿鍏冪礌锛夐兘浼氳鐩栧湪鏂囨。娴佸璞′箣涓娿€備絾鏄紝select鍏冪礌鐨勭獥鍙ｆ帶浠惰繕涓嶅畬鍏ㄦ敮鎸亃-index

15锛夊湪css瀹氫綅甯冨眬涓紝涓€鑸伒寰€滃閮ㄧ浉瀵瑰畾浣嶏紝鍐呴儴缁濆瀹氫綅鈥?br/>16锛夊湪body涓缃甿in-width:760px,鍙互閬垮厤甯冨眬閲嶅彔鐜拌薄銆?

OK，本文到此结束，希望对大家有所帮助。