如何在 HTML 中使用 標籤進行變數格式化?


我們使用 <var> 標籤來定義程式設計或數學表示式中的變數。它還用於在文件中設定文字格式。此標籤中的內容通常以斜體顯示。

語法

<var>Variable…</var>

示例 1

以下是使用 HTML 中的 標籤執行變數格式化的示例 −

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p> <var>a</var> = float(input('Enter a value: ')) <br> <var>b </var>= float(input('Enter b value: ')) <br> <var>c </var>= float(input('Enter c value: ')) <br> # calculate the semi-perimeter <br> <var>s </var>= (<var>a</var> +<var> b</var> +<var> c</var>) / 2 <br> # calculate the area <br> area = (<var>s</var>*(<var>s</var>-<var>a</var>)*(<var>s</var>-<var>b</var>)*(<var>s</var>-<var>c</var>)) ** 0.5 <br> print('The area of the triangle is %0.2<var>f</var>' %area) </p> </body> </html>

示例 2

您可以嘗試執行以下程式碼,以使用 HTML 中的 <var> 標籤執行變數格式化 −

<!DOCTYPE html> <html> <head> <title>HTML var Tag</title> </head> <body> <p>The equations: <var>2x</var> - <var>3z </var> = <var>5y</var> + 2 and <var>2x</var> + <var>5z</var> = <var>2y</var> + 7 </p> </body> </html>

示例 3

我們可以使用樣式表覆蓋字型樣式。示例程式碼如下 −

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="meta tag in the web document"> <meta name="keywords" content="HTML,CSS"> <meta name="author" content="lokesh"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> var{ font-family: cursive; } </style> </head> <body> <p> <var>a</var> = float(input('Enter a value: ')) <br> <var>b </var>= float(input('Enter b value: ')) <br> <var>c </var>= float(input('Enter c value: ')) <br> # calculate the semi-perimeter <br> <var>s </var>= (<var>a</var> +<var> b</var> +<var> c</var>) / 2 <br> # calculate the area <br> area = (<var>s</var>*(<var>s</var>-<var>a</var>)*(<var>s</var>-<var>b</var>)*(<var>s</var>-<var>c</var>)) ** 0.5 <br> print('The area of the triangle is %0.2<var>f</var>' %area) </p> </body> </html>

更新時間: 19-Oct-2022

1000+ 瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始使用
廣告
© . All rights reserved.