Blazor中html标签的解析、富文本渲染

在Blazor中，如果在界面代码中直接写html格式的文本，是可以正确解析的，但是从数据库中获取到的数据如果让它也正确解析，就有点摸不着头脑了，无法实现对html文本的渲染了。

好在天无绝人之路啊，找到blazor中有个MarkupString，它可以用来解析html、显示富文本。

Blazor中的MarkupString是一种用于在Blazor应用程序中渲染HTML标记的机制。MarkupString允许开发者在C#代码中动态生成HTML内容，并通过Blazor的绑定语法将其呈现到页面上。使用MarkupString可以避免手动编写JavaScript代码，简化开发过程。

MarkupString的基本用法

在Blazor中，可以使用MarkupString来创建和渲染HTML内容。例如，可以在C#代码中定义一个包含HTML标记的字符串，并通过Razor语法将其绑定到页面元素上。

例如下面的例子是用来绑定时间线组件的，用来实现更新内容的换行

@((MarkupString)item.内容 将其转换为MarkupString并渲染到页面上，当用户从数据库中查询出数据时，时间线内容属性的值将自动更新，从而实现动态内容的展示。

源自codepen的25个最受欢迎的HTML/CSS 代码

Codepen是一个非常了不起的网页应用。只要电脑能够上网，你就可以创建HTML, CSS和Javascript。如果你想选择性加入PRO版本，你会得到一些非常酷的效果诸如：世界范围内的成对编程（在线合作编码），给学生授课（学生可以通过网络观看你实时工作情况），轻松上传工作所需文件，等等。

我搜索了一些时下最好最流行的大家可能会感兴趣的codepen（仅限于HTML和CSS）。如果你想把它们融入到你的设计中去，那会大大节省你很多时间。或者你可以考虑下从别人那里学习一些新东西。

在下面的例子中你会看到各种各样的片段，HTML 陈列，登录方式，垂直菜单，甚至时下最流行的主题：扁平化设计（扁平化图像，扁平化按钮形状，扁平化用户界面要素，等）。好好欣赏这些精选的代码片段吧，如果现在没时间看完所有的代码例子，那就保存下来以备不时之需吧。

CSS3 Working Clock

这是一个纯css3时钟。它使用css动画还有图形，没有使用任何图片或者是js.

CSS3 Pricing Table

CSS Loader

Pure CSS3 MacBook Air with Thunderbird Display and Keyboard

Twitter Button Concept

CSS3 Loading Animation

Pure CSS3 Vertical Menu with Hover Effect

CSS3 Stamp effect using radial gradients

I Love Blur

Social Navigation

Login

Calendar

Social Footer

Parallax Landscape

CSS3 Thermometer

CSS-Only Responsive Layout with Smooth Transitions

Flat CSS3 Weather Widget

Flat Responsive Sliding Boxes

Tiny CSS3 Round Breadcrumb

CSS3 Hover Effect using :after Psuedo Element

Flat UI Elements

CSS Flat Button Shapes

Email UI

Flat Icons CSS

HTML介绍及标签，元素，格式（笔记8）

网络安全自学笔记8

开始学习HTML，学习资料解压到了E盘根目录

浏览器打开E:/html教学资料/html教学版/index.htm，可以全部展开学习

HTML在线手册

  • HTML表示超文本标记语言（Hyper Text Markup Language）
  • HTML文件是一个包含标记的文本文件，这些标记告诉浏览器怎样显示这个页面
  • HTML文件必须有htm或者html扩展名
  • HTML文件可以用一个简单的文本编辑器创建，例如TXT
  • HTML页面在服务端，客户端一样，和数据库没有交互，静态页面，没有漏洞

例子

  • HTML标签用来组成HTML元素
  • HTML标签两端有两个包括字符：“<”和“>”,这两个包括字符被称为角括号
  • HTML标签通常成对出现，比如<b>和</b>，前面一个是开始标签，第二个是结束标签
  • HTML标签是大小写无关的，<b>跟<B>表示的意思是一样

标签属性：

  • 标签可以拥有属性，能够为页面上的HTML元素提供附加信息
  • 通常附加给HTML元素的开始标签
  • 属性通常由属性名和值成对出现，就像这样：name=\”value\”

1、标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，告诉浏览器：你页面的背景色是红色的，就像这样：

<body bgcolor=\”red\”>

背景色是红色

2、标签<table>定义了一个HTML表格。使用一个附加的border属性，你可以告诉浏览器：这个表格是没有边框的，代码是：

<table border=\”0\”>

  • HTML文档是由HTML元素组成的文本文件
  • HTML元素是预定义的正在使用的HTML标签

1、以开始标签<body>起始，终止于结束标签</body>，定义一个HTML元素，使其包含HTML文档的主体

<body>This is my first homepage.<b>This text is bold</b></body>

2、此HTML元素以开始标签<b>起始， 内容是：This text is bold，以结束标签</b>中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素

<b>This text is bold</b>

显示成粗体

3、段落元素

段落

4、标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的

标题元素

5、换行在HTML文档中的使用

换行

6、居中属性的标题元素

居中属性的标题元素

7、水平线

插入水平线

8、隐藏的注释

隐藏的注释

9、设置背景色

背景色

1、可以怎样格式化文本

格式化文本

2、可以怎样用pre标签来控制换行和空格

预格式化文本

3、“计算机输出”标签在显示上的不同

计算机输出

4、用HTML书写一个地址

地址

5、如何处理缩写和首字母缩略

缩写和首字母缩略法

6、如何改变文字方向

文字方向

7、如何处理大段引用和小块引用

块引用

8、如何标记被删除或者插入的文本

删除和插入文字

总结：

1、初步了解HTML语言

2、学习HTML标签，元素，格式

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科