整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：泥瓦匠
鏈接：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的痛點：
基于上述的一些痛點，我們應該把整個項目的開發權重往前移，實現前后端真正的解耦！
以前老的方式是：
新的方式是：
（有興趣的童鞋可以訪問一下阿里巴巴等大型網站，然后按一下F12，監控一下你刷新一次頁面，他的http是怎么玩的，大多數都是單獨請求后臺數據，使用json傳輸數據，而不是一個大而全的http請求把整個頁面包括動+靜全部返回過來）
這樣做的好處是：
注意：
章學習目標
第一章已經介紹過HTML是一門超文本標記語言，通過HTML標記對網頁中的文本、圖片、聲音等信息進行描述。但是具體如何使用HTML標記對網頁中的信息進行控制，沒有介紹，本章就將從HTML的歷史、語義化、常用標簽三個方面詳細講解HTML。
2.1 HTML歷史
俗話說“了解歷史，才能明白當下，進而展望未來”。所以了解HTML的歷史，有利于更好的掌握HTML這門語言。
2.1.1 HTML歷史版本
像大多數軟件、硬件一樣，HTML發展至今，經歷了幾個版本，新增了許多HTML標記，同時也淘汰了一些標記，接下來介紹HTML在不同時期所對應的一些重要版本，具體如下：
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語義化的意義主要有以下幾點：
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 是用于自動補全文件名的。但是，VS Code 本身已經可以做到這一點！所以，你并不需要這個工具。
當你鍵入文件名時，尤其是以引號開頭時，VS Code 會推薦一個項目文件列表。你可以選擇其中一個，它就會為你添加文件名。
該擴展與 Path IntelliSense 的功能相同。因此，也把它列入到可以廢棄的插件名單里。
括號對著色是一種廣泛使用的語法高亮功能，可根據括號的順序為其賦予不同的顏色。這可以讓我們更容易地查看范圍和編寫帶有大量括號的表達式。
在 VSCode 默認包含該功能之前，這些插件可用于為編輯器添加該功能。由于需求量大，以及對使用時性能的擔憂，VS Code 團隊已將括號對著色作為編輯器的內置功能。
通過自動導入插件，VS Code 可以自動將模塊添加到文件中，從而節省您的時間和精力。即使你移動模塊文件，該功能也能幫助你自動更新它們。
好消息是，你不需要使用 自動導入插件。它已經是 VS Code 的一部分！只需通過以下設置將其打開即可：
這些擴展可以讓你使用短碼來編寫常用的 HTML 和 CSS 代碼段，從而加快你的編碼速度。
但是這些 Emmet 都可以做到。Emmet 是 VSCode 的一項內置功能，其工作原理與這些擴展類似。它默認為各種文件類型打開，如 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus。當你開始輸入一個 Emmet 短代碼時，會出現一些建議供你選擇，你還可以在 VSCode 建議文檔中看到擴展代碼的預覽。
當您添加一個新的 HTML 標簽時，此插件會自動補全匹配的結尾標簽。不過，VS Code 已經內置了這項功能。你可以通過下面的設置打開或關閉它：
此插件會在編寫導入語句時自動填寫 npm 模塊名稱。
不過，VS Code 已經為 npm 模塊提供了默認的自動完成功能。因此沒有必要使用該擴展。
Lorem Ipsum插件對于快速創建占位符文本非常有用，可以省去數小時的復制粘貼工作。不過，我們可以選擇使用 VS Code 原生支持的 Emmet 來生成同樣的 Lorem Ipsum 文本。
要生成虛擬文本，只需鍵入 "lorem"，然后按 Tab 或 Enter。
無論您是在各種設備上工作，還是只想保留設置以備將來更改，設置同步都能派上用場。VS Code 支持這一功能，無需插件。
通過將設置鏈接到 GitHub 或微軟賬戶，你可以選擇想要同步的設置類型，從而提供了一種在不同機器上保持一致體驗的簡單方法。
以上就是12個我們沒有必要再安裝的 VS Code 插件，大家不要僅看下載數上百萬就盲目安裝。希望對大家日常選擇開發工具有所幫助，如果你目前有安裝上述插件，那可以考慮卸載掉，以提高 VS Code 的速度。
如果你有其他想了解的話題或咨詢的問題，歡迎在留言區評論。我會從中挑選大家關注的話題在后續進行分享。
- EOF -
文章已經看到這了，別忘了在右下角點個“贊”和“在看”鼓勵哦~
告訴你更多細節干貨
歡迎圍觀我的朋友圈
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
