整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ebStorm建立在開源IntelliJ平臺之上，JetBrains已經開發和完善了超過15年。其提供了統一的UI，可與許多流行的版本控制系統配合使用，確保在git，GitHub，SVN，Mercurial和Perforce之間提供一致的用戶體驗。WebStorm提供可定制功能，調整它以完全適合您的編碼風格，從快捷方式，字體和視覺主題到工具窗口和編輯器布局。
智能編碼輔助
WebStorm可以幫助您編寫出色的代碼。其智能編輯器具有代碼完成，動態代碼分析，代碼格式化和重構，可提高您的工作效率，并將您的開發體驗提升到一個全新的水平。
支持的語言和框架
WebStorm提供JavaScript，ECMAScript 6，TypeScript，CoffeeScript，Dart和Flow 的一流編碼幫助。
WebStorm可以幫助您編寫HTML，CSS，Less，Sass和Stylus代碼。
最重要的是，您可以受益于對Node.js和流行框架的高級支持，例如React，Angular，Vue.js，Meteor等。
代碼智能輔助功能
WebStorm分析您的項目，為應用程序中定義的所有方法，函數，模塊，變量和類提供最佳代碼完成結果。Сoding協助是上下文感知的，也可以是特定于框架的。
在WebStorm中使用CSS時，享受屬性及其值的代碼完成。在Less和Sass中，獲得mixins的幫助。當然，在HTML中，您可以獲得所有標簽和屬性的代碼完成。
代碼質量分析與檢測
WebStorm有數百種內置檢查功能，涵蓋所有支持的語言。除此之外，您還可以使用ESLint，TSLint，Stylelint，JSCS，JSHint和JSLint。
在您鍵入時，WebStorm編輯器會直接報告所有錯誤和警告，并提供許多快速修復選項。
WebStorm具有可能問題的任何代碼行都標記在右側編輯器裝訂線中，因此您可以輕松地在長文件中發現錯誤和警告。
您還可以使用WebStorm為整個項目運行代碼質量分析，并自動應用選定的快速修復程序。
webstorm使用技巧
webstorm使用心得
WebStorm集成git使用
webstorm中只集成了git的常用操作，并不能完全替代命令行工具。在界面的右下角可以查看處于哪個git分支。也可以在上面點擊切換或者新建分支。
webstorm快捷鍵說明
WebStorm的Editing編輯相關快捷鍵
WebStorm的Search/replace搜索/替代相關快捷鍵
WebStorm的Usage Search搜索相關快捷鍵
WebStorm的Running運行
WebStorm的Debugging Debugging相關快捷鍵
WebStorm的Navigation 定位相關快捷鍵
WebStorm的Refactoring 重構相關快捷鍵
在WebStorm中VCS/Local History 版本控制系統/ 本地歷史相關的快捷鍵
使用WebStorm時General 常用的相關快捷鍵
在學習使用HTML之前，大家經常會問，什么是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。
HTML5自正式推出以來，就以一種驚人的速度被迅速推廣著，各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。
1、世界知名瀏覽器廠商對HTML5的支持
通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上采取了措施
- 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。
- Google：2010年2月19日，GoogleGears項目經理伊安~費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目
- 蘋果：2010年6月7日，蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能
- Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體采訪，他認為HTML5和CSS3將是全球互聯網發展的未來趨勢
- Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是完全級別的支持
2、市場的需求
現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是，由于各瀏覽器之間不統一，僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。
3、跨平臺
HTML5可以做到跨平臺開發，用戶只用打開瀏覽器即可訪問應用，PC網站、各種移動設備，插件等核心代碼就可以不需要重復編寫，極大地減少了開發人員的工作量。
發明HTML的初衷是實現信息資料的網絡傳播和共享，希望HTML文檔具有平臺無關性，即同一個HTML文件，在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是，隨著瀏覽器市場的激烈競爭，各大瀏覽器廠商為了吸引用戶，都在早期HTML版本的基礎上擴展各類標簽，各瀏覽器之間互不兼容，導致HTML編碼規則混亂，違背了HTML發明的初衷，因此需要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。
W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行為。
對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
1、開發工具：
2、使用WebStorm編輯HTML文檔如下：
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
標簽都是成對出現的。 有一個開頭標記就應該有一個對應的結束標記記，“<>”開始，以“</>”結束，要求成對出現，標簽之間有縮進，提現層次感，方便閱讀。
HTML5的基本結構分為兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。
1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。
HTML5:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">
2、<title>標簽 使用<title>標簽描述頁面的標簽，類似一個文檔的標題，為一個簡介的主題，并能使讀者有興趣。
<title>搜狐-中國最大的門戶網站</title>
3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。
meta標簽可分為兩大部分：http-equiv和name變量。
http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
1.文檔內容類型，字符編碼信息書寫如下：
HTML5:
<meta charset="UTF-8">
HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
屬性：charset表示字符集編碼，常用的編碼有以下幾種。
1.gb2312：簡體中文，一般用于包含中文和英文的頁面；
2.ISO-885901：純英文，一般用于只包含英文的頁面；
3.big5：繁體，用于帶有繁體字的頁面；
4.UTF-8：國際性通用的編碼，同樣適用于中文和英文的頁面。和gb2312編碼相比，國際通用性更好。
2.搜索關鍵字和內容描述信息書寫如下：
<meta name="keywords" content="云圖智聯">
<meta name="description"content="云圖智聯是國內的IT教育集團，致力于為中國培養優秀的IT技術人才">
網站示例：
<!--京東-->
<meta name="description"
content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>
<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>淘寶網 - 淘！我喜歡</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />
1、標題標簽
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
標題標簽表示一段文字和標題或主題，并且支持多層的內容結構。例如，一級標題采用h1，二級標題采用h2，其他級別標題以此類推。HTML共提供了六級標題h1~h6，并賦予了標題一定的外觀，所有標題字體加粗，h1字號最大，h6字號最小。
2、段落標簽、換行標簽和水平線標簽
<p>段落標簽</p>
<br/><!--換行標簽-->
<hr><!--水平線標簽-->
3、字體樣式標簽
<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>
4、圖像標簽
（1）常見的圖像格式
1.JPG格式
JPG格式圖像是在Internet上被廣泛支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮，會造成圖像畫面的失真，不過壓縮之后的體積很小，而且比較清晰，所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式，這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高，文件的大小和下載時間也會隨著增加。通常可以通過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。
2.GIF格式
GIF格式圖像是網頁中使用最廣泛，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上 用得非常多；還支持動畫，這是它最突出的一個特點，因此GIF格式圖像在網頁中應用非常廣泛。
3.BMP格式
BMP格式圖像在Windows操作系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮，也不是用于Web頁。
4.PNG格式
PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優勢，同時具備GIF格式不具備的特性。
（2）圖像標簽
<img src="path" alt="text" title="text" width="x" height="y" />
src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即使當圖像無法顯示時，用戶還可以看到網頁丟失的信息內容。
title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。
width和height兩個屬性分別表示圖片的寬度和高度，如果不設置，那么圖片默認顯示原始大小。
5、超鏈接標簽
（1）超鏈接包含兩部分內容，一是鏈接地址，即鏈接的目標，可以是某個網站或文件路徑，對應a標簽的href屬性；二是鏈接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的鏈接地址。
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
href：鏈接地址的路徑;
target：指定鏈接在哪個窗口打開，常用的取值有_self（自身窗口）、_blank（新建窗口）。 超鏈接即可以是文本超鏈接，也可以使圖片超鏈接
（2）常用的超鏈接
1>頁面間鏈接
從一個頁面鏈接到另一個頁面
2>錨鏈接
錨鏈接也稱錨點鏈接，命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，自動跳轉到我們設置錨點的位置，類似于我們閱讀書籍時的目錄頁碼或章回提示。
錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候，點擊回到最上面。錨點鏈接的名稱可以隨意取，只起到標記作用。
1.從A頁面的甲位置跳轉到本頁中的乙位置
示例：
<a href="#a1">a1</a>
<a href="#a2">a2</a>
<a href="#a3">a3</a>
<a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>2.從A頁面的甲位置跳轉到B頁面中的乙位置
示例：
<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<p>
[<a href="help.html#register">A位置</a>]
[<a href="help.html#login">B位置</a>]
</p>
</body>
</html><!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>錨鏈接</title>
<style>
div{
width: 100%;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
<h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
<h2>B位置</h2>
</div>
</body>
</html>3>功能性鏈接
<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a><!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯系我們</a><!--引用腳本語言-->
<a href="javascript：alert('哈哈哈哈')"></a>6、注釋和特殊符號
<!--注釋符號-->當頁面的HTML結構復雜或內容較多時，需要添加必要的注釋方便代碼閱讀和維護。同時，有時為了調試，需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭，";"結尾。
需求：
1、標題使用標題標簽，文字使用p標簽標題與正文之間的分隔線使用水平線標簽；歌詞詞結束后使用換行標簽換行
2、人名加粗顯示，時間斜體顯示
3、制作頁面版權部分
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面，主標題使用一級標題標簽，副標題使用二級標題標簽，二級標題與圖片之間使用水平線分隔。
<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>作者：未來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em> 以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML CSS JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫 html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標簽標識網頁內容，使用CSS設計網頁基本樣式，如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
<p>第二部分為CSS3布局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各種新技術應用；</p>
<p>? 2015-2025 云圖智聯</p>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 18px;
}
div{
width: 400px;
height: 400px;
margin-top: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/
中級
一小時
有一定編程經驗。
Typescript
接著上一章，我們先來看AppComponent組件類中的內容：
之前說過，@Component 裝飾器中的 templateUrl 屬性指定了組件模版文件地址；同時也可以用template屬性來指定內聯模版。下面就依次講解這兩種方式。
在講解之前，看看官方是如何看待“內聯 (inline) 模板還是模板文件？”這個問題的：
你可以在兩種地方存放組件模板。 你可以使用 template 屬性把它定義為內聯的，或者把模板定義在一個獨立的 HTML 文件中， 再通過 @Component 裝飾器中的 templateUrl 屬性， 在組件元數據中把它鏈接到組件。
到底選擇內聯 HTML 還是獨立 HTML 取決于個人喜好、具體狀況和組織級策略。 上面的應用選擇內聯 HTML ，是因為模板很小，而且沒有額外的 HTML 文件顯得這個演示簡單些。
無論用哪種風格，模板數據綁定在訪問組件屬性方面都是完全一樣的。
這里呢，個人給出一個答案：實際開發中使用模版文件。
模版就是HTML，所以模版文件那就是HTML文件啦。我們一起來找到這個模版文件，然后書寫自己的內容。
下面看看組件元數據中的templateUrl屬性：
templateUrl屬性的值為“./app.component.html”，其中“.”表示當前目錄，于是整體表示的是當前目錄下的“app.component.html”文件，看文件類型就知道是HTML文件。那么當前目錄是哪個目錄呢？這個當前目錄表示“app.component.ts”所在的目錄，也就是app目錄：
既然AppComponent組件的模版文件是“app.component.html”，那么打開“app.component.html”來看看：
我們上一章中牛刀小試的部分也保留了下來，現在來更改其中的內容，刪除第一個<div>標簽中的<img>標簽：
刪除第一個<div>標簽后面的所有內容：
啟動Angular應用：
看看你的界面是否和我的一樣。
模版文件就是HTML文件，它里面的內容就是HTML。所以，大家只要會寫HTML，那么就會寫組件模版。組件模版也是組件的樣子，組件模版長什么樣，組件就長什么樣。
接著來看看templateUrl屬性官方說明：
屬性名稱：templateUrl
屬性詳情：組件模板文件的 URL。如果提供了它，就不要再用 template 來提供內聯模板了。
屬性類型：templateUrl: string
來一個非常簡單的示例，將“I like Angular”字體顏色變為紅色。
參考示例：
“app.component.html”：
結果頁面：
示例雖然很簡單，但是就想告訴大家，書寫模版文件沒有那么難，就是普通的HTML。大家也可以試試其他你會的HTML元素。
內聯就是寫在和組件類同一個文件里面；模版和上面說過的一樣，就是HTML；內聯模版綜合就是寫在組件類文件中的HTML。
注意，我說的是組件類文件中，還沒有說具體寫在哪。
具體寫在組件類上@Component 裝飾器中的 template 屬性中。
下面一步一步來書寫一個內聯模版。
打開“app.component.ts”組件類文件：
將@Component 裝飾器中的 templateUrl 改為 template：
然后將template屬性值“./app.component.html”刪掉，寫上兩個“``”（反引號，反引號在鍵盤的ESC鍵下面，TAB鍵的上面，數字1鍵的左邊。別忘了在英文輸入法狀態下進行輸入）：
再看看瀏覽器中應用界面：
空的，什么都沒有。因為我們沒有在內聯模版中寫東西。
內聯模版中寫的也是HTML代碼？
是的，和在模版文件中寫的一樣。
現在，在template屬性值寫上“<h1>Welcome</h1>”：
再看瀏覽器中界面的變化：
那么問題來了，內聯模版中也能想模版文件中那樣使用插值表達式嗎？
答案是可以的。我們來試試，將template屬性值更改為“<h1>Welcome to {{ title }}!</h1>”：
瀏覽器中的界面：
正確的將“Welcome to hello”顯示出來了，這也說明在內聯模版中使用插值表達式是完全沒有問題的。
有人估計想問了，template屬性值為什么要寫在反引號中？引號不可以嗎？
首先，反引號是字符串模版，寫在“``” 反引號中的字符串內容將原生輸出，不會對其中對內容進行轉義。而引號則會對其中對內容進行轉義，那樣就達不到書寫HTML代碼的目的。
既然如此，我們將template屬性值更改為和“app.component.html”模版文件一樣的內容。
刪除原有的template屬性值內容，并在反引號中間回車，也就是換行：
然后，將“app.component.html”里面的內容復制粘貼到反引號中，當然了，你也可以照著寫一遍：
再去看看瀏覽器中Angular應用界面：
和模版文件呈現出的內容一摸一樣。
這就是內聯模版，它將HTML書寫在了組件類的元數據上。在實際開發中，我們通常不會采用內聯模版的方式，因為它書寫起來極不方便，也不美觀，更沒有閱讀性，所以我們采用模版文件的方式，將組件類和組件模版關聯起來。
接下來看看template屬性官方說明：
屬性名稱：template
屬性詳情：組件的內聯模板。如果提供了它，就不要再用 templateUrl 提供模板了。
屬性類型：template: string
官方是如何描述模版與視圖的呢？
你要通過組件的配套模板來定義其視圖。模板就是一種 HTML，它會告訴 Angular 如何渲染該組件。
視圖通常會分層次進行組織，讓你能以 UI 分區或頁面為單位進行修改、顯示或隱藏。 與組件直接關聯的模板會定義該組件的宿主視圖。該組件還可以定義一個帶層次結構的視圖，它包含一些內嵌的視圖作為其它組件的宿主。
帶層次結構的視圖可以包含同一模塊（NgModule）中組件的視圖，也可以（而且經常會）包含其它模塊中定義的組件的視圖。
以上就是官方對模版與視圖的描述，上面最后的一張圖我們可以簡單說一下，從圖中可以看到，頂層的是RootComponent和RootTemplate，也就是根組件和根組件的模版。
我們當前的根組件就是AppComponent。接著，在根組件的下面有Child A Component 和Child A Template，還有Child B Component 和Child B Template，雖然它只是列了兩個子組件A和子組件B，其實還可以有無限的子組件。
從圖中還可以看出，子組件A還有一個GrandChild Component 和GrandChild Template，也就是孫子組件和孫子組件的模版。
這張圖它想表達的意思是什么？
它想表達的意思是，一個頁面（即視圖）可以是由很多個子視圖組成的。
大家如果還是有點搞不懂，我們來看一個實際頁面來說明，以百度舉例說明。
上圖是百度的官網，假設這是我們編寫的AppComponent，其中哪些部分可以由多個子組件組合而成的呢？我標注出來給大家看：
其中，將網頁分為三部分：頁面頂部、頁面內容區、頁面底部。頁面頂部放置網站導航，頁面內容放置LOGO和搜索框，頁面底部放置網站版權信息。
AppComponent對應的是整體頁面，由導航組件、內容組件和底部組件組成。
頁面頂部可以是NavComponent，導航組件。
頁面內容可以是ContentComponent，內容組件。
頁面底部可以是FooterComponent，底部組件。
這樣是不是一下子把整體頁面單獨區分開來？一目了然有沒有。
當你要編輯網頁頂部導航時，只需去編輯NavComponent組件即可，其他的組件完全不用動，這幾個組件之間完全互不干擾，獨立存在。
為什么要分的這么細？
因為不想在后續的開發過程因一個小小的改動牽一發而動全身，那是災難。另外一個原因就是組件復用，相同組件只需寫一次，要用到的地方寫上selector即可。
至此，組件的模版講解就先告一段落啦，后續還有根組件模版息息相關的內容，敬請關注！
如果大家有問題或想了解更多前沿技術，請在下方留言或評論，我會為大家解答。
Angular第二十一章：組件
Angular第二十三章：組件的CSS樣式
加入同步學習小組，共同交流與進步。
如果你也熱愛前沿技術，歡迎關注我們。
原創不易，未經允許不得轉載！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
