vue3基礎教程（3）-引入ui框架iview（viewui）

博主個人微信小程序已經上線：【中二少年工具箱】。歡迎搜索試用

專欄簡介

本系列文章由淺入深，從基礎知識到實戰開發，非常適合入門同學。

零基礎讀者也能成功由本系列文章入門，但如果您具備以下基礎，將會事半功倍： 1. HTML基礎 2. css基礎 3. js基礎

當然，即使從未接觸過前端代碼的小白，也能輕松學習本系列課程，因為我會在文章中簡略穿插前端基礎知識。

由于各平臺對專欄文章的支持度不同，所以如果您看到這篇文章的平臺，系統學習專欄文章的操作不夠絲滑，可以先關注小程序，后續小程序會開發專欄博客功能。

可以直接搜索【中二少年工具箱】，也可通過二維碼知乎地址：https://www.zhihu.com/question/53230344/answer/3180004527

二維碼csdn地址：https://bbs.csdn.net/topics/618134623

二維碼頭條地址：https://www.toutiao.com/w/1790412984859652/

等入口進入，掃碼關注。

1. 下載iview

iview官網：https://www.iviewui.com/view-ui-plus/guide/install

iview是一個ui框架，能夠幫助我們更簡單地構建web網站。

按照官網介紹下載iview：

npm install view-ui-plus --save

使用webstorm打開上一章創建的vue項目lize-tools-web，因為我們沒有使用vscode，所以可以刪除默認的.vscode目錄

在這里插入圖片描述

在項目目錄下打開終端，運行上面的命令。2023版的webstorm終端在左下角，老版本的應該是在最下面一行。找到terminal打開即可，然后輸入下載iview的命令。

在這里插入圖片描述

官網下載iview的命令是用的npm工具，我們上一章教大家的是修改yarn的源，如果要修改npm的源，需要自行查找方案，否則npm下載插件很容易失敗。

建議使用yarn，我們把npm命令轉化成對應的yarn工具，命令為：

yarn add view-ui-plus --save

在這里插入圖片描述

要注意命令是在lize-tools-web文件夾下。

下載成功后，我們可以檢查package.json，發現已經有view-ui-plus版本信息。

在這里插入圖片描述

2.更新資源

package.json文件里記錄著項目的一些基本信息，dependencies和devDependencies記載著項目里所有的插件，我們使用上面下載命令時，就會在下載資源的同時，在package.json中記錄相應的信息。

現在項目里只下載了view-ui-plus插件，可能還有一些其它插件未下載，所以第一次運行新的項目前，我們一般會運行命令下載所有所需插件。

yarn install

在這里插入圖片描述

我這次其實沒有下載什么新的插件。

3.引入插件

下面是iview官網引入插件的方式：

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(store)
  .use(router)
  .use(ViewUIPlus)
  .mount('#app')

因為vue的模板項目可能會有所變化，所以上面的代碼也不能無腦復制。我們只需要把iview相關的代碼寫入我們的vue項目中即可。

找到main.js文件，寫入iview引入代碼，最終我的代碼如下：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ViewUIPlus)

app.mount('#app')

4.運行項目

在終端輸入dev命令運行項目

yarn dev

在這里插入圖片描述

上圖說明運行成功，打開網址：http://localhost:5173，效果如下：

在這里插入圖片描述

這說明我們項目運行成功。

譯自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b
作者： Kunal Sarkar
譯者： MjSeven

在一個美好的夜晚，你的肚子拒絕消化你在晚餐吃的大塊披薩，所以你不得不在睡夢中沖進洗手間。

在浴室里，當你在思考為什么會發生這種情況時，你聽到一個來自通風口的低沉聲音：“嘿，我是蝙蝠俠?！?/p>

這時，你會怎么做呢？

在你恐慌并處于關鍵時刻之前，蝙蝠俠說：“我需要你的幫助。我是一個超級極客，但我不懂 HTML。我需要用 HTML 寫一封情書，你愿意幫助我嗎？”

誰會拒絕蝙蝠俠的請求呢，對吧？所以讓我們用 HTML 來寫一封蝙蝠俠的情書。

你的第一個 HTML 文件

HTML 網頁與你電腦上的其它文件一樣。就同一個 .doc 文件以 MS Word 打開，.jpg 文件在圖像查看器中打開一樣，一個 .html 文件在瀏覽器中打開。

那么，讓我們來創建一個 .html 文件。你可以在 Notepad 或其它任何編輯器中完成此任務，但我建議使用 VS Code。在這里下載并安裝 VS Code 。它是免費的，也是我唯一喜歡的微軟產品。

在系統中創建一個目錄，將其命名為 “HTML Practice”（不帶引號）。在這個目錄中，再創建一個名為 “Batman’s Love Letter”（不帶引號）的目錄，這將是我們的項目根目錄。這意味著我們所有與這個項目相關的文件都會在這里。

打開 VS Code，按下 ctrl+n 創建一個新文件，按下 ctrl+s 保存文件。切換到 “Batman’s Love Letter” 文件夾并將其命名為 “loveletter.html”，然后單擊保存。

現在，如果你在文件資源管理器中雙擊它，它將在你的默認瀏覽器中打開。我建議使用 Firefox 來進行 web 開發，但 Chrome 也可以。

讓我們將這個過程與我們已經熟悉的東西聯系起來。還記得你第一次拿到電腦嗎？我做的第一件事是打開 MS Paint 并繪制一些東西。你在 Paint 中繪制一些東西并將其另存為圖像，然后你可以在圖像查看器中查看該圖像。之后，如果要再次編輯該圖像，你在 Paint 中重新打開它，編輯并保存它。

我們目前的流程非常相似。正如我們使用 Paint 創建和編輯圖像一樣，我們使用 VS Code 來創建和編輯 HTML 文件。就像我們使用圖像查看器查看圖像一樣，我們使用瀏覽器來查看我們的 HTML 頁面。

HTML 中的段落

我們有一個空的 HTML 文件，以下是蝙蝠俠想在他的情書中寫的第一段。

“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

復制這些到 VS Code 中的 loveletter.html。單擊 “View -> Toggle Word Wrap (alt+z)” 自動換行。

保存并在瀏覽器中打開它。如果它已經打開，單擊瀏覽器中的刷新按鈕。

瞧！那是你的第一個網頁！

我們的第一段已準備就緒，但這不是在 HTML 中編寫段落的推薦方法。我們有一種特定的方法讓瀏覽器知道一個文本是一個段落。

如果你用 <p> 和 </p> 來包裹文本，那么瀏覽器將識別 <p> 和 </p> 中的文本是一個段落。我們這樣做：

<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>

通過在 <p> 和 </p>中編寫段落，你創建了一個 HTML 元素。一個網頁就是 HTML 元素的集合。

讓我們首先來認識一些術語：<p> 是開始標簽，</p> 是結束標簽，“p” 是標簽名稱。元素開始和結束標簽之間的文本是元素的內容。

“style” 屬性

在上面，你將看到文本覆蓋屏幕的整個寬度。

我們不希望這樣。沒有人想要閱讀這么長的行。讓我們設定段落寬度為 550px。

我們可以通過使用元素的 style 屬性來實現。你可以在其 style 屬性中定義元素的樣式（例如，在我們的示例中為寬度）。以下行將在 p 元素上創建一個空樣式屬性：

<p style="">...</p>

你看到那個空的 "" 了嗎？這就是我們定義元素外觀的地方?，F在我們要將寬度設置為 550px。我們這樣做：

<p style="width:550px;">
After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>

我們將 width 屬性設置為 550px，用冒號 : 分隔，以分號 ; 結束。

另外，注意我們如何將 <p> 和 </p> 放在單獨的行中，文本內容用一個制表符縮進。像這樣設置代碼使其更具可讀性。

HTML 中的列表

接下來，蝙蝠俠希望列出他所欽佩的人的一些優點，例如：

You complete my darkness with your light. I love:
- the way you see good in the worst things
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over time.

這看起來很簡單。

讓我們繼續，在 </p> 下面復制所需的文本：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
- the way you see good in the worse
- the way you handle emotionally difficult situations
- the way you look at Justice
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新瀏覽器。

哇！這里發生了什么，我們的列表在哪里？

如果你仔細觀察，你會發現沒有顯示換行符。在代碼中我們在新的一行中編寫列表項，但這些項在瀏覽器中顯示在一行中。

如果你想在 HTML（新行）中插入換行符，你必須使用 <br>。讓我們來使用 <br>，看看它長什么樣：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love: <br>
- the way you see good in the worse <br>
- the way you handle emotionally difficult situations <br>
- the way you look at Justice <br>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新：

好的，現在它看起來就像我們想要的那樣！

另外，注意我們沒有寫一個 </br>。有些標簽不需要結束標簽（它們被稱為自閉合標簽）。

還有一件事：我們沒有在兩個段落之間使用 <br>，但第二個段落仍然是從一個新行開始，這是因為 <p> 元素會自動插入換行符。

我們使用純文本編寫列表，但是有兩個標簽可以供我們使用來達到相同的目的：<ul> and <li>。

讓我們解釋一下名字的意思：ul 代表無序列表(Unordered List)，li 代表列表項目(List Item)。讓我們使用它們來展示我們的列表：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

在復制代碼之前，注意差異部分：

我們刪除了所有的 <br>，因為每個 <li> 會自動顯示在新行中
我們將每個列表項包含在 <li> 和 </li> 之間
我們將所有列表項的集合包裹在 <ul> 和 </ul> 之間
我們沒有像 <p> 元素那樣定義 <ul> 元素的寬度。這是因為 <ul> 是 <p> 的子節點，<p> 已經被約束到 550px，所以 <ul> 不會超出這個范圍。

讓我們保存文件并刷新瀏覽器以查看結果：

你會立即注意到在每個列表項之前顯示了重點標志。我們現在不需要在每個列表項之前寫 “-”。

經過仔細檢查，你會注意到最后一行超出 550px 寬度。這是為什么？因為 HTML 不允許 <ul> 元素出現在 <p> 元素中。讓我們將第一行和最后一行放在單獨的 <p> 元素中：

<p style="width:550px;">
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p style="width:550px;">
You complete my darkness with your light. I love:
</p>
<ul style="width:550px;">
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p style="width:550px;">
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>

保存并刷新。

注意，這次我們還定義了 <ul> 元素的寬度。那是因為我們現在已經將 <ul> 元素放在了 <p> 元素之外。

定義情書中所有元素的寬度會變得很麻煩。我們有一個特定的元素用于此目的：<div> 元素。一個 <div> 元素就是一個通用容器，用于對內容進行分組，以便輕松設置樣式。

讓我們用 <div> 元素包裝整個情書，并為其賦予寬度：550px 。

<div style="width:550px;">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

棒極了，我們的代碼現在看起來簡潔多了。

HTML 中的標題

到目前為止，蝙蝠俠對結果很高興，他希望在情書上標題。他想寫一個標題： “Bat Letter”。當然，你已經看到這個名字了，不是嗎？:D

你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 標簽來添加標題，<h1> 是最大的標題和最主要的標題，<h6> 是最小的標題。

讓我們在第二段之前使用 <h1> 做主標題和一個副標題：

<div style="width:550px;">
<h1>Bat Letter</h1>
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

保存，刷新。

HTML 中的圖像

我們的情書尚未完成，但在繼續之前，缺少一件大事：蝙蝠俠標志。你見過是蝙蝠俠的東西但沒有蝙蝠俠的標志嗎？

并沒有。

所以，讓我們在情書中添加一個蝙蝠俠標志。

在 HTML 中包含圖像就像在一個 Word 文件中包含圖像一樣。在 MS Word 中，你到 “菜單 -> 插入 -> 圖像 -> 然后導航到圖像位置為止 -> 選擇圖像 -> 單擊插入”。

在 HTML 中，我們使用 <img> 標簽讓瀏覽器知道我們需要加載的圖像，而不是單擊菜單。我們在 src 屬性中寫入文件的位置和名稱。如果圖像在項目根目錄中，我們可以簡單地在 src 屬性中寫入圖像文件的名稱。

在我們深入編碼之前，從這里下載蝙蝠俠標志。你可能希望裁剪圖像中的額外空白區域。復制項目根目錄中的圖像并將其重命名為 “bat-logo.jpeg”。

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

我們在第 3 行包含了 <img> 標簽。這個標簽也是一個自閉合的標簽，所以我們不需要寫 </img>。在 src 屬性中，我們給出了圖像文件的名稱。這個名稱應與圖像名稱完全相同，包括擴展名（.jpeg）及其大小寫。

保存并刷新，查看結果。

該死的！剛剛發生了什么？

當使用 <img> 標簽包含圖像時，默認情況下，圖像將以其原始分辨率顯示。在我們的例子中，圖像比 550px 寬得多。讓我們使用 style 屬性定義它的寬度：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
</div>

你會注意到，這次我們定義寬度使用了 “%” 而不是 “px”。當我們在 “%” 中定義寬度時，它將占據父元素寬度的百分比。因此，100% 的 550px 將為我們提供 550px。

保存并刷新，查看結果。

太棒了！這讓蝙蝠俠的臉露出了羞澀的微笑 :)。

HTML 中的粗體和斜體

現在蝙蝠俠想在最后幾段中承認他的愛。他有以下文本供你用 HTML 編寫：

“I have a confession to make

It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.

I don’t show my emotions, but I think this man behind the mask is falling for you.”

當閱讀到這里時，你會問蝙蝠俠：“等等，這是給誰的？”蝙蝠俠說：

“這是給超人的?！?/p>

你說：哦！我還以為是給神奇女俠的呢。

蝙蝠俠說：不，這是給超人的，請在最后寫上 “I love you Superman.”。

好的，我們來寫：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p>I love you Superman.</p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

這封信差不多完成了，蝙蝠俠另外想再做兩次改變。蝙蝠俠希望在最后段落的第一句中的 “does” 一詞是斜體，而 “I love you Superman” 這句話是粗體的。

我們使用 <em> 和 <strong> 以斜體和粗體顯示文本。讓我們來更新這些更改：

<div style="width:550px;">
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg" style="width:100%">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

HTML 中的樣式

你可以通過三種方式設置樣式或定義 HTML 元素的外觀：

內聯樣式：我們使用元素的 style 屬性來編寫樣式。這是我們迄今為止使用的，但這不是一個好的實踐。
嵌入式樣式：我們在由 <style> 和 </style> 包裹的 “style” 元素中編寫所有樣式。
鏈接樣式表：我們在具有 .css 擴展名的單獨文件中編寫所有元素的樣式。此文件稱為樣式表。

讓我們來看看如何定義 <div> 的內聯樣式：

<div style="width:550px;">

我們可以在 <style> 和 </style> 里面寫同樣的樣式：

div{
width:550px;
}

在嵌入式樣式中，我們編寫的樣式是與元素分開的。所以我們需要一種方法來關聯元素及其樣式。第一個單詞 “div” 就做了這樣的活。它讓瀏覽器知道花括號 {...} 里面的所有樣式都屬于 “div” 元素。由于這種語法確定要應用樣式的元素，因此它稱為一個選擇器。

我們編寫樣式的方式保持不變：屬性（width）和值（550px）用冒號（:）分隔，以分號（;）結束。

讓我們從 <div> 和 <img> 元素中刪除內聯樣式，將其寫入 <style> 元素：

<style>
div{
width:550px;
}
img{
width:100%;
}
</style>
<div>
<h1>Bat Letter</h1>
<img src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

保存并刷新，結果應保持不變。

但是有一個大問題，如果我們的 HTML 文件中有多個 <div> 和 <img> 元素該怎么辦？這樣我們在 <style> 元素中為 div 和 img 定義的樣式就會應用于頁面上的每個 div 和 img。

如果你在以后的代碼中添加另一個 div，那么該 div 也將變為 550px 寬。我們并不希望這樣。

我們想要將我們的樣式應用于現在正在使用的特定 div 和 img。為此，我們需要為 div 和 img 元素提供唯一的 id。以下是使用 id 屬性為元素賦予 id 的方法：

<div id="letter-container">

以下是如何在嵌入式樣式中將此 id 用作選擇器：

#letter-container{
...
}

注意 # 符號。它表示它是一個 id，{...} 中的樣式應該只應用于具有該特定 id 的元素。

讓我們來應用它：

<style>
#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}
</style>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

HTML 已經準備好了嵌入式樣式。

但是，你可以看到，隨著我們包含越來越多的樣式，<style></style> 將變得很大。這可能很快會混亂我們的主 HTML 文件。

因此，讓我們更進一步，通過將 <style> 標簽內的內容復制到一個新文件來使用鏈接樣式。

在項目根目錄中創建一個新文件，將其另存為 “style.css”：

#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}

我們不需要在 CSS 文件中寫 <style> 和 </style>。

我們需要使用 HTML 文件中的 <link> 標簽來將新創建的 CSS 文件鏈接到 HTML 文件。以下是我們如何做到這一點：

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

我們使用 <link> 元素在 HTML 文檔中包含外部資源，它主要用于鏈接樣式表。我們使用的三個屬性是：

rel：關系。鏈接文件與文檔的關系。具有 .css 擴展名的文件稱為樣式表，因此我們保留 rel=“stylesheet”。
type：鏈接文件的類型；對于一個 CSS 文件來說它是 “text/css”。
href：超文本參考。鏈接文件的位置。

link 元素的結尾沒有 </link>。因此，<link> 也是一個自閉合的標簽。

<link rel="gf" type="cute" href="girl.next.door">

如果只是得到一個女朋友，那么很容易：D

可惜沒有那么簡單，讓我們繼續前進。

這是我們 “loveletter.html” 的內容：

<link rel="stylesheet" type="text/css" href="style.css">
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>

“style.css” 內容：

#letter-container{
width:550px;
}
#header-bat-logo{
width:100%;
}

保存文件并刷新，瀏覽器中的輸出應保持不變。

一些手續

我們的情書已經準備好給蝙蝠俠，但還有一些正式的片段。

與其他任何編程語言一樣，HTML 自出生以來（1990 年）經歷過許多版本，當前版本是 HTML5。

那么，瀏覽器如何知道你使用哪個版本的 HTML 來編寫頁面呢？要告訴瀏覽器你正在使用 HTML5，你需要在頁面頂部包含 <!DOCTYPE html>。對于舊版本的 HTML，這行不同，但你不需要了解它們，因為我們不再使用它們了。

此外，在之前的 HTML 版本中，我們曾經將整個文檔封裝在 <html></html> 標簽內。整個文件分為兩個主要部分：頭部在 <head></head> 里面，主體在 <body></body> 里面。這在 HTML5 中不是必須的，但由于兼容性原因，我們仍然這樣做。讓我們用 <Doctype>, <html>、 <head> 和 <body> 更新我們的代碼：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>

主要內容在 <body> 里面，元信息在 <head> 里面。所以我們把 <div> 保存在 <body> 里面并加載 <head> 里面的樣式表。

保存并刷新，你的 HTML 頁面應顯示與之前相同的內容。

HTML 的標題

我發誓，這是最后一次改變。

你可能已經注意到選項卡的標題正在顯示 HTML 文件的路徑：

我們可以使用 <title> 標簽來定義 HTML 文件的標題。標題標簽也像鏈接標簽一樣在 <head> 內部。讓我們我們在標題中加上 “Bat Letter”：

<!DOCTYPE html>
<html>
<head>
<title>Bat Letter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="letter-container">
<h1>Bat Letter</h1>
<img id="header-bat-logo" src="bat-logo.jpeg">
<p>
After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.
</p>
<h2>You are the light of my life</h2>
<p>
You complete my darkness with your light. I love:
</p>
<ul>
<li>the way you see good in the worse</li>
<li>the way you handle emotionally difficult situations</li>
<li>the way you look at Justice</li>
</ul>
<p>
I have learned a lot from you. You have occupied a special place in my heart over the time.
</p>
<h2>I have a confession to make</h2>
<p>
It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.
</p>
<p>
I don't show my emotions, but I think this man behind the mask is falling for you.
</p>
<p><strong>I love you Superman.</strong></p>
<p>
Your not-so-secret-lover, <br>
Batman
</p>
</div>
</body>
</html>

保存并刷新，你將看到在選項卡上顯示的是 “Bat Letter” 而不是文件路徑。

蝙蝠俠的情書現在已經完成。

恭喜！你用 HTML 制作了蝙蝠俠的情書。

我們學到了什么

我們學習了以下新概念：

一個 HTML 文檔的結構
在 HTML 中如何寫元素（<p></p>）
如何使用 style 屬性在元素內編寫樣式（這稱為內聯樣式，盡可能避免這種情況）
如何在 <style>...</style> 中編寫元素的樣式（這稱為嵌入式樣式）
在 HTML 中如何使用 <link> 在單獨的文件中編寫樣式并鏈接它（這稱為鏈接樣式表）
什么是標簽名稱，屬性，開始標簽和結束標簽
如何使用 id 屬性為一個元素賦予 id
CSS 中的標簽選擇器和 id 選擇器

我們學習了以下 HTML 標簽：

<p>：用于段落
<br>：用于換行
<ul>、<li>：顯示列表
<div>：用于分組我們信件的元素
<h1>、<h2>：用于標題和子標題
<img>：用于插入圖像
<strong>、<em>：用于粗體和斜體文字樣式
<style>：用于嵌入式樣式
<link>：用于包含外部樣式表
<html>：用于包裹整個 HTML 文檔
<!DOCTYPE html>：讓瀏覽器知道我們正在使用 HTML5
<head>：包裹元信息，如 <link> 和 <title>
<body>：用于實際顯示的 HTML 頁面的主體
<title>：用于 HTML 頁面的標題

我們學習了以下 CSS 屬性：

width：用于定義元素的寬度
CSS 單位：“px” 和 “%”

朋友們，這就是今天的全部了，下一個教程中見。

作者簡介：開發者 + 作者 | supersarkar.com | twitter.com/supersarkar

via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar 譯者： MjSeven 校對： wxy

本文由 LCTT 原創編譯， Linux中國榮譽推出

點擊“了解更多”可訪問文內鏈接

價一個GUI引擎很難，本文提供了一些重要的評價指標，這些指標可以幫助大家選擇適合自己的GUI，也歡迎大家對AWTK和其它GUI進行對比評估。

github上的開源 GUI 引擎至少有數十個，如何去評估它們的優劣，如何選擇你需要的GUI引擎？這個是艱巨的任務，每個人的需求不一樣，GUI開發者的意圖也不同，很難找到統一的標準去選出最好的GUI。

QT是最強大的，沒有之一，但也不一定適合你。在這篇文章有句話：“商業引擎看起來功能很齊全，但是實際使用起來你就知道有多少坑。” 這句話挺有意思，它即適合游戲引擎，也適合GUI引擎。demo看起來很好，技術看起來很先進，用起來才知道有多少坑！所以事先做一個完整的評估是很有必要的。

雖然客觀的評價一個GUI引擎很難，但不管怎么樣，總有些指標可以提供有價值的參考，盡管這些指標在遇到不同使用的場景，不同的公司背景，不同的個人喜好，它們所占的權重也大不相同。但是并不能抹殺這些指標的價值，關鍵在于如何根據自己的需要調整它們的比重。

在這篇《這個開源的6千行UI框架，能打敗QT，MFC嗎？》文章里，諸葛不亮的37問給了我極大的啟發，在開發AWTK的過程中，多次重讀這篇文章，這篇文章堪稱是GUI引擎開發者的指路明燈。

如果諸葛大俠不介意，為了活躍氣氛，我就把本文提到的指標稱為《諸葛不亮-李先靜 GUI 引擎評價指標》，把諸葛大俠放在前面，是表示對他的感謝，把我的名字放在里面，是由我承擔一些人的指責。

基本指標

1. 開發者的心態
當你用他們的 GUI 時，他們是感謝你的支持，還在覺得你欠他們的呢？如果他們沒有心存感謝，你最好別用。否則，遇到問題時，你怎么能指望他們幫你解決呢？

2. 幫助文檔
是否有《API 手冊》、《使用手冊》、《常見問題》、《移植文檔》和《HowTo》，文檔是否在定期更新？

3. 示例代碼
是否有簡單的入門示例、各種控件的的用法、完整功能的示例？

4. 代碼風格
目錄名、文件名、類名、函數名、函數參數、局部變量名、全局變量名、注釋和縮進是否一致。

5. 編程語言
目前支持哪些開發語言？支持新的開發語言是否容易？編程風格是否與對應的語言相符？不同語言綁定的代碼能否同步更新（否則很容易落后于核心引擎）？

對于 GUI 引擎來說，支持多種編程語言是重要的，可以滿足不同的開發者的需要。對于使用者來說，GUI 是否提供了你需要的編程語言才是最重要的。

6. 支持的平臺
對于 GUI 引擎來說，支持多種平臺是重要的，可以滿足不同的開發者的需要。對于使用者來說，支持多種平臺也是重要的，你現在開發嵌入式系統，過段時間你可能要開發一個 APP 控制你設備，沒有必要浪費時間去學習不同的 GUI。
GUI 是否支持目標平臺的界面風格，是否提供跨平臺的運行庫，是否對平臺基本的原生功能進行了包裝，能否擴展新的功能。是否支持平臺原生輸入法？

7. 可視化的界面設計工具

所見即所得方式開發界面可以降低學習門檻，提高開發效率。

8. 可視化的界面設計工具是否是用該 GUI 本身開發的
用該 GUI 本身開發的界面設計工具，可以驗證該 GUI 本身的功能是否強大和穩定。
另外用該 GUI 本身開發的界面設計工具，才能把界面設計工具做得易用。比如 TabControl 控件，在設計時可以切換頁面，只有用該 GUI 本身開發的界面設計工具才容易實現。

9. 在開發環境模擬運行
運行環境和開發環境往往不同，如果每次都要部署一下才能看到效果，那開發速度一定上不來。

10. 用 XML/JSON 等數據來描述界面
XML/JSON 是聲明式的語法，不但手工編寫比寫程序容易，也方便借助工具的支持。
對于嵌入低端嵌入式系統來說，XML/JSON 效率不高，最好的辦法是運行時轉換成高效的二進制格式。就像代碼一樣，編譯之前的代碼給人看，編譯之后的代碼給機器看。

11. 用 XML/CSS 等數據來描述界面的風格
XML/JSON 是聲明式的語法，不但手工編寫比寫程序容易，也方便借助工具的支持。
把界面風格從 UI 描述文件和代碼中剝離出來，也有利于后期的維護，畢竟界面效果是最容易變化的。
對于嵌入低端嵌入式系統來說，XML/JSON 效率不高，最好的辦法是運行時轉換成高效的二進制格式。就像代碼一樣，編譯之前的代碼給人看，編譯之后的代碼給機器看。

12. 字體格式
支持點陣字體嗎？支持矢量字體嗎？支持自定義字體格式嗎？支持只加載部分字體到內存嗎？配套工具完善嗎？

13. 圖片格式
支持常見的 png/jpg/gif/bmp 格式嗎？支持 SVG 等矢量圖形嗎？能擴展支持新的格式嗎？

14. 輸入法

支持拼音輸入法嗎？支持軟鍵盤的 T9 輸入法嗎？支持硬鍵盤的 T9 輸入法嗎？支持語音輸入法嗎？支持手寫輸入法嗎？可以擴展支持新的輸入嗎？是否支持平臺原生輸入法？

15. 基本架構模式
是否內置提供支持 MVC、MVP 和 MVVM 等架構模式？是否支持 Vue、React 和小程序類似的開發方式？

功能指標

1. 高清屏

是否支持高清屏？在 PC 上運行時界面變糊了，在手機上運行時字體變小了，都是不支持高清屏的特征。不支持高清屏就不用談什么跨平臺了。

2. 矢量圖 API
矢量圖 API 是非常重要的，強大矢量圖 API 能實現很多神奇的效果。個人覺得 HTML5 Canvas 2D API 是最好的矢量圖 API。用 cairo、skia、agge 和 nanovg 這些開源的庫很容易實現類似的 API。
GUI 一定要提供一個抽象的接口，在不同的情況下，可以無縫的切換到最優的實現方案上。比如在嵌入式平臺用 agge，在嵌入式 linux 平臺用 cairo，在 PC 上用 skia 或 nanovg。

3. 窗口動畫
是否支持窗口動畫？窗口動畫的種類是否夠用？是否可以擴展自己的窗口動畫。窗口動畫的效率如何？窗口動畫使用是否方便？

4. 控件動畫
是否支持控件動畫？支持那些控件動畫？是否支持自定義的控件動畫？控件動畫使用是否方便？控件動畫的參數有哪些？是否可以停止、暫停和播放控件動畫。

5. 內置控件是否豐富
是否有日歷選擇控件？是否有文件選擇控件？是否有顏色選擇控件？是否有 RichText 控件？是否有你目前需要的控件和將來可能用到的控件？

6. 控件組合是否方便
有的 GUI 把控件分成葉子節點控件和容器控件，label、image、edit 和 button 都是葉子節點控件。這樣做靈活性很差，往 button 放個圖片或者動畫，往 label 里放個圖片，往 edit 里放一個"清除"/"查找"的 button，不是方便的事嗎，為什么要限制呢？

7. 自定義控件
沒有一個 GUI 能夠滿足所有的需求，如果不支持自定義控件就悲催了。這樣一個簡單的需要，在有的 GUI 里卻需要修改 GUI 引擎的代碼，那就不好玩了。

8. 布局 (layout) 參數
通過布局參數控制控件布局，可以讓應用程序適用于不同大小的屏幕。是否支持布局參數，布局功能是否強大，是否可以擴展自定義布局？

9. 控件自定義屬性
如果控件支持自定義屬性，用戶可以存放自己的數據到控件中，可以避免使用全局變量，是個極為方便的特性。
如果控件支持自定義屬性，對 GUI 進行擴展也很方便，比如 AWTK-MVVM 的綁定規則就使用了用戶自定義屬性，如果將 AWTK-MVVM 移植到 Qt 就很容易，因為 Qt 也支持自定義屬性，要移植到 emwin 就麻煩不少。

10. 控件：label
label 是最簡單的控件，要做好也不容易。就像炒飯是廚師的基本功一下，label 就是 GUI 開發者的基本功。支持 style（字體、顏色和對齊等各種參數）嗎？支持 unicode 的換行規則嗎？支持滾動顯示嗎？支持省略號顯示嗎？支持 bidi 算法嗎？支持動畫（比如打字效果和撥號中那種）。滾動顯示支持得到焦點時才滾動嗎？支持垂直方向排版嗎？
當然把 label 和 scroll_label 分成兩個控件好點，實現簡單而且在低端平臺無需支持一下不必要的特性。總之，用戶需要時就要有這些功能。

11. 控件：image
支持旋轉和縮放嗎？支持旋轉和縮放動畫嗎？支持居中、平鋪、x 平鋪、y 平鋪、九宮格、三宮格、縮放和按比例縮放等各種繪制效果嗎？支持顯示文本嗎？支持點擊嗎？支持勾選嗎？

12. 控件：edit
支持 edit 不難，要做好卻不容易：支持拷貝、剪切和粘貼嗎？支持撤銷和重做嗎？支持通過鍵盤和鼠標選擇嗎？支持輸入法嗎？可以根據各種輸入類型自動選擇軟鍵盤嗎？可以自定義軟鍵盤嗎？可以指定獲得焦點時軟件盤是否自動開啟嗎？可以指定獲失去焦點時軟件盤是否自動關閉嗎？支持設置有效性檢查函數嗎？支持失去焦點時自動修復輸入值嗎？支持失去焦點時提示輸入有誤嗎？支持輸入提示嗎？支持輸入有變化時提示嗎？支持時間、日期和 IP 地址等格式輸入嗎？

13. 控件：button
是否支持長按？是否支持設置長按時間？是否支持重復觸發？是否支持圖標？是否支持子控件（如圖片和動畫）？

14. 控件：軟鍵盤
軟鍵盤使用 XML/JSON 描述嗎？可以定制軟鍵盤（鍵盤布局和風格）嗎？定制軟鍵盤需要修改代碼嗎？軟鍵盤可以用純方向鍵切換焦點嗎？

15. 控件：table view
支持放入進度條、選擇框、按鈕、圖片和編輯器嗎？支持 View 和 Model 分離嗎？能支持千萬級別的數據嗎？

16. 控件：code editor
有些高手常用兩個指標來衡量 GUI 的功能：1. 能用它開發一個記事本嗎？2. 能用它開發一個界面設計器嗎？如果支持 code editor，就可以用它實現一個功能更強大的記事本。

17. 控件：html view
HTML View 可以用來實現在線幫助、報表預覽功能或者一些特殊的界面效果。

18. style
是否支持設置圓角半徑？是否支持對部分角設置圓角？是否可以分別設置上下左右的邊框？是否支持自定義的狀態？

19. 對話框高亮
彈出對話框時：是否支持對話框背景變暗？是否支持對話框背景動態變暗？是否支持對話框背景動態變模糊？是否支持新的對話框高亮策略。

20. 鍵盤切換焦點
是否支持鍵盤切換焦點？是否支持上下左右切換焦點（有的設備只有方向鍵和確認鍵）？是否支持設置切換焦點的鍵值？

21. 截屏
是否支持截屏？

22. 操作反饋
是否支持按鍵音？不同的控件支付支持不同的按鍵音？是否支持觸屏震動？

23. Accessibility
是否支持字體整體放大？是否支持讀屏軟件？

24. 存儲接口
有沒有提供跨平臺的存儲接口，如文件系統、配置信息和數據庫。

25. 資源管理
有沒有統一的資源管理接口？資源管理也是很麻煩的事情：比如圖片，它可能存放在 flash 中，可能存放在文件系統中，也可能放在服務器上；對于普通屏和高清屏需要加載不同的文件；不同的語言也可能需要加載不同的文件；同一個軟件在不同的系統上運行，可能要加載不同的格式，有的系統只能使用位圖，有的系統可以使用 png/jpg；圖片還需緩存，緩存還需要清理。所有這些東西，如果讓應用程序來處理，那將是一場噩夢！
強大的資源管理器，可以屏蔽所有這些細節，讓應用程序無需感知。比如，你需要"earth"這個圖片，你無需關心它的位置和格式，無需關心屏幕密度和語言的影響，系統自動加載最佳的圖片文件。

26. 事件處理流程
事件有沒有區分 Bubbling 和 capturing 階段？事件在不同階段是否可以中止執行？是否有 pointer down abort 或 pointer down cancel 之類的事件？

27. framebuffer
是否支持單 framebuffer？是否支持雙 framebuffer？是否支持 3 framebuffer？是否支持 fragment framebuffer? 是否支持單色屏？是否能支持各種特殊的格式的 framebuffer? 是否支持 SPI 等特殊硬件的屏？

28. 光標
在非觸摸屏的系統中，光標仍然是必不可少的功能。是否支持設置光標？是否支持根據當前的控件自動切換光標？是否支持根據當前的狀態切換光標？

29. 窗口置頂
是否支持將指定窗口置頂？

30. 窗口管理
是否支持打開窗口時關閉當前窗口？是否支持將打開的窗口提到前臺？是否可以關閉指定的窗口？是否支持回到 Home 窗口？是否可以設置窗口的關閉特性（唯一實例、禁止關閉、直接關閉和需要確認后關閉）? 對話框是否支持模態和非模態？

31. 基礎庫是否強大
是否提供了強大而且跨平臺的基礎庫？特別是 C 語言開發，字符串、動態數組、鏈表、對象、事件發射器、定時器、字符串編碼轉換、文件、線程、互斥鎖、信號量、時間、日期、動態庫加載、共享內存和各種流的抽象都是非常有用的，如果提供一套穩定可靠的基礎庫，可以大大降低應用程序的開發成本。

32. 是否支持屏幕旋轉
在沒有 GPU 的情況下，屏幕旋轉會大幅降低性能，應該盡量避免屏幕旋轉。但是在項目早期，在買來的開發板上開發，確實可能有旋轉的需求，如果 GUI 支持旋轉，也是很方便的。
在 Android/iOS 上，有些應用橫屏使用更加方便，對于一個跨平臺的 GUI，支持動態旋轉無疑也是加分項。

33. 是否支持流行的動畫格式
如果支持 rive 和 lottie 等流行的動畫格式，在應用程序中直接播放這些動畫，那么美術輸出的動畫可以無縫的對接到應用程序中來?？梢宰寫贸绦蜃龅酶岣牛瑫r不會增加開發的工作量。

性能

1. 高效的算法

是否支持臟矩形算法、3 framebuffer 和二進制格式。開發時使用 XML 方便程序員修改，運行時使用高效二進制格式提高運行效率。

2. 2D 硬件加速

是否支持常見的加速接口，如 STM32 的 DMA2D 和 NXP 的 PXP。廠家是否可以擴展自己的加速接口。

3. 3D 硬件加速
是否支持 OpenGL、DirectX、Vulkan 和 Metal 等。

4. 低端平臺
最低能支持什么樣的硬件平臺？功能強大體積通常比較大，這對 GUI 的可配置性是一個極大的考驗。

5. 啟動時間
1 秒啟動？5 秒啟動？還要等半分鐘？

國際化

1. Unicode

是否支持 UTF-8 和 UTF-16 編碼？

2. 多國語言輸入法

是否支持 T9 輸入法？是否可以支持新的輸入法？

3. 字符串翻譯

是否支持字符串翻譯？是否支持實時切換語言（不需重啟）？

4. 圖片翻譯
是否支持圖片翻譯（既切換語言時，自動切換某些圖片）？

5. 文字雙向排版

是否支持阿拉伯文字的雙向排版？

6. 編碼轉換函數

是否提供的跨平臺的編碼轉換函數？

軟件質量

1. 單元測試

是否有完整的單元測試？單元測試是否全部通過？

2. 內存耗盡處理流程
內存耗盡時是直接崩潰？還是讓應用程序能優雅的退出？

3. 內存泄露檢查機制
是否有內存泄露檢查機制？是否能用 valgrind 進行內存泄露和溢出檢查？

4. 代碼靜態檢查
是否通過了 cppcheck、infer 或其它靜態檢查工具的檢查？

5. 事件錄制和重放功能
是否可以錄制用戶操作的事件，并通過重放進行壓力測試？

6. Appuim 進行自動測試
是否支持 Appuim，通過 javascript 等腳本自動化集成測試？GUI 引擎本身是否有回歸測試用例？

【版權聲明】文章為ZLG開發者社區用戶原創內容，未經授權不得轉載，點擊“閱讀原文”查看原文。歡迎更多用戶到社區交流互動、創作博文，一經采用，可獲得百元京東E卡。
地址：https://developer.zlg.cn（長按復制到PC端打開）

在線咨詢

上一篇：javascript分數加減表達式
下一篇：java CSS控制圖片和文字在同一行顯示且對齊的3種方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

vue3基礎教程（3）-引入ui框架iview（viewui）

1. 下載iview

2.更新資源

3.引入插件

4.運行項目

你的第一個 HTML 文件

HTML 中的段落

“style” 屬性

HTML 中的列表

HTML 中的標題

HTML 中的圖像

HTML 中的粗體和斜體

HTML 中的樣式

一些手續

HTML 的標題

我們學到了什么

點擊“了解更多”可訪問文內鏈接

基本指標

功能指標

性能

國際化

軟件質量

您的項目需求