HTML - width 属性

可以使用 HTML width 属性以像素为单位指定元素的宽度，也可以使用其父容器的百分比来指定元素的宽度，该属性经常与图片、表格和表格单元格等元素一起使用。它对于管理网页上内容的组织和呈现至关重要。

Web 开发人员可以通过定义 width 属性来确保一致且响应式的设计，使其成为实现所需视觉美感的重要工具，并确保内容适合指定区域，从而改善用户体验。但是，为了进行灵活的网站设计，经常选择 CSS 而不是固定宽度属性。

语法

以下是width属性的语法 -


 <element width = " " >

宽度应在像素中的位置。

例子

在以下示例中，我们将创建一个 HTML 文档并在 <img> 标签上使用 width 属性。


<!DOCTYPE html>
<html>
<body>
	 <h1>The img tag with width attribute</h1>
	 <img src="https://www.qikepu.com/images/logo.png?v2" alt="Logo" width="400" height="100">
</body>
</html>

运行上述代码时，将弹出输出窗口，在网页上显示 img。

例子

考虑到另一种情况，我们将使用带有 embed 标签的 width 属性。


<!DOCTYPE html>
<html>
<body>
	 <h1>The embed height and width attributes</h1>
	 <embed type="image/jpg" src="https://t3.gstatic.com/images?q=tbn:ANd9GcRFOuSwoPG5luSDx4onb42RzGz8EoCcjqqed6dDOpjYFTJ5dG01" width="200" height="100">
</body>
</html>

当我们运行上述代码时，它将生成一个由网页上显示的图像组成的输出。

例子

让我们看一下以下示例，我们将在其中将 width 属性与 canvas 标签一起使用。


<!DOCTYPE html>
<html>
<body>
	 <h1>width attribute with Canvas element</h1>
	 <canvas id="myCanvas" width="200" height="100" style="border:1px solid"></canvas>
	 <script>
			const c = document.getElementById("myCanvas");
			const ctx = c.getContext("2d");
			ctx.fillStyle = "#64f56e";
			ctx.fillRect(60, 10, 80, 80);
	 </script>
</body>
</html>

运行上述代码时，将弹出输出窗口，在网页上显示画布。

例子

以下示例，我们将在其中将 width 属性与 object 标签一起使用。


<!DOCTYPE html>
<html>
<body>
	 <h1>width attribute with object element</h1>
	 <object data="https://www.qikepu.com/images/logo.png?v2" width="300" height="100"></object>
</body>
</html>

当我们运行上述代码时，它将生成一个由网页上显示的图像组成的输出。

支持浏览器

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

本页