HTML 标签列表

HTML 属性

  • HTML 属性是提供有关元素的附加信息的特殊词,或者属性是 HTML 元素的修饰符。

  • 每个元素或标签都可以有属性,这些属性定义了该元素的行为。

  • 属性应始终与开始标记一起应用。

  • 属性应始终与其名称和值对一起应用。

  • 属性名称和值区分大小写,W3C 建议它应该只用小写字母书写。

  • 您可以在一个 HTML 元素中添加多个属性,但需要在两个属性之间留出空间。



句法 (Syntax)

<element attribute_name="value">内容</element>

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
</head>  
<body>  
   <h1>这是Style属性</h1>  
   <p style="height: 50px; color: blue">在元素中添加style属性</p>  
   <p style="color: red">改变内容的颜色</p>  
</body>  
</html>
       自己试试 »

输出:

上面例子的解释:

例子 (Example)

<p style="height: 50px; color: blue">在元素中添加style属性</p>
       自己试试 »

在上面的语句中,我们使用了应用了样式属性的段落标签。此属性用于在任何 HTML 元素上应用 CSS 属性。它为 50px 的段落元素提供高度并将其颜色变为蓝色。

例子 (Example)

<p style ="color: red">改变内容的颜色</p>
       自己试试 »

在上面的语句中,我们再次在段落标签中使用了样式属性,将其颜色变为红色。

注意:下面给出了一些常用的属性,所有属性的完整列表和解释在 HTML 属性列表中给出。


HTML 中的 title 属性

说明: title 属性在大多数浏览器中用作文本工具提示。当用户将光标移动到链接或任何文本上时,它会显示其文本。您可以将它与任何文本或链接一起使用以显示有关该链接或文本的描述。在我们的示例中,我们将使用段落标签和标题标签。

 使用 <h1> 标签:        

例子 (Example)

<h1 title ="这是标题标签"> title 属性示例</h1>
       自己试试 »

使用 <p> 标签:

例子 (Example)

<p title ="这是段落标签" >将光标移到标题和段落上,您将看到一个描述作为工具提示</p>
       自己试试 »

例子 (Example)

<!DOCTYPE html>  
<html>  
 <head>  
 </head>  
<body>
  <h1 title="这是标题标签">title 属性示例</h1>  
  <p title="这是段落标签">将光标移到标题和段落上,您将看到一个描述作为工具提示</p> 
</body>  
</html>
       自己试试 »

输出:


HTML 中的 href 属性

说明: href 属性是<a> 锚标签的主要属性。该属性给出了在该链接中指定的链接地址。href 属性提供超链接,如果为空,则保持在同一页面。

附链接地址:

例子 (Example)

       自己试试 »

没有链接地址:

例子 (Example)

<a href="">这是一个链接</a>
       自己试试 »


src 属性

SRC属性是重要和必需的属性中的一个<IMG>的元素。它是需要在浏览器上显示的图像的来源。此属性可以包含同一目录或其他目录中的图像。图像名称或来源应该正确,否则浏览器将不显示图像。

例子 (Example)

       自己试试 »

注意:上面的例子还有 height 和 width 属性,它们定义了网页上图片的高度和宽度。


输出:



引号:单引号还是双引号?

在本章中,您已经看到,我们使用了带双引号的属性,但有些人可能会在 HTML 中使用单引号。因此,也允许使用带有 HTML 属性的单引号。以下这两个陈述绝对没问题。

例子 (Example)

<a href="https://www.rocschool.com";>链接到HTML。</a>  
<a href='https://www.rocschool.com';>链接到HTML。</a>
       自己试试 »

在 HTML5 中,您还可以省略在属性值周围使用引号。

例子 (Example)

<a href=https://www.rocschool.com>链接到HTML。</a>
       自己试试 »
上一主题 HTML 标签 下一主题 HTML 元素
  • 使用社交账号登录,本站支持
全部评论(0)