整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          真的嗎,Java 的 JSP 已經被淘汰了?

          者:泥瓦匠

          鏈接:https://mp.weixin.qq.com/s/s0dbfo8pdXpmtIo1IUv5lg

          以前的項目大多數都是java程序猿又當爹又當媽,又搞前端(ajax/jquery/js/html/css等等),又搞后端(java/mysql/Oracle等等)。

          隨著時代的發展,漸漸的許多大中小公司開始把前后端的界限分的越來越明確,前端工程師只管前端的事情,后端工程師只管后端的事情,正所謂術業有專攻,一個人如果什么都會,那么他畢竟什么都不精。

          大中型公司需要專業人才,小公司需要全才,但是對于個人職業發展來說,我建議是分開。你要是這輩子就吃java這碗飯,就不要去研究什么css,js等等。

          把你的精力專注在java,jvm原理,spring原理,mysql鎖,事務,多線程,大并發,分布式架構,微服務,以及相關的項目管理等等,這樣你的核心競爭力才會越來越高,正所謂你往生活中投入什么,生活就會反饋給你什么。

          (滿滿的正能量:

          一旦你成為了一個行業里的精英,相信我,到時候,車,房,女人,錢,機會就都來找你了,不用著急,真的。

          干java程序猿這行,真的很簡單的,你懂得知識越多,你的錢就越多,當然了還需要有一定的情商。。。

          你的能力越強,你就比別人創造的價值更多,你為公司創造了價值,公司給你各種福利,雙贏!)

          幾曾何時,我們的java web項目都是使用了若干后臺框架,springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等

          大多數項目在java后端都是分了三層,控制層(controller/action),業務層(service/manage),持久層(dao)。

          控制層負責接收參數,調用相關業務層,封裝數據,以及路由到jsp頁面。然后jsp頁面上使用各種標簽(jstl/el)或者手寫java(<%=%>)將后臺的數據展現出來。

          對吧?

          我們先看這種情況,需求定完了,代碼寫完了,測試測完了,然后呢?要發布了吧?

          你需要用maven或者eclipse等工具把你的代碼打成一個war包,然后把這個war包發布到你的生產環境下的web容器(tomcat/jboss/weblogic/websphere/jetty/resin)里,對吧?

          發布完了之后,你要啟動你的web容器,開始提供服務,這時候你通過配置域名,dns等等相關,你的網站就可以訪問了(假設你是個網站)。

          那我們來看,你的前后端代碼是不是全都在那個war包里?包括你的js,css,圖片,各種第三方的庫,對吧?

          好,下面在瀏覽器中輸入你的網站域名(www.xxx.com),之后發生了什么?(這個問題也是很多公司的面試題)

          我撿干的說了啊,基礎不好的童鞋請自己去搜。

          瀏覽器在通過ip路由到你的服務,在tcp3次握手之后,通過tcp協議開始訪問你的web服務器,你的web服務器得到請求后,開始提供服務,接收請求,之后通過response返回你的應答給瀏覽器。

          那么我們來看,我們先假設你的首頁中有100張圖片,以及一個單表的查詢,此時,用戶的看似一次http請求,其實并不是一次,用戶在第一次訪問的時候,瀏覽器中不會有緩存,你的100張圖片,瀏覽器要連著請求100次http請求(有人會跟我說http長鏈短鏈的問題,不在這里討論),你的web服務器接收這些請求,都需要耗費內存去創建socket來玩tcp傳輸。

          重點來了,這樣的話,你的web服務器的壓力會非常大,因為頁面中的所有請求都是只請求到你這臺服務器上,如果1個人還好,如果10000個人并發訪問呢(先不聊web服務器集群,這里就說是單實例web服務器),那你的服務器能扛住多少個tcp鏈接?你的服務器的內存有多大?你能抗住多少IO?你給web服務器分的內存有多大?會不會宕機?

          這就是為什么,越是大中型的web應用,他們越是要解耦。

          理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等都扔在一臺主機上,但是這樣就好像是你把雞蛋都放在一個籃子里,隱患非常大。

          正常的分布式架構,是都要拆開的,你的應用服務器集群(前,后)+文件服務器集群+數據庫服務器集群+消息隊列集群+緩存集群等等。

          前戲太長了。


          MVC


          下面步入正題,首先以后的java web項目都盡量要避免使用jsp,要搞前后臺解耦,玩分布式架構,這樣我們的應用架構才更強。


          使用jsp的痛點:

          1. 動態資源和靜態資源全部耦合在一起,無法做到真正的動靜分離。服務器壓力大,因為服務器會收到各種http請求,例如css的http請求,js的,圖片的,動態代碼的等等。一旦服務器出現狀況,前后臺一起玩完,用戶體驗極差。
          2. 前端工程師做好html后,需要由java工程師來將html修改成jsp頁面,出錯率較高(因為頁面中經常會出現大量的js代碼),修改問題時需要雙方協同開發,效率低下。
          3. jsp必須要在支持java的web服務器里運行(例如tomcat等),無法使用nginx等(nginx據說單實例http并發高達5w,這個優勢要用上),性能提不上來。
          4. 第一次請求jsp,必須要在web服務器中編譯成servlet,第一次運行會較慢。
          5. 每次請求jsp都是訪問servlet再用輸出流輸出的html頁面,效率沒有直接使用html高。
          6. jsp內有較多標簽和表達式,前端工程師在修改頁面時會捉襟見肘,遇到很多痛點。
          7. 如果jsp中的內容很多,頁面響應會很慢,因為是同步加載。

          基于上述的一些痛點,我們應該把整個項目的開發權重往前移,實現前后端真正的解耦!


          以前老的方式是:

          1. 客戶端請求
          2. 服務端的servlet或controller接收請求(路由規則由后端制定,整個項目開發的權重大部分在后端)
          3. 調用service,dao代碼完成業務邏輯
          4. 返回jsp
          5. jsp展現一些動態的代碼

          新的方式是:

          1. 瀏覽器發送請求
          2. 直接到達html頁面(路由規則由前端制定,整個項目開發的權重前移)
          3. html頁面負責調用服務端接口產生數據(通過ajax等等)
          4. 填充html,展現動態效果。

          (有興趣的童鞋可以訪問一下阿里巴巴等大型網站,然后按一下F12,監控一下你刷新一次頁面,他的http是怎么玩的,大多數都是單獨請求后臺數據,使用json傳輸數據,而不是一個大而全的http請求把整個頁面包括動+靜全部返回過來)


          這樣做的好處是:

          1. 可以實現真正的前后端解耦,前端服務器使用nginx。前端服務器放的是css,js,圖片等等一系列靜態資源(甚至你還可以css,js,圖片等資源放到特定的文件服務器,例如阿里云的oss,并使用cdn加速),前端服務器負責控制頁面引用,跳轉,調用后端的接口,后端服務器使用tomcat。(這里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack)
          2. 發現bug,可以快速定位是誰的問題,不會出現互相踢皮球的現象。頁面邏輯,跳轉錯誤,瀏覽器兼容性問題,腳本錯誤,頁面樣式等問題,全部由前端工程師來負責。接口數據出錯,數據沒有提交成功,應答超時等問題,全部由后端工程師來解決。
          3. 雙方互不干擾,前端與后端是相親相愛的一家人。
          4. 在大并發情況下,我可以同時水平擴展前后端服務器,比如淘寶的一個首頁就需要2000臺前端服務器做集群來抗住日均多少億+的日均pv。(去參加阿里的技術峰會,聽他們說他們的web容器都是自己寫的,就算他單實例抗10萬http并發,2000臺是2億http并發,并且他們還可以根據預知洪峰來無限拓展,很恐怖,就一個首頁。。。)
          5. 減少后端服務器的并發壓力,除了接口以外的其他所有http請求全部轉移到前端nginx上。
          6. 即使后端服務暫時超時或者宕機了,前端頁面也會正常訪問,只不過數據刷不出來而已。
          7. 也許你也需要有微信相關的輕應用,那樣你的接口完全可以共用,如果也有app相關的服務,那么只要通過一些代碼重構,也可以大量復用接口,提升效率。
          8. 頁面顯示的東西再多也不怕,因為是異步加載。

          注意:

          1. 在開需求會議的時候,前后端工程師必須全部參加,并且需要制定好接口文檔,后端工程師要寫好測試用例,不要讓前端工程師充當你的組專職測試,推薦使用chrome的插件postman,service層的測試用例拿junit寫。
          2. 上述的接口并不是java里的interface,說白了調用接口就是調用你controler里的方法。
          3. 加重了前端團隊的工作量,減輕了后端團隊的工作量,提高了性能和可擴展性。
          4. 我們需要一些前端的框架來解決類似于頁面嵌套,分頁,頁面跳轉控制等功能。(上面提到的那些前端框架)。
          5. 如果你的項目很小,或者是一個單純的內網項目,那你大可放心,不用任何架構而言,但是如果你的項目是外網項目,呵呵噠。
          6. 以前還有人在使用類似于velocity/freemarker等模板框架來生成靜態頁面,現在這種做法也被淘汰掉了。
          7. 最后:這篇文章主要的目的是說jsp在大型外網java web項目中被淘汰掉,可沒說jsp可以完全不學,對于一些學生朋友來說,jsp/servlet等相關的java web基礎還是要掌握牢的,不然你以為SpringMVC這種框架是基于什么來寫的?

          章學習目標

          • 了解HTML語法的發展歷史
          • 了解HTML語義化
          • 掌握HTML常用標簽的基本使用

          第一章已經介紹過HTML是一門超文本標記語言,通過HTML標記對網頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網頁中的信息進行控制,沒有介紹,本章就將從HTML的歷史、語義化、常用標簽三個方面詳細講解HTML。

          2.1 HTML歷史

          俗話說“了解歷史,才能明白當下,進而展望未來”。所以了解HTML的歷史,有利于更好的掌握HTML這門語言。

          2.1.1 HTML歷史版本

          像大多數軟件、硬件一樣,HTML發展至今,經歷了幾個版本,新增了許多HTML標記,同時也淘汰了一些標記,接下來介紹HTML在不同時期所對應的一些重要版本,具體如下:

          • 超文本標記語言(第一版)——在1993年6月作為互聯網工程工作小組(IETF)工作草案發布(并非標準)
          • HTML 2.0——1995年11月,IETF推薦標準。
          • HTML 3.2——1997年1月14日,W3C推薦標準。
          • HTML 4.0——1997年12月18日,W3C推薦標準。
          • HTML 4.01——1999年12月24日,W3C推薦標準。
          • HTML 5——2014年10月28日,W3C推薦標準。

          HTML沒有1.0版本,最早的HTML官方規范,是由IETF(Internet Engineering Task Force,因特網工程任務組)發布的HTML 2.0。之后W3C成為HTML語言標準的制定者,發布了3.2、4.0、4.01和5等多個后續重要版本。通常所說的HTML5指的就是5這個最新的版本。

          本教材涉及的所有規范及語法,都是嚴格按照HTML5標準進行講解的,在后面的章節中還會詳細的介紹HTML5及相關內容。

          2.1.2 HTML與XHTML關系

          在HTML語法上很寬松,如標簽和屬性可以是大寫、小寫,或者任意大小寫字母的組合,標簽可以不閉合等。有些設備很難兼容這些松散的語法,如手機、打印機等,這并不符合標準的發展趨勢,因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作組。轉而開發XHTML,2000年1月26日發布XHTML1.0。

          XHTML是更嚴謹純凈的HTML版本,XHTML比HTML語法更加規范和嚴謹,目的是為了實現HMTL向XML過渡,讓作者按照統一的風格來編寫標簽,HTML中標簽和屬性不區分大小寫,而有效的XHTML 文檔則要求所有標簽和屬性必須一律小寫,當然還有一些其他的規范和要求,這里不再贅述。XML雖然數據轉換能力強,完全可以替代HTML,但是面對互聯網上大量基于HTML編寫的網站,直接采用XML還為時過早,因此在HTML4.0的基礎上,用XML的語法規則對其進行擴展,得到了XHTML。

          注:XML指可擴展標記語言(EXtensible Markup Language),用來傳輸和存儲數據。XML語言也可以做為很多語言的基礎語言,例如:XHTML、SVG等。

          HTML的不同版本對<!DOCTYPE>寫法也有不同,具體如下:

          HTML4.01中<!DOCTYPE>寫法:

          	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          	"http://www.w3.org/TR/html4/loose.dtd">
          

          XHTML1.01中<!DOCTYPE>寫法

          	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		
          

          HTML5中<!DOCTYPE>寫法

          	<!DOCTYPE HTML>
          

          因為 HTML 4.01和XHTML1.0 基于 SGML,所以 DOCTYPE 需要對 DTD 進行引用。而 HTML 5 不基于 SGML,因此不需要對 DTD 進行引用,因此HTML5的DOCTYPE寫法相當簡單。這里建議讀者都采用最新的HTML5版本<!DOCTYPE>寫法,第一章已經介紹過在DW工具中默認設置不同類型的文檔聲明。

          2.2 什么是HTML語義化

          所謂HTML語義化指的是,根據網頁中內容的結構,選擇適合的HTML標簽進行編寫。HTML語義化的意義主要有以下幾點:

          • 在沒有CSS的情況下,頁面也能呈現出很好的內容結構、代碼結構。
          • 有利于SEO,讓搜索引擎爬蟲更好的理解網頁,從而獲取更多的有效信息,提升網頁的權重。
          • 方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以語義的方式來渲染網頁。
          • 便于團隊開發和維護,語義化的HTML可以讓開發者更容易的看明白,從而提高團隊的效率和協調能力。

          HTML標簽都具備語義化,根據網頁展示的內容結構,選擇正確的HTML標簽進行解析與編碼。

          注: SEO是指在了解搜索引擎自然排名機制的基礎之上,對網站進行內部及外部的調整優化,改進網站在搜索引擎中關鍵詞的自然排名,獲得更多的展現量,吸引更多目標客戶點擊訪問網站,從而達到互聯網營銷及品牌建設的目的。

          2.3 HTML常用標簽

          HTML標簽非常多,有些由于歷史問題已經廢棄,有些屬于HTML5中新添加的,這部分H5新標簽會在H5章節中給讀者講解,本章主要講解一些HTML中常用標簽的使用。

          2.3.1 標題標簽

          瀏覽新聞類網頁時,經常能看見文章的標題,如圖2.1所示。

          圖2.1 千鋒教育新聞標題

          圖2.1的標題就是用HTML中的標題標簽來實現的,HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標簽來定義標題部分,其語法格式如下:

          	<hn 屬性=“屬性值”>標題文本</hn>
          

          接下來通過案例來演示標題標簽,如例2-1所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>定義標題</title>
           6 </head>
           7 <body>
           8 <h1>這是一級標題</h1>
           9 <h2>這是二級標題</h2>
           10 <h3>這是三級標題</h3>
           11 <h4>這是四級標題</h4>
           12 <h5>這是五級標題</h5>
           13 <h6>這是六級標題</h6>
           14 </body>
           15 </html>
          

          運行結果如圖2.2所示。

          圖2.2 標題標簽顯示效果

          從上例運行結果可以看出,默認情況下標題文字的顯示方式是加粗左對齊,并且從<h1>到<h6>字號遞減,如果想改變標題的對齊方式,需要用到align屬性,其取值如表2.1。

          接下來通過案例來演示標題標簽對齊方式的設置及效果,如例2-2所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>定義標題對齊方式</title>
           6 </head>
           7 <body>
           8 <h1>這是一級標題</h1>
           9 <h2 align="left">這是二級標題</h2>
           10 <h3 align="center">這是三級標題</h3>
           11 <h4 align="right">這是四級標題</h4>
           12 </body>
           13 </html>
          

          運行結果如圖2.3所示。

          圖2.3標題對齊方式顯示效果

          標題很重要,它有利于網頁搜索引擎的優化,其中<h1>標題的重要性最高,<h6>標題的重要性最低,一般一個頁面只能有一個<h1>,而<h2>~<h6>可以有多個。

          2.3.2 段落標簽

          瀏覽新聞類網頁時,經常能看見文章的段落,如圖2.4所示。

          圖2.4 千鋒教育新聞段落

          圖2.4中的段落在HTML中使用<p>標簽實現,用于在網頁中把文字有條理地顯示出來,其語法格式如下:

          	<p 屬性=“屬性值”>段落文本</p>
          

          接下來通過案例來演示段落標簽,如例2-3所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>段落標簽</title>
           6 </head>
           7 <body>
           8 <h1 align="center" >扣丁學堂</h1></h1>
           9 <p align="left">扣丁學堂是中國IT培訓教育品牌領導者,擁有最新最全的IT培訓視頻課
           10 程,專注于發布和更新iOS培訓、Android培訓、HTML5培訓、UI培訓、PHP培訓視頻教程,
           11 著力于培養移動互聯網人才。</p>
           12 <p align="ri">遇到IT技術難題,就上扣丁學堂學堂。</p>
           13 </body>
           14 </html>
          

          運行結果如圖2.5所示。

          圖2.5 段落標簽顯示效果

          2.3.3 文本格式化標簽

          文本格式化標簽就是針對文本進行各種格式化的標簽,例如加粗、斜體、上標、下標等。如表2.2所示。

          表2.2中列出了對文本格式化的幾種標簽,下面將詳細介紹這幾種標簽的使用和效果。

          1. <strong>標簽

          <strong>標簽將文本定義為語氣更強的強調內容,展示效果為加粗。接下來通過案例演示<strong>標簽,如例2-4所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <strong>用良心做教育!</strong>
           9 </body>
           10 </html>
          

          運行結果如圖2.6所示。

          圖2.6 strong標簽顯示效果

          注意:<b>標簽的展示效果跟<strong>完全相同,但是<b>標簽不具備語義化強調的作用,只是顯示加粗效果。

          2. <em>標簽

          <em>標簽也是將文本定義為強調的內容,只不過比<strong>標簽強調的稍弱些,展示效果為斜體,接下來通過案例來演示<em>標簽,如例2-5所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <em>用良心做教育!</em>
           9 </body>
           10 </html>
          

          運行結果如圖2.7所示。

          圖2.7 em標簽顯示效果

          注意:<i>標簽的展示效果跟<em>完全相同,但是<i>標簽不具備語義化強調的作用,只是顯示斜體效果。

          3. <sup>和<sub>標簽

          <sup>標簽用于將文本定義為上標文本,<sub>標簽用于將文本定義為下標文本,接下來通過案例來演示<sup>和<sub>標簽,如例2-6所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>
           9 <p>H<sub>2</sub>O</p>
           10 </body>
           11 </html>
          

          運行結果如圖2.8所示。

          圖2.8 sup、sub標簽顯示效果

          4. <del>和<ins>標簽

          <del>標簽可用于定義已被刪除的文本, <ins>標簽可用于定義已經被插入的文本,<del>標簽與<ins>標簽配合使用,來描述文檔中的更新和修正。接下來通過案例來演示<del>和<ins>標簽,如例2-7所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p><del>刪除文本加刪除線</del></p>
           9 <p><ins>插入文本加下畫線</ins></p>
           10 </body>
           11 </html>
          

          運行結果如圖2.9所示。

          圖2.9 del、ins標簽顯示效果

          文本格式化標簽,一定要根據它們的語義來記憶,至于它們的默認樣式,后續可以通過CSS方式進行修改。

          2.3.4 引用標簽

          引用標簽就是針對文本進行各種引用的標簽,例如縮略詞、短語解釋、著作、地址等。主要劃分成幾大類,如表2.3所示。

          表2.3中列出了引用標簽的幾種分類,下面進行詳細介紹。

          1. <blockquote>和<q>標簽

          <blockquote>和<q>標簽都是對文本的解釋引用,<blockquote>標簽引用是用大段的段落進行解釋,而<q>標簽引用是小段的短語進行解釋,接下來通過案例來演示<blockquote>和<q>標簽,如例2-8所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>文本格式化</title>
           6 </head>
           7 <body>
           8 <p>"死而后已"一語出自諸葛亮《出師表》:<blockquote>“凡事如是,難可逆見,
           9 臣鞠躬盡瘁,死而后已,至于成敗利鈍,非臣之明所能逆睹也。"</blockquote></p>
           10 <p>WWF 的目標是:<q>構建人與自然和諧共存的世界。</q></p>
           11 </body>
           12 </html>
          

          運行結果如圖2.10所示。

          圖2.10 <blockquote>、<q>標簽顯示效果

          由例2-8中可以看出,<blockquote>標簽左右會空出一些距離,<q>標簽會自動加上引號。

          2. <abbr>標簽

          <abbr>標簽用來引用縮寫或首字母縮略語,接下來通過案例來演示<abbr>標簽,如例2-9所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>引用標簽</title>
           6 </head>
           7 <body>
           8 <p><abbr title="World Health Organization">WHO</abbr> 
           9 成立于 1948 年。</p>
           10 </body>
           11 </html>
          

          運行結果如圖2.11所示。

          圖2.11 <abbr>標簽顯示效果

          例2-9中可以看到一個title屬性,當鼠標移入到設置title的區域時,就會顯示提示信息。

          3. <address>和<cite>標簽

          <address>標簽用來引用地址信息,<cite>標簽用來引用著作的標題,展示效果為斜體,接下來通過一個案例來演示<address>和<cite>標簽,如例2-10所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>引用標簽</title>
           6 </head>
           7 <body>
           8 <address>
           9 <p>網易北京公司</p>
           10 <p>地址:北京市海淀區西北旺東路10號院</p>
           11 <p>郵編:100084</p>
           12 </address>
           13 <p><cite>資治通鑒</cite>由北宋司馬光主編的一部多卷本編年體史書</p> 
           14 </body>
           15 </html>
          

          運行結果如圖2.12所示。

          圖2.12 <address>、<cite>標簽顯示效果

          2.3.5 水平線標簽

          有時為了使文檔結構清晰、層次分明,常常需要在網頁中添加一些水平線將段落與段落之間分隔開,HTML中使用<hr>標簽來創建橫跨網頁的水平線。另外<hr>屬于單標簽,在網頁中輸入一個<hr/>標簽,就添加了一條默認樣式的水平線,<hr>標簽的常用屬性如表2.4所示。

          接下來通過案例來演示水平線標簽,如例2-11所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>水平線標簽</title>
           6 </head>
           7 <body>
           8 <p align="center">扣丁學堂</p>
           9 <hr color="#003399" width="100" size="5">a
           10 <p align="left">遇到IT難題,就上扣丁學堂。</p>
           11 <hr>
           12 <p>遇到問題,在線解答。</p>
           13 </body>
           14 </html>
          

          運行結果如圖2.13所示。

          圖2.13 <hr>標簽顯示效果

          例2-11中,第9行定義水平線標簽,并設置了color、width、size屬性,并沒有設置align屬性,可以發現align屬性默認居中對齊,第11行定義水平線標簽,其屬性都是默認值,可發現width屬性默認的是瀏覽器窗口的100%。

          2.3.6 特殊符號

          在編寫一些文本時,經常會遇到輸入法無法輸入的字符,如?(注冊商標)、?(版權符)等,還有往一段文字中加入多個空格時,頁面并不會解析出多個空格。這些無法輸入和空格字符都是特殊字符,在HTML中,為這些特殊字符準備了專門的代碼,如表2.5。

          接下來通過案例來演示這些特殊字符表示代碼,如例2-12所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>特殊符號</title>
           6 </head>
           7 <body>
           8 <p>?注冊商標 ?版權 空格 < 小于號 >大于號</p>
           9 <p>&和號 ¥人民幣 °攝氏度 ±正負號 ×乘號</p>
           10 <p> ÷除號 1上標1 2上標2 3上標3</p>
           11 </body>
           12 </html>
          

          運行結果如圖2.14所示。

          圖2.14 難輸入符號顯示效果

          在DW中,只要輸入一個&符號,就可以看到相關特殊符號的提示信息。如圖2.15所示。

          圖2.15 DW中特殊符號提示功能

          2.3.7 圖像標簽

          每一張網頁都離不開圖片元素,在網頁中添加圖片是非常重要的操作,如圖2.16所示。

          圖2.16 圖片效果展示

          HTML中使用<img>標簽來添加圖片,<img>屬于單標簽,其語法格式如下

          	<img src=”圖像URL”/>
          

          其中src是用于指定圖像文件的路徑和文件名的屬性,是img標簽的必需屬性。接下來用案例來簡單演示img標簽的使用。如例2-13所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg"/>
           9 </body>
           10 </html
          

          運行結果如圖2.17所示。

          圖2.17 圖像標簽顯示效果

          src屬性引用的是當前圖片的地址,圖片的名為qianfeng,圖片的格式為.png,接下來針對圖片的地址和圖片的格式進行詳細講解。

          1. 圖片的地址

          src屬性引用的是當前圖片的地址,所謂地址就是一個文件的路徑。讀者在網頁中通過地址來找到相應位置的元素。那么地址分為相對地址與絕對地址,相對地址即被引入的文件相對與當前頁面的地址。絕對地址即文件在網絡或本地的絕對位置。

          相對地址有以下三種寫法,具體如下。

          	<img src=”qianfeng.jpg”/>
          	<img src=”img/qianfeng.jpg”/>
          	<img src=”../img/qianfeng.jpg”/>
          

          第一個相對地址說明當前頁面和圖片在同一個目錄下。第二個相對地址說明圖片在頁面同級的img文件夾中。第三個相對地址說明圖片在頁面上一級的img文件夾中。

          絕對地址有以下兩種寫法,具體如下。

          	<img src="http://m.jungjaehyung.com/uploadfile/2024/0806/20240806110615533.jpg"/>
          	<img src=http://m.jungjaehyung.com/uploadfile/2024/0806/20240806110617755.jpg”/>
          

          第一個絕對地址在本地D盤的相應文件夾下。第二個絕對地址在網絡中的相應文件夾下。

          當前網頁和圖片文件如果同時移動到其他位置時,相對地址是不會出問題的,因為兩個文件的相對位置并沒有發生變化。而絕對地址則會有問題,因為地址是唯一的路徑。所以在開發網頁的時候建議讀者盡量采用相對地址。

          2. 圖片格式

          網頁中加載圖像如果太大會造成網頁加載速度慢,太小圖片會顯示不清晰,在網頁中選擇合適的圖片格式加載顯得尤為重要,常用的圖片格式主要有jpg、png和gif三種格式,接下將分別進行詳細講解。

          (1)jpg格式

          jpg格式的圖片是一種有損壓縮的圖像格式,即每次修改圖片都會造成一些圖像數據的丟失。jpg是特別為照片圖像設計的文件格式,可以很好地處理大面積色調的圖像,一般在網頁中用來展示色彩豐富的圖像。如圖2.18所示。

          圖2.18 jpg格式圖片顯示效果

          (2)png格式

          png格式的圖片相對于jpg、gif格式最大的優點是體積小,支持alpha透明(全透明、半透明、全不透明),可以很好地理透明方式的圖片,比如網頁中的logo圖片可以在不同的背景底色下完美展現。如圖2.19所示,但png不支持動畫。另外需要注意,IE6,可以支持png-8,但是在處理png-24的透明時會顯示為灰色。通常,圖片保存為png-8會在同等質量下獲得比gif更小的體積,而半透明的圖片只能使用png-24。

          圖2.19 png格式圖片顯示效果

          (3)gif格式

          gif格式圖片最重要的特點是支持動畫,可以很好地處理動畫效果的圖片,如網頁中的廣告圖片。如圖2.20所示。同時gif是一種無損的圖像格式,修改圖片幾乎不會造成圖像數據的丟失。而且gif也支持透明(全透明和全不透明),因此很適合在網頁中使用。但gif只能處理256種顏色,在網頁制作中,常用于logo、小圖標及其他色彩相對單一的圖像。

          圖2.20 gif格式圖片顯示效果

          <img>標簽除了src屬性外,還包括一些其他屬性,如表2.6所示。

          表2.6中簡單描述了img標簽中常用的屬性,為了使初學者更好地理解和應用這些屬性,接下來進行詳細講解。

          1. alt屬性

          alt屬性是圖片顯示不出來時的提示文字。當設置了alt屬性后,如果圖片正常顯示的話,是看不到任何效果的,只有當圖片地址出問題導致圖片不顯示時,才可以看到alt的提示信息。接下來通過案例來演示alt屬性,如例2-14所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg">
           9 <img src="qianfengError.jpg" alt="千鋒教育">
           10 </body>
           11 </html>
          

          運行結果如圖2.21所示。

          圖2.21 alt屬性顯示效果

          2. title屬性

          title屬性是鼠標移到圖片上的提示文字。當設置了title屬性后,如果鼠標移入到圖片上時,就會顯示title的提示信息。接下來通過案例來演示title屬性,如例2-15所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>圖像標簽</title>
           6 </head>
           7 <body>
           8 <img src="qianfeng.jpg" title="千鋒教育">
           9 </body>
           10 </html>
          

          運行結果如圖2.22所示。

          圖2.22 title屬性顯示效果

          alt屬性和title屬性都是有利于SEO搜索引擎的優化和用戶體驗的提升,只是它們展示的方式不一樣。

          2.3.8 鏈接標簽

          單個網頁不能容納網站需要的所有信息,需要多個網頁構成,這時就點擊鏈接可以從一張網頁跳轉到另一張網頁,如圖2.23所示。

          圖2.23鏈接效果展示

          HTML中使用<a></a>標簽來定義鏈接部分實現網頁的跳轉,其語法格式如下。

          <a href=“鏈接頁面地址” target=“鏈接打開的方式”>鏈接對象</a>

          接下來通過案例來演示鏈接標簽,如例2-16所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-15.html">打開一個新的網頁</a>
           9 <a >千鋒官網</a>
           10 <a href="../照片.rar">下載壓縮包文件</a>
           11 </body>
           12 </html>
          

          運行結果如圖2.24所示。

          圖2.24 鏈接標簽顯示效果

          鏈接和圖像一樣,地址可以是相對地址或絕對地址。鏈接除了可以鏈接地址外,還可以鏈接其他的元素(壓縮包,word文檔,PPT文檔等)。例2-16中第一個鏈接打開的是一個本地中的相對地址,第二個鏈接打開的是一個網絡上的絕對地址,第三個鏈接點擊后會下載一個壓縮包文件。

          鏈接可以針對文字,也可以針對圖片,當點擊圖片時會打開一個新的網頁,接下來通過案例來演示,如例2-17所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-15.html">
           9 <img src="qianfeng.jpg">
           10 </a>
           11 </body>
           12 </html>
          

          運行結果如圖2.25所示。

          圖2.25 鏈接圖片的顯示效果

          例2-16、2-17中<a>標簽只定義了href屬性,<a>標簽除了href屬性外還包含target和name兩個重要屬性,下面就來分別介紹<a>標簽的這三個屬性。

          1. href屬性

          herf屬性就是來指定鏈接目標的url地址,為<a>標簽定義herf屬性后,它就有了鏈接的功能。

          2.name屬性

          有些網頁的內容較多,頁面過長,如百度百科千鋒教育,只能不斷的拖動滾動條來瀏覽網頁,查看所需要的內容,效率較低,而且很不方便,這時可以通過<a>標簽的name屬性實現站內跳轉,這種站內的跳轉的方式也稱錨點操作,接下來通過案來演示name屬性的作用,如例2-18所示。

          1 <!doctype html>

          2 <html>

          3 <head>

          4 <meta charset="utf-8">

          5 <title>鏈接標簽</title>

          6 </head>

          7 <body>

          8 <a href="#h5Pos">HTML5</a>

          9 <a href="#phpPos">PHP</a>

          10 <p>點擊上面的鏈接可跳轉到指定的位置</p>

          11 <a name="h5Pos">HTML5的內容</a>

          12 <p>HTML5</p>

          13 <p>HTML5</p>

          14 <p>HTML5</p>

          15 <p>HTML5</p>

          16 <p>HTML5</p>

          17 <a name="phpPos">PHP的內容</a>

          18 <p>PHP</p>

          19 <p>PHP</p>

          20 <p>PHP</p>

          21 <p>PHP</p>

          22 <p>PHP</p>

          23 </body>

          24 </html>

          運行結果如圖2.26所示。

          3.target屬性

          target屬性用于指定鏈接頁面的打開方式,其取值如表2.7所示

          目前常用的取值有_self和_blank兩種,接下來通過案例來演示這兩種取值的功能,如例2-19所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <a href="2-3.html" target="_self">當前窗口打開鏈接</a>
           9 <a href="2-3.html" target="_blank">新窗口打開鏈接</a>
           10 </body>
           11 </html>
          

          運行結果如圖2.27所示。

          圖2.27 target屬性的顯示效果

          一般情況下,target只用到“_self”和“_blank”這兩個屬性值,其他兩個不需要深究,因為幾乎用不到。

          2.3.9 列表標簽

          列表是網頁中一種常用的數據排列方式,在網頁中到處都可以看到列表的身影,如圖2.28、圖2.29,都是網頁中常見的列表。

          HTML中列表分為有序列表、無序列表和定義列表三種,下面將分別介紹這三種列表。

          1. 有序列表

          在HTML中用<ol>標簽表示有序列表,列表項目用<li>標簽表示,列表項目有先后順序之分,因此稱為有序列表。接下來通過案例來了解有序列表,如例2-20所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>鏈接標簽</title>
           6 </head>
           7 <body>
           8 <ol>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ol>
           15 </body></html>
          

          運行結果如題2.30所示。

          圖2.30 有序列表展示效果

          圖2.31中可以看到前面的阿拉伯數字是默認效果,可以通過有序列表的type屬性來設置不同的顯示效果,其取值如表2.8所示。

          接下來通過案例來演示type屬性的用法,如例2-21所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ol type="a">
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>Java</li>
           14 </ol>
           15 </body>
           16 </html>
          

          運行結果如圖2.31所示。

          圖2.31 有序列表展示效果

          在有序列表中,除了type屬性之外,還可以為<ol>定義start屬性用于規定項目符號的起始值,為<li>定義value屬性用來規定項目符號的數字。

          以上的效果都是HTML自帶效果,如果效果上有更多的需求,可以配合CSS來完成,例如圖2.32的效果,讀者可以在學習完CSS時再來實現。

          圖2.32 CSS美化有序列表

          2. 無序列表

          在HTML中用<ul>標簽表示無序列表,列表項目用<li>標簽表示,列表項目沒有先后順序之分,因此稱為無序列表。接下來通過案例來演示無序列表,如例2-22所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset=”utf-8”>
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ul>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ul>
           15 </body>
           16 </html>
          

          運行結果如圖2.33所示。

          圖2.33 無序列表展示效果

          跟有序列表類似,讀者可以看到默認情況下無序列表前面會有一個黑色的小圓點,同樣可以通過type屬性修改其顯示效果,type屬性取值如表2.9。

          接下來通過案例來演示無序列表type屬性取值,如例2-23所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset=”utf-8”>
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <ul type=”circle”>
           9 <li>HTML</li>
           10 <li>CSS</li>
           11 <li>JavaScript</li>
           12 <li>PHP</li>
           13 <li>JAVA</li>
           14 </ul>
           15 </body>
           16 </html>
          

          運行結果如圖2.34所示。

          圖2.34 無序列表展示效果

          <li></li>之間相當于一個容器,可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>,不允許直接在<ul></ul>標記中輸入文字。

          3. 定義列表

          定義列表通常用于對專業術語或名詞進行解釋和描述,與有序列表和無序列表不同,定義列表項目前沒有任何項目符號。其語法如下。

          	<dl>
          	<dt>定義名詞</dt>
          	<dd>名詞解釋和描述</dd>
          	……
          	</dl>
          

          上面的語法中,<dl></dl>標簽用于定義列表,<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中,其中<dt></dt>標簽用于定義專業術語或名詞,<dd></dd>標簽用于對名詞進行解釋和描述。一對<dt></dt>可以對應多對<dd></dd>,即一個名詞可以有多個解釋和描述。接下來通過案例來演示定義列表,如例2-24所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>列表標簽</title>
           6 </head>
           7 <body>
           8 <dl>
           9 	 <dt>HTML</dt>
           10 <dd>超文本標記語言</dd>
           11 <dt>CSS</dt>
           12 <dd>層疊樣式表</dd>
           13 <dt>JavaScript</dt>
           14 <dd>網頁腳本語言</dd>
           15 </dl>
           16 </body>
           17 </html>
          

          運行結果如圖2.35所示。

          圖2.35 定義列表展示效果

          定義列表在實際開發中不常用,大多數情況還是使用有序列表和無序列表,后面章節中還會詳細講解HTML標簽使用規范。

          2.3.10 <div>與<span>

          div全稱為division,“分割、分區”的意思,<div>標簽用來劃分一個區域,相當于一塊區域容器,可以容納段落、標題、表格、圖像等各種網頁元素。即HTML中大多數的標簽都可以嵌套在<div>標簽中,<div>中還可以嵌套多層<div>,用來將網頁分割成獨立的、不同的部分,來實現網頁的規劃和布局。如圖2.36為阿里汽車和潮電影網站的布局。都是使用<div>標簽來實現的。

          圖2.36 淘寶網區塊展示效果

          接下來通過案例來簡單演示<div>標簽的使用,如例2-25所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>div/span</title>
           6 </head>
           7 <body>
           8 <div>區域1
           9 <p>這是一個段落</p>
           10 </div>
           11 <div>區域2
           12 <h6>這是一個段落</h6>
           13 </div>
           14 <div>區域3
           15 <hr align="left" width="50" color="#00FF66">
           16 </div>
           17 </body>
           18 </html>
          

          運行結果如圖2.37所示。

          圖2.37 div標簽展示效果

          <span>標簽是用來修飾文字的,也叫做內聯標簽 ,如圖2.38。

          圖2.38 千鋒教育文字修飾效果

          接下來通過案例來演示<span>標簽,如例2-26所示。

           1 <!doctype html>
           2 <html>
           3 <head>
           4 <meta charset="utf-8">
           5 <title>div/span</title>
           6 </head>
           7 <body>
           8 <span>文字修飾1</span>
           9 <span>文字修飾2</span>
           10 <span>文字修飾3</span>
           11 </body>
           12 </html>
          

          運行結果如圖2.39所示。

          圖2.39 span標簽展示效果

          <div>標簽和<span>標簽,多數情況下需要配合CSS樣式,在后續的章節中,再詳細的講解<div>標簽和<span>標簽的用法。

          2.4 本章小結

          通過本章的學習,首先介紹HTML語法的發展歷史和HTML語義化的含義。然后對HTML常用標簽進行了講解,如標題、段落、列表等。通過本章的學習,能掌握HTML常用標簽,能初步編寫基本的HTML網頁。

          2.5 習題

          1. 填空題

          (1) 網頁加載時常用圖片的格式為

          (2) 圖像標簽的屬性src用于指定圖像 的屬性。

          (3) 文件的路徑可以分為 兩種。

          (4) <strong>標簽強調文本

          (5) 是為了實現HMTL向XML過渡,讓作者按照統一的風格來編寫標簽。

          2.選擇題

          (1) 在一個網頁中,只能出現一次的標題標簽是( )。

          A.<h1> B.<h2>

          C.<h3> D.<h4>

          (2) a標簽的target屬性中哪一個值是在一個全新的空白窗口中打開鏈接( )。

          A._self B._blank

          C._top D._parent

          (3) 定義列表不包括下面哪個標簽( )。

          A.<dl> B.<dt>

          C.<dd> D.<ol>

          (4) 強調字體是斜體的標簽是( )。

          A.<sup> B.<del>

          C.<em> D.<strong>

          (5) 設置水平線對齊方式的屬性是( )。

          A.size B.align

          C.width D.color

          3.思考題

          (1) 請簡述什么是HTML語義化?

          (2) 請簡述有序列表與無序列表之間的區別?

          內容來源書籍:《HTML5從入門到精通》,一本Web前端實用性綜合技術圖書。

          簡介:《HTML5從入門到精通》倡導“快樂學習,實戰就業”的理念,作為初學者高品質的入門教材之一,免費提供一站式教學服務包,附贈配套PPT、教學視頻、教學大綱、考試系統、測試題等資源。且書本內容覆蓋全面、講解詳細,其中包括標簽語義化、標簽使用規范、選擇器類型、盒模型、標簽分類、樣式重置、CSS優化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時,本教材通過總結、歸納HTML、CSS、CSS3動畫與3D及移動端布局與響應式開發等核心知識點,并從項目開發的實際需求入手,將理論知識與實際應用相結合,以此幫助初學者全面、系統、深入、透徹地理解HTML5的基礎知識和技術,使他們快速地成長為初級程序員,并擁有一定的項目開發經驗,從而在職場中擁有一個較高的起點。

          好,我是堅持分享干貨的 EarlGrey,翻譯出版過《Python編程無師自通》、《Python并行計算手冊》等技術書籍。


          如果我的分享對你有幫助,請關注我,一起向上進擊。

          隨著 VS Code 的發展,其許多插件功能都已集成到內核中,從而使它們變得過時。市場中的許多功能重復了 VS Code 中已有的功能。

          最初創建這些時,這些功能還不是標準設置的一部分,但現在,它們已成為不必要的額外功能。有些甚至已被官方棄用。

          在本篇文章中,我將重點介紹 12 個曾經流行但現在已被淘汰的。其中有些我在之前的插件推薦文章里也有提到,建議大家可以對照本文中的內容做一下更新設置。

          神奇VS Code插件,秒級糾正代碼錯誤!

          5 招讓 VS Code 編碼效率飆升

          原地起飛!VS Code 最好用的 10 款 AI 插件

          Path Intellisense


          Path IntelliSense 是用于自動補全文件名的。但是,VS Code 本身已經可以做到這一點!所以,你并不需要這個工具。

          當你鍵入文件名時,尤其是以引號開頭時,VS Code 會推薦一個項目文件列表。你可以選擇其中一個,它就會為你添加文件名。

          Path Autocomplete

          路徑自動完成

          該擴展與 Path IntelliSense 的功能相同。因此,也把它列入到可以廢棄的插件名單里。

          Bracket Pair Colorizer 2 和 Rainbow Brackets

          括號對著色器
          彩虹括號

          括號對著色是一種廣泛使用的語法高亮功能,可根據括號的順序為其賦予不同的顏色。這可以讓我們更容易地查看范圍和編寫帶有大量括號的表達式。

          在 VSCode 默認包含該功能之前,這些可用于為編輯器添加該功能。由于需求量大,以及對使用時性能的擔憂,VS Code 團隊已將括號對著色作為編輯器的內置功能。

          Auto Import

          通過自動導入,VS Code 可以自動將模塊添加到文件中,從而節省您的時間和精力。即使你移動模塊文件,該功能也能幫助你自動更新它們。

          好消息是,你不需要使用 自動導入。它已經是 VS Code 的一部分!只需通過以下設置將其打開即可:

          • 對于 JavaScript,請轉到 "Suggest:Auto Import",并確保設置為 "啟用/禁用自動導入建議"。默認情況下已經打開了。
          JavaScript自動導入
          • TypeScript 也是如此--找到 "Suggest:Auto Import",并檢查 "啟用/禁用自動導入建議 "是否默認設置為 true。
          Typescript

          HTML Snippets, CSS Snippets and HTML Boilerplate

          HTML Snippets
          CSS Snippets
          HTML Boilerplate

          這些擴展可以讓你使用短碼來編寫常用的 HTML 和 CSS 代碼段,從而加快你的編碼速度。

          但是這些 Emmet 都可以做到。Emmet 是 VSCode 的一項內置功能,其工作原理與這些擴展類似。它默認為各種文件類型打開,如 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus。當你開始輸入一個 Emmet 短代碼時,會出現一些建議供你選擇,你還可以在 VSCode 建議文檔中看到擴展代碼的預覽。

          Auto Close Tag

          Auto Close Tag

          當您添加一個新的 HTML 標簽時,此會自動補全匹配的結尾標簽。不過,VS Code 已經內置了這項功能。你可以通過下面的設置打開或關閉它:

          • 對于 HTML,選中 "HTML "設置下的 "Auto Closing Tags"。它的設置是 "啟用/禁用 HTML 標記的自動關閉",默認為打開。
          • 在 JavaScript 和 TypeScript 中,找到 "Auto Closing Tags "并查找 "啟用/禁用 JSX 標簽的自動關閉"。它也是默認開啟的。
          自動關閉標簽

          npm Intellisense

          NPM Intellisense

          會在編寫導入語句時自動填寫 npm 模塊名稱。

          不過,VS Code 已經為 npm 模塊提供了默認的自動完成功能。因此沒有必要使用該擴展。

          Lorem Ipsum


          Lorem Ipsum對于快速創建占位符文本非常有用,可以省去數小時的復制粘貼工作。不過,我們可以選擇使用 VS Code 原生支持的 Emmet 來生成同樣的 Lorem Ipsum 文本。

          要生成虛擬文本,只需鍵入 "lorem",然后按 Tab 或 Enter。

          Settings Sync

          Settings Sync

          無論您是在各種設備上工作,還是只想保留設置以備將來更改,設置同步都能派上用場。VS Code 支持這一功能,無需

          通過將設置鏈接到 GitHub 或微軟賬戶,你可以選擇想要同步的設置類型,從而提供了一種在不同機器上保持一致體驗的簡單方法。

          結語

          以上就是12個我們沒有必要再安裝的 VS Code 插件,大家不要僅看下載數上百萬就盲目安裝。希望對大家日常選擇開發工具有所幫助,如果你目前有安裝上述插件,那可以考慮卸載掉,以提高 VS Code 的速度。

          如果你有其他想了解的話題或咨詢的問題,歡迎在留言區評論。我會從中挑選大家關注的話題在后續進行分享。

          - EOF -

          文章已經看到這了,別忘了在右下角點個“贊”和“在看”鼓勵哦~


          點擊標題可跳轉



          回復關鍵詞「 pybook03」,領取進擊的Grey與小伙伴一起翻譯的《Think Python 2e》電子版
          回復關鍵詞「書單02」,領取進擊的Grey整理的 10 本 Python 入門書的電子版



          告訴你更多細節干貨


          歡迎圍觀我的朋友圈


          主站蜘蛛池模板: 久久久久人妻一区二区三区vr | 亚洲国产精品一区二区成人片国内| tom影院亚洲国产一区二区| 高清一区二区三区| 国产精品分类视频分类一区| 精品视频一区二区三区免费| 一区二区三区在线播放视频| 亚洲欧洲无码一区二区三区| 精品人妻中文av一区二区三区| 亚洲一区二区三区乱码A| 国产精品亚洲一区二区无码 | 国产产一区二区三区久久毛片国语| 国产精品主播一区二区| 韩国一区二区三区视频| 学生妹亚洲一区二区| 亚洲美女一区二区三区| 国产AV一区二区三区无码野战 | 狠狠做深爱婷婷综合一区 | 四虎永久在线精品免费一区二区 | 国产精品亚洲产品一区二区三区| 人妻在线无码一区二区三区| 久久精品国产AV一区二区三区| 一区二区三区日韩| 亚洲视频在线一区二区三区| 久久国产精品一区免费下载| 麻豆aⅴ精品无码一区二区| 日本亚洲成高清一区二区三区| 日韩精品一区二区三区在线观看| 国产成人一区二区三区电影网站| 国产欧美一区二区精品仙草咪| 精品日韩一区二区三区视频| 色一情一乱一伦一区二区三欧美| 国产精品久久久久久一区二区三区| 无码视频一区二区三区| 日韩一区二区精品观看| 中文字幕一区在线| 精品无码人妻一区二区免费蜜桃| 一区二区和激情视频| 日韩精品一区二区三区视频| 日本精品一区二区三区在线观看| 亚洲不卡av不卡一区二区|