深入了解HTML属性:探索其作用与用法

agoin2023-11-14 15:15:2542

所有HTML元素都可以具有属性

属性提供有关元素的其他信息

始终在开始标记中指定属性,如:<p name="value">content</p>

属性通常以名称/值对的形式出现,如:name =“value”

href属性

href属性用来定义一个连接地址

<a href="https://www.cainiaoya.com/qianduan/html/html-shuxing.html">欢迎来到小白博客<a>

src属性

有几个元素会有src属性,这里会介绍img元素的src属性,后面的课程会介绍其他的。图像源的文件名会在img的src属性中定义:

<img src="images/logo.png">

height和width属性

用于定义元素的高和宽,一般常见用于定义图像的宽高。

<img src="images/jixinagwu.png">
<br>
<img src="images/jixinagwu.png" height="195px" width="248px">

alt属性

alt属性用于定义图片的注释,当图片源失效时显示的是alt定义的信息,也可以用于帮助听网页的用户(比如盲人)听到图片的信息。

<!--  test.png这张图片失效了 (这里是HTML注释 浏览器不会显示这里,后面的课程会介绍) -->
<img alt="菜鸟教程" src="images/test.png">

style属性

用于定义元素的样式:颜色,字体,大小等等。

<span style="color:red;">菜鸟教程</span>

lang属性

lang属性定义于html元素中,声明网页使用的语言,对于网页起到辅助性作用,对屏幕阅读器使用者,和搜索引擎非常重要。

<!DOCTYPE html>
<html>
<body>

<h2>欢迎来到小白博客</h2>
</body>
</html>

title属性

lang属性会定义元素的一个title,当鼠标悬停在该元素上时,作为展示工具。

<p title="小白博客">小白博客</p>

我们的建议

注意:W3C的规范建议小写字母来书写属性

注意:HTML5的属性值是不在要求属性值用引号来包含,但你在书写的时候应该加上引号来包含属性值

例如:这是推荐的做法:

<a href="https://www.xiaobaiboke.com">小白博客</a>

这是不推荐的做法:

<a href=https://www.xiaobaiboke.com>菜鸟教程</a>

这是错误的做法(因为属性值存在一个空格,没有引号包含就不是一个整体了):

<span name=Jim Tomas>小白博客</a>

属性值用单引号还是双引号

如果属性值本身含有双引号,那就使用单引号。 例如:

<span name='my name is "Jim"'>小白博客</a>

反之:

<span name="my name is 'Jim'">小白博客</a>

网友评论