整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天繼續為大家分享前端的知識，如果對前端比較感興趣的小伙伴，可以關注我，我會更大家繼續分享更多與前端相關的內容，當然如果內容中又不當的或者文字錯誤的，歡迎大家在評論區留言，我會及時修改糾正。
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，繼續用就行了。
以上開發工具的安裝使用，在網絡上都會有很多資料，可以動動小手指就能查到哦。
今天就分享到這兒吧，如果喜歡的記得點關注哦，也歡迎在留言區留言。
前端項目開發的時候，系統支持文件下載是前端開發中常用到的功能之一，當用戶訪問我們的網站時發現有自己需要的資源時可以將資源下載下來。文件下載主要有兩種形式，一種是通過文件地址下載，該文件可以存放在前端或者后端。另一種則是通過文件流下載，前端通過發送請求給后端并獲取后端文件流進行下載。
download屬性：是HTML5中的a標簽的新特性，用來規定被下載的超鏈接目標。在a標簽中如果沒有申明download屬性的時a標簽的默會鏈接跳轉進行預覽（如txt , jpg , pdf ），當前瀏覽器不支持預覽的文件時則出現下載。當申明了download屬性之后瀏覽器會對href屬性鏈接的文件進行下載。download屬性與不支持H5的低版本瀏覽器不兼容且僅限于同源文件，如果是非同源download屬性會失效。比如引用第三方的網站內容、引用前后端分離的服務器內容、甚至本地測試引用的本地文件，download都會不起作用。如果你想測試該功能可以在本地開一個服務，將文件放同一服務中測試就可以了。
直接使用a標簽時只要在a標簽中添加download屬性，如果是非a標簽的話可以在出發事件的時候通過JavaScript來創建一個隱藏a標簽下載，當我們點擊時觸發隱藏的a標簽下載事件。這里使用appendChild和removeChild的處理是為了兼容Firefox瀏覽器。
需要了解XMLHttpRequest可以參考文章：JavaScript實戰001：XMLHttpRequest使用入門，這里我利用XMLHttpRequest對象來發送請求，用blob類型來接受后臺發過來的二進制類型文件。然后模擬a標簽創建隱藏的下載鏈接，通過URL.createObjectURL()方法創建一個指向blob對象的URL地址。
iframe是HTML標簽元素，可以用來創建內聯框架。iframe提供了src屬性用來規定在 iframe 中顯示的文檔的 URL，我們可以直接將文件地址拋給iframe，也可以賦值文件流地址給iframe。功能實現跟a標簽有點相似，創建一個隱藏的iframe標簽來實現文件的下載功能。使用文件地址下載需要注意的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽），文件流下載只需將請求接口賦給src屬性，iframe會自動去請求該文件實現下載。
window.open()方法用于打開一個新的瀏覽器窗口或查找一個已命名的窗口，也可以用它來實現文件下載功能。而且這個比iframe更簡單，直接將文件地址或者請求接口賦給window.open(url)方法即可實現文件下載功能。但是有個缺點就是每次下載都會打開一個新的窗口來實現下載（想不跳轉可以嘗試window.location.assign()方法，用于加載一個新的文檔），而且如果使用文件地址下載的是瀏覽器支持預覽的文件類型無法下載（比如圖片、PDF文檔、text文本等會直接打開文件預覽）。
form表單是個比較常用的html表簽，用戶提交用戶信息，比如常見的登錄、注冊界面大部分都是通過form表單進行數據提交的。form表單所有要提交的數據都必須放在form標簽中，method屬性定義提交的方法（有get和post兩種提交方法），action屬性定義請求的地址。form標簽中支持input、menus、textarea、fieldset、legend 和 label 等元素，通過submit向服務器提交數據。這里我創建了form表單和input框，input用于輸入請求的參數，form用于提交數據請求。
這里提供下Django的后臺文件請求接口，以上文件請求都是基于該接口實現的。接收請求方法為GET，請求參數為id（數據庫存儲的文件id），采用FileResponse方式返回的文件流信息（具體實現功能可以參考文章：Django實戰013：各種文件下載功能實現詳解）。
下載的方式方法有很多，以上只是JavaScript中常見的幾種下載方式。其實用ajax或者axios也可以實現下載，但是萬變不離其中，會JavaScript下載害怕不會別的么。以上下載方式個人覺得還是iframe比較簡單方便，請求最好還是通過文件流來實現，相對文件地址下載會更安全些。
更多前端技巧可以參考專欄：Vue實戰技巧
HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。
超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念，可以說網絡的精髓就在于"互聯"。
這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通：中國青年出版社，2014.10：第16頁）
標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。
如果讀的不太明白，在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。
HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：
<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。
例子一，頭條的文章頁面（電腦版）網址：https://www.toutiao.com/i6785149184245760516/
筆者使用Firefox（火狐）瀏覽器，輸入網址后點擊鍵盤上的F12,，如圖所示
我們可以看到頁面下半部分出現了一個調控臺。
點擊查看器即可看頁面代碼。代碼如下：
放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。
一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網址：https://mil.eastday.com/a/200125113254400.html
使用同樣的方法打開查看器看代碼，如圖：
是不是框架中的代碼一個也不少吧。
所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。
通過對框架中的代碼進行觀察，細心的讀者可能已經發現了HTML這種標記語言的書寫規律。
規律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。
規律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現！例如<html>與</html>，<head>與</head>，<body>與</body>。
規律3：這個規律通過觀察代碼也不難發現，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。
各種關系如下圖所示：
這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。
在下一期中，我們會通過練習來解釋"結構"與排版的關系。
喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
