<pre> 标签 (preformatted text)
<pre>标签用来表示预格式化的文本内容
在页面数据展示时，后端返回了一段未经处理的JSON 数据，将这段数据在页面正常展示，让可读性更高。
{/"project": {/ "title": "Sample Project XYZ",/ "status": "active",/ "startDate": "2023-06-15T00:00:00Z"/}}
我们可以通过使用正则表达式、通过JSON.parse()方法将其转换为JSON对象、使用js 逐行处理等等方式来处理，不过有一个更简单的方式， HTML 提供了一个标签可以直接处理这种格式的数据。
<pre>这个标签的作用是告诉浏览器保留其内部文本的所有空白字符（包括空格、制表符和换行符），并且文本通常会以等宽字体展示，确保文本内容按照原始源代码的格式呈现给用户。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code Sample Using <pre> Tag</title>
</head>
<body>
<pre>
{/"project": {/ "title": "Sample Project XYZ",/ "status": "active",/ "startDate": "2023-06-15T00:00:00Z"/}
</pre>
</body>
</html>
处理完成后，在页面的展示
{
2 "project": {
3 "title": "Sample Project XYZ",
4 "status": "active",
5 "startDate": "2023-06-15T00:00:00Z"
6 }
7}
PDF格式文件展示
在HTML中处理PDF格式文件，通常可以使用以下标签来嵌入或预览PDF：
<embed>标签
<embed src="example.pdf" type="application/pdf" width="500px" height="600px">
embed 标签用于嵌入外部应用程序内容，包括PDF文件。设置 src 属性为PDF文件的URL，并指定 type 为 “application/pdf” 以确保浏览器正确识别和处理文件。
<object>标签
<object data="example.pdf" type="application/pdf" width="500px" height="600px">
<!-- 如果用户的浏览器不支持内嵌PDF，则显示备用内容 -->
<p>您的浏览器不支持内嵌PDF文档，请<a href="example.pdf">点击此处下载PDF文件</a>.</p>
</object>
object标签也能够嵌入多种类型的外部资源，包括PDF。当浏览器支持内嵌PDF时会直接显示，否则可以提供一个备选方案。
<iframe>标签
<iframe src="example.pdf" width="500px" height="600px"></iframe>
iframe 标签可用于在网页内部加载另一个文档，也可以用来展示PDF文件。不过不是所有浏览器都原生支持用iframe嵌入PDF文件。
对于现代浏览器而言，它们大多内置了PDF阅读器功能，可以直接在浏览器窗口内打开和查看PDF文件。但并不是所有浏览器都能完美支持，尤其是较老版本的浏览器可能需要用户安装插件或者直接下载PDF才能查看。
另外，若要实现更高级的在线PDF预览功能（如页面导航、搜索等），可以采用第三方JavaScript库，例如Mozilla的PDF.js，它可以将PDF渲染为HTML5 canvas元素，从而实现在各种浏览器中一致且强大的PDF阅读体验。
扫一扫
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
