知识库
知识改变命运

HTML不同属性介绍

【上云必备】上云仅¥102/年

HTML属性可以说成是特殊的单词,它们在开始标记中使用,并负责控制元素的行为。它们是HTML元素类型的修饰符。该修饰符可以完成两项工作。它可以修改元素的默认功能,也可以为没有元素就无法正常运行的任何元素提供功能。在语法上,属性被添加到HTML开始标记。已经确定了不同类型的属性。这些包括必需属性,可选属性,标准属性和事件属性。必需的属性是特定元素类型所需的属性,以便函数正常工作。可选属性可用于修改元素类型的默认功能。大量元素类型都支持标准属性,并且事件属性可用于导致元素类型,这些元素类型可以指定在特定情况下运行的脚本。这些属性通常显示为“名称/值”对,并以“ =”(等号)分隔。它们被写在元素名称之后的元素的开始标签中。

不同的HTML属性
让我们看一下不同的属性以及它们如何详细工作。

核心属性
主要使用四个核心属性。命名它们如下:

ID: HTML的此属性可轻松用于唯一标识HTML页面中存在的元素。用户id可以在元素带有id属性作为唯一标识符的情况下使用,从而可以识别元素及其内容,也可以在网页中有两个具有相同名称的元素时使用。ID属性可以帮助轻松识别具有相同名称的元素之间的差异。
标题属性:该属性用于为特定元素提供建议的标题。它取决于载体的表现方式,尽管通常不会在光标越过元素时或在加载元素时将其显示为工具提示来显示它。它还用于解释将鼠标悬停在其上方的元素。行为可能因元素不同而有所不同,通常,其值在加载时或将鼠标指针悬停在其上时显示。
类属性:该属性的关联是通过样式表的元素完成的。用户需要指定元素的类。学习级联样式表时,可以了解有关此属性的更多信息。这里的值也可以是用空格分隔的类名称列表。例如:class =“ className1 className2 className3”
样式属性:使用此属性可以在任何元素中指定级联样式表规则。它可以为HTML元素提供各种级联样式表效果,例如增加字体大小。它还可以更改字体系列和颜色。
在核心属性之后,我们具有一些国际化属性。它们如下:

国际化属性
目录: dir属性可帮助您向浏览器指示文本应遵循的方向。此属性通常可以占用两个值。这些可以是LTR和RTL。LTR表示从左到右,这是默认值,而RTL表示从右到左。在<html>标记中使用此属性时,它将确定在整个文档中应如何表示文本。它也可以仅从标签的内容用于控制文本的方向。
Lang属性:此属性有助于展示文档中使用的主要语言。该属性可以保留在HTML中,以便与HTML的早期版本向后兼容。在新的XHTML文档中,也可以将其替换为XML:lang属性。lang属性的值是ISO-639标准,并且具有两个字符的语言代码。声明语言对于访问应用程序和不同的搜索引擎很重要。
XML-Lang属性:此属性应替代lang属性。XML-lang属性的值必须具有前面提到的国家/地区代码。
除了这些之外,还有许多通用属性,如下所述。

通用属性
对齐属性:当您希望在处理中包含页面的某些元素时,此属性很有用。您可以将对齐方式更改为页面的左,右或中心。所有元素的默认对齐方式设置为向左。可以使用此align属性更改。
Src属性:如果用户需要将图像插入到网页中,则需要将<img>标记与src属性一起使用。我们可以将图像的地址指定为双引号内的属性值。您可以使用以下src属性在网页上添加图片。

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

 

Alt属性:此属性用作备用标签,如果作为<img>标签的主要属性无法显示分配给它的原始值,则该标签可用于显示某些内容。这样可以将图像描述给在编码端使用它的开发人员。如果主图像失败,则可以使用备用图像进行显示。
宽度和高度属性:此属性可用于调整图像的高度和宽度。

Example:
<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html><

 

Href属性:当用户想要定向到任何地址的特定链接时,使用此属性。该属性与<a>标记一起使用。将链接放在要定向的href属性中时,它会链接到<a>标记中显示的文本。当用户单击此文本时,该用户将被重定向到链接的地址。在同一选项卡中打开此页面的默认选项。如果您使用target属性,则可以将其值设置为_blank。这将根据浏览器的配置重定向到另一个选项卡或另一个窗口。
数据属性
HTML还提供了自定义数据属性,可帮助您在HTML标签中添加与您有关的信息。这些不是特定于HTML5的,可以在所有HTML元素上使用。数据-*属性可帮助我们自定义自己的自定义数据属性,它可以将数据私有存储到页面或应用程序中。

为了进行定制,数据分为两个部分:

属性名称:应至少包含一个字符,并且不应包含任何大写字母。也可以使用“ data-”作为该名称的前缀。
属性值:属性的值可以是任何字符串。
data属性的语法如下:

<li data-book-author=”Rabindra Nath Tagore”> Gitanjali </li>

DOM属性
要获取NamedNodeMap对象,应使用HTML DOM中的属性。它将返回节点属性组。NamedNodeMap还表示属性对象的集合,可以通过索引号进行访问。该索引号从0开始。

使用的语法是:node.attributes

返回的值是存在于节点集合中的NamedNodeMap对象。如果用户使用的是Internet Explorer 8或任何早期版本,则attribute属性将返回任何元素的所有可能的属性,这可能导致超出预期的值。

Example:
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

全局属性
HTML还提供了可以与任何HTML元素一起使用的全局属性。属性如下。

快捷键:它指定一个快捷键来激活或集中于任何元素。
翻译:如果使用此属性,则它指定是否要翻译元素的内容。
类:它为一个元素指定一个或多个类名称。
标题:此属性指定有关元素的额外信息。
Contenteditable:为了指定内容是否可编辑,可以使用此属性。
Tabindex:它指定元素的制表顺序。
目录:它指定元素任何内容的文本方向。
拼写检查:用户可以明确指定是否必须检查拼写和语法。
可拖动的:指定元素是否应该可拖动。
Dropzone:指定拖放时是复制,移动还是链接拖动的数据。

事件属性
HTML能够在发生某些事件时触发动作。事件属性可以如下。

Onload:页面加载完成后触发。

Onmessage:可以说是触发消息时运行的脚本。

上载:这是更新Web存储区域时要运行的脚本。

Onerror:发生错误时运行此脚本。

Onpagehide:当用户可以离开页面导航时,可以使用此脚本。

表单事件属性
这些事件由HTML表单内的动作触发。

Onblur:元素失去焦点后立即触发。

Onchange:元素值更改后立即触发。

Oncontextmenu:触发上下文菜单时运行。

Onfocus:元素获得焦点后立即触发。

Oninput:当元素收到输入时,脚本必须运行。

Onsearch:当用户在搜索字段中输入内容时触发。

Oninvalid:输入的元素无效时触发。

关键事件属性
Onkeydown:按下键时触发。

onkeypress:按下键时触发。

Onkeyup:当用户释放密钥时触发。

鼠标事件属性
Onclick:当鼠标单击元素时触发。

Onmousemove:当鼠标指针悬停在元素上方时,将触发该事件。

Onmouseip:从元素上方释放鼠标按钮时触发。

Onwheel:当鼠标滚轮在元素上向上或向下滚动时触发

拖动事件属性
Ondrag:拖动元素时触发。

Ondragleave:当元素离开有效的放置目标时,将运行脚本。

Ondrop:拖放元素时触发

滚动:在滚动元素的滚动条时运行脚本。

赞(0)
未经允许不得转载:知鸟云知识库 » HTML不同属性介绍
分享到: 更多 (0)

惟创新者进,惟创新者强,惟创新者胜

云服务器域名注册