HTML 属性


2021年12月29日, Learn eTutorial
1754

在本 HTML 教程中,您将学习有关 HTML 属性的所有内容。我们还将讨论 HTML 中最常用的属性。

什么是 HTML 属性? 

属性定义了元素的额外特性或属性,例如图片的宽度和高度。属性总是在开始标签(或开标签)中提供,通常由名称/值对组成,例如 name="value"。属性值必须始终用引号括起来。

  • HTML 属性是传达有关元素更多信息的特殊词语,或者说属性是 HTML 元素的修饰符。
  • 每个元素或标签都可以有指定该元素行为的特性。
  • 属性应始终与开始标签结合使用。
  • 属性应始终与其名称和值的组合相关联使用。
  • 属性的名称和值是区分大小写的,W3C 建议它们仅以小写形式表示。
  • 可以将多个属性添加到一个 HTML 元素中,但它们之间必须有空格。

语法


<element attribute_name="value">content</element>
 

示例


<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <h1>This is Style attribute</h1> 
    <p style  = " height: 50px; color: blue " > It will add style property in element</p> 
    <p style  = " color: red " > It will change the color of content</p> 
</body> 
</html> 

 
HTML - Introduction

HTML 中最常用的属性

  • href 属性

    使用 <a> 标签定义超链接。href 属性定义了当点击标签内容时链接指向的页面的 URL。

    
    <a href=”url of target”> content<a>
  • src 属性

    要在 HTML 页面中嵌入图像,请使用 <img> 元素。src 属性指定将要显示的图片的位置。

    
    <img src=”source”>
  • width 和 height 属性 

    width 和 height 属性也应包含在标签中,它们指定图像或其他元素的宽度和高度。

    
    <img src=”source” width=”size” height=”size”> 
  • style 属性 

    style 属性用于向元素应用样式,例如颜色、字体、大小和其他选项。

    
     <p  red”>Sample text</p>
    
  • id 属性 

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

    
    <p id="infoText">This is a paragraph.</p>
    
  • class 属性 

    class 属性用于以与 id 属性相同的方式识别项目。但是,与 id 不同,class 属性在文档中不必是唯一的。这意味着您可以将同一个 class 应用于文档中的多个组件。

    
    <p class="infoText">This is a paragraph.</p>
    
  • title 属性 

    title 属性用于提供有关元素或其内容的描述性文本。

    
    <abbr title="World Wide Web Consortium">W3C</abbr
    

全局属性是什么意思?

HTML 全局属性是所有 HTML 元素共享的属性。标准和非标准元素都支持全局特性。全局特性可以应用于所有组件;但是,它们可能对其中一些没有影响。

HTML 事件属性有哪些?

当浏览器对用户活动作出反应时,就会发生事件。例如,如果您点击提交按钮,浏览器将显示一个信息框。HTML5 中有几个事件特性,可以使用诸如 JavaScript 之类的计算机语言来激活。

窗口事件属性

窗口事件与窗口对象相关联,并且只能与 <body> 标签一起使用。常用的窗口事件有

  • onafterprint – 仅在文档打印后执行脚本。
  • onbeforeprint – 仅在文档打印前执行脚本。
  • onbeforeunload – 仅在文档卸载前执行脚本。
  • onerror – 仅在发生错误时执行脚本。
  • onhashchange – 仅在网页 URL 中的锚点部分更改时执行脚本。
  • onload – 仅在网页完全加载后执行脚本。
  • onmessage – 仅在发生消息事件时执行脚本。
  • onoffline – 仅在网络连接断开且浏览器开始脱机工作时执行脚本。
  • ononline – 仅在浏览器开始在线工作时执行脚本。
  • onpagehide – 仅在当前网页被隐藏时执行脚本,例如用户已离开当前网页。
  • onpageshow – 仅在当前网页获得焦点时执行脚本。
  • onpopstate – 仅在窗口的活动历史记录更改时执行脚本。
  • onresize – 仅在窗口调整大小时执行脚本。
  • onstorage – 仅在 Web 存储更新时执行脚本。
  • onunload – 仅在当前网页卸载或窗口关闭时执行脚本。

表单事件属性

当用户在表单内执行操作时(例如提交表单或选择输入字段),就会发生表单事件。表单事件可以与任何元素一起使用,但它们最常与 HTML 表单元素相关联。

  • onblur : 仅在表单元素失去焦点时执行脚本。
  • onchange : 仅在元素的值更改时执行脚本。
  • onfocus :仅在元素获得焦点时触发事件。
  • oninput :仅在用户向元素输入内容时执行脚本。
  • oninvalid :仅在元素不满足其预定义约束时执行脚本。
  • onreset :仅在用户重置表单元素值时触发事件。
  • onsearch :仅在搜索字段接收到某些输入时触发事件。
  • onselect :仅在用户选择了一些文本时触发事件。
  • onsubmit :仅在提交表单时触发事件。

键盘事件属性

当用户与键盘交互时,会发生键盘事件。

  • onkeydown :仅在用户按下键盘上的一个键时触发事件。
  • onkeypress :仅在用户按下的键显示某个字符时触发事件。
  • onkeyup :仅在用户释放当前按下的键时触发事件。

鼠标事件属性

  • onclick :仅在鼠标点击元素时触发事件。
  • ondblclick : 仅在元素上发生鼠标双击时触发事件。
  • onmousedown : 仅在元素上按下鼠标按钮时触发事件。
  • onmousemove: 仅在鼠标指针移过元素时触发事件。
  • onmouseout :仅在鼠标移出元素时触发事件。
  • onmouseover :仅在鼠标移到元素上时触发事件。
  • onmouseup :仅在释放鼠标按钮时触发事件。
  • onwheel :仅在鼠标滚轮在元素上向上或向下滚动时触发事件。

剪贴板事件属性

  • oncopy :仅在用户将内容复制到系统剪贴板时触发事件。
  • oncut :仅在元素的内容被剪切并复制到剪贴板时触发事件。
  • onpaste :仅在用户在元素中粘贴某些内容时触发事件。