HTML属性就是HTML元素的附加信息。
所有的HTML元素都有存在相应属性;
属性是为了告知浏览器该元素的有关附加信息;
一般来说,属性是在该元素的开始标签(start tag)内标记出来的;
绝大部分情况属性是以name="value"
的形式进行标记。
href属性存在于<a>
标签,在HTML链接元素(HTML Link Element)中,用来描述该元素的链接地址。更多关于链接元素的属性可以在HTML参考手册中查到。
<a href="https://zhuanfou.com">这是一个链接</a>
src属性存在于是<img>
标签,在HTML图像元素(HTML Image Element)中,用来描述该图像元素引用的图像地址。更多关于图像元素的属性可以在HTML参考手册中查到。
<img src="https://logo.zhuanfou.com/zhuanfou-logo.png">
width与height属性是用来定义HTML元素的宽度与高度,单位可以是像素,也可以是百分比形式。下面以图像元素为例。
<img src="https://logo.zhuanfou.com/zhuanfou-logo.png" width="98" height="36">
alt属性是用来定义图像元素的可替换文本(alternative text),所谓的可替换文本即图片加载失败情况下所显示的文本。图片加载失败的原因不只一种,图片不存在也会导致加载失败,alt属性就是在这些图片加载失败的情况下有用。此外,alt属性也起到了对图片内容的描述作用,让搜索引擎更加理解图片的内容。
<small> 下面的图片地址是故意写错,这是一个不存在的图片地址, <br>主要是为了展示alt属性是如何工作的。 </small> <hr> <img src="https://logo.zhuanfou.com/zhuanfou-6-6-6.png" alt="该图片不存在">
style属性是用来定义每一个元素的样式内容。之后会在CSS教程中进一步学习利用style属性来定义样式。
<p style="color:red;">这段落被设置成字体为红色。</p>
title属性是用来定义<p>
元素在被鼠标悬停时显现出的文本内容。如下列所示,当鼠标悬停在那段段落文本上,则会弹出title属性的内容,即“I'm a jerk!”这段文本。
<p title="I'm a jerk!"> 把鼠标放在这段话上面不动,待会就会弹出“I'm a jerk!”,即title属性内容。 </p>
对于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>