varkbd and samp

Posted bingw

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了varkbd and samp相关的知识，希望对你有一定的参考价值。

1. pre 元素

pre 元素用于定义预格式化的文本。

pre 元素会保留空格和换行符，而文本自身也会呈现为等宽字体。

详细介绍 -> 传送门


2. 什么是“预格式化”？

预格式化就是保留文本在源代码中的格式，使得页面中显示的和源代码中的效果完全一致。也就是说，浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示，原封不动地保留文档中的空白，如空格、制表符、换行符等。


3. 字符实体

在 html 文档中，某些字符是预留的，具有特殊含义，比如我们在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误将它们作为标签来对待。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。 

这里是 HTML 的符号实体和字符实体的参考表 -> 传送门


4. 等宽字体

等宽字体（Monospaced Font）是指字符宽度相同的计算机字体。与此相对，字符宽度不尽相同的计算机字体称为比例字体。

它们差别关键在于可读性上，显然，比例字体使单词的整体可读性增强了。但是编程就不一样了，如果代码不是等宽字体，程序员看着会感觉很难受，甚至完全不想去读代码。

推荐几款合适编程的字体 -> 传送门


5. 语义化

在 Web 前端前端开发里面的一个专用术语叫做：语义化，简而言之就是使用正确的元素去做正确的事情。

在随后的学习中我们会发现很多元素，事实上在页面实现的效果是一样的，但语义化就要求你使用恰当语义的 HTML 元素，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。


6. code 元素

code 元素生来就是用于定义计算机代码片段的，如果我们一个段落里面需用引用到一些代码相关的文本，那么就可以使用 code 元素：

1 <p>HTML中注释的语法是：<code>&#60;!--这里填写注释的内容--&#62;</code></p>

详细介绍 -> 传送门


7. var、kbd 和 samp 元素

var 用于定义程序的变量，kbd 用于定义用户的键盘输入，samp 用于定义程序的输出：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>code元素演示</title>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
 8     <meta name="description" content="《零基础入门学习Web开发》案例演示">
 9     <meta name="author" content="小甲鱼">
10 </head>
11 <body>
12     <!-- 演示code元素的使用 -->
13     <pre>
14     <code>
15         &#60;p&#62;你最喜欢吃的水果是：&#60;span id=&#34;fruit&#34;&#62;&#60;/span&#62;&#60;/p&#62;
16         &#60;script type=&#34;text/javascript&#34;&#62;
17                 var user_input = prompt(&#34;你最喜欢吃的水果是：&#34;);
18                 document.getElementById(&#34;fruit&#34;).innerHTML = user_input;
19         &#60;/script&#62;
20     </code>
21     </pre>
22     <p>上面代码定义了一个变量<var>user_input</var>，用于接收用户的输入。</p>
23     <p>如果用户输入的是<kbd>香蕉</kbd>，那么程序将打印<samp>你最喜欢吃的水果是：香蕉</samp></p>
24 </body>
25 </html>

 













































以上是关于varkbd and samp的主要内容，如果未能解决你的问题，请参考以下文章

拥有的50个CSS代码片段(上)

[RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through(代码片段

环境初始化 Build and Install the Apache Thrift IDL Compiler Install the Platform Development Tools(代码片段

项目启动报错Failed to configure a DataSource: 'url' attribute is not specified and no embedde(代码片段

Operator '||' cannot be applied to operands of type 'bool?' and 'bool?'(代码片段

Operator '||' cannot be applied to operands of type 'bool?' and 'bool?'(代码片段