「HTML」從零開始學網(wǎng)頁制作-04

試用DIV制作德國國旗

德意志聯(lián)邦共和國，簡稱德國，國旗由3種顏色長方形所構(gòu)成。

我們需要制作出3個長方形來組合成德國國旗，需要用到<div>標簽。

什么是div？

<div> 可以定義文檔中的分區(qū)或節(jié)；<div> 標簽可以把文檔分割為獨立的、不同的部分。

我們暫且把 div 看作是一個盒子。

現(xiàn)在我們要做的就是讓瀏覽器顯示盒子，并把盒子變成長方形，然后染上黑，紅，金這3種顏色。

試一試在<body></body>加上<div></div>

你會發(fā)現(xiàn)無論怎么刷新瀏覽器，還是一片空白。

這是因為<div>這個盒子沒有正常完全的顯示，所以需要兩樣東西：

第一：缺少寬度和高度；我們要在紙上畫出長方形，就必須有長和寬，<div>也是同理。

第二：缺少邊框或背景顏色；要想讓<div>這個盒子能被我們看見，通常是給它加個邊框或者背景顏色。

二者缺一不可，為了這兩樣東西，我們需要把 style 添加到<div>中：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

然后刷新瀏覽器，會出現(xiàn)一個黑色長方形：

我們來看一下加入<div>的html代碼：

<div style="width:500px;height:100px;background:rgb(0,0,0);"></div>

style：它定義了<div>的樣式，也就是說，要讓div變成什么樣子，就需要style來改變div。style等于號后面的width、height、background都屬于style的屬性。

width：定義div的寬度。

height：定義div的高度。

background：定義div的背景顏色。【黑色：rgb(0,0,0) 紅色：rgb(255,0,0) 金色：rgb(255,200,0) 】

只是一行簡單的代碼，我們就已經(jīng)完成了國旗1/3的制作，那么依葫蘆畫瓢，你自己寫出剩下兩行代碼吧~

答案：

總結(jié)：<div></div>這個盒子需要寬width、高height、背景顏色background才能正常顯示出來。

文本標記語言(英文HyperText Markup Language,簡稱：HTML)是一種用于創(chuàng)建網(wǎng)頁的標準標記語言!
對于中文網(wǎng)頁需要使用<meta charset='utf-8'>聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器（如360瀏覽器）會設置GBK為默認編碼，則你需要設置為<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(wǎng)(html.cn)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言：HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標簽及文本內(nèi)容
HTML文檔也叫做 web 頁面

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
HTML 標簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
開始和結(jié)束標簽也被稱為開放標簽和閉合標簽
<標簽>內(nèi)容</標簽>

HTML 元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結(jié)束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>

HTML 頭部元素

頭部元素包含關(guān)于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關(guān)于某方面的信息”。
可以這么說，元數(shù)據(jù)（meta-data）是關(guān)于數(shù)據(jù)的信息，而元信息是關(guān)于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的頭部標簽元素。在元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結(jié)果頁面的標題

HTML <BASE> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta標簽描述了一些基本的元數(shù)據(jù)。
<meta> 標簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區(qū)域

<META> 標簽- 使用實例

為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="免費 Web & 編程教程">
定義網(wǎng)頁作者:
<meta name="author" content="HTML">
每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

HTML 元素

HTML元素指的是從開始標簽（start tag）到結(jié)束標簽（end tag）的所有代碼。例：

開始標簽	元素內(nèi)容	結(jié)束標簽
<p>	這是一個段落	</p>
<a href="default.html">	這是一個鏈接	</a>
<br>	換行

說明：HTML 文檔是由 HTML 元素定義的
注：開始標簽常被稱為起始標簽（opening tag），結(jié)束標簽常稱為閉合標簽（closing tag）。

元素語法

HTML 元素以開始標簽起始
HTML 元素以結(jié)束標簽終止
元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學習更多有關(guān)屬性的內(nèi)容。
嵌套的 HTML 元素
HTML 文檔由嵌套的 HTML 元素構(gòu)成。大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
沒有內(nèi)容的 HTML 元素被稱為空元素?？赵厥窃陂_始標簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

注釋標簽

HTML注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示?？墒褂米⑨寣δ拇a進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用

標簽定義及使用說明

注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
您可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
您也可以在注釋內(nèi)容存儲針對程序所定制的信息。在這種情況下，這些信息對用戶是不可見的，但是對程序來說是可用的。一個好的習慣是把注釋或樣式元素放入注釋文本中，這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注釋：命令行最后的兩個正斜杠（//）是 JavaScript 注釋符號。這確保了 JavaScript 不會執(zhí)行 –> 標簽。
除了在源文檔中有非常明顯的作用外，許多 Web 服務器也利用注釋來實現(xiàn)文檔服務端軟件特有的特性。這些服務器可以掃描文檔，從傳統(tǒng)的 HTML/XHTML 注釋中找到特定的字符序列，然后再根據(jù)嵌在注釋中的命令采取相應的動作。這些動作可能是簡單地包括其他文件中的文本（即所謂的服務器端包含，server-inside include），也可能是復雜地執(zhí)行其他命令去動態(tài)生成文檔的內(nèi)容。

HTML 段落與文字

標題

在 HTML 文檔中，標題很重要。標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。其中<h1> 定義最大的標題，<h6> 定義最小的標題
HTML中的標題標簽通過<h1>-<h6>來設置，越往下標題越小

段落

在HTML中段落是通過p標簽來定義的，它可以將HTML文檔分割為若干段落部分。因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行。
注意：因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行
我們可以通過<br/>標簽來對段落進行換行
如果希望在不產(chǎn)生一個新段落的情況下進行換行，就可以使用<br /> 標簽，注意它是一個單標簽。

文本格式化

HTML可定義很多供格式化輸出的元素，例：使用標簽 <b>(“bold”) 與 <i>(“italic”) 對輸出的文本進行格式，從而顯示粗體或者斜體
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>

HTML 文本格式化標簽

標簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

HTML”計算機輸出”標簽

標簽	描述
<kbd>	定義鍵盤碼
<samp>	定義計算機代碼樣本
<var>	定義變量
<pre>	定義預格式文本
<code>	定義計算機代碼

HTML 引文，引用，及標簽定義

標簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目

區(qū)塊

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）；而內(nèi)聯(lián)元素則不會。

HTML 區(qū)塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來

HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結(jié)束 - 例：<h1>, <p>, <ul>, <table>

HTML內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局

HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性

HTML字符實體

在 HTML 中，某些字符是預留的，這些預留字符必須被替換為字符實體；而，一些在鍵盤上找不到的字符也可以使用字符實體來替換。

HTML 實體
在 HTML 中，某些字符是預留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣
&entity_name;
或
&#entity_number;

HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數(shù)量，需要使用字符實體

有用的字符實體

顯示結(jié)果	描述	實體名稱	實體編碼
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
“	引號	"	"
‘	撇號	' (IE不支持)	'
￠	分	￠	￠
￡	鎊	￡	￡
￥	元	￥	￥
	歐元		
§	小節(jié)	§	§
?	版權(quán)	?	?
?	注冊商標	?	?
?	商標	?	?
×	乘號	×	×
÷	除號	÷	÷

注意：實體名稱對大小寫敏感

歡迎大家提議、分享、交流、共同學習進步

篇，你可以學到Ember頁面的創(chuàng)建，并且在不同的頁面之間跳轉(zhuǎn)。新建兩個頁面，一個是創(chuàng)建about頁面，一個是創(chuàng)建contact頁面。

看完本篇你將學到如下知識點：

定義路由
使用路由模板
自定義路由URL
使用<LinkTo>組件在不同模板之間跳轉(zhuǎn)
組件之間傳遞參數(shù)、屬性

定義路由

在前一篇，我們定義了一個index.hbs首頁，接著繼續(xù)在templates下面創(chuàng)建新的頁面。

首先通過Ember CLI創(chuàng)建一個路由，

ember g route about

本機創(chuàng)建日志：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ? ember g route about

installing route

  create app/routes/about.js

  create app/templates/about.hbs

updating router

  add route about

installing route-test

  create tests/unit/routes/about-test.js

題外話：

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals] on git:master ? 9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:20 ?

這一段是我本機命令行自動前綴，如果你的命令行安裝過zsh這個工具，就會很熟悉，zsh是一個非常強大而且漂亮的命令行工具。

打開router.js，可以看到自動創(chuàng)建了一個路由this.route('about');

使用路由模板

修改about路由模板文件app/templates/about.hbs，在文件內(nèi)添加一下HTML內(nèi)容。

{{!-- app/templates/about.hbs --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
</div>

瀏覽器訪問驗證：http://localhost:4200/about?？梢钥吹絘bout頁面的內(nèi)容

使用同樣的方式創(chuàng)建contact路由。

ubuntuvim at ubuntuvim-mbp.local in [~/code/super-rentals]  on git:master ?  9b5a1ac "Initial Commit from Ember CLI v3.18.0"

23:22:37 ? ember g route contact

installing route

  create app/routes/contact.js

  create app/templates/contact.hbs

updating router

  add route contact

installing route-test

  create tests/unit/routes/contact-test.js

在contact.hbs添加一些HTML內(nèi)容。

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
</div>

瀏覽器訪問驗證：http://localhost:4200/contact?？梢钥吹絚ontact頁面的內(nèi)容

contact1.png

自定義路由URL

前面已經(jīng)定義了兩個頁面，一個是about一個是contact。默認情況下訪問的路徑都是和路由同名的，另外Ember提供了非常靈活的擴展，你可以自定義的路由的訪問路徑，比如下面的代碼，把contact路由的訪問路徑改為getting-in-touch，手動修改router.js文件。

Router.map(function() {
  this.route('about');
  this.route('contact', { path: '/getting-in-touch' });
});

注意看第三行，使用path屬性指定這個路由的訪問路徑為getting-in-touch。

現(xiàn)在你在訪問http://localhost:4200/contact就會發(fā)現(xiàn)報錯了，提示找不到這個路由了。

contact2.png

再訪問http://localhost:4200/getting-in-touch?？梢钥吹巾撁娴膬?nèi)容就是之前contact的內(nèi)容。

contact3.png

使用<LinkTo>組件在不同模板之間跳轉(zhuǎn)

<LinkTo>是Ember提供好的組件，用于在不同模板之間跳轉(zhuǎn)，其作用類似于HTML標簽中的<a>標簽。

為何不直接用<a>標簽而是要自定義一個跳轉(zhuǎn)的組件呢？？因為使用普通的<a>標簽，當你點擊鏈接的時候會發(fā)送瀏覽器的刷新，但是Ember是單頁應用不需要刷新整個頁面，只要是實現(xiàn)頁面的跳轉(zhuǎn)即可（所謂的跳轉(zhuǎn)其實就是實現(xiàn)不同的路由之間的切換，并且不會刷新頁面）。

繼續(xù)改造前面的創(chuàng)建的index,about和contact。分別在這兩個模板頁面中添加一個跳轉(zhuǎn)的鏈接。

{{!-- index.hbs是 "/" 這個路徑默認的頁面。 --}}

<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Welcome to Super Rentals!</h2>
  <p>We hope you find exactly what you're looking for in a place to stay.</p>
  
  {{!-- 使用LinkTo組件添加一個跳轉(zhuǎn)按鈕，并且指定調(diào)整到的路由是about，也就是說當用戶點擊這按鈕的時候會跳轉(zhuǎn)到about這個子頁面上 --}}
  <LinkTo @route="about" class="button">About Us</LinkTo>
  

  
  <a href="/about" class="button">About Us With A Tag</a>
</div>

index5.png

點擊“About Us”這個按鈕，然后看瀏覽器的地址欄，可以看到自動轉(zhuǎn)到about這個路由下，并且頁面不會刷新。為了驗證前面所說的效果，我在About Us后面添加了一個<a>標簽按鈕，當你點擊這個鏈接的時候會看到瀏覽器自動刷新了，并且也跳轉(zhuǎn)到about頁面上。

index6.png

繼續(xù)改造about和contact，分別添加跳轉(zhuǎn)按鈕。

{{!-- app/templates/about.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>About Super Rentals</h2>
  <p>
    The Super Rentals website is a delightful project created to explore Ember.
    By building a property rental site, we can simultaneously imagine traveling
    AND building Ember applications.
  </p>
  
  <LinkTo @route="contact" class="button">Contact Us</LinkTo>
  {{!-- 增加一個跳轉(zhuǎn)回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

{{!-- app/templates/contact.hbs --}}
<div class="jumbo">
  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>
    Super Rentals Representatives would love to help you<br>
    choose a destination or answer any questions you may have.
  </p>
  <address>
    Super Rentals HQ
    <p>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </p>
    <a href="tel:503.555.1212">+1 (503) 555-1212</a><br>
    <a href="mailto:superrentalsrep@emberjs.com">superrentalsrep@emberjs.com</a>
  </address>
  
  <LinkTo @route="about" class="button">About</LinkTo>
  {{!-- 增加一個跳轉(zhuǎn)回到首頁的鏈接 --}}
  <LinkTo @route="index" class="button">Index</LinkTo>
</div>

在about和contact兩個頁面添加了兩個跳轉(zhuǎn)按鈕，一個是about和contact頁面的相互跳轉(zhuǎn)，一個是跳轉(zhuǎn)回首頁的按鈕。

about3.png

contact4.png

通過前面的這三個頁面，相信你很容易就可以掌握<LinkTo>組件的使用。其中@route屬性指定的是你定義的路由名字，這個路由的名字要和router.js里面的定義的完全一致，否則會找不到。另外需要注意的是@route屬性的值一定是路由的名字而不是URL的名字，比如contact路由，這個路由的路由名是contact而不是訪問的getting-in-touch。

另外在<LinkTo>組件上可以使用普通的HTML屬性，比如上面使用的class屬性，這個class屬性就是普通HTML屬性，用于指定CSS樣式的。在Ember應用中，通過@符號區(qū)別是普通的HTML屬性還是Ember提供的屬性，比如上面使用的@route就是Ember提供的屬性。

在底層，<LinkTo>組件會為我們生成一個常規(guī)的<a>標簽，并帶有針對特定路由的href。通過Ember生成的這個<a>標簽對于用戶來說非常友好，無需頁面刷新就可以實現(xiàn)跳轉(zhuǎn)。簡單講，當單擊這些特殊鏈接之一時，Ember將攔截該單擊，呈現(xiàn)新頁面的內(nèi)容，并更新URL（所有這些操作均在本地執(zhí)行，而無需等待服務器），從而避免刷新整個頁面。

在線咨詢

上一篇：爬蟲之Jsoup學習
下一篇：「Django框架」-模板

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

「HTML」從零開始學網(wǎng)頁制作-04

什么是HTML？

HTML 標簽

HTML 元素

HTML 頭部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 標簽- 使用實例

HTML <SCRIPT> 元素

HTML 元素

元素語法

注釋標簽

標簽定義及使用說明

HTML 段落與文字

標題

段落

文本格式化

區(qū)塊

HTML字符實體

定義路由

使用路由模板

自定義路由URL

使用<LinkTo>組件在不同模板之間跳轉(zhuǎn)

您的項目需求