整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天繼續為大家分享前端的知識，如果對前端比較感興趣的小伙伴，可以關注我，我會更大家繼續分享更多與前端相關的內容，當然如果內容中又不當的或者文字錯誤的，歡迎大家在評論區留言，我會及時修改糾正。
1.初識HTML
2.HTML骨架結構
HTML基本骨架語法如下所示：
HTML基本骨架結構
HTML骨架標簽說明：
HTML骨架標簽說明
下面通過對HTML骨架的基本認識，你也可以小試牛刀，打開記事本，新建一個帶有HTML骨架標簽的.txt文件。
在.txt中寫入HTML骨架標簽，保存，并將.txt的后綴名修改為.html，右鍵單擊你寫好的文件，然后選擇你要顯示的瀏覽器，本人習慣用谷歌的瀏覽器，這個根據個人的習慣來選擇就好了。
示例代碼如下：
我的第一個HTML頁面
注意：HTML標簽名、標簽的屬性名以及大部分屬性值都統一用小寫，不要問我為什么，這是人家W3C的規范，咱們按規范行事就好啦。
正確示范：
書寫規范
錯誤示范：
錯誤的規范
3.HTML標簽的分類
HTML標簽：在HTML頁面中，帶有“<>”尖括號符號的元素被稱為HTML標簽元素，如上面的<html>、<head>、<body>，它們都是用尖括號包起來，而且這幾個標簽還是HTML的骨架結構標簽，就好比人之所以能站立，就是因為有骨架支撐。
通常我們將其分為常規元素和空元素，以下是對兩種類型的介紹。
常規元素（雙標簽）
語法：<標簽名>內容</標簽名>，如<body>我的網頁內容</body>。
說明：
空元素（單標簽或自封閉標簽）
語法：<標簽名 /> ，比如 <br />
說明：
4.HTML標簽的關系
標簽之間的關系主要是針對雙標簽，雙標簽之間的關系分為如下幾種。
嵌套關系：
嵌套關系
并列關系：
并列關系
提示：在開發的過程中，如果標簽之間是嵌套關系，那么子元素可以通過tab鍵進行縮進，讓其結構和格式更加的清晰。
5.前端開發工具
之前我們是通過記事本來寫html骨架結構，會發現這種情況針對幾行代碼，還是能消化的，但是碰上幾千甚至幾萬以及更多，此時應該怎么辦呢？這個時候就得用到我們的前端開發工具，通過前端開發工具，可以更快更高效的提高我們的開發效率，那我們常見的前端開發工具有如下幾種：
常見的前端開發工具
說明：
提示：Hbuilder和VS Code誰更好？我只能說各有千秋，根據個人的習慣，我個人就比較喜歡Hbuilder，偶爾會用VS Code，如果你習慣用VS Code，繼續用就行了。
以上開發工具的安裝使用，在網絡上都會有很多資料，可以動動小手指就能查到哦。
今天就分享到這兒吧，如果喜歡的記得點關注哦，也歡迎在留言區留言。
<table>標簽：
<table>指的是表格，用表格來搭建界面布局，即用表格的嵌套，來搭建界面布局。
<table>布局優勢：
table優勢：開發時間短（使用DW開發速度快）；純table各瀏覽器不會有兼容問題；內容可自適應；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開發；如果table里有div ul 等，可能會出現瀏覽器兼容問題；加載速度慢；table嵌套的太多，運維是非常困難的。
<div>塊級（block-level）標簽：
DIV是層疊樣式表中的定位技術，全稱DIVision，即為劃分。有時可以稱其為圖層。
<div>布局優勢：
一.精簡代碼，減少重構難度。
網站使用DIV+CSS布局使代碼很是精簡，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。
二.網頁訪問速度
使用了DIV+CSS布局的網頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網站的用戶體驗度。
三.SEO優化
采用div-css布局的網站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結構化的代碼更加有利于突出重點和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網頁，在使用不同瀏覽器情況下會發生錯位，而div+css則不會，無論什么瀏覽器，網頁都不會出現變形情況。
1.流動式布局：是HTML網頁默認的布局方式
特點：
1.塊級元素都會在所處的包含元素內自上而下按順序處置延伸分布，且默認狀態下，塊級元素占整個文檔流，默認寬度為100%。
2.內聯元素都會在所處的包含元素內從左到右水平分布顯示，不占整個文檔流。
常見的塊級（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內內聯（行內）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動布局（float）
特點：
浮動布局依靠【 浮動屬性 float：left/right/... 】來使標簽脫離文檔流，達到兩個塊級元素并排顯示的效果。
float：left ； 浮動脫離當前文檔流浮動。
同時可以依靠【展示屬性display：inline/block/inline-block】來進行行內元素和塊級元素的效果切換。從而達到靈活運用塊級元素和行內元素布局的效果。
3.層模型布局又叫定位布局
特點：
當我們應擁div布局是，在第一層塊界面上來做第二層塊界面的開發時，就要用到我們所說的定位布局。
通過運用【定位屬性position:absolute/relative/fixed】 來進行第二層界面的定位布局。
網頁是靜態的，網頁上的定位
position：absolute ；絕對定位脫離文檔流，不受浮動影響，就是相對于窗體（body）邊界的margin定位。
position：relative； 相對定位不脫離文檔流，相對于父級標簽元素的位置定位。
position:fixed；固定位置，不會受任何因素影響。
滾動條移動前
滾動條移動后
優先層顯示方法：【屬性：z-index:0/1/2...】
特點： 數值越大，越優先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內容來自網絡，如有侵權，請聯系修改。
歌Chrome中的檢查元素功能可以幫助你查看網頁上特定元素的HTML源代碼。在本教程中，我將向你展示如何使用此功能提取任何網頁的整個HTML代碼。
網站的HTML源代碼是web瀏覽器用來呈現頁面并根據頁面上應用的HTML、CSS和JS代碼和規則進行顯示的代碼。網站的源代碼，即網站的結構，是公開的，而且必須公開，以便瀏覽器能夠正確顯示。
現代網絡瀏覽器允許用戶查看他們正在查看的網頁的HTML源代碼。此功能對網頁設計者和開發人員的設計和開發工作特別有用。通過查看網站（或網頁）的HTML源代碼，你可以了解網站的結構、使用的HTML元素以及應用的CSS樣式。這不僅是學習如何使用HTML和CSS進行設計和編碼的好方法，也是測試自己的設計和檢查結果頁面上是否有錯誤的地方的好方法。
Web瀏覽器中頁面的源代碼通過Ctrl+U鍵盤快捷鍵或右鍵單擊頁面并選擇“查看頁面源代碼”選項來顯示。這顯示了頁面加載時的完整HTML代碼，它捕獲了頁面的靜態狀態，即使頁面具有動態功能，其內容也不會隨著時間的推移而變化，服務器端或客戶端也是如此。
要查看動態生成頁面（即通過JS生成的頁面）或具有動態變化內容的頁面（即具有不斷變化的新聞流的新聞網站或具有不斷變化界面的社交網絡）的HTML源代碼，我們可以使用谷歌Chrome的檢查功能，我將在下面詳細演示。
使用檢查功能查看網頁源代碼的美妙之處在于，你可以查看和獲取在給定時間完全有效的HTML代碼，這在具有變化和移動元素的頁面上非常有用，這些元素會顯示和消失。
在檢查模式下，你可以對頁面上任何HTML元素的內容、屬性和樣式進行編輯。不過，這些更改只對你可見，不會以任何方式對你正在查看的網站進行永久更改。
現在，讓我們看看這是如何工作的。
1、啟動Chrome瀏覽器，打開你選擇的網頁。
2、右鍵單擊頁面上的任何位置，然后從下拉菜單中選擇“檢查”。也可以使用Ctrl+Shift+I鍵盤快捷鍵。
這將打開瀏覽器窗口右側或底部的“開發人員工具”部分，具體取決于你的屏幕大小和布局。
開發人員工具部分由一個頂部菜單和下面的兩個并排窗口組成。在左側，你將看到頁面的HTML源代碼，這些代碼可以逐個元素折疊和展開。在右側，你將看到在左側選擇的每個元素的樣式、事件偵聽器和屬性。
你將看到所有當前有效的HTML代碼，其中包含所有元素，如標題、段落、列表、鏈接、圖像甚至注釋。代碼量將是最小的，它在基本的HTML網頁上沒有復雜性，因此它將更快地顯示。然而，在高流量、動態的網站上，有很多元素和功能，HTML源代碼將相當長和復雜，因此需要更長的時間才能完全顯示。
3、轉到本節頂部，找到<html>標記，該標記通常位于doctype（文檔類型）聲明（例如 <!doctype html>）之后。
4、找到<html>標記后，按Ctrl+C或右鍵單擊它，然后選擇復制>復制outerHTML以復制頁面的所有html源代碼。
5、然后，你可以根據需要將此代碼粘貼到文本或HTML文件中，并對其進行進一步檢查和編輯。
在檢查模式中，你還將看到內聯樣式和對外部樣式表的引用（如果有的話）。此外，如果你在Chrome中應用了任何自定義用戶樣式，它們也將附加到你復制的HTML代碼的底部。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
