Web开发：属性

属性

介绍
全局属性
特定元素属性
- 超链接元素 (< a >)
- 图像元素 (< img >)
- 输入元素 (< input >)
- 表单元素 (< form >)
- 表格元素 (< table >)
其他元素
- 段落元素 (< p >)
- 列表元素 (< ul >, < ol >, < li >)
新增的HTML5属性
示例
- 1. id 和 class 属性
- 2. href 和 target 属性
- 3. src 和 alt 属性
- 4. type, placeholder 和 required 属性
- 5. table 的 border, cellpadding 和 cellspacing 属性
- 6. 使用 srcset 和 sizes 属性实现响应式图片
- 7. details 和 summary 创建可折叠内容
- 8. 使用 audio 和 video 标签嵌入媒体

介绍

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>