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

在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。

在浴室里，当你在思考为什么会发生这种情况时，你听到一个来自通风口的低沉声音：“嘿，我是蝙蝠侠。”

这时，你会怎么做呢？

在你恐慌并处于关键时刻之前，蝙蝠侠说：“我需要你的帮助。我是一个超级极客，但我不懂 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>

你看到那个空的 "" 了吗？这就是我们定义元素外观的地方。现在我们要将宽度设置为 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.”

当阅读到这里时，你会问蝙蝠侠：“等等，这是给谁的？”蝙蝠侠说：

“这是给超人的。”

你说：哦！我还以为是给神奇女侠的呢。

蝙蝠侠说：不，这是给超人的，请在最后写上 “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 等流行的动画格式，在应用程序中直接播放这些动画，那么美术输出的动画可以无缝的对接到应用程序中来。可以让应用程序做得更酷更炫，同时不会增加开发的工作量。

性能

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 的标题

我们学到了什么

点击“了解更多”可访问文内链接

基本指标

功能指标

性能

国际化

软件质量

您的项目需求