HTML标签属性大全 HTML标签属性大全总结-编程技术-雀饶网

一、HTML标签属性的基本概念

HTML（超文本标记语言）是构建网页的基础。标签是HTML的基本组成单位，用于标记网页中的不同元素，如<html>、<head>、<body>等都是标签。而标签属性则是HTML标签所拥有的额外信息，它们提供标签的更多信息，帮助改变标签的行为或外观。属性通常以名称/值对的形式出现，键表示属性的名称，值则表示属性的值，属性名和值之间用等号连接，值被引用在引号内（可以是单引号或双引号），并且属性一般出现在HTML标签的开始标签中。例如，<p class="article" id="intro">这是一个段落。</p>，这里的class和id就是属性，它们与相应的值（article和intro）一起用于定义段落标签的外观和行为。

biaoqian

二、常见HTML标签属性介绍

id属性
- 定义：为HTML元素指定一个唯一的标识符（ID）。每个ID在一个HTML文档中必须是唯一的，就像元素的身份证号一样。
- 用途：它主要用于CSS（层叠样式表）和JavaScript中，以便精确地引用和修改该元素。例如，在CSS中可以使用#id名的形式来为具有特定id的元素设置样式，在JavaScript中可以通过document.getElementById('id 名')来获取该元素并进行操作。
- 示例：<div id="main-content">这里是主要内容</div>，在CSS中可以写#main - content{background - color: blue;}来将这个<div>元素的背景色设置为蓝色。
class属性
- 定义：用于为HTML元素指定一个或多个类名（classname）。
- 用途：类名用于CSS和JavaScript中，以便为具有相同类名的元素指定样式或添加行为。一个元素可以有多个类名，用空格隔开。
- 示例：<p class="highlight important">这是一个重要的高亮段落。</p>，在CSS中可以定义.highlight{color: yellow;}和.important{font - weight: bold;}来使这个段落的文字颜色为黄色且加粗。
style属性
- 定义：允许直接在元素上应用CSS样式，这被称为行内样式。
- 用途：虽然方便，但通常不推荐在生产环境中过度使用，因为它会增加HTML文档的复杂性和维护难度。
- 示例：<span style="color: red; font - size: 16px;">这是一个红色的、16像素大小的文字。</span>
title属性
- 定义：为元素提供额外的信息，这些信息通常会在鼠标悬停在元素上时显示为工具提示。
- 示例：<a href="#" title="这是一个链接的描述">点击这里</a>，当鼠标悬停在这个链接上时，就会显示“这是一个链接的描述”。
src属性（用于图像和媒体标签）
- 定义：指定图像或媒体文件（如<img>标签中的图片、<video>和<audio>标签中的视频和音频文件）的URL地址。
- 示例：<img src="image.jpg" alt="图片描述">，这里的src指定了要显示的图片的路径为image.jpg 。
alt属性（用于图像标签）
- 定义：定义图像的替代文本。当图像不能正常加载时，浏览器会显示这个替代文本。
- 示例：<img src="broken.jpg" alt="这是一张风景图">，如果broken.jpg 无法加载，浏览器就会显示“这是一张风景图”。
href属性（用于超链接标签）
- 定义：指定链接的URL地址。
- 示例：<a href="https://www.example.com"> 访问示例网站</a>，点击这个链接就会跳转到https://www.example.com 。
target属性（用于超链接标签）
- 定义：定义文档在何处打开链接。常见的值有_self（在自身窗口打开，默认值）和_blank（在新窗口打开）。
- 示例：<a href="https://www.example.com" target="_blank">在新窗口访问示例网站</a>，点击这个链接会在新的浏览器窗口或标签页中打开目标网站。

三、HTML重要标签属性分类及示例

文本相关标签属性
- 段落标签<p>
  - 属性：除了常见的id、class、style外，曾经有align属性（在HTML5中已被废弃，现在应用CSS控制文本对齐），它可以设置段落的对齐方式，如left（左对齐）、center（居中对齐）、right（右对齐）等。
  - 示例：<p align="center">这是一个居中对齐的段落。</p>（虽然不推荐这种用法，但这是之前的用法示例）。
- 标题标签<h1> - <h6>
  - 属性：主要有id、class、style。这些属性可以用于为标题设置样式或者进行JavaScript操作。例如，可以通过id属性为某个特定的标题设置独特的样式，或者通过class属性为一组标题设置相同的样式。
  - 示例：<h1 id="main - title" class="big - title">主标题</h1>，在CSS中可以针对#main - title或者.big - title进行样式设置，如#main - title{color: green;}和.big - title{font - size: 30px;}。
- 文本格式化标签（如<strong>、<em>等）
  - 属性：同样具有id、class、style属性。<strong>标签通常以粗体显示强调文本，<em>标签通常以斜体显示强调文本，通过这些属性可以进一步定制它们的样式。
  - 示例：<strong class="highlight - strong" style="color: red;">这是强调的粗体文字</strong>。
图像相关标签属性（<img>）
- src属性：这是图像标签最重要的属性，用于指定图像的来源路径。路径可以是相对路径（如/根路径、./同级路径、../上一级路径）或者绝对路径（完整的URL地址）。
- alt属性：当图像无法显示时，会显示这个属性定义的替代文本。这对于无障碍访问（例如屏幕阅读器为视障用户阅读网页内容）非常重要。
- width和height属性：用于指定图像的宽度和高度，单位为像素（px）。设置这两个属性可以在图像加载前预留空间，避免页面布局的抖动。
- title属性：鼠标悬停在图像上时显示的提示信息。
- 示例：<img src="logo.png" alt="网站标志" width="100" height="50" title="这是我们的网站标志">。
超链接相关标签属性（<a>）
- href属性：定义链接的目标地址，可以是网页地址、文件地址、锚点（#加元素的id）或者其他协议（如mailto:用于邮件链接、tel:用于电话链接等）。
- target属性：决定链接在何处打开，_self（默认，在当前窗口打开）、_blank（在新窗口打开）等。
- title属性：鼠标悬停时显示的提示信息。
- 示例：<a href="https://www.example.com" target="_blank" title="访问示例网站">示例网站</a>。
表格相关标签属性（<table>、<tr>、<th>、<td>）
- <table>标签属性
  - border属性：用于设置表格边框的宽度，单位为像素。例如，border = "1"会给表格添加1像素宽的边框。
  - cellpadding属性：设置单元格内内容与单元格边框之间的距离，单位为像素。
  - cellspacing属性：设置单元格与单元格之间的距离，单位为像素。
  - width和height属性：可以设置表格的整体宽度和高度。
  - align和valign属性：分别用于设置表格在页面中的水平对齐方式（如left、center、right）和单元格内容的垂直对齐方式（如top、middle、bottom）。不过在HTML5中，更推荐使用CSS来控制这些对齐方式。
- <tr>、<th>、<td>标签属性：也可以使用id、class、style属性来进行样式设置，例如为某一行或者某一个单元格设置独特的样式。
- 示例：

<table border="1" cellpadding="5" cellspacing="2" width="500" height="300" align="center">
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr> 
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

表单相关标签属性（<form>、<input>、<select>、<textarea>、<button>）
- <form>标签属性
  - action属性：指定表单数据提交的目标地址，通常是一个服务器端脚本的URL。
  - method属性：定义表单数据的提交方式，常见的值有get（将数据附加在URL后面发送，适用于少量非敏感数据）和post（将数据包含在请求体中发送，适用于大量数据或者敏感数据）。
- <input>标签属性
  - type属性：定义输入字段的类型，如text（文本输入框）、password（密码输入框，输入内容会被隐藏）、checkbox（复选框）、radio（单选框）、file（文件选择框）、submit（提交按钮）、reset（重置按钮）等。
  - name属性：为输入字段命名，在表单提交时，这个名称会与输入的值一起被发送到服务器端。
  - value属性：设置输入字段的初始值，对于submit和reset按钮，这个值就是按钮上显示的文字。
  - placeholder属性：在输入框中显示的提示性文字，当输入框获得焦点时，提示文字会消失。
  - required属性：表示这个输入字段是必填的，如果用户没有填写内容就提交表单，浏览器会给出提示。
  - readonly属性：设置输入字段为只读，用户不能修改其中的值。
  - disabled属性：使输入字段不可用，用户不能对其进行操作。
  - size属性：设置输入框的显示宽度，单位为字符数。
  - maxlength属性：对于text和password类型的输入框，设置用户最多可以输入的字符数。
- <select>标签属性
  - name属性：与<input>标签的name属性类似，用于在表单提交时标识这个选择框。
  - multiple属性：如果设置了这个属性，用户可以选择多个选项（默认情况下只能选择一个）。
- <textarea>标签属性
  - name属性：表单提交时的标识。
  - rows和cols属性：分别设置文本域的行数和列数，用于控制文本域的显示大小。
  - maxlength属性：设置文本域中最多可以输入的字符数。
- <button>标签属性
  - type属性：可以是submit（提交按钮）、reset（重置按钮）或者button（普通按钮，可以通过JavaScript为其添加自定义行为）。
  - value属性：对于submit和reset按钮，这个值就是按钮上显示的文字。
- 示例：

<form action="submit.php"  method="post">
  <input type="text" name="username" placeholder="请输入用户名" required>
  <input type="password" name="password" placeholder="请输入密码">
  <input type="checkbox" name="remember" value="yes">记住我
  <input type="submit" value="登录">
  <input type="reset" value="重置">
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option> 
  </select>
  <textarea name="message" rows="5" cols="30"></textarea>
  <button type="button" onclick="alert('这是一个普通按钮')">点击我</button>
</form>

四、HTML标签属性的详细用法与注意事项

属性的使用语法
- 在HTML标签中，属性应该紧跟在标签名后面，多个属性之间用空格隔开。例如：<a href="https://www.example.com" target="_blank" title="示例网站">链接</a>。属性名和属性值之间用等号连接，并且属性值需要用引号（单引号或双引号都可以）括起来。如果属性值本身包含引号，需要使用不同类型的引号来避免冲突。例如：<input type='text' value="It's a test">。
注意大小写
- 虽然HTML标签和属性名是大小写不敏感的，但按照惯例，属性名称和值通常使用小写。这样做有助于保持代码的一致性和可维护性，也符合一些代码规范和开发最佳实践。例如，<div ID="main - content">虽然在语法上是正确的，但推荐写成<div id="main - content">。
属性值的引号
- 始终为属性值加引号是一个良好的习惯。如果属性值没有加引号，在某些情况下可能会导致解析错误。例如，<input type=text>可能会在某些浏览器或者解析器中出现问题，而<input type="text">则能保证正确解析。
已废弃属性的处理
- 随着HTML的发展，一些属性已经被废弃。例如，<p>标签的align属性在HTML5中已被废弃，现在应该使用CSS来控制文本的对齐方式。对于这些废弃的属性，如果在较新的HTML版本中继续使用，虽然可能仍然会在一些浏览器中起作用，但不符合现代Web开发的最佳实践，并且可能在未来的浏览器更新中不再被支持。所以，应该及时将这些用法转换为推荐的替代方式，如使用CSS样式来实现相同的效果。例如，对于段落的对齐，可以使用CSS的text - align属性：<p style="text - align: center;">这是一个居中对齐的段落。</p>或者在外部CSS文件中定义.center - para{text - align: center;}，然后给<p>标签添加class="center - para"。

五、HTML冷门但实用的标签属性汇总

<abbr>标签的title属性
- 定义与用法：<abbr>标签全称是abbreviations，表示缩写。title属性可以为缩写提供完整的解释。当鼠标悬停在缩写上时，会显示title属性中的内容。
- 示例：<abbr title="HyperText Markup Language">HTML</abbr>，鼠标悬停在“HTML”上时，会显示“HyperText Markup Language”。
<sup>和<sub>标签
- 定义与用法：<sup>标签表示上标，<sub>标签表示下标。它们可以用于数学公式、化学方程式、脚注等场景。
- 示例：在表示数学公式x<sup>2</sup>中，“2”会显示为x的上标；在化学方程式H<sub>2</sub>O中，“2”会显示为H和O的下标。
<progress>标签的max和value属性
- 定义与用法：<progress>标签用于创建进度条。max属性定义进度条的最大值（通常为100，表示100%），value属性定义当前的进度值。
- 示例：<progress max="100" value="60"></progress>会显示一个进度为60%的进度条。
<area>标签（用于图像映射）的属性
- 定义与用法：<area>标签的shape属性可以设置点击热区的形状（如rect表示矩形、circle表示圆形等），coords属性根据shape的不同设置点击热区的坐标（对于矩形是左上角和右下角的坐标，对于圆形是圆心坐标和半径），href属性设置点击热区后跳转的链接或者执行的操作。
- <abbr>标签的title属性
  定义与用法： <abbr>标签全称是abbreviations，表示缩写。title属性可以为缩写提供完整的解释。当鼠标悬停在缩写上时，会显示title属性中的内容。
  示例：
```
<abbr title="HyperText Markup Language">HTML</abbr> 
```
  鼠标悬停在“HTML”上时，会显示“HyperText Markup Language”。
  <sup>和<sub>标签
  定义与用法： <sup>标签表示上标，<sub>标签表示下标。它们可以用于数学公式、化学方程式、脚注等场景。
  示例：
  - 在表示数学公式x<sup>2</sup>中，“2”会显示为x的上标；
  - 在化学方程式H<sub>2</sub>O中，“2”会显示为H和O的下标。
  <progress>标签的max和value属性
  定义与用法： <progress>标签用于创建进度条。max属性定义进度条的最大值（通常为100，表示100%），value属性定义当前的进度值。
  示例：
```
<progress max="100" value="60"></progress> 
```
  会显示一个进度为60%的进度条。
  <area>标签（用于图像映射）的属性
  定义与用法： <area>标签的shape属性可以设置点击热区的形状（如rect表示矩形、circle表示圆形等），coords属性根据shape的不同设置点击热区的坐标（对于矩形是左上角和右下角的坐标，对于圆形是圆心坐标和半径），href属性设置点击热区后跳转的链接或者执行的操作。
  示例：
```
<img src="map.png"  usemap="#map" alt="地图"> 
<map name="map"> 
  <area shape="rect" coords="0,0,100,50" alt="区域1" href="area1.html">  
  <area shape="circle" coords="150,100,30" alt="区域2" href="area2.html">  
</map> 
```
  在这个示例中，点击地图上的矩形区域会跳转到area1.html ，点击圆形区域会跳转到area2.html 。
  以上就是HTML中一些冷门但实用的标签及其属性的详细介绍。这些标签虽然不常用，但在特定场景下能发挥重要作用，帮助开发者创建更加丰富和互动的网页。