---
title: '使用 html! 宏处理 HTML'
description: '这是 HTML，但不完全是！'
comment: '尽量保持文件简短和简单。它的目的是让读者更容易地了解 Yew 中的组件，而不是提供正确的 API 文档'
---

你可以使用 `html!` 宏编写类似 HTML 的表达式。Yew 会在后台将其转换为表达 DOM 的 Rust 代码。

```rust
use yew::prelude::*;

let my_header: Html = html! {
    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
};
```

类似于格式化表达式，您可以通过使用花括号将周围上下文的值嵌入 HTML 中：

```rust
use yew::prelude::*;

let header_text = "Hello world".to_string();
let header_html: Html = html! {
    <h1>{header_text}</h1>
};

let count: usize = 5;
let counter_html: Html = html! {
    <p>{"My age is: "}{count}</p>
};

let combined_html: Html = html! {
    <div>{header_html}{counter_html}</div>
};
```

`html!` 可以接受任意数量的根节点，因此可以直接渲染多个元素的列表：

```rust
use yew::html;

html! {
    <div></div>
    <p></p>
};
```

更多关于 Yew 和 HTML 的内容请参见[更多 HTML](concepts/html/introduction.mdx)。
