HTML - height 属性

HTML 的 **height** 属性用于指定元素的垂直尺寸。我们也可以使用 **height** 作为 CSS 中的属性来指定元素的高度。

此属性对于保持元素的纵横比和确保设计一致性至关重要。通过管理内容中项目的可视化呈现，Web 开发人员可以控制高度属性以创建像素完美的布局并改善用户体验。

语法

<tag height = 'value'></tag>

任何 CSS 测量值都将被接受为 height 属性值。

应用于

以下列出的元素允许使用 HTML height 属性

元素	描述
<img>	HTML <img> 标签用于在网页中渲染图像。
<canvas>	HTML <canvas> 用于使用 JavaScript 绘制图形。
<embed>	HTML <embed> 标签用作外部应用程序和多媒体的容器。
<iframe>	HTML <iframe> 是一个内联框架，允许我们在当前 HTML 文档中嵌入另一个文档。
<input>	HTML <input> 用于接受用户提供的各种类型的输入。
<object>	HTML <object> 标签用于在网页上显示多媒体，包括音频、视频、图片、网站、PDF 和 Flash。
<video>	HTML <video> 用于在网页中渲染视频

HTML height 属性示例

以下示例将说明 HTML height 属性，以及我们应该在哪里以及如何使用此属性！

设置图像元素的高度

所有图像都有其自身的高度，但我们可以根据需要使用 HTML height 属性设置高度。在此示例中，我们将使用 px（像素）单位设置图像高度。您可以使用任何适合您的测量单位。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>
        Example of the HTML 'height' Attribute
    </h3> 
    <p>
        Here you can see the same image with different height value,
        as we did not set the width attribute so the width is adujusted
        based on height of the image.
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 50px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="50px">
    <br>
    <strong>Image with 100px height</strong>
    <br>
    <img src="html/images/html-mini-logo.jpg" height="100px"> 
</body>
</html>

设置输入元素的高度

在以下示例代码中，我们将使用 input 标签渲染图像并在输入元素中设置图像的高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        In this example we set the width also so 
        the image can render on fixed dimension 350*100(w*h).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Image with 100px height</strong>
    <br>
    <input type="image" src="/html/images/html-mini-logo.jpg" 
           height="100px" width="350px"> 
</body>

</html>

设置对象元素的高度

让我们看看以下示例，我们将在此示例中对 object 元素使用 height 属性。我们创建了一个图像对象来测试 object 元素上的 height 属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        Here we did not mention any unit but you 
        can as per the need, without the unit it 
        measure in px(pixels).
    </p>
    <!--HTML 'height' attribute-->
    <strong>Object with 300 height</strong>
    <br>
    <object data=
"https://www.plus2net.com/php_tutorial/images/pdf-student-table.PNG" 
            height="300"> 
    </object>
</body>

</html>

设置 canvas 元素的高度

在此示例中，我们正在创建一个 canvas 并使用 HTML height 属性为 canvas 元素设置高度。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created a canvas 400*200 and using 
        JavaScript to fill the color by mentioning the coords
    </p>
    <!--HTML 'height' attribute--> 
    <canvas id="myCanvas" width="400" height="200">
    </canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(30, 50, 335, 100);
    </script>
</body>

</html>

设置 iframe 元素的高度

在这里，我们使用 height 属性设置 iframe 元素的高度并渲染 HTML 教程的登录页面。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have created an iframe 400*400 and 
        rendering HTML landing page
    </p>
    <!--HTML 'height' attribute--> 
    <iframe src="/html/index.htm" width="450" height="400">
</body>

</html>

设置嵌入元素的高度

在此示例中，我们将嵌入我们的 HTML 教程登录页面，并将使用 height 属性调整嵌入元素的高度

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have embedded an image and 
        rendering the image in 300*100
    </p>
    <!--HTML 'height' attribute--> 
    <embed type="image/jpg" src="html/images/html.jpg"
           width="300" height="100">
</body>

</html>

设置视频元素的高度

在此示例中，我们包含了一个视频并使用 height 属性设置了视频元素的高度。由于链接损坏或访问问题，视频可能无法播放。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'height' Attribute</title>
</head>

<body>
    <h3>Example of the HTML 'height' Attribute</h3>
    <p>
        We have included a video and 
        rendering the video in 320*240
    </p>
    <!--HTML 'height' attribute--> 
    <video width="320" height="240" controls>
      <source src=
"https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" 
              type="video/mp4">
</body>

</html>

支持的浏览器

属性
height	是	是	是	是	是

html_attributes_reference.htm

打印页面