1、class
定义元素的类名,用于引用CSS样式或JavaScript脚本中的元素。class属性是一种非常重要的属性,它用于指定元素的类名(classname)。通过使用class属性,可以为HTML元素分配一个或多个类名,这些类名之后可以在CSS中被引用来应用样式,或者在JavaScript中用于操作DOM。
1)单个类名
可以为元素分配单个类名,用于指定特定的样式规则。
<div class="container"></div>
2)多个类名
元素可以同时拥有多个类名,各个类名之间用空格分隔。可以将多个CSS规则组合应用到同一个元素上。
<div class="container highlight"></div>
2、id
指定元素的唯一ID,用于CSS样式和JavaScript。id属性是一种全局属性,可以用在任何HTML标签上。id属性为元素指定了一个唯一的标识符(ID)。这个ID在整个文档中必须是唯一的,用于标识单独的元素。
<div id="uniqueId">这里是内容</div>
3、style
直接在元素上应用CSS样式。style属性用于为单个HTML元素指定内联样式。通过使用style属性,可以直接在元素上应用CSS(层叠样式表)规则,而无需使用外部或内部样式表。这种方式允许开发者快速应用样式,但一般推荐使用外部或内部样式表进行样式管理,因为这有助于保持内容与表现的分离,使得样式的维护和管理更加高效。
<p style="color: blue; font-size: 20px;">这是一个带有内联样式的段落。</p>
4、title
提供有关元素的额外信息,通常以工具提示的形式显示。title 属性是一个非常实用的特性,它为元素提供额外的信息。这个属性通常被用于提供关于元素的更多细节,这些细节在用户将鼠标悬停在元素上时显示。title 属性可以被添加到几乎所有的 HTML 标签上,但最常见的用法是在<a>
、<abbr>
、<iframe>
、<img>
和 <link>
等标签中。
title的用法:
标签 | 用法 |
链接 ( | 为链接提供额外信息,例如说明链接将要带用户前往的内容。 |
缩写 ( | 解释缩写或首字母缩略词的完整形式。 |
图片 ( | 为视觉受损的用户提供图片内容的文本描述,通常与 alt 属性一起使用来增强无障碍性。
|
表格单元 ( | 为表格中的数据提供额外信息或上下文。 |
使用示例:
<a href="https://www.example.com" title="访问示例网站">示例网站</a> <abbr title="Hypertext Markup Language">HTML</abbr> <img src="logo.png" alt="公司logo" title="我们的公司logo"> <td title="这是年度总销售额">¥500,000</td>
5、src
src
属性在HTML中用于指定嵌入内容的来源。它是一个常用于<img>
, <script>
, <iframe>
, <audio>
, 和 <video>
标签的属性,用来设置引用外部资源的URL。这个属性的值可以是一个相对URL或一个绝对URL,指向想要嵌入到HTML文档中的资源。
1)<img>
标签
用于在网页中嵌入图像。
<img src="image.jpg" alt="示例图像">
2)<script>
标签
用于在文档中包含JavaScript文件。
<script src="script.js"></script>
3)<iframe>
标签
用于在当前文档中嵌入另一个文档。
<iframe src="page.html"></iframe>
4)<audio>
标签
用于在文档中嵌入音频内容。
<audio src="audio.mp3" controls></audio>
5)<video>
标签
用于在文档中嵌入视频内容。
<video src="video.mp4" controls></video>
6、href
href属性是非常重要的一个属性,它用于指定链接的目的地地址。href
这个名字代表“Hypertext Reference”,即超文本引用。最常见的用法是在<a>
(锚点)标签中,用来创建一个到另一个页面或页面内特定部分的链接。除了在<a>
标签中,href
属性也用于其他几个标签,如<link>
和<base>
标签。
1)<a>
标签中的 href
在<a>
标签中,href属性定义了链接的目标URL,用户点击这个链接后会被导向该URL指定的页面。
<a href="https://www.example.com">Visit Example.com</a>
2)<link>
标签中的 href
在<link>
标签中,href属性用于指定外部资源的位置,常见于引入CSS文件。
<link rel="stylesheet" href="styles.css">
3)<base>
标签中的 href
在<base>
标签中,href属性用于指定网页内所有相对URL的基础URL。<base>
标签如果存在,必须位于<head>
部分中,而且一个文档中最多只能有一个<base>
元素。
<base href="https://www.example.com/">
7、alt
指定图像的替代文本,用于图像无法显示时或辅助技术(如屏幕阅读器)。alt
属性是专门用于 <img>
标签的,其全名为“alternate text”(替代文本)。这个属性的主要作用是提供图像的文本替代,以便在图像无法显示时(比如网速慢或者用户使用的是屏幕阅读器)向用户展示图像的内容或功能。alt
属性对于提高网站的可访问性(Accessibility)至关重要,同时也对搜索引擎优化(SEO)有好处,因为搜索引擎会索引这些替代文本,从而更好地理解网页上的图像内容。
<img src="image.jpg" alt="描述图像的内容">
8、type
type 属性用于指定不同标签的类型,具体表现形式取决于该属性所用的标签。这个属性在多个HTML标签中有着不同的用途和效果。
1)<input>
标签的type属性
<input>
标签的 type 属性定义了用户输入数据的类型。
Type | 描述 |
type="text" | 定义单行的文本输入字段。 |
type="password" | 定义密码字段,输入内容被遮蔽。 |
type="submit" | 定义提交按钮。 |
type="radio" | 定义单选按钮。 |
type="checkbox" | 定义复选框。 |
type="file" | 定义文件选择字段, 允许用户选择一个或多个文件。 |
type="email" | 定义用于电子邮件地址的输入字段。 |
type="date" | 定义日期选择器。 |
<input type="text" name="fullname" placeholder="Enter your full name">
2)其他标签的type属性
<button type="submit">Submit</button>
<script type="application/javascript">
console.log("Hello, world!");
</script>
<embed type="image/jpg" src="image.jpg" width="300" height="200">
<object type="application/pdf" data="file.pdf" width="300" height="200"></object>
9、value
定义输入字段或选项的值。value
属性是一个常用于表单元素(如<input>
、<option>
、<button>
等)的属性,用于定义元素的值。这个值会在表单提交时被发送到服务器。
1)<input>
标签
对于<input>
标签,value属性定义了输入字段的初始(默认)值。这适用于多种<input>
类型,包括text
、email
、hidden
、number
、password
等。
<input type="text" name="username" value="用户名称">
2)<button>
标签
对于<button>
标签,value
属性定义了按钮的值。如果表单被提交,这个值将随按钮名称作为一对键/值发送到服务器。
<button type="submit" name="submit_button" value="submit_value">提交</button>
3)<option>
标签
在<select>
下拉列表中,<option>
标签使用value
属性来定义每个选项的值。如果选项被选中,该值会在表单提交时发送到服务器。
<select name="country">
<option value="USA">美国</option>
<option value="China">中国</option>
<option value="UK">英国</option>
</select>
4)<input type="checkbox">
和<input type="radio">
对于复选框和单选按钮,value
属性用于指定当该选项被选中时,提交到服务器的值。
<input type="checkbox" name="interest" value="music"> 音乐</input>
<input type="checkbox" name="interest" value="sports"> 运动</input>
10、name
定义表单元素的名称,用于表单数据的提交和处理。在HTML中,name
属性是用于指定元素名称的一个属性,它在不同的HTML元素中扮演着不同的角色。name
属性主要用于表单元素(如<input>、<textarea>
、<select>
等),但也可以用于其他元素(如<iframe>
、<meta>
、<a>
等)。在HTML表单中,name
属性的值是非常关键的,因为它定义了表单数据在提交到服务器时使用的名称。
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<input type="submit" value="Submit">
</form>
11、placeholder
placeholder
属性是HTML中输入字段(如 <input>
或 <textarea>
)的一个属性,用于显示在输入字段为空时显示的提示文字。这个提示旨在提供关于该输入字段期望数据类型的指示,或者提示用户应该在字段中输入什么样的信息。当用户开始在输入字段中键入时,placeholder
中的文本会消失。提供输入字段的占位符文本,指示预期的输入类型。
1)<input>
标签使用 placeholder
<input type="text" placeholder="请输入您的姓名">
2)<textarea>
标签使用 placeholder
<textarea placeholder="请在此输入您的消息"></textarea>
12、disabled
HTML标签的 disabled
属性是一个布尔属性,用于指示用户无法与元素交互。当一个元素被设置为 disabled
,它不仅会在视觉上变得不可用(通常是灰色的),而且用户也无法与之交互。只需在需要禁用的元素上添加 disabled
属性。不需要为 disabled
属性指定值,因为它是布尔属性。只要存在,无论其值为何,元素都会被禁用。
<input type="text" disabled>
<button disabled>点击我</button>
13、checked
指定输入元素应该被预选中。checked
是一个HTML属性,用于指定一个 <input>
元素(如单选按钮或复选框)在页面加载时应该被预选(checked
)状态。
<input type="checkbox" name="option" value="value1" checked>
<input type="radio" name="group" value="value2" checked>
14、selected
HTML中,selected
属性是一个布尔属性,用于指定一个 <option>
元素应该在页面加载时被预先选中。这个属性常用在<select>
元素内部的<option>
标签上,以定义哪个选项是默认选中的。当<select>
元素包含多个<option>
子元素时,可以通过在其中一个<option>
元素上使用selected
属性来指定哪个选项应该被默认选中。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes" selected>Mercedes</option>
<option value="audi">Audi</option>
</select>
15、readonly
指示输入字段为只读状态,不能修改。readonly
是 HTML 中用于表单元素的一个属性,它指定输入字段是只读的,即用户不能修改字段中的值。但是,与 disabled
属性不同,只读字段的值会在表单提交时被发送到服务器。这个属性常用于需要向用户显示但不允许用户编辑的信息,如一个确认邮箱地址的字段。
1)只读文本框
<input type="text" name="email" value="user@example.com" readonly>
2)只读多行文本框
<textarea name="message" readonly>这是一段示例文本。</textarea>
16、rel
rel
属性表示链接关系(relationship),用于定义当前文档与被链接文档之间的关系。这个属性主要用在<a>
、<link>
和<area>
标签中。根据不同的rel
值,浏览器和搜索引擎可以以不同的方式处理链接。
1)<a>
标签中的rel
属性
nofollow:用于告诉搜索引擎不要跟踪或者不给链接传递权重。
<a href="https://example.com" rel="nofollow">链接到example.com</a>
noopener:当链接打开一个新窗口(例如,使用target="_blank"
)时,使用rel="noopener"
可以防止新页面对原页面的JavaScript环境的访问,增强安全性。
<a href="https://example.com" target="_blank" rel="noopener">打开example.com</a>
noreferrer:与noopener
类似,noreferrer
还会防止发送HTTP Referer头部,用于增加隐私保护。
<a href="https://example.com" target="_blank" rel="noreferrer">打开example.com</a>
2)<link>
标签中的rel
属性
stylesheet:最常见的用法,用于链接外部CSS文件。
<link rel="stylesheet" href="styles.css">
icon:定义网站的图标(如浏览器标签页图标)。
<link rel="icon" href="favicon.ico" type="image/x-icon">
canonical:指定当前页面的规范URL,用于告知搜索引擎哪个版本是原始或首选版本,避免内容重复的问题。
<link rel="canonical" href="https://example.com/original-page.html">
alternate:用于指定当前文档的另一个语言版本的链接。
<link rel="alternate" hreflang="en" href="https://example.com/english-version.html"> <link rel="alternate" hreflang="fr" href="https://example.com/french-version.html">
preload:指示浏览器预先加载资源,如字体文件、脚本或样式表,以提高页面加载性能。
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>