HTML属性

jerkzhang

Apr 15, 2020

以下关于HTML属性的介绍来自于《专否HTML教程 - HTML属性》：

HTML属性就是HTML元素的附加信息。

HTML属性

所有的HTML元素都有存在相应属性；
属性是为了告知浏览器该元素的有关附加信息；
一般来说，属性是在该元素的开始标签（start tag）内标记出来的；
绝大部分情况属性是以 name="value" 的形式进行标记。

href 属性

href属性存在于<a>标签，在HTML链接元素（HTML Link Element）中，用来描述该元素的链接地址。更多关于链接元素的属性可以在HTML参考手册中查到。

<a href="https://zhuanfou.com">这是一个链接</a>

运行一下

src 属性

src属性存在于是<img>标签，在HTML图像元素（HTML Image Element）中，用来描述该图像元素引用的图像地址。更多关于图像元素的属性可以在HTML参考手册中查到。

<img src="https://logo.zhuanfou.com/zhuanfou-logo.png">

运行一下

width 与 height 属性

width与height属性是用来定义HTML元素的宽度与高度，单位可以是像素，也可以是百分比形式。下面以图像元素为例。

<img src="https://logo.zhuanfou.com/zhuanfou-logo.png" width="98" height="36">

运行一下

alt 属性

alt属性是用来定义图像元素的可替换文本（alternative text），所谓的可替换文本即图片加载失败情况下所显示的文本。图片加载失败的原因不只一种，图片不存在也会导致加载失败，alt属性就是在这些图片加载失败的情况下有用。此外，alt属性也起到了对图片内容的描述作用，让搜索引擎更加理解图片的内容。

<small>
    下面的图片地址是故意写错，这是一个不存在的图片地址，
    <br>主要是为了展示alt属性是如何工作的。
</small>

<hr>

<img src="https://logo.zhuanfou.com/zhuanfou-6-6-6.png" alt="该图片不存在">

运行一下

style 属性

style属性是用来定义每一个元素的样式内容。之后会在CSS教程中进一步学习利用style属性来定义样式。

<p style="color:red;">这段落被设置成字体为红色。</p>

运行一下

title 属性

title属性是用来定义<p>元素在被鼠标悬停时显现出的文本内容。如下列所示，当鼠标悬停在那段段落文本上，则会弹出title属性的内容，即“I'm a jerk!”这段文本。

<p title="I'm a jerk!">
把鼠标放在这段话上面不动，待会就会弹出“I'm a jerk!”，即title属性内容。
</p>

运行一下

专否建议：HTML 属性请使用小写字母

对于HTML属性，虽然大写字母与小写字母是等价的，但是强烈推荐使用小写字母。

专否建议：HTML 属性的值一定要加引号

HTML 属性的值虽然有时不加引号也能行的通，但是这不可靠，因此强烈推荐一定要加引号。

不推荐的写法：

<a href=https://zhuanfou.com>专否</a>

推荐的写法：

<a href="https://zhuanfou.com">专否</a>

是使用双引号还是单引号呢？

HTML属性使用引号时，单引号与双引号是等价的。不过大多数情况下，大家更习惯使用双引号。

在一些特殊情况，比如属性的值中也存在引号，这时就要根据实际情况灵活使用单引号或者双引号。如下列所示。

<p title='zhuan "666" fou'>属性的值中存在双引号，则选用单引号</p>
<p title="zhuan '666' fou">属性的值中存在单引号，则选用双引号</p>

运行一下