HTML 属性
- PHPz原创
- 2024-09-04 16:17:23652浏览
HTML 属性是修改 HTML 元素行为的特殊单词。它们在元素的开始标签内使用，可以修改元素的默认功能或提供必要的功能。从语法上讲，属性被添加到 HTML 开始标记中。它们可以分类为必需、可选、标准或事件属性，并以名称-值对的形式编写，在元素的开始标记内用等号“=”分隔。
不同的 HTML 属性
下面给出了不同的 HTML 属性及其详细工作原理：
1.核心属性
主要使用的核心属性有四个：
- ID: 此属性唯一标识 HTML 页面中的元素。当元素带有 ID 属性时，它充当唯一标识符，可以轻松识别该元素及其内容。当网页中有多个同名元素时，这特别有用。
- 标题属性： 此属性提供元素的建议标题。它的行为取决于使用它的上下文，当光标悬停在元素上或加载元素时，它可能会显示为工具提示。当用户将鼠标指针悬停在某个元素上时，它还可以提供有关该元素的附加信息。
- 类属性： 该属性通过指定元素的类将元素与样式表关联起来。在学习级联样式表时可以了解有关此属性的更多信息。类属性的值可以是以空格分隔的类名列表。例如：class=”className1 className2 className3″
- 样式属性： 此属性允许用户为单个元素指定 CSS 规则。通过 style 属性，用户可以将各种 CSS 效果应用于 HTML 元素，例如更改字体大小、字体系列和颜色。
2.国际化属性
- Dir: dir 属性有助于向浏览器指示文本应遵循的方向。该属性可以采用两个值：LTR 和 RTL。 LTR 表示从左到右，这是默认值，而 RTL 表示从右到左。当在 中使用时标签，它决定文本在整个文档中的表示方式。它还可以控制标签内容内文本的方向。
- Lang 属性： 此属性有助于展示文档中使用的主要语言。人们可以在 HTML 中使用它来保持与早期版本的 HTML 的向后兼容性。另外，在新的 XHTML 文档中将其替换为 XML: lang 属性。 lang 属性的值基于 ISO-639 标准，由两个字符的语言代码组成。声明一种语言对于可访问性和搜索引擎正确索引内容非常重要。
- XML-Lang 属性： 此属性倾向于替换 lang 属性。 XML-lang 属性的值必须包含 ISO-639 指定的语言和国家/地区代码。
3.通用属性
- 对齐属性：当您想要在网页上定位某些元素时，此属性非常有用。它允许您更改页面的左对齐、右对齐或居中对齐方式。所有元素的默认对齐方式设置为左侧，但您可以使用align 属性更改它。
-
Src 属性： 当想要在网页中插入图片时，需要使用
属性。带有 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 属性： 此属性用作替代标签，可用于在主要属性（即
）显示某些内容时显示某些内容。标签，无法显示分配给它的原始图像。它可以向在编码端使用它的开发人员描述图像。如果主图像失败，则可以显示备用图像。
- 宽度和高度属性：这些属性可以调整图像的高度和宽度。
示例：
代码：
<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 Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.
4. Data Attribute
HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.
In order to customize, one divides the data into two parts:
- Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
- Attribute Value: Any string value can be associated with the attribute.
The syntax for a data attribute is as follows:
<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>
5. DOM Attribute Property
To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.
The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.
Example:
Code:
<!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
6. Global Attributes
HTML also provides global attributes that can work with any HTML element:
- Accesskey: Specifies a shortcut key to activate or focus on any element.
- Translate: Specifies whether the content of the element is to be translated or not.
- Class: One or more class names for an element are specified.
- Title: Specifies extra information about an element.
- Contenteditable: This attribute can be used to specify whether the content is editable or not.
- Tabindex: Specifies the tabbing order of an element.
- Dir: Specifies the text direction for any content of an element.
- Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
- Draggable: Specifies if an element should be draggable or not.
- Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.
7. Event Attributes
HTML has the ability to trigger actions when some events take place.
- Onload: Fires after the page has finished loading.
- Onmessage: A script that runs when the message is triggered.
- Onstorage: A script that runs when a web storage area is updated.
- Onerror: The script runs when an error occurs.
- Onpagehide: The script can be used when the user navigates away from a page.
8. Form Event Attributes
Actions inside an HTML form trigger these events.
- Onblur：一旦元素失去焦点就会触发。
- Onchange：元素值发生变化时立即触发。
- Oncontextmenu：当触发上下文菜单时运行。
- Onfocus：元素获得焦点后立即触发。
- Oninput: 当元素接收到输入时脚本必须运行。
- Onsearch：当用户在搜索字段中输入内容时触发。
- Oninvalid：当输入的元素无效时触发。
9.关键事件属性
- Onkeydown：按下按键时触发。
- Onkeypress：按下按键时触发。
- Onkeyup：当用户释放按键时触发。
10。鼠标事件属性
- Onclick：当鼠标点击某个元素时触发。
- Onmousemove:当鼠标指针在元素上移动时触发。
- Onmouseip：当鼠标按钮从元素上方释放时触发。
- 滚轮：当鼠标滚轮在元素上向上或向下滚动时触发
11。拖动事件属性
- Ondrag：拖动元素时触发。
- Ondragleave：当元素离开有效的放置目标时运行脚本。
- Ondrop:被拖动的元素被放下时触发
- Onscroll：当元素的滚动条滚动时运行脚本。
结论
HTML 随着时间的推移不断发展，提供了核心、国际化、数据、全局和事件等广泛的属性，使 Web 应用程序和页面更具交互性。与 CSS 相结合，HTML 可以轻松自定义 Web 元素，以创建具有视觉吸引力的 Web 应用程序。
以上是HTML 属性的详细内容。更多信息请关注PHP中文网其他相关文章！