整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
天繼續(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)系。
