Web开发：属性

介绍

HTML（HyperText Markup Language）属性是用于为HTML元素提供额外信息的特性。每个HTML元素可以具有一个或多个属性，这些属性可以为元素提供额外的信息和行为。

全局属性

这些属性可以应用于所有HTML元素。

1. id: 为元素指定一个唯一的标识符。

   <div id="header">Header Content</div>
   

2. class: 为元素指定一个或多个类名，这些类名可以用于CSS样式和JavaScript操作。

   <p class="intro text-bold">This is a paragraph.</p>
   

3. style: 直接在元素上定义内联样式。

   <div style="color: blue; font-size: 20px;">Styled Text</div>
   

4. title: 为元素提供额外信息，当用户将鼠标悬停在元素上时显示。

   <abbr title="HyperText Markup Language">HTML</abbr>
   

5. data - 属性: 用于存储页面或应用程序的私有自定义数据。

   <div data-user-id="12345">User Info</div>
   

6. accesskey: 为元素定义激活（或聚焦）的快捷键。

   <button accesskey="s">Save</button>
   

7. contenteditable: 指定元素的内容是否可编辑。

   <div contenteditable="true">This is editable content.</div>
   

8. draggable: 指定元素是否可拖动。

   <img src="image.jpg" draggable="true">
   

9. hidden: 隐藏元素。

   <div hidden>This content is hidden.</div>
   

10. lang: 指定元素内容的语言。

    <p lang="en">Hello World!</p>
    

11. spellcheck: 指定是否对元素内容进行拼写检查。

    <textarea spellcheck="true"></textarea>
    

12. tabindex: 指定元素的标签顺序。

    <button tabindex="1">First</button>
    <button tabindex="2">Second</button>
    

特定元素属性

这些属性仅适用于特定的HTML元素。

超链接元素 (< a >)

1. href: 指定链接目标的URL。

   <a href="https://www.example.com">Visit Example</a>
   

2. target: 指定链接的打开方式。

   <a href="https://www.example.com" target="_blank">Open in new tab</a>
   

3. download: 指定链接资源在下载时的文件名。

   <a href="report.pdf" download="AnnualReport.pdf">Download Report</a>
   

4. rel: 定义当前文档与被链接文档之间的关系。

   <a href="https://www.example.com" rel="noopener noreferrer" target="_blank">Visit Example</a>
   

图像元素 (< img >)

1. src: 指定图像的路径。

   <img src="image.jpg" alt="Description of image">
   

2. alt: 提供图像无法显示时的替代文本。

   <img src="image.jpg" alt="A beautiful scenery">
   

3. width 和 height: 指定图像的宽度和高度。

   <img src="image.jpg" alt="A beautiful scenery" width="600" height="400">
   

4. srcset: 提供一个图像集合和其大小，以适应不同的屏幕分辨率。

   <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" alt="Responsive Image">
   

5. 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 >)

1. type: 指定输入字段的类型。

   <input type="text" placeholder="Enter your name">
   

2. name: 指定输入字段的名称，在表单提交时使用。

   <input type="text" name="username">
   

3. placeholder: 提供输入字段的占位符文本。

   <input type="email" placeholder="Enter your email">
   

4. value: 指定输入字段的默认值。

   <input type="text" value="Default Text">
   

5. required: 指示输入字段为必填项。

   <input type="text" required>
   

6. autofocus: 页面加载时自动聚焦于该输入字段。

   <input type="text" autofocus>
   

7. disabled: 禁用输入字段。

   <input type="text" disabled>
   

8. max 和 min: 指定输入字段的最大值和最小值（适用于数字或日期）。

   <input type="number" min="1" max="10">
   

9. maxlength: 指定输入字段的最大字符数。

   <input type="text" maxlength="10">
   

10. pattern: 指定输入字段的正则表达式模式。

    <input type="text" pattern="[A-Za-z]{3}">
    

11. readonly: 指定输入字段为只读。

    <input type="text" readonly>
    

12. step: 指定输入字段的合法数值间隔。

    <input type="number" step="0.01">
    

13. multiple: 允许用户选择多个值（适用于文件输入或电子邮件）。

    <input type="file" multiple>
    

表单元素 (< form >)

1. action: 指定表单提交的URL。

   <form action="/submit-form" method="post">
   

2. method: 指定表单提交的HTTP方法（GET或POST）。

   <form action="/submit-form" method="post">
   

3. enctype: 指定表单数据的编码类型（用于文件上传）。

   <form action="/submit-form" method="post" enctype="multipart/form-data">
   

4. novalidate: 提交表单时禁用HTML5验证。

   <form action="/submit-form" method="post" novalidate>
   

表格元素 (< table >)

1. border: 指定表格边框的宽度。

   <table border="1">
   

2. cellpadding 和 cellspacing: 指定单元格的内边距和单元格之间的间距。

   <table cellpadding="10" cellspacing="5">
   

3. align: 指定表格对齐方式（已废弃，建议使用CSS）。

   <table align="center">
   

4. bgcolor: 指定表格背景颜色（已废弃，建议使用CSS）。

   <table bgcolor="#ff0000">
   

5. summary: 提供表格内容的概要（用于屏幕阅读器）。

   <table summary="This table lists the quarterly sales figures for 2024.">
   

其他元素

段落元素 (< p >)

1. align: 指定段落对齐方式（已废弃，建议使用CSS）。

   <p align="center">Centered Paragraph</p>
   

列表元素 (< ul >, < ol >, < li >)

1. type: 指定有序列表的列表项标记类型。

   <ol type="I">
     <li>First item</li>
     <li>Second item</li>
   </ol>
   

2. start: 指定有序列表的起始编号。

   <ol start="5">
     <li>Item 5</li>
     <li>Item 6</li>
   </ol>
   

3. reversed: 反转有序列表的编号顺序。

   <ol reversed>
     <li>First item</li>
     <li>Second item</li>
   </ol>
   

新增的HTML5属性

1. < details > 和 < summary >: 创建可折叠的内容。

   <details>
     <summary>More Info</summary>
     <p>Here is some additional information.</p>
   </details>
   

2. < audio >: 用于嵌入音频内容。

   <audio controls>
     <source src="audio.mp3" type="audio/mpeg">
     Your browser does not support the audio element.
   </audio>
   

3. < video >: 用于嵌入视频内容。

   <video width="320" height="240" controls>
     <source src="movie.mp4" type="video/mp4">
     Your browser does not support the video tag.
   </video>
   

4. < progress >: 显示任务的完成进度。

   <progress value="70" max="100">70%</progress>
   

5. < 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属性指定视频显示尺寸。