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