html属性

分享于 

5分钟阅读

Web开发

  繁體
在本教程中,您将学习如何使用属性为HTML标签赋予更多特性

什么是属性

属性定义元素的其他特征或属性,如图像的宽度和高度,属性总是在开始标签(或开始标签)中指定,通常由名称值对组成,例如,name="value" .属性值应始终用引号括起来。

此外,某些元素需要一些属性,例如,一个 <img> 标记必须包含 srcalt 属性,看一些属性用法的例子:

例子


<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">

在above示例中 src 标签是属性,提供图像路径,href 标记是一个属性,提供链接。

提示: 单引号和双引号都可以用来引用属性值,在属性值本身包含双引号的情况下,需要用单引号将该值包装起来,例如,value='John "Williams" Jr.'

这种属性称为布尔属性,一些常用的布尔属性的例子是 checkeddisabledreadonlyrequired等。

例子


<input type="email" required>
<input type="submit" value="Submit" disabled>
<input type="checkbox" checked>
<input type="text" value="Read only text" readonly>

在接下来的章节中,你将详细了解所有这些元素。

备注: 属性值通常不区分大小写,但是某些属性值除外,如 idclass

通用属性

有一些属性,如 idtitleclassstyle等,可以在大多数html元素上使用,以下部分描述它们的用法。

id属性

id 属性用于为文档中的元素提供唯一的名称或标识符,这使得使用CSS或JavaScript选择元素更加容易。

例子


<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>

备注: id 元素在单个文档中必须是唯一的,同一文档中不能同时命名两个元素 id ,每个元素只能有一个 id

class属性

id 属性,则 class 属性也用于标识元素, 这意味着可以将同一个类应用于文档中的多个元素,如下面的示例所示:

例子


<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>

提示: 自从 class 确定是使用显式宽度还是测量宽度的一种简便方法 class 将应用于所有具有 class

title属性

title 属性用于提供有关元素或它内容的咨询文本,请尝试以下示例以便了解其实际工作方式。

例子


<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
 <img src="images/kites-thumb.jpg" alt="kites">
</a>

提示: 对象的值 title 当用户将鼠标光标放在元素上时,网络浏览器会将属性(即标题文本)显示为工具提示。

style属性

style 属性允许你指定css样式规则,如颜色,字体,边框等,直接在元素中,看看一个示例,看看它是如何工作的:

例子


<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>

相关文章