HTML - height 属性_HTML 菜鸟教程

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

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

语法

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

任何 CSS 度量值都将被接受为高度属性值。

适用于

下面列出的元素允许使用 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 属性。我们创建了一个图像对象来测试对象元素上的高度属性。

<!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 元素的高度

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

<!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>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - headers 属性 HTML - high 属性 >>