在本文中，了解有关 HTML 属性的更多信息 - 放置在开始标记内的附加值，有助于配置元素或调整其行为。使用属性可以帮助您微调您的设计，使其看起来像您想要的样子。
HTML 属性
所有 HTML 元素都有属性——修饰符可以指定元素的工作方式或添加额外的功能。他们进入开始标签。
例如，<img>用于嵌入图片的标签需要一个src指定图片路径的属性。这是一个必需的属性，因为没有它，浏览器将无法显示图像。
另一方面，样式是一个可选属性。例如，默认情况下，正文为黑色。但是，如果您将 a 添加style="color:red;"到段落标签<p>中，则文本颜色将变为红色。
属性名称
属性由两部分组成：名称和值，由等号 ( = ) 分隔。
名称是告诉我们它是哪种修饰符的第一部分。例如，链接标签<a>有一个属性href，它指示它指向的页面的 URLhref代表超文本引用，它告诉浏览器有一个超文本链接来了。
属性值
属性值是属性的第二部分，位于等号之后并用引号括起来。该值告诉了该属性究竟要做什么——在示例href="design.html"中，该属性的href值为"design.html"，这也是用户单击时浏览器将重定向到的链接的 URL。
您可能会注意到此示例中的链接不是以 https://www 开头的——这是因为它指向的页面托管在网站内。
标题属性
该属性添加工具提示。 title您可以将此属性添加到许多不同的元素：文本、标题、图像、链接等。这些属性称为全局属性。
当您将鼠标悬停在具有属性的元素上时，您会看到作为工具提示弹出的文本。虽然没有必要，但如果需要，这允许添加一些额外的信息。 title
href 属性
您可能知道，链接构成了 Internet 的大部分内容。该标签<a>定义了一个链接，它需要该href属性来指定链接的位置。
您可以使用两种类型的链接：本地链接和外部链接。本地链接指向您网站内的页面。它们使用没有 https://www 部分的相对 URL 指定。关于本地链接最好的部分是，如果您更改域，它们不会中断。
外部链接指向像 google.com 这样的外部网站，它们需要我们所说的绝对 URL——带有 https://www 的完整网址。
src 属性
没有猫图片，互联网还能存在吗？这就是它在早期黑暗文本时代的情况，但现在很难想象没有图像的网页。
允许我们在页面中插入（通常称为“嵌入”）图像的标签<img>具有 required 属性src。它指定显示图像的路径。与链接一样，您可以链接存储在您网站上的本地图像或来自网络的外部图像。在大多数情况下，最好使用本地图像，因为您无法控制外部图像何时更改 URL 或消失。
宽度和高度属性
和属性告诉浏览器图像的确切大小height （width 以像素（px）为单位）并加快下载过程。
浏览器首先加载文本，然后加载图像文件。如果浏览器知道图像的尺寸，它可以在布局页面时将空间大小放在一边。如果您不指明图像的尺寸，则页面的布局将在加载时发生变化。正如您可能猜到的那样，这对用户来说极具破坏性——尤其是当他们已经开始阅读文章时！不指示图像高度和宽度的另一个缺点是浏览器可能会随意拉伸或缩小它们。
alt 属性
该属性对于标签alt来说不是必需的，但它非常方便。<img>如果由于某种原因无法加载图片，它会为图片提供替代文本。
我们建议使用该属性，因为它在许多情况下都会使您的用户受益。例如，浏览器可能因为连接速度慢或属性中的 URL 错误而无法加载图片。但最重要的是，这个属性对于使用屏幕阅读器的人来说至关重要，因为这是他们了解图片中内容的唯一方法。 alt src
样式属性
该属性有助于（您猜对了）样式化 HTML 元素。它也是一个全局属性，这意味着它可以应用于大多数 HTML 元素。 style
该style属性以一种称为 CSS 的不同类型的语言引入元素。HTML 为内容提供了结构，而 CSS 的工作是描述网页的样式、设计、布局等。您需要知道的是，style 属性的值（等号后面并用引号括起来的部分）具有自己的结构。
例如，该属性style="color:red;"将使该段落的文本变为红色。Color这是一个 CSS 属性，whilered是它的值。您必须使用冒号分隔这两个部分，并在 CSS 值之后使用分号。
语言属性
虽然不使用它不会破坏您的页面，但标签lang 内的属性<html>让搜索引擎和浏览器知道您的页面语言以返回特定语言的结果。
如果所讨论的语言有多个变体，您还可以在此处指定该语言的国家/地区。对于美式英语，属性将如下所示 - lang="en-US"，其中前两个字母代表语言，连字符后的两个字母代表国家/地区。
您可以在 W3Schools 网站上找到语言和国家代码的完整列表。
添加标题属性
这title 是一个具有完全误导性名称的全局属性。它不是添加标题，而是提供有关元素的额外信息。大多数情况下，它具有一种工具提示形式，出现在鼠标悬停在元素上。工具提示具有高度的上下文和特定性，将它们添加到图标、文本链接、按钮等元素中更有意义，以添加有关元素的额外信息。
添加 href 属性
所有链接都必须有一个href 属性——否则，它们将无法实现其功能。拥有一个没有属性的元素就像建造一座没有门或窗的房子——可以做到，但没有理由这样做。 <a>href
添加 src 属性
<img>标签通常包含几个属性——通常用于alt 替代文本和width &height 来指定图像尺寸。没有它们，浏览器仍然可以显示您的图像。但是，该src 属性是绝对必须的——没有它，浏览器将没有图片的路径，图像也不会显示。
在 <html> 标签中设置页面的语言
要设置页面的默认语言，请使用标签lang内的属性。<html>如果在<body>标签中使用 lang 属性，它不会覆盖文档的 head 元素的内容。
也可以为内容的不同部分设置语言。例如，如果您有一个日语段落，请使用该lang 段落标记中的属性，以便浏览器正确显示它。
对 alt 文本使用 alt 属性
该属性提供替代文本以防浏览器无法加载图像。它还允许搜索引擎为您的内容编制索引，这意味着当用户从替代文本中提及关键字时，您的图像将显示在搜索页面结果中。 alt
让您的 alt 文本少于 125 个字符，因为许多屏幕阅读器在此之后停止阅读没有必要说“...的图片”或“...的图像”，因为辅助技术无论如何都会宣布 - 直接进入描述并尝试具体。
指定图像的宽度和高度
如果您想缩小或更改图片的尺寸，使用height 和width 属性不是这样做的方法。在这种情况下，浏览器仍然会加载原始图片并显示其较小的版本，或者拉伸和扭曲它。相反，在上传之前在图像编辑器中重新缩放和剪切图像。
使用样式属性
您可以更改标题和正文的字体颜色、大小和字体。在此示例中，样式属性位于<h1>标签内，这意味着它修改的是标题，而不是正文。
使用正确的文件格式
嵌入图片时，请确保您的链接指向正确格式的文件。HTML 支持的最常见的图像格式是 APNG、AVIF、GIF、JPEG、PNG 和 SVG。如果链接指向不受支持的格式或完全不同的格式（如 MP4 视频），浏览器将无法显示它。
使用工具提示的标题属性
该属性在悬停时添加工具提示。通常，它们包含有关元素的附加信息。请记住，此类工具提示很可能对使用仅触控设备的人、辅助技术用户和有认知问题的人不可用。仅在必要时使用工具提示和非必要信息，这样即使用户错过了它，他们仍然会理解内容。 title
使用链接 URL 的 href 属性
默认情况下，浏览器会在链接下划线并以蓝色显示未访问的链接，以紫色显示已访问的链接。请记住，如果标签href中不存在该属性<a>，则该元素将不是超链接。
另外，您可以使用链接将用户引导至页面中的某些部分（例如href="#top"）、其他协议（如ftp:// or ）和脚本。 mailto:
以上内容为转载
网友评论