HTML - width 属性

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

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

语法

以下是 width 属性的语法：

<element width = " " >

其中 width 应为像素值。

示例

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

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

运行上述代码后，输出窗口将弹出，在网页上显示图片。

示例

考虑另一种情况，我们将 width 属性与 embed 标签一起使用。

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

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

示例

以下示例演示了如何将 width 属性与 object 标签一起使用。

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

运行上述代码后，将生成一个输出，其中包含在网页上显示的图片。

html_attributes_reference.htm

打印页面