Blazor顯示html內容的方法

常在razor文件中，如果這樣寫：

<div>
@content
</div>
@code
{
string content="<h1>hello world</h1>";
}

你將得到的是：

但是你的本意是要讓它正常的渲染html，要怎么來實現呢？

<div>
@((MarkupString)(@content)
</div>
@code
{
string content="<h1>hello world</h1>";
}

@((MarkupString)(@content) 這樣就告訴blazor，要用html格式進行渲染。

這樣就正常了。

人在校生一枚，希望可以找到志同道合的小伙伴一起進步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來寫代碼的

什么是 HTML

HTML 是個縮寫，全稱Hyper Text Markup Language，譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

HTML的結構

html的后綴名有兩種一種是.html，另一種是.htm （兩種并無區別）
快捷創建基本結構的方法：方法一：可以在開頭打一個“!”號，方法二：打一個html，智能提示會出現html:5 選中即可。

HTML的頭部

在<hard>頭部標簽中你可以插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區域的元素有：<title>，<style>，<meta>，<link>等等

? <title>定義網頁標題</title>
<meta>元素：描述了一些基本的元數據，元數據不顯示在頁面上，但會被瀏覽器解析，<meta>通常用于指定網頁的描述，關鍵詞，作者。

注釋快捷鍵：CTRL+? （注釋是不被運行的，作用就是幫助程序員記東西）

 <!--這是一個注釋-->

HTML屬性

通用屬性：幾乎所有元素都可以使用的屬性，例如 id、name、style等
私有屬性：某個一個/類元素所具備的屬性
事件屬性：為某個元素綁定事件（DOM學習）
自定義屬性：開發者為某個元素設置的屬性，一般都是在前端框架中使用
參考介紹https://developer.mozilla.org/zh-CN/

HTML完整結構

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--頭部，js和css寫在這里面-->
 </head>
 <body>
       <!--內容主體-->
 </body>
 </html>

可能我寫的會有些不清楚，到后面有代碼的時候就會清楚了

.注釋標記()

語法：

2.文件標記(<html>…</html>)

語法： <html>…</html>

說明：<html>這對標記是HTML文件的標記。<html>處于文件的最前面，表示HTML文件的開始。即瀏覽器從<html>標記開始解釋，直到遇到</html>標記為止。

3.文件頭標記(<head>…</head>)

語法： <head>…</head>

說明：

①由head這組標記定義的元素中，并不放置網頁的任何內容，是放置關于這份HTML文件的信息。就是說，它并不屬于HTML文件的主體，它包含文件的標題、編碼方式和URL等。這些信息大部分用于提供索引、辨認或其他應用。

②這對標記在HTML文件中并不是必需的。如果某個HTML文件并不需要提供相關信息，則可省略<head>標記。

4.文件標題標記(<title>…</title>)

語法： <title>文件標題文字</title>

說明：此標記用于設定HTML文件的標題名稱，它將顯示在瀏覽器的標題欄中。

注意：<title>標記用于<head>標記中。但如果HTML文件中沒有使用<head>標記，則<title>標記仍然起作用。

5.文件主體標記(<body>…</body>)

語法： <body>…</body>

說明：

①由<body>標記所建立的元素是HTML文件的內容主體，也是HTML文件的重點所在。HTML文件中要顯示在網頁上的所有內容，也都放置在這個元素中。

②<body>具有一些特殊的屬性，可以設定背景及字符顏色等。

在線咨詢

上一篇：Java教程：Nginx靜態資源配置命令介紹
下一篇：普聯TL-WR742N如何能夠修改密碼？快來學習一下

您的項目需求

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