属性
介绍
HTML（HyperText Markup Language）属性是用于为HTML元素提供额外信息的特性。每个HTML元素可以具有一个或多个属性，这些属性可以为元素提供额外的信息和行为。
全局属性
这些属性可以应用于所有HTML元素。
-
id: 为元素指定一个唯一的标识符。
<div id="header">Header Content</div> -
class: 为元素指定一个或多个类名，这些类名可以用于CSS样式和JavaScript操作。
<p class="intro text-bold">This is a paragraph.</p> -
style: 直接在元素上定义内联样式。
<div style="color: blue; font-size: 20px;">Styled Text</div> -
title: 为元素提供额外信息，当用户将鼠标悬停在元素上时显示。
<abbr title="HyperText Markup Language">HTML</abbr> -
data - 属性: 用于存储页面或应用程序的私有自定义数据。
<div data-user-id="12345">User Info</div> -
accesskey: 为元素定义激活（或聚焦）的快捷键。
<button accesskey="s">Save</button> -
contenteditable: 指定元素的内容是否可编辑。
<div contenteditable="true">This is editable content.</div> -
draggable: 指定元素是否可拖动。
<img src="image.jpg" draggable="true"> -
hidden: 隐藏元素。
<div hidden>This content is hidden.</div> -
lang: 指定元素内容的语言。
<p lang="en">Hello World!</p> -
spellcheck: 指定是否对元素内容进行拼写检查。
<textarea spellcheck="true"></textarea> -
tabindex: 指定元素的标签顺序。
<button tabindex="1">First</button> <button tabindex="2">Second</button>
特定元素属性
这些属性仅适用于特定的HTML元素。
超链接元素 (< a >)
-
href: 指定链接目标的URL。
<a href="https://www.example.com">Visit Example</a> -
target: 指定链接的打开方式。
<a href="https://www.example.com" target="_blank">Open in new tab</a> -
download: 指定链接资源在下载时的文件名。
<a href="report.pdf" download="AnnualReport.pdf">Download Report</a> -
rel: 定义当前文档与被链接文档之间的关系。
<a href="https://www.example.com" rel="noopener noreferrer" target="_blank">Visit Example</a>
图像元素 (< img >)
-
src: 指定图像的路径。
<img src="image.jpg" alt="Description of image"> -
alt: 提供图像无法显示时的替代文本。
<img src="image.jpg" alt="A beautiful scenery"> -
width 和 height: 指定图像的宽度和高度。
<img src="image.jpg" alt="A beautiful scenery" width="600" height="400"> -
srcset: 提供一个图像集合和其大小，以适应不同的屏幕分辨率。
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="Responsive Image"> -
sizes: 当使用srcset时，指定不同显示条件下的图像大小。
<img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(max-width: 600px) 480px, 800px" alt="Responsive Image">
输入元素 (< input >)
-
type: 指定输入字段的类型。
<input type="text" placeholder="Enter your name"> -
name: 指定输入字段的名称，在表单提交时使用。
<input type="text" name="username"> -
placeholder: 提供输入字段的占位符文本。
<input type="email" placeholder="Enter your email"> -
value: 指定输入字段的默认值。
<input type="text" value="Default Text"> -
required: 指示输入字段为必填项。
<input type="text" required> -
autofocus: 页面加载时自动聚焦于该输入字段。
<input type="text" autofocus> -
disabled: 禁用输入字段。
<input type="text" disabled> -
max 和 min: 指定输入字段的最大值和最小值（适用于数字或日期）。
<input type="number" min="1" max="10"> -
maxlength: 指定输入字段的最大字符数。
<input type="text" maxlength="10"> -
pattern: 指定输入字段的正则表达式模式。
<input type="text" pattern="[A-Za-z]{3}"> -
readonly: 指定输入字段为只读。
<input type="text" readonly> -
step: 指定输入字段的合法数值间隔。
<input type="number" step="0.01"> -
multiple: 允许用户选择多个值（适用于文件输入或电子邮件）。
<input type="file" multiple>
表单元素 (< form >)
-
action: 指定表单提交的URL。
<form action="/submit-form" method="post"> -
method: 指定表单提交的HTTP方法（GET或POST）。
<form action="/submit-form" method="post"> -
enctype: 指定表单数据的编码类型（用于文件上传）。
<form action="/submit-form" method="post" enctype="multipart/form-data"> -
novalidate: 提交表单时禁用HTML5验证。
<form action="/submit-form" method="post" novalidate>
表格元素 (< table >)
-
border: 指定表格边框的宽度。
<table border="1"> -
cellpadding 和 cellspacing: 指定单元格的内边距和单元格之间的间距。
<table cellpadding="10" cellspacing="5"> -
align: 指定表格对齐方式（已废弃，建议使用CSS）。
<table align="center"> -
bgcolor: 指定表格背景颜色（已废弃，建议使用CSS）。
<table bgcolor="#ff0000"> -
summary: 提供表格内容的概要（用于屏幕阅读器）。
<table summary="This table lists the quarterly sales figures for 2024.">
其他元素
段落元素 (< p >)
- align: 指定段落对齐方式（已废弃，建议使用CSS）。
<p align="center">Centered Paragraph</p>
列表元素 (< ul >, < ol >, < li >)
-
type: 指定有序列表的列表项标记类型。
<ol type="I"> <li>First item</li> <li>Second item</li> </ol> -
start: 指定有序列表的起始编号。
<ol start="5"> <li>Item 5</li> <li>Item 6</li> </ol> -
reversed: 反转有序列表的编号顺序。
<ol reversed> <li>First item</li> <li>Second item</li> </ol>
新增的HTML5属性
-
< details > 和 < summary >: 创建可折叠的内容。
<details> <summary>More Info</summary> <p>Here is some additional information.</p> </details> -
< audio >: 用于嵌入音频内容。
<audio controls> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> -
< video >: 用于嵌入视频内容。
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> -
< progress >: 显示任务的完成进度。
<progress value="70" max="100">70%</progress> -
< meter >: 显示已知范围内的标量测量。
<meter value="2" min="0" max="10">2 out of 10</meter>
示例
1. id 和 class 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with ID and Class</title>
<style>
.highlight {
background-color: yellow;
}
#main-header {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<h1 id="main-header">Welcome to My Website</h1>
<p class="highlight">This is an important paragraph.</p>
</body>
</html>
分析:
- id:
id="main-header"为元素分配一个唯一的标识符，可以通过CSS或JavaScript直接访问和操作。例如，CSS选择器#main-header用于设置字体大小和颜色。 - class:
class="highlight"为元素分配一个或多个类名，这里用于添加黄色背景色。类名可以在多个元素中复用。
2. href 和 target 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Links</title>
</head>
<body>
<a href="https://www.example.com" target="_blank">Visit Example</a>
</body>
</html>
分析:
- href:
href="https://www.example.com"定义了链接的目标URL。 - target:
target="_blank"指定链接在新标签页中打开。
3. src 和 alt 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Image</title>
</head>
<body>
<img src="image.jpg" alt="A beautiful scenery">
</body>
</html>
分析:
- src:
src="image.jpg"指定图像的路径。 - alt:
alt="A beautiful scenery"提供图像的替代文本，便于图像无法加载时显示，并提高可访问性。
4. type, placeholder 和 required 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Form</title>
</head>
<body>
<form action="/submit-form" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
分析:
- type:
type="email"指定输入字段的类型为电子邮件，这样浏览器可以验证输入格式。 - placeholder:
placeholder="Enter your email"为输入字段提供占位符文本，提示用户应输入的信息类型。 - required:
required指定输入字段为必填项，如果为空将阻止表单提交。
5. table 的 border, cellpadding 和 cellspacing 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Table</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
</tr>
</table>
</body>
</html>
分析:
- border:
border="1"为表格添加1像素宽的边框。 - cellpadding:
cellpadding="10"指定单元格内容与单元格边框之间的间距。 - cellspacing:
cellspacing="5"指定单元格之间的间距。
6. 使用 srcset 和 sizes 属性实现响应式图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Responsive Image</title>
</head>
<body>
<img src="small.jpg"
srcset="small.jpg 320w, medium.jpg 640w, large.jpg 1024w"
sizes="(max-width: 600px) 480px, 800px"
alt="A beautiful scenery">
</body>
</html>
分析:
- srcset: 提供多个图像文件及其对应的宽度，以适应不同的设备分辨率。
- sizes: 指定在不同条件下的图像显示大小，这里定义了在最大宽度为600px的屏幕上，使用480px宽度的图像，其余情况使用800px宽度的图像。
7. details 和 summary 创建可折叠内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Collapsible Content</title>
</head>
<body>
<details>
<summary>More Info</summary>
<p>Here is some additional information that can be toggled.</p>
</details>
</body>
</html>
分析:
- details:
<details>元素用于创建可折叠内容区域。 - summary:
<summary>元素定义可折叠内容的标题，点击标题可以展开或折叠内容。
8. 使用 audio 和 video 标签嵌入媒体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example with Media</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
分析:
- audio:
<audio>元素用于嵌入音频内容，controls属性添加播放控件。 - video:
<video>元素用于嵌入视频内容，controls属性添加播放控件，width和height属性指定视频显示尺寸。