整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
視覺格式化模型，大體上將頁(yè)面中盒子的排列分為三種方式：
1. 常規(guī)流
2. 浮動(dòng)
3. 定位
1. 文字環(huán)繞
字體環(huán)繞
2. 橫向排列
修改float屬性值為：
- left：左浮動(dòng)，元素靠上靠左
- right：右浮動(dòng)，元素靠上靠右
默認(rèn)值為none
1. 當(dāng)一個(gè)元素浮動(dòng)后，元素必定為塊盒(更改display屬性為block)
2. 浮動(dòng)元素的包含塊，和常規(guī)流一樣，為父元素的內(nèi)容盒
1. 寬度為auto時(shí)，適應(yīng)內(nèi)容寬度
2. 高度為auto時(shí)，與常規(guī)流一致，適應(yīng)內(nèi)容的高度
3. margin為auto，為0.
4. 邊框、內(nèi)邊距、百分比設(shè)置與常規(guī)流一樣
1. 左浮動(dòng)的盒子靠上靠左排列
2. 右浮動(dòng)的盒子考上靠右排列
3. 浮動(dòng)盒子在包含塊中排列時(shí)，會(huì)避開常規(guī)流塊盒
4. 常規(guī)流塊盒在排列時(shí)，無視浮動(dòng)盒子
5. 行盒在排列時(shí)，會(huì)避開浮動(dòng)盒子
6. 外邊距合并不會(huì)發(fā)生
> 如果文字沒有在行盒中，瀏覽器會(huì)自動(dòng)生成一個(gè)行盒包裹文字，該行盒叫做匿名行盒。
高度坍塌的根源：常規(guī)流盒子的自動(dòng)高度，在計(jì)算時(shí)，不會(huì)考慮浮動(dòng)盒子
清除浮動(dòng)，涉及css屬性：clear
- 默認(rèn)值：none
- left：清除左浮動(dòng)，該元素必須出現(xiàn)在前面所有左浮動(dòng)盒子的下方
- right：清除右浮動(dòng)，該元素必須出現(xiàn)在前面所有右浮動(dòng)盒子的下方
- both：清除左右浮動(dòng)，該元素必須出現(xiàn)在前面所有浮動(dòng)盒子的下方
<table>標(biāo)簽：
<table>指的是表格，用表格來搭建界面布局，即用表格的嵌套，來搭建界面布局。
<table>布局優(yōu)勢(shì)：
table優(yōu)勢(shì)：開發(fā)時(shí)間短（使用DW開發(fā)速度快）；純table各瀏覽器不會(huì)有兼容問題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開發(fā)；如果table里有div ul 等，可能會(huì)出現(xiàn)瀏覽器兼容問題；加載速度慢；table嵌套的太多，運(yùn)維是非常困難的。
<div>塊級(jí)（block-level）標(biāo)簽：
DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。
<div>布局優(yōu)勢(shì)：
一.精簡(jiǎn)代碼，減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡(jiǎn)，css文件可以在網(wǎng)站的任意一個(gè)頁(yè)面進(jìn)行調(diào)用，而若是使用table表格修改部分頁(yè)面卻是顯得很麻煩。要是一個(gè)門戶網(wǎng)站的話，需手動(dòng)改很多頁(yè)面，而且看著那些表格也會(huì)感覺很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪問速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較，精簡(jiǎn)了許多頁(yè)面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè)，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無論什么瀏覽器，網(wǎng)頁(yè)都不會(huì)出現(xiàn)變形情況。
1.流動(dòng)式布局：是HTML網(wǎng)頁(yè)默認(rèn)的布局方式
特點(diǎn)：
1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級(jí)元素占整個(gè)文檔流，默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個(gè)文檔流。
常見的塊級(jí)（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動(dòng)布局（float）
特點(diǎn)：
浮動(dòng)布局依靠【 浮動(dòng)屬性 float：left/right/... 】來使標(biāo)簽脫離文檔流，達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float：left ； 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display：inline/block/inline-block】來進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn)：
當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來做第二層塊界面的開發(fā)時(shí)，就要用到我們所說的定位布局。
通過運(yùn)用【定位屬性position:absolute/relative/fixed】 來進(jìn)行第二層界面的定位布局。
網(wǎng)頁(yè)是靜態(tài)的，網(wǎng)頁(yè)上的定位
position：absolute ；絕對(duì)定位脫離文檔流，不受浮動(dòng)影響，就是相對(duì)于窗體（body）邊界的margin定位。
position：relative； 相對(duì)定位不脫離文檔流，相對(duì)于父級(jí)標(biāo)簽元素的位置定位。
position:fixed；固定位置，不會(huì)受任何因素影響。
滾動(dòng)條移動(dòng)前
滾動(dòng)條移動(dòng)后
優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】
特點(diǎn)： 數(shù)值越大，越優(yōu)先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內(nèi)容來自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系修改。
今天我們一起來了解下HTML，
首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。
結(jié)構(gòu)層：html => 網(wǎng)頁(yè)上有什么，比如說文字啊、按鈕啊、圖片啊等等。
表現(xiàn)層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說點(diǎn)擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結(jié)構(gòu)之后，我們來學(xué)習(xí)如何寫html。html不是編程語(yǔ)言，它是一套標(biāo)簽。最簡(jiǎn)單的html文本是下圖1這個(gè)樣子。我們可以在電腦桌面上新建一個(gè)記事本文件，然后把后綴名改一下（.txt=>.html），把這段標(biāo)簽代碼粘貼到html文件里，這樣一個(gè)空白的網(wǎng)頁(yè)就做成了。如果需要在網(wǎng)頁(yè)上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標(biāo)簽即可。比如我在圖二添加了一個(gè)按鈕標(biāo)簽和一段文字標(biāo)簽，雙擊html文件，頁(yè)面上就從左到右，從上到下顯示對(duì)應(yīng)的內(nèi)容。是不是很簡(jiǎn)單。我們?nèi)粘g覽的網(wǎng)頁(yè)都是這樣一個(gè)標(biāo)簽一個(gè)標(biāo)簽畫上去的。
我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識(shí)點(diǎn)。同時(shí)分享幾個(gè)小技巧。
1.最簡(jiǎn)單的網(wǎng)頁(yè)寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個(gè)VSCode軟件（類似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號(hào)回車就自動(dòng)生成了，學(xué)編程不要死記硬背。
2.控件的標(biāo)簽不需要記憶，直接百度html XXX標(biāo)簽，例如：百度搜“html按鈕標(biāo)簽”，他就會(huì)告訴我們是<button>，用的時(shí)間長(zhǎng)了自然就記住了。是不是省力。
3.標(biāo)簽的屬性很重要，可以不去記他的寫法，因?yàn)閷懣梢园俣龋匾氖悄阈枰涀?biāo)簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因?yàn)楣ぷ髦校械臅r(shí)候會(huì)遇到這樣一種情況，明明設(shè)置一個(gè)屬性可以完成的功能，我們不知道，花費(fèi)了大力氣用css和js去實(shí)現(xiàn)，結(jié)果還存在著特定場(chǎng)合的bug，讓人很無奈。
4.對(duì)于html還有兩個(gè)標(biāo)簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。
5.給大家推薦一個(gè)小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。
6.如果覺得一個(gè)人學(xué)習(xí)前端有難度，我建了一個(gè)小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會(huì)經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項(xiàng)目。有方向，少走彎路。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
