整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：泥瓦匠
鏈接：https://mp.weixin.qq.com/s/s0dbfo8pdXpmtIo1IUv5lg
以前的項(xiàng)目大多數(shù)都是java程序猿又當(dāng)?shù)之?dāng)媽，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/Oracle等等）。
隨著時(shí)代的發(fā)展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情，正所謂術(shù)業(yè)有專攻，一個(gè)人如果什么都會(huì)，那么他畢竟什么都不精。
大中型公司需要專業(yè)人才，小公司需要全才，但是對(duì)于個(gè)人職業(yè)發(fā)展來說，我建議是分開。你要是這輩子就吃java這碗飯，就不要去研究什么css，js等等。
把你的精力專注在java，jvm原理，spring原理，mysql鎖，事務(wù)，多線程，大并發(fā)，分布式架構(gòu)，微服務(wù)，以及相關(guān)的項(xiàng)目管理等等，這樣你的核心競爭力才會(huì)越來越高，正所謂你往生活中投入什么，生活就會(huì)反饋給你什么。
（滿滿的正能量：
一旦你成為了一個(gè)行業(yè)里的精英，相信我，到時(shí)候，車，房，女人，錢，機(jī)會(huì)就都來找你了，不用著急，真的。
干java程序猿這行，真的很簡單的，你懂得知識(shí)越多，你的錢就越多，當(dāng)然了還需要有一定的情商。。。
你的能力越強(qiáng)，你就比別人創(chuàng)造的價(jià)值更多，你為公司創(chuàng)造了價(jià)值，公司給你各種福利，雙贏！）
幾曾何時(shí)，我們的java web項(xiàng)目都是使用了若干后臺(tái)框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等
大多數(shù)項(xiàng)目在java后端都是分了三層，控制層（controller/action），業(yè)務(wù)層（service/manage），持久層（dao）。
控制層負(fù)責(zé)接收參數(shù)，調(diào)用相關(guān)業(yè)務(wù)層，封裝數(shù)據(jù)，以及路由到j(luò)sp頁面。然后jsp頁面上使用各種標(biāo)簽（jstl/el）或者手寫java（<%=%>）將后臺(tái)的數(shù)據(jù)展現(xiàn)出來。
對(duì)吧？
我們先看這種情況，需求定完了，代碼寫完了，測試測完了，然后呢？要發(fā)布了吧？
你需要用maven或者eclipse等工具把你的代碼打成一個(gè)war包，然后把這個(gè)war包發(fā)布到你的生產(chǎn)環(huán)境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，對(duì)吧？
發(fā)布完了之后，你要啟動(dòng)你的web容器，開始提供服務(wù)，這時(shí)候你通過配置域名，dns等等相關(guān)，你的網(wǎng)站就可以訪問了（假設(shè)你是個(gè)網(wǎng)站）。
那我們來看，你的前后端代碼是不是全都在那個(gè)war包里？包括你的js，css，圖片，各種第三方的庫，對(duì)吧？
好，下面在瀏覽器中輸入你的網(wǎng)站域名（www.xxx.com），之后發(fā)生了什么？（這個(gè)問題也是很多公司的面試題）
我撿干的說了啊，基礎(chǔ)不好的童鞋請(qǐng)自己去搜。
瀏覽器在通過ip路由到你的服務(wù)，在tcp3次握手之后，通過tcp協(xié)議開始訪問你的web服務(wù)器，你的web服務(wù)器得到請(qǐng)求后，開始提供服務(wù)，接收請(qǐng)求，之后通過response返回你的應(yīng)答給瀏覽器。
那么我們來看，我們先假設(shè)你的首頁中有100張圖片，以及一個(gè)單表的查詢，此時(shí)，用戶的看似一次http請(qǐng)求，其實(shí)并不是一次，用戶在第一次訪問的時(shí)候，瀏覽器中不會(huì)有緩存，你的100張圖片，瀏覽器要連著請(qǐng)求100次http請(qǐng)求（有人會(huì)跟我說http長鏈短鏈的問題，不在這里討論），你的web服務(wù)器接收這些請(qǐng)求，都需要耗費(fèi)內(nèi)存去創(chuàng)建socket來玩tcp傳輸。
重點(diǎn)來了，這樣的話，你的web服務(wù)器的壓力會(huì)非常大，因?yàn)轫撁嬷械乃姓?qǐng)求都是只請(qǐng)求到你這臺(tái)服務(wù)器上，如果1個(gè)人還好，如果10000個(gè)人并發(fā)訪問呢（先不聊web服務(wù)器集群，這里就說是單實(shí)例web服務(wù)器），那你的服務(wù)器能扛住多少個(gè)tcp鏈接？你的服務(wù)器的內(nèi)存有多大？你能抗住多少IO？你給web服務(wù)器分的內(nèi)存有多大？會(huì)不會(huì)宕機(jī)？
這就是為什么，越是大中型的web應(yīng)用，他們?cè)绞且怦睢?/p>
理論上你可以把你的數(shù)據(jù)庫+應(yīng)用服務(wù)+消息隊(duì)列+緩存+用戶上傳的文件+日志+等等都扔在一臺(tái)主機(jī)上，但是這樣就好像是你把雞蛋都放在一個(gè)籃子里，隱患非常大。
正常的分布式架構(gòu)，是都要拆開的，你的應(yīng)用服務(wù)器集群（前，后）+文件服務(wù)器集群+數(shù)據(jù)庫服務(wù)器集群+消息隊(duì)列集群+緩存集群等等。
前戲太長了。
MVC
下面步入正題，首先以后的java web項(xiàng)目都盡量要避免使用jsp，要搞前后臺(tái)解耦，玩分布式架構(gòu)，這樣我們的應(yīng)用架構(gòu)才更強(qiáng)。
使用jsp的痛點(diǎn)：
基于上述的一些痛點(diǎn)，我們應(yīng)該把整個(gè)項(xiàng)目的開發(fā)權(quán)重往前移，實(shí)現(xiàn)前后端真正的解耦！
以前老的方式是：
新的方式是：
（有興趣的童鞋可以訪問一下阿里巴巴等大型網(wǎng)站，然后按一下F12，監(jiān)控一下你刷新一次頁面，他的http是怎么玩的，大多數(shù)都是單獨(dú)請(qǐng)求后臺(tái)數(shù)據(jù)，使用json傳輸數(shù)據(jù)，而不是一個(gè)大而全的http請(qǐng)求把整個(gè)頁面包括動(dòng)+靜全部返回過來）
這樣做的好處是：
注意：
章學(xué)習(xí)目標(biāo)
第一章已經(jīng)介紹過HTML是一門超文本標(biāo)記語言，通過HTML標(biāo)記對(duì)網(wǎng)頁中的文本、圖片、聲音等信息進(jìn)行描述。但是具體如何使用HTML標(biāo)記對(duì)網(wǎng)頁中的信息進(jìn)行控制，沒有介紹，本章就將從HTML的歷史、語義化、常用標(biāo)簽三個(gè)方面詳細(xì)講解HTML。
2.1 HTML歷史
俗話說“了解歷史，才能明白當(dāng)下，進(jìn)而展望未來”。所以了解HTML的歷史，有利于更好的掌握HTML這門語言。
2.1.1 HTML歷史版本
像大多數(shù)軟件、硬件一樣，HTML發(fā)展至今，經(jīng)歷了幾個(gè)版本，新增了許多HTML標(biāo)記，同時(shí)也淘汰了一些標(biāo)記，接下來介紹HTML在不同時(shí)期所對(duì)應(yīng)的一些重要版本，具體如下：
HTML沒有1.0版本，最早的HTML官方規(guī)范，是由IETF（Internet Engineering Task Force，因特網(wǎng)工程任務(wù)組）發(fā)布的HTML 2.0。之后W3C成為HTML語言標(biāo)準(zhǔn)的制定者，發(fā)布了3.2、4.0、4.01和5等多個(gè)后續(xù)重要版本。通常所說的HTML5指的就是5這個(gè)最新的版本。
本教材涉及的所有規(guī)范及語法，都是嚴(yán)格按照HTML5標(biāo)準(zhǔn)進(jìn)行講解的，在后面的章節(jié)中還會(huì)詳細(xì)的介紹HTML5及相關(guān)內(nèi)容。
2.1.2 HTML與XHTML關(guān)系
在HTML語法上很寬松，如標(biāo)簽和屬性可以是大寫、小寫，或者任意大小寫字母的組合，標(biāo)簽可以不閉合等。有些設(shè)備很難兼容這些松散的語法，如手機(jī)、打印機(jī)等，這并不符合標(biāo)準(zhǔn)的發(fā)展趨勢，因此1999年12月W3C推出了HTML4.01版本后解散了HTML工作組。轉(zhuǎn)而開發(fā)XHTML，2000年1月26日發(fā)布XHTML1.0。
XHTML是更嚴(yán)謹(jǐn)純凈的HTML版本，XHTML比HTML語法更加規(guī)范和嚴(yán)謹(jǐn)，目的是為了實(shí)現(xiàn)HMTL向XML過渡，讓作者按照統(tǒng)一的風(fēng)格來編寫標(biāo)簽，HTML中標(biāo)簽和屬性不區(qū)分大小寫，而有效的XHTML 文檔則要求所有標(biāo)簽和屬性必須一律小寫，當(dāng)然還有一些其他的規(guī)范和要求，這里不再贅述。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)，完全可以替代HTML，但是面對(duì)互聯(lián)網(wǎng)上大量基于HTML編寫的網(wǎng)站，直接采用XML還為時(shí)過早，因此在HTML4.0的基礎(chǔ)上，用XML的語法規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。
注：XML指可擴(kuò)展標(biāo)記語言（EXtensible Markup Language），用來傳輸和存儲(chǔ)數(shù)據(jù)。XML語言也可以做為很多語言的基礎(chǔ)語言，例如：XHTML、SVG等。
HTML的不同版本對(duì)<!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>
因?yàn)?HTML 4.01和XHTML1.0 基于 SGML，所以 DOCTYPE 需要對(duì) DTD 進(jìn)行引用。而 HTML 5 不基于 SGML，因此不需要對(duì) DTD 進(jìn)行引用，因此HTML5的DOCTYPE寫法相當(dāng)簡單。這里建議讀者都采用最新的HTML5版本<!DOCTYPE>寫法，第一章已經(jīng)介紹過在DW工具中默認(rèn)設(shè)置不同類型的文檔聲明。
2.2 什么是HTML語義化
所謂HTML語義化指的是，根據(jù)網(wǎng)頁中內(nèi)容的結(jié)構(gòu)，選擇適合的HTML標(biāo)簽進(jìn)行編寫。HTML語義化的意義主要有以下幾點(diǎn)：
HTML標(biāo)簽都具備語義化，根據(jù)網(wǎng)頁展示的內(nèi)容結(jié)構(gòu)，選擇正確的HTML標(biāo)簽進(jìn)行解析與編碼。
注： SEO是指在了解搜索引擎自然排名機(jī)制的基礎(chǔ)之上，對(duì)網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點(diǎn)擊訪問網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目的。
2.3 HTML常用標(biāo)簽
HTML標(biāo)簽非常多，有些由于歷史問題已經(jīng)廢棄，有些屬于HTML5中新添加的，這部分H5新標(biāo)簽會(huì)在H5章節(jié)中給讀者講解，本章主要講解一些HTML中常用標(biāo)簽的使用。
2.3.1 標(biāo)題標(biāo)簽
瀏覽新聞?lì)惥W(wǎng)頁時(shí)，經(jīng)常能看見文章的標(biāo)題，如圖2.1所示。
圖2.1 千鋒教育新聞標(biāo)題
圖2.1的標(biāo)題就是用HTML中的標(biāo)題標(biāo)簽來實(shí)現(xiàn)的，HTML中使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>等標(biāo)簽來定義標(biāo)題部分，其語法格式如下：
<hn 屬性=“屬性值”>標(biāo)題文本</hn>
接下來通過案例來演示標(biāo)題標(biāo)簽，如例2-1所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定義標(biāo)題</title> 6 </head> 7 <body> 8 <h1>這是一級(jí)標(biāo)題</h1> 9 <h2>這是二級(jí)標(biāo)題</h2> 10 <h3>這是三級(jí)標(biāo)題</h3> 11 <h4>這是四級(jí)標(biāo)題</h4> 12 <h5>這是五級(jí)標(biāo)題</h5> 13 <h6>這是六級(jí)標(biāo)題</h6> 14 </body> 15 </html>
運(yùn)行結(jié)果如圖2.2所示。
圖2.2 標(biāo)題標(biāo)簽顯示效果
從上例運(yùn)行結(jié)果可以看出，默認(rèn)情況下標(biāo)題文字的顯示方式是加粗左對(duì)齊，并且從<h1>到<h6>字號(hào)遞減，如果想改變標(biāo)題的對(duì)齊方式，需要用到align屬性，其取值如表2.1。
接下來通過案例來演示標(biāo)題標(biāo)簽對(duì)齊方式的設(shè)置及效果，如例2-2所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定義標(biāo)題對(duì)齊方式</title> 6 </head> 7 <body> 8 <h1>這是一級(jí)標(biāo)題</h1> 9 <h2 align="left">這是二級(jí)標(biāo)題</h2> 10 <h3 align="center">這是三級(jí)標(biāo)題</h3> 11 <h4 align="right">這是四級(jí)標(biāo)題</h4> 12 </body> 13 </html>
運(yùn)行結(jié)果如圖2.3所示。
圖2.3標(biāo)題對(duì)齊方式顯示效果
標(biāo)題很重要，它有利于網(wǎng)頁搜索引擎的優(yōu)化，其中<h1>標(biāo)題的重要性最高，<h6>標(biāo)題的重要性最低，一般一個(gè)頁面只能有一個(gè)<h1>，而<h2>~<h6>可以有多個(gè)。
2.3.2 段落標(biāo)簽
瀏覽新聞?lì)惥W(wǎng)頁時(shí)，經(jīng)常能看見文章的段落，如圖2.4所示。
圖2.4 千鋒教育新聞段落
圖2.4中的段落在HTML中使用<p>標(biāo)簽實(shí)現(xiàn)，用于在網(wǎng)頁中把文字有條理地顯示出來，其語法格式如下：
<p 屬性=“屬性值”>段落文本</p>
接下來通過案例來演示段落標(biāo)簽，如例2-3所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>段落標(biāo)簽</title> 6 </head> 7 <body> 8 <h1 align="center" >扣丁學(xué)堂</h1></h1> 9 <p align="left">扣丁學(xué)堂是中國IT培訓(xùn)教育品牌領(lǐng)導(dǎo)者,擁有最新最全的IT培訓(xùn)視頻課 10 程,專注于發(fā)布和更新iOS培訓(xùn)、Android培訓(xùn)、HTML5培訓(xùn)、UI培訓(xùn)、PHP培訓(xùn)視頻教程, 11 著力于培養(yǎng)移動(dòng)互聯(lián)網(wǎng)人才。</p> 12 <p align="ri">遇到IT技術(shù)難題，就上扣丁學(xué)堂學(xué)堂。</p> 13 </body> 14 </html>
運(yùn)行結(jié)果如圖2.5所示。
圖2.5 段落標(biāo)簽顯示效果
2.3.3 文本格式化標(biāo)簽
文本格式化標(biāo)簽就是針對(duì)文本進(jìn)行各種格式化的標(biāo)簽，例如加粗、斜體、上標(biāo)、下標(biāo)等。如表2.2所示。
表2.2中列出了對(duì)文本格式化的幾種標(biāo)簽，下面將詳細(xì)介紹這幾種標(biāo)簽的使用和效果。
1. <strong>標(biāo)簽
<strong>標(biāo)簽將文本定義為語氣更強(qiáng)的強(qiáng)調(diào)內(nèi)容，展示效果為加粗。接下來通過案例演示<strong>標(biāo)簽，如例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>
運(yùn)行結(jié)果如圖2.6所示。
圖2.6 strong標(biāo)簽顯示效果
注意：<b>標(biāo)簽的展示效果跟<strong>完全相同，但是<b>標(biāo)簽不具備語義化強(qiáng)調(diào)的作用，只是顯示加粗效果。
2. <em>標(biāo)簽
<em>標(biāo)簽也是將文本定義為強(qiáng)調(diào)的內(nèi)容，只不過比<strong>標(biāo)簽強(qiáng)調(diào)的稍弱些，展示效果為斜體，接下來通過案例來演示<em>標(biāo)簽，如例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>
運(yùn)行結(jié)果如圖2.7所示。
圖2.7 em標(biāo)簽顯示效果
注意：<i>標(biāo)簽的展示效果跟<em>完全相同，但是<i>標(biāo)簽不具備語義化強(qiáng)調(diào)的作用，只是顯示斜體效果。
3. <sup>和<sub>標(biāo)簽
<sup>標(biāo)簽用于將文本定義為上標(biāo)文本，<sub>標(biāo)簽用于將文本定義為下標(biāo)文本，接下來通過案例來演示<sup>和<sub>標(biāo)簽，如例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>
運(yùn)行結(jié)果如圖2.8所示。
圖2.8 sup、sub標(biāo)簽顯示效果
4. <del>和<ins>標(biāo)簽
<del>標(biāo)簽可用于定義已被刪除的文本， <ins>標(biāo)簽可用于定義已經(jīng)被插入的文本，<del>標(biāo)簽與<ins>標(biāo)簽配合使用，來描述文檔中的更新和修正。接下來通過案例來演示<del>和<ins>標(biāo)簽，如例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>
運(yùn)行結(jié)果如圖2.9所示。
圖2.9 del、ins標(biāo)簽顯示效果
文本格式化標(biāo)簽，一定要根據(jù)它們的語義來記憶，至于它們的默認(rèn)樣式，后續(xù)可以通過CSS方式進(jìn)行修改。
2.3.4 引用標(biāo)簽
引用標(biāo)簽就是針對(duì)文本進(jìn)行各種引用的標(biāo)簽，例如縮略詞、短語解釋、著作、地址等。主要?jiǎng)澐殖蓭状箢悾绫?.3所示。
表2.3中列出了引用標(biāo)簽的幾種分類，下面進(jìn)行詳細(xì)介紹。
1. <blockquote>和<q>標(biāo)簽
<blockquote>和<q>標(biāo)簽都是對(duì)文本的解釋引用，<blockquote>標(biāo)簽引用是用大段的段落進(jìn)行解釋，而<q>標(biāo)簽引用是小段的短語進(jìn)行解釋，接下來通過案例來演示<blockquote>和<q>標(biāo)簽，如例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 的目標(biāo)是：<q>構(gòu)建人與自然和諧共存的世界。</q></p> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.10所示。
圖2.10 <blockquote>、<q>標(biāo)簽顯示效果
由例2-8中可以看出，<blockquote>標(biāo)簽左右會(huì)空出一些距離，<q>標(biāo)簽會(huì)自動(dòng)加上引號(hào)。
2. <abbr>標(biāo)簽
<abbr>標(biāo)簽用來引用縮寫或首字母縮略語，接下來通過案例來演示<abbr>標(biāo)簽，如例2-9所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>引用標(biāo)簽</title> 6 </head> 7 <body> 8 <p><abbr title="World Health Organization">WHO</abbr> 9 成立于 1948 年。</p> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.11所示。
圖2.11 <abbr>標(biāo)簽顯示效果
例2-9中可以看到一個(gè)title屬性，當(dāng)鼠標(biāo)移入到設(shè)置title的區(qū)域時(shí)，就會(huì)顯示提示信息。
3. <address>和<cite>標(biāo)簽
<address>標(biāo)簽用來引用地址信息，<cite>標(biāo)簽用來引用著作的標(biāo)題，展示效果為斜體，接下來通過一個(gè)案例來演示<address>和<cite>標(biāo)簽，如例2-10所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>引用標(biāo)簽</title> 6 </head> 7 <body> 8 <address> 9 <p>網(wǎng)易北京公司</p> 10 <p>地址:北京市海淀區(qū)西北旺東路10號(hào)院</p> 11 <p>郵編:100084</p> 12 </address> 13 <p><cite>資治通鑒</cite>由北宋司馬光主編的一部多卷本編年體史書</p> 14 </body> 15 </html>
運(yùn)行結(jié)果如圖2.12所示。
圖2.12 <address>、<cite>標(biāo)簽顯示效果
2.3.5 水平線標(biāo)簽
有時(shí)為了使文檔結(jié)構(gòu)清晰、層次分明，常常需要在網(wǎng)頁中添加一些水平線將段落與段落之間分隔開，HTML中使用<hr>標(biāo)簽來創(chuàng)建橫跨網(wǎng)頁的水平線。另外<hr>屬于單標(biāo)簽，在網(wǎng)頁中輸入一個(gè)<hr/>標(biāo)簽，就添加了一條默認(rèn)樣式的水平線，<hr>標(biāo)簽的常用屬性如表2.4所示。
接下來通過案例來演示水平線標(biāo)簽，如例2-11所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平線標(biāo)簽</title> 6 </head> 7 <body> 8 <p align="center">扣丁學(xué)堂</p> 9 <hr color="#003399" width="100" size="5">a 10 <p align="left">遇到IT難題，就上扣丁學(xué)堂。</p> 11 <hr> 12 <p>遇到問題，在線解答。</p> 13 </body> 14 </html>
運(yùn)行結(jié)果如圖2.13所示。
圖2.13 <hr>標(biāo)簽顯示效果
例2-11中，第9行定義水平線標(biāo)簽，并設(shè)置了color、width、size屬性，并沒有設(shè)置align屬性，可以發(fā)現(xiàn)align屬性默認(rèn)居中對(duì)齊，第11行定義水平線標(biāo)簽，其屬性都是默認(rèn)值，可發(fā)現(xiàn)width屬性默認(rèn)的是瀏覽器窗口的100%。
2.3.6 特殊符號(hào)
在編寫一些文本時(shí)，經(jīng)常會(huì)遇到輸入法無法輸入的字符，如?（注冊(cè)商標(biāo)）、?（版權(quán)符）等，還有往一段文字中加入多個(gè)空格時(shí)，頁面并不會(huì)解析出多個(gè)空格。這些無法輸入和空格字符都是特殊字符，在HTML中，為這些特殊字符準(zhǔn)備了專門的代碼，如表2.5。
接下來通過案例來演示這些特殊字符表示代碼，如例2-12所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>特殊符號(hào)</title> 6 </head> 7 <body> 8 <p>?注冊(cè)商標(biāo) ?版權(quán) 空格 < 小于號(hào) >大于號(hào)</p> 9 <p>&和號(hào) ￥人民幣 °攝氏度 ±正負(fù)號(hào) ×乘號(hào)</p> 10 <p> ÷除號(hào) 1上標(biāo)1 2上標(biāo)2 3上標(biāo)3</p> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.14所示。
圖2.14 難輸入符號(hào)顯示效果
在DW中，只要輸入一個(gè)&符號(hào)，就可以看到相關(guān)特殊符號(hào)的提示信息。如圖2.15所示。
圖2.15 DW中特殊符號(hào)提示功能
2.3.7 圖像標(biāo)簽
每一張網(wǎng)頁都離不開圖片元素，在網(wǎng)頁中添加圖片是非常重要的操作，如圖2.16所示。
圖2.16 圖片效果展示
HTML中使用<img>標(biāo)簽來添加圖片，<img>屬于單標(biāo)簽，其語法格式如下
<img src=”圖像URL”/>
其中src是用于指定圖像文件的路徑和文件名的屬性，是img標(biāo)簽的必需屬性。接下來用案例來簡單演示img標(biāo)簽的使用。如例2-13所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg"/> 9 </body> 10 </html
運(yùn)行結(jié)果如圖2.17所示。
圖2.17 圖像標(biāo)簽顯示效果
src屬性引用的是當(dāng)前圖片的地址，圖片的名為qianfeng，圖片的格式為.png，接下來針對(duì)圖片的地址和圖片的格式進(jìn)行詳細(xì)講解。
1. 圖片的地址
src屬性引用的是當(dāng)前圖片的地址，所謂地址就是一個(gè)文件的路徑。讀者在網(wǎng)頁中通過地址來找到相應(yīng)位置的元素。那么地址分為相對(duì)地址與絕對(duì)地址，相對(duì)地址即被引入的文件相對(duì)與當(dāng)前頁面的地址。絕對(duì)地址即文件在網(wǎng)絡(luò)或本地的絕對(duì)位置。
相對(duì)地址有以下三種寫法，具體如下。
<img src=”qianfeng.jpg”/> <img src=”img/qianfeng.jpg”/> <img src=”../img/qianfeng.jpg”/>
第一個(gè)相對(duì)地址說明當(dāng)前頁面和圖片在同一個(gè)目錄下。第二個(gè)相對(duì)地址說明圖片在頁面同級(jí)的img文件夾中。第三個(gè)相對(duì)地址說明圖片在頁面上一級(jí)的img文件夾中。
絕對(duì)地址有以下兩種寫法，具體如下。
<img src="http://www.jungjaehyung.com/uploadfile/2024/0806/20240806110615533.jpg"/> <img src=http://www.jungjaehyung.com/uploadfile/2024/0806/20240806110617755.jpg”/>
第一個(gè)絕對(duì)地址在本地D盤的相應(yīng)文件夾下。第二個(gè)絕對(duì)地址在網(wǎng)絡(luò)中的相應(yīng)文件夾下。
當(dāng)前網(wǎng)頁和圖片文件如果同時(shí)移動(dòng)到其他位置時(shí)，相對(duì)地址是不會(huì)出問題的，因?yàn)閮蓚€(gè)文件的相對(duì)位置并沒有發(fā)生變化。而絕對(duì)地址則會(huì)有問題，因?yàn)榈刂肥俏ㄒ坏穆窂健Ｋ栽陂_發(fā)網(wǎng)頁的時(shí)候建議讀者盡量采用相對(duì)地址。
2. 圖片格式
網(wǎng)頁中加載圖像如果太大會(huì)造成網(wǎng)頁加載速度慢，太小圖片會(huì)顯示不清晰，在網(wǎng)頁中選擇合適的圖片格式加載顯得尤為重要，常用的圖片格式主要有jpg、png和gif三種格式，接下將分別進(jìn)行詳細(xì)講解。
（1）jpg格式
jpg格式的圖片是一種有損壓縮的圖像格式，即每次修改圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。jpg是特別為照片圖像設(shè)計(jì)的文件格式，可以很好地處理大面積色調(diào)的圖像，一般在網(wǎng)頁中用來展示色彩豐富的圖像。如圖2.18所示。
圖2.18 jpg格式圖片顯示效果
（2）png格式
png格式的圖片相對(duì)于jpg、gif格式最大的優(yōu)點(diǎn)是體積小，支持alpha透明（全透明、半透明、全不透明），可以很好地理透明方式的圖片，比如網(wǎng)頁中的logo圖片可以在不同的背景底色下完美展現(xiàn)。如圖2.19所示，但png不支持動(dòng)畫。另外需要注意，IE6,可以支持png-8，但是在處理png-24的透明時(shí)會(huì)顯示為灰色。通常，圖片保存為png-8會(huì)在同等質(zhì)量下獲得比gif更小的體積，而半透明的圖片只能使用png-24。
圖2.19 png格式圖片顯示效果
（3）gif格式
gif格式圖片最重要的特點(diǎn)是支持動(dòng)畫，可以很好地處理動(dòng)畫效果的圖片，如網(wǎng)頁中的廣告圖片。如圖2.20所示。同時(shí)gif是一種無損的圖像格式，修改圖片幾乎不會(huì)造成圖像數(shù)據(jù)的丟失。而且gif也支持透明（全透明和全不透明），因此很適合在網(wǎng)頁中使用。但gif只能處理256種顏色，在網(wǎng)頁制作中，常用于logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。
圖2.20 gif格式圖片顯示效果
<img>標(biāo)簽除了src屬性外，還包括一些其他屬性，如表2.6所示。
表2.6中簡單描述了img標(biāo)簽中常用的屬性，為了使初學(xué)者更好地理解和應(yīng)用這些屬性，接下來進(jìn)行詳細(xì)講解。
1. alt屬性
alt屬性是圖片顯示不出來時(shí)的提示文字。當(dāng)設(shè)置了alt屬性后，如果圖片正常顯示的話，是看不到任何效果的，只有當(dāng)圖片地址出問題導(dǎo)致圖片不顯示時(shí)，才可以看到alt的提示信息。接下來通過案例來演示alt屬性，如例2-14所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg"> 9 <img src="qianfengError.jpg" alt="千鋒教育"> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.21所示。
圖2.21 alt屬性顯示效果
2. title屬性
title屬性是鼠標(biāo)移到圖片上的提示文字。當(dāng)設(shè)置了title屬性后，如果鼠標(biāo)移入到圖片上時(shí)，就會(huì)顯示title的提示信息。接下來通過案例來演示title屬性，如例2-15所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖像標(biāo)簽</title> 6 </head> 7 <body> 8 <img src="qianfeng.jpg" title="千鋒教育"> 9 </body> 10 </html>
運(yùn)行結(jié)果如圖2.22所示。
圖2.22 title屬性顯示效果
alt屬性和title屬性都是有利于SEO搜索引擎的優(yōu)化和用戶體驗(yàn)的提升，只是它們展示的方式不一樣。
2.3.8 鏈接標(biāo)簽
單個(gè)網(wǎng)頁不能容納網(wǎng)站需要的所有信息，需要多個(gè)網(wǎng)頁構(gòu)成，這時(shí)就點(diǎn)擊鏈接可以從一張網(wǎng)頁跳轉(zhuǎn)到另一張網(wǎng)頁，如圖2.23所示。
圖2.23鏈接效果展示
HTML中使用<a></a>標(biāo)簽來定義鏈接部分實(shí)現(xiàn)網(wǎng)頁的跳轉(zhuǎn)，其語法格式如下。
<a href=“鏈接頁面地址” target=“鏈接打開的方式”>鏈接對(duì)象</a>
接下來通過案例來演示鏈接標(biāo)簽，如例2-16所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-15.html">打開一個(gè)新的網(wǎng)頁</a> 9 <a >千鋒官網(wǎng)</a> 10 <a href="../照片.rar">下載壓縮包文件</a> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.24所示。
圖2.24 鏈接標(biāo)簽顯示效果
鏈接和圖像一樣，地址可以是相對(duì)地址或絕對(duì)地址。鏈接除了可以鏈接地址外，還可以鏈接其他的元素（壓縮包，word文檔，PPT文檔等）。例2-16中第一個(gè)鏈接打開的是一個(gè)本地中的相對(duì)地址，第二個(gè)鏈接打開的是一個(gè)網(wǎng)絡(luò)上的絕對(duì)地址，第三個(gè)鏈接點(diǎn)擊后會(huì)下載一個(gè)壓縮包文件。
鏈接可以針對(duì)文字，也可以針對(duì)圖片，當(dāng)點(diǎn)擊圖片時(shí)會(huì)打開一個(gè)新的網(wǎng)頁，接下來通過案例來演示，如例2-17所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-15.html"> 9 <img src="qianfeng.jpg"> 10 </a> 11 </body> 12 </html>
運(yùn)行結(jié)果如圖2.25所示。
圖2.25 鏈接圖片的顯示效果
例2-16、2-17中<a>標(biāo)簽只定義了href屬性，<a>標(biāo)簽除了href屬性外還包含target和name兩個(gè)重要屬性，下面就來分別介紹<a>標(biāo)簽的這三個(gè)屬性。
1. href屬性
herf屬性就是來指定鏈接目標(biāo)的url地址，為<a>標(biāo)簽定義herf屬性后，它就有了鏈接的功能。
2.name屬性
有些網(wǎng)頁的內(nèi)容較多，頁面過長，如百度百科千鋒教育，只能不斷的拖動(dòng)滾動(dòng)條來瀏覽網(wǎng)頁，查看所需要的內(nèi)容，效率較低，而且很不方便，這時(shí)可以通過<a>標(biāo)簽的name屬性實(shí)現(xiàn)站內(nèi)跳轉(zhuǎn)，這種站內(nèi)的跳轉(zhuǎn)的方式也稱錨點(diǎn)操作，接下來通過案來演示name屬性的作用，如例2-18所示。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>鏈接標(biāo)簽</title>
6 </head>
7 <body>
8 <a href="#h5Pos">HTML5</a>
9 <a href="#phpPos">PHP</a>
10 <p>點(diǎn)擊上面的鏈接可跳轉(zhuǎn)到指定的位置</p>
11 <a name="h5Pos">HTML5的內(nèi)容</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的內(nèi)容</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>
運(yùn)行結(jié)果如圖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>鏈接標(biāo)簽</title> 6 </head> 7 <body> 8 <a href="2-3.html" target="_self">當(dāng)前窗口打開鏈接</a> 9 <a href="2-3.html" target="_blank">新窗口打開鏈接</a> 10 </body> 11 </html>
運(yùn)行結(jié)果如圖2.27所示。
圖2.27 target屬性的顯示效果
一般情況下，target只用到“_self”和“_blank”這兩個(gè)屬性值，其他兩個(gè)不需要深究，因?yàn)閹缀跤貌坏健?/p>
2.3.9 列表標(biāo)簽
列表是網(wǎng)頁中一種常用的數(shù)據(jù)排列方式，在網(wǎng)頁中到處都可以看到列表的身影，如圖2.28、圖2.29，都是網(wǎng)頁中常見的列表。
HTML中列表分為有序列表、無序列表和定義列表三種，下面將分別介紹這三種列表。
1. 有序列表
在HTML中用<ol>標(biāo)簽表示有序列表，列表項(xiàng)目用<li>標(biāo)簽表示，列表項(xiàng)目有先后順序之分，因此稱為有序列表。接下來通過案例來了解有序列表，如例2-20所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>鏈接標(biāo)簽</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>
運(yùn)行結(jié)果如題2.30所示。
圖2.30 有序列表展示效果
圖2.31中可以看到前面的阿拉伯?dāng)?shù)字是默認(rèn)效果，可以通過有序列表的type屬性來設(shè)置不同的顯示效果，其取值如表2.8所示。
接下來通過案例來演示type屬性的用法，如例2-21所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>列表標(biāo)簽</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>
運(yùn)行結(jié)果如圖2.31所示。
圖2.31 有序列表展示效果
在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性用于規(guī)定項(xiàng)目符號(hào)的起始值，為<li>定義value屬性用來規(guī)定項(xiàng)目符號(hào)的數(shù)字。
以上的效果都是HTML自帶效果，如果效果上有更多的需求，可以配合CSS來完成，例如圖2.32的效果，讀者可以在學(xué)習(xí)完CSS時(shí)再來實(shí)現(xiàn)。
圖2.32 CSS美化有序列表
2. 無序列表
在HTML中用<ul>標(biāo)簽表示無序列表，列表項(xiàng)目用<li>標(biāo)簽表示，列表項(xiàng)目沒有先后順序之分，因此稱為無序列表。接下來通過案例來演示無序列表，如例2-22所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=”utf-8”> 5 <title>列表標(biāo)簽</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>
運(yùn)行結(jié)果如圖2.33所示。
圖2.33 無序列表展示效果
跟有序列表類似，讀者可以看到默認(rèn)情況下無序列表前面會(huì)有一個(gè)黑色的小圓點(diǎn)，同樣可以通過type屬性修改其顯示效果，type屬性取值如表2.9。
接下來通過案例來演示無序列表type屬性取值，如例2-23所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset=”utf-8”> 5 <title>列表標(biāo)簽</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>
運(yùn)行結(jié)果如圖2.34所示。
圖2.34 無序列表展示效果
<li></li>之間相當(dāng)于一個(gè)容器，可以容納所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允許直接在<ul></ul>標(biāo)記中輸入文字。
3. 定義列表
定義列表通常用于對(duì)專業(yè)術(shù)語或名詞進(jìn)行解釋和描述，與有序列表和無序列表不同，定義列表項(xiàng)目前沒有任何項(xiàng)目符號(hào)。其語法如下。
<dl> <dt>定義名詞</dt> <dd>名詞解釋和描述</dd> …… </dl>
上面的語法中，<dl></dl>標(biāo)簽用于定義列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中<dt></dt>標(biāo)簽用于定義專業(yè)術(shù)語或名詞，<dd></dd>標(biāo)簽用于對(duì)名詞進(jìn)行解釋和描述。一對(duì)<dt></dt>可以對(duì)應(yīng)多對(duì)<dd></dd>，即一個(gè)名詞可以有多個(gè)解釋和描述。接下來通過案例來演示定義列表，如例2-24所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>列表標(biāo)簽</title> 6 </head> 7 <body> 8 <dl> 9 <dt>HTML</dt> 10 <dd>超文本標(biāo)記語言</dd> 11 <dt>CSS</dt> 12 <dd>層疊樣式表</dd> 13 <dt>JavaScript</dt> 14 <dd>網(wǎng)頁腳本語言</dd> 15 </dl> 16 </body> 17 </html>
運(yùn)行結(jié)果如圖2.35所示。
圖2.35 定義列表展示效果
定義列表在實(shí)際開發(fā)中不常用，大多數(shù)情況還是使用有序列表和無序列表，后面章節(jié)中還會(huì)詳細(xì)講解HTML標(biāo)簽使用規(guī)范。
2.3.10 <div>與<span>
div全稱為division，“分割、分區(qū)”的意思，<div>標(biāo)簽用來劃分一個(gè)區(qū)域，相當(dāng)于一塊區(qū)域容器，可以容納段落、標(biāo)題、表格、圖像等各種網(wǎng)頁元素。即HTML中大多數(shù)的標(biāo)簽都可以嵌套在<div>標(biāo)簽中，<div>中還可以嵌套多層<div>，用來將網(wǎng)頁分割成獨(dú)立的、不同的部分，來實(shí)現(xiàn)網(wǎng)頁的規(guī)劃和布局。如圖2.36為阿里汽車和潮電影網(wǎng)站的布局。都是使用<div>標(biāo)簽來實(shí)現(xiàn)的。
圖2.36 淘寶網(wǎng)區(qū)塊展示效果
接下來通過案例來簡單演示<div>標(biāo)簽的使用，如例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>區(qū)域1 9 <p>這是一個(gè)段落</p> 10 </div> 11 <div>區(qū)域2 12 <h6>這是一個(gè)段落</h6> 13 </div> 14 <div>區(qū)域3 15 <hr align="left" width="50" color="#00FF66"> 16 </div> 17 </body> 18 </html>
運(yùn)行結(jié)果如圖2.37所示。
圖2.37 div標(biāo)簽展示效果
<span>標(biāo)簽是用來修飾文字的，也叫做內(nèi)聯(lián)標(biāo)簽 ，如圖2.38。
圖2.38 千鋒教育文字修飾效果
接下來通過案例來演示<span>標(biāo)簽，如例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>
運(yùn)行結(jié)果如圖2.39所示。
圖2.39 span標(biāo)簽展示效果
<div>標(biāo)簽和<span>標(biāo)簽，多數(shù)情況下需要配合CSS樣式，在后續(xù)的章節(jié)中，再詳細(xì)的講解<div>標(biāo)簽和<span>標(biāo)簽的用法。
2.4 本章小結(jié)
通過本章的學(xué)習(xí)，首先介紹HTML語法的發(fā)展歷史和HTML語義化的含義。然后對(duì)HTML常用標(biāo)簽進(jìn)行了講解，如標(biāo)題、段落、列表等。通過本章的學(xué)習(xí)，能掌握HTML常用標(biāo)簽，能初步編寫基本的HTML網(wǎng)頁。
2.5 習(xí)題
1. 填空題
(1) 網(wǎng)頁加載時(shí)常用圖片的格式為 、 、 。
(2) 圖像標(biāo)簽的屬性src用于指定圖像 和 的屬性。
(3) 文件的路徑可以分為 和 兩種。
(4) <strong>標(biāo)簽強(qiáng)調(diào)文本 。
(5) 是為了實(shí)現(xiàn)HMTL向XML過渡，讓作者按照統(tǒng)一的風(fēng)格來編寫標(biāo)簽。
2.選擇題
(1) 在一個(gè)網(wǎng)頁中，只能出現(xiàn)一次的標(biāo)題標(biāo)簽是（ ）。
A．<h1> B．<h2>
C．<h3> D．<h4>
(2) a標(biāo)簽的target屬性中哪一個(gè)值是在一個(gè)全新的空白窗口中打開鏈接（ ）。
A．_self B．_blank
C．_top D．_parent
(3) 定義列表不包括下面哪個(gè)標(biāo)簽（ ）。
A．<dl> B．<dt>
C．<dd> D．<ol>
(4) 強(qiáng)調(diào)字體是斜體的標(biāo)簽是（ ）。
A．<sup> B．<del>
C．<em> D．<strong>
(5) 設(shè)置水平線對(duì)齊方式的屬性是（ ）。
A．size B．a(chǎn)lign
C．width D．color
3.思考題
(1) 請(qǐng)簡述什么是HTML語義化？
(2) 請(qǐng)簡述有序列表與無序列表之間的區(qū)別？
內(nèi)容來源書籍：《HTML5從入門到精通》，一本W(wǎng)eb前端實(shí)用性綜合技術(shù)圖書。
簡介：《HTML5從入門到精通》倡導(dǎo)“快樂學(xué)習(xí)，實(shí)戰(zhàn)就業(yè)”的理念，作為初學(xué)者高品質(zhì)的入門教材之一，免費(fèi)提供一站式教學(xué)服務(wù)包，附贈(zèng)配套PPT、教學(xué)視頻、教學(xué)大綱、考試系統(tǒng)、測試題等資源。且書本內(nèi)容覆蓋全面、講解詳細(xì)，其中包括標(biāo)簽語義化、標(biāo)簽使用規(guī)范、選擇器類型、盒模型、標(biāo)簽分類、樣式重置、CSS優(yōu)化、Photoshop切圖處理、整頁制作、CSS3新樣式、HTML5新功能等。與此同時(shí)，本教材通過總結(jié)、歸納HTML、CSS、CSS3動(dòng)畫與3D及移動(dòng)端布局與響應(yīng)式開發(fā)等核心知識(shí)點(diǎn)，并從項(xiàng)目開發(fā)的實(shí)際需求入手，將理論知識(shí)與實(shí)際應(yīng)用相結(jié)合，以此幫助初學(xué)者全面、系統(tǒng)、深入、透徹地理解HTML5的基礎(chǔ)知識(shí)和技術(shù)，使他們快速地成長為初級(jí)程序員，并擁有一定的項(xiàng)目開發(fā)經(jīng)驗(yàn)，從而在職場中擁有一個(gè)較高的起點(diǎn)。
好，我是堅(jiān)持分享干貨的 EarlGrey，翻譯出版過《Python編程無師自通》、《Python并行計(jì)算手冊(cè)》等技術(shù)書籍。
如果我的分享對(duì)你有幫助，請(qǐng)關(guān)注我，一起向上進(jìn)擊。
隨著 VS Code 的發(fā)展，其許多插件功能都已集成到內(nèi)核中，從而使它們變得過時(shí)。市場中的許多插件功能重復(fù)了 VS Code 中已有的功能。
最初創(chuàng)建這些插件時(shí)，這些功能還不是標(biāo)準(zhǔn)設(shè)置的一部分，但現(xiàn)在，它們已成為不必要的額外功能。有些甚至已被官方棄用。
在本篇文章中，我將重點(diǎn)介紹 12 個(gè)曾經(jīng)流行但現(xiàn)在已被淘汰的插件。其中有些我在之前的插件推薦文章里也有提到，建議大家可以對(duì)照本文中的內(nèi)容做一下更新設(shè)置。
神奇VS Code插件，秒級(jí)糾正代碼錯(cuò)誤！
5 招讓 VS Code 編碼效率飆升
原地起飛！VS Code 最好用的 10 款 AI 插件
Path IntelliSense 是用于自動(dòng)補(bǔ)全文件名的。但是，VS Code 本身已經(jīng)可以做到這一點(diǎn)！所以，你并不需要這個(gè)工具。
當(dāng)你鍵入文件名時(shí)，尤其是以引號(hào)開頭時(shí)，VS Code 會(huì)推薦一個(gè)項(xiàng)目文件列表。你可以選擇其中一個(gè)，它就會(huì)為你添加文件名。
該擴(kuò)展與 Path IntelliSense 的功能相同。因此，也把它列入到可以廢棄的插件名單里。
括號(hào)對(duì)著色是一種廣泛使用的語法高亮功能，可根據(jù)括號(hào)的順序?yàn)槠滟x予不同的顏色。這可以讓我們更容易地查看范圍和編寫帶有大量括號(hào)的表達(dá)式。
在 VSCode 默認(rèn)包含該功能之前，這些插件可用于為編輯器添加該功能。由于需求量大，以及對(duì)使用時(shí)性能的擔(dān)憂，VS Code 團(tuán)隊(duì)已將括號(hào)對(duì)著色作為編輯器的內(nèi)置功能。
通過自動(dòng)導(dǎo)入插件，VS Code 可以自動(dòng)將模塊添加到文件中，從而節(jié)省您的時(shí)間和精力。即使你移動(dòng)模塊文件，該功能也能幫助你自動(dòng)更新它們。
好消息是，你不需要使用 自動(dòng)導(dǎo)入插件。它已經(jīng)是 VS Code 的一部分！只需通過以下設(shè)置將其打開即可：
這些擴(kuò)展可以讓你使用短碼來編寫常用的 HTML 和 CSS 代碼段，從而加快你的編碼速度。
但是這些 Emmet 都可以做到。Emmet 是 VSCode 的一項(xiàng)內(nèi)置功能，其工作原理與這些擴(kuò)展類似。它默認(rèn)為各種文件類型打開，如 html、haml、pug、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus。當(dāng)你開始輸入一個(gè) Emmet 短代碼時(shí)，會(huì)出現(xiàn)一些建議供你選擇，你還可以在 VSCode 建議文檔中看到擴(kuò)展代碼的預(yù)覽。
當(dāng)您添加一個(gè)新的 HTML 標(biāo)簽時(shí)，此插件會(huì)自動(dòng)補(bǔ)全匹配的結(jié)尾標(biāo)簽。不過，VS Code 已經(jīng)內(nèi)置了這項(xiàng)功能。你可以通過下面的設(shè)置打開或關(guān)閉它：
此插件會(huì)在編寫導(dǎo)入語句時(shí)自動(dòng)填寫 npm 模塊名稱。
不過，VS Code 已經(jīng)為 npm 模塊提供了默認(rèn)的自動(dòng)完成功能。因此沒有必要使用該擴(kuò)展。
Lorem Ipsum插件對(duì)于快速創(chuàng)建占位符文本非常有用，可以省去數(shù)小時(shí)的復(fù)制粘貼工作。不過，我們可以選擇使用 VS Code 原生支持的 Emmet 來生成同樣的 Lorem Ipsum 文本。
要生成虛擬文本，只需鍵入 "lorem"，然后按 Tab 或 Enter。
無論您是在各種設(shè)備上工作，還是只想保留設(shè)置以備將來更改，設(shè)置同步都能派上用場。VS Code 支持這一功能，無需插件。
通過將設(shè)置鏈接到 GitHub 或微軟賬戶，你可以選擇想要同步的設(shè)置類型，從而提供了一種在不同機(jī)器上保持一致體驗(yàn)的簡單方法。
以上就是12個(gè)我們沒有必要再安裝的 VS Code 插件，大家不要僅看下載數(shù)上百萬就盲目安裝。希望對(duì)大家日常選擇開發(fā)工具有所幫助，如果你目前有安裝上述插件，那可以考慮卸載掉，以提高 VS Code 的速度。
如果你有其他想了解的話題或咨詢的問題，歡迎在留言區(qū)評(píng)論。我會(huì)從中挑選大家關(guān)注的話題在后續(xù)進(jìn)行分享。
- EOF -
文章已經(jīng)看到這了，別忘了在右下角點(diǎn)個(gè)“贊”和“在看”鼓勵(lì)哦~
告訴你更多細(xì)節(jié)干貨
歡迎圍觀我的朋友圈
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
