天繼續(xù)為大家分享前端的知識(shí),如果對(duì)前端比較感興趣的小伙伴,可以關(guān)注我,我會(huì)更大家繼續(xù)分享更多與前端相關(guān)的內(nèi)容,當(dāng)然如果內(nèi)容中又不當(dāng)?shù)幕蛘呶淖皱e(cuò)誤的,歡迎大家在評(píng)論區(qū)留言,我會(huì)及時(shí)修改糾正。
1.初識(shí)HTML
2.HTML骨架結(jié)構(gòu)
HTML基本骨架語(yǔ)法如下所示:
HTML基本骨架結(jié)構(gòu)
HTML骨架標(biāo)簽說(shuō)明:
HTML骨架標(biāo)簽說(shuō)明
下面通過(guò)對(duì)HTML骨架的基本認(rèn)識(shí),你也可以小試牛刀,打開(kāi)記事本,新建一個(gè)帶有HTML骨架標(biāo)簽的.txt文件。
在.txt中寫(xiě)入HTML骨架標(biāo)簽,保存,并將.txt的后綴名修改為.html,右鍵單擊你寫(xiě)好的文件,然后選擇你要顯示的瀏覽器,本人習(xí)慣用谷歌的瀏覽器,這個(gè)根據(jù)個(gè)人的習(xí)慣來(lái)選擇就好了。
示例代碼如下:
我的第一個(gè)HTML頁(yè)面
注意:HTML標(biāo)簽名、標(biāo)簽的屬性名以及大部分屬性值都統(tǒng)一用小寫(xiě),不要問(wèn)我為什么,這是人家W3C的規(guī)范,咱們按規(guī)范行事就好啦。
正確示范:
書(shū)寫(xiě)規(guī)范
錯(cuò)誤示范:
錯(cuò)誤的規(guī)范
3.HTML標(biāo)簽的分類(lèi)
HTML標(biāo)簽:在HTML頁(yè)面中,帶有“<>”尖括號(hào)符號(hào)的元素被稱(chēng)為HTML標(biāo)簽元素,如上面的<html>、<head>、<body>,它們都是用尖括號(hào)包起來(lái),而且這幾個(gè)標(biāo)簽還是HTML的骨架結(jié)構(gòu)標(biāo)簽,就好比人之所以能站立,就是因?yàn)橛泄羌苤巍?/p>
通常我們將其分為常規(guī)元素和空元素,以下是對(duì)兩種類(lèi)型的介紹。
常規(guī)元素(雙標(biāo)簽)
語(yǔ)法:<標(biāo)簽名>內(nèi)容</標(biāo)簽名>,如<body>我的網(wǎng)頁(yè)內(nèi)容</body>。
說(shuō)明:
空元素(單標(biāo)簽或自封閉標(biāo)簽)
語(yǔ)法:<標(biāo)簽名 /> ,比如 <br />
說(shuō)明:
4.HTML標(biāo)簽的關(guān)系
標(biāo)簽之間的關(guān)系主要是針對(duì)雙標(biāo)簽,雙標(biāo)簽之間的關(guān)系分為如下幾種。
嵌套關(guān)系:
嵌套關(guān)系
并列關(guān)系:
并列關(guān)系
提示:在開(kāi)發(fā)的過(guò)程中,如果標(biāo)簽之間是嵌套關(guān)系,那么子元素可以通過(guò)tab鍵進(jìn)行縮進(jìn),讓其結(jié)構(gòu)和格式更加的清晰。
5.前端開(kāi)發(fā)工具
之前我們是通過(guò)記事本來(lái)寫(xiě)html骨架結(jié)構(gòu),會(huì)發(fā)現(xiàn)這種情況針對(duì)幾行代碼,還是能消化的,但是碰上幾千甚至幾萬(wàn)以及更多,此時(shí)應(yīng)該怎么辦呢?這個(gè)時(shí)候就得用到我們的前端開(kāi)發(fā)工具,通過(guò)前端開(kāi)發(fā)工具,可以更快更高效的提高我們的開(kāi)發(fā)效率,那我們常見(jiàn)的前端開(kāi)發(fā)工具有如下幾種:
常見(jiàn)的前端開(kāi)發(fā)工具
說(shuō)明:
提示:Hbuilder和VS Code誰(shuí)更好?我只能說(shuō)各有千秋,根據(jù)個(gè)人的習(xí)慣,我個(gè)人就比較喜歡Hbuilder,偶爾會(huì)用VS Code,如果你習(xí)慣用VS Code,繼續(xù)用就行了。
以上開(kāi)發(fā)工具的安裝使用,在網(wǎng)絡(luò)上都會(huì)有很多資料,可以動(dòng)動(dòng)小手指就能查到哦。
今天就分享到這兒吧,如果喜歡的記得點(diǎn)關(guān)注哦,也歡迎在留言區(qū)留言。
<table>標(biāo)簽:
<table>指的是表格,用表格來(lái)搭建界面布局,即用表格的嵌套,來(lái)搭建界面布局。
<table>布局優(yōu)勢(shì):
table優(yōu)勢(shì):開(kāi)發(fā)時(shí)間短(使用DW開(kāi)發(fā)速度快);純table各瀏覽器不會(huì)有兼容問(wèn)題;內(nèi)容可自適應(yīng);在搜索引擎排名能靠前;
但是 table如果布局變更,需要重新開(kāi)發(fā);如果table里有div ul 等,可能會(huì)出現(xiàn)瀏覽器兼容問(wèn)題;加載速度慢;table嵌套的太多,運(yùn)維是非常困難的。
<div>塊級(jí)(block-level)標(biāo)簽:
DIV是層疊樣式表中的定位技術(shù),全稱(chēng)DIVision,即為劃分。有時(shí)可以稱(chēng)其為圖層。
<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è)門(mén)戶(hù)網(wǎng)站的話,需手動(dòng)改很多頁(yè)面,而且看著那些表格也會(huì)感覺(jué)很亂也很浪費(fèi)時(shí)間,但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。
二.網(wǎng)頁(yè)訪問(wèn)速度
使用了DIV+CSS布局的網(wǎng)頁(yè)與Table布局比較,精簡(jiǎn)了許多頁(yè)面代碼,那么其瀏覽訪問(wèn)速度自然得以提升,也從而提升了網(wǎng)站的用戶(hù)體驗(yàn)度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好,因此其避免了Table嵌套層次過(guò)多而無(wú)法被搜索引擎抓取的問(wèn)題,而且簡(jiǎn)潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁(yè),在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位,而div+css則不會(huì),無(wú)論什么瀏覽器,網(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è)文檔流。
常見(jiàn)的塊級(jí)(block)元素有:<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見(jiàn)的內(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/... 】來(lái)使標(biāo)簽脫離文檔流,達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。
float:left ; 浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。
同時(shí)可以依靠【展示屬性display:inline/block/inline-block】來(lái)進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點(diǎn):
當(dāng)我們應(yīng)擁div布局是,在第一層塊界面上來(lái)做第二層塊界面的開(kāi)發(fā)時(shí),就要用到我們所說(shuō)的定位布局。
通過(guò)運(yùn)用【定位屬性position:absolute/relative/fixed】 來(lái)進(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)容來(lái)自網(wǎng)絡(luò),如有侵權(quán),請(qǐng)聯(lián)系修改。
歌Chrome中的檢查元素功能可以幫助你查看網(wǎng)頁(yè)上特定元素的HTML源代碼。在本教程中,我將向你展示如何使用此功能提取任何網(wǎng)頁(yè)的整個(gè)HTML代碼。
網(wǎng)站的HTML源代碼是web瀏覽器用來(lái)呈現(xiàn)頁(yè)面并根據(jù)頁(yè)面上應(yīng)用的HTML、CSS和JS代碼和規(guī)則進(jìn)行顯示的代碼。網(wǎng)站的源代碼,即網(wǎng)站的結(jié)構(gòu),是公開(kāi)的,而且必須公開(kāi),以便瀏覽器能夠正確顯示。
現(xiàn)代網(wǎng)絡(luò)瀏覽器允許用戶(hù)查看他們正在查看的網(wǎng)頁(yè)的HTML源代碼。此功能對(duì)網(wǎng)頁(yè)設(shè)計(jì)者和開(kāi)發(fā)人員的設(shè)計(jì)和開(kāi)發(fā)工作特別有用。通過(guò)查看網(wǎng)站(或網(wǎng)頁(yè))的HTML源代碼,你可以了解網(wǎng)站的結(jié)構(gòu)、使用的HTML元素以及應(yīng)用的CSS樣式。這不僅是學(xué)習(xí)如何使用HTML和CSS進(jìn)行設(shè)計(jì)和編碼的好方法,也是測(cè)試自己的設(shè)計(jì)和檢查結(jié)果頁(yè)面上是否有錯(cuò)誤的地方的好方法。
Web瀏覽器中頁(yè)面的源代碼通過(guò)Ctrl+U鍵盤(pán)快捷鍵或右鍵單擊頁(yè)面并選擇“查看頁(yè)面源代碼”選項(xiàng)來(lái)顯示。這顯示了頁(yè)面加載時(shí)的完整HTML代碼,它捕獲了頁(yè)面的靜態(tài)狀態(tài),即使頁(yè)面具有動(dòng)態(tài)功能,其內(nèi)容也不會(huì)隨著時(shí)間的推移而變化,服務(wù)器端或客戶(hù)端也是如此。
要查看動(dòng)態(tài)生成頁(yè)面(即通過(guò)JS生成的頁(yè)面)或具有動(dòng)態(tài)變化內(nèi)容的頁(yè)面(即具有不斷變化的新聞流的新聞網(wǎng)站或具有不斷變化界面的社交網(wǎng)絡(luò))的HTML源代碼,我們可以使用谷歌Chrome的檢查功能,我將在下面詳細(xì)演示。
使用檢查功能查看網(wǎng)頁(yè)源代碼的美妙之處在于,你可以查看和獲取在給定時(shí)間完全有效的HTML代碼,這在具有變化和移動(dòng)元素的頁(yè)面上非常有用,這些元素會(huì)顯示和消失。
在檢查模式下,你可以對(duì)頁(yè)面上任何HTML元素的內(nèi)容、屬性和樣式進(jìn)行編輯。不過(guò),這些更改只對(duì)你可見(jiàn),不會(huì)以任何方式對(duì)你正在查看的網(wǎng)站進(jìn)行永久更改。
現(xiàn)在,讓我們看看這是如何工作的。
1、啟動(dòng)Chrome瀏覽器,打開(kāi)你選擇的網(wǎng)頁(yè)。
2、右鍵單擊頁(yè)面上的任何位置,然后從下拉菜單中選擇“檢查”。也可以使用Ctrl+Shift+I鍵盤(pán)快捷鍵。
這將打開(kāi)瀏覽器窗口右側(cè)或底部的“開(kāi)發(fā)人員工具”部分,具體取決于你的屏幕大小和布局。
開(kāi)發(fā)人員工具部分由一個(gè)頂部菜單和下面的兩個(gè)并排窗口組成。在左側(cè),你將看到頁(yè)面的HTML源代碼,這些代碼可以逐個(gè)元素折疊和展開(kāi)。在右側(cè),你將看到在左側(cè)選擇的每個(gè)元素的樣式、事件偵聽(tīng)器和屬性。
你將看到所有當(dāng)前有效的HTML代碼,其中包含所有元素,如標(biāo)題、段落、列表、鏈接、圖像甚至注釋。代碼量將是最小的,它在基本的HTML網(wǎng)頁(yè)上沒(méi)有復(fù)雜性,因此它將更快地顯示。然而,在高流量、動(dòng)態(tài)的網(wǎng)站上,有很多元素和功能,HTML源代碼將相當(dāng)長(zhǎng)和復(fù)雜,因此需要更長(zhǎng)的時(shí)間才能完全顯示。
3、轉(zhuǎn)到本節(jié)頂部,找到<html>標(biāo)記,該標(biāo)記通常位于doctype(文檔類(lèi)型)聲明(例如 <!doctype html>)之后。
4、找到<html>標(biāo)記后,按Ctrl+C或右鍵單擊它,然后選擇復(fù)制>復(fù)制outerHTML以復(fù)制頁(yè)面的所有html源代碼。
5、然后,你可以根據(jù)需要將此代碼粘貼到文本或HTML文件中,并對(duì)其進(jìn)行進(jìn)一步檢查和編輯。
在檢查模式中,你還將看到內(nèi)聯(lián)樣式和對(duì)外部樣式表的引用(如果有的話)。此外,如果你在Chrome中應(yīng)用了任何自定義用戶(hù)樣式,它們也將附加到你復(fù)制的HTML代碼的底部。
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。