• HTML中name和class，id的区别和联系

    在HTML中，name、class和id是用于标识和选择元素的属性。

    区别：

    • name属性：用于标识表单元素，特别是在提交表单时，用于识别表单数据。name属性可以在同一表单中的多个元素中重复使用。
    • class属性：用于为一个或多个元素指定一个或多个类名。类名是用来组织样式和脚本的，可以在不同元素间共享。一个元素可以有多个类，类名之间用空格分隔。
    • id属性：用于为一个元素指定唯一的标识符。每个id只能在文档中出现一次，用于唯一标识某个特定的元素。

    联系：

    • name和id：它们都用于对某个元素进行唯一标识，但name属性在表单中使用更频繁，用于提交表单数据；而id属性通常用于唯一标识某个特定的元素，可以通过JavaScript或CSS选择器来选择元素。
    • class和id：它们都可以被用来选中特定的元素，但class属性可以应用于多个元素，用于为它们添加相同的样式或脚本行为；而id属性用于唯一标识一个元素，适合针对特定元素进行样式和脚本操作。

    总结：name属性用于标识表单元素；class属性用于为一个或多个元素指定类名，以便共享样式和脚本；id属性用于唯一标识一个特定的元素，方便选择和操作。

    以下是一个HTML代码示例，展示了name、class和id属性的使用方法：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>示例title>
    5. 		<style>
    6. 			.highlight {
    7. 				background-color: yellow;
    8. 			}
    9. 		style>
    10. 	head>
    11. 	<body>
    12. 		<form action="submit.php" method="POST">
    13. 			
    14. 			<input type="text" name="username" placeholder="用户名">
    15. 			<input type="password" name="password" placeholder="密码">
    16.  
    17. 			
    18. 			<p class="highlight">这段文字具有highlight类。p>
    19. 			<p>这段文字没有任何类名。p>
    20.  
    21. 			
    22. 			<div id="container">
    23. 				<p>这是一个带有ID的容器。p>
    24. 			div>
    25. 		form>
    26.  
    27. 		<script>
    28. 			// 使用name属性选择元素
    29. 			const usernameInput = document.getElementsByName('username')[0];
    30. 			const passwordInput = document.getElementsByName('password')[0];
    31. 			console.log(usernameInput, passwordInput);
    32.  
    33. 			// 使用class属性选择元素
    34. 			const highlightedElements = document.getElementsByClassName('highlight');
    35. 			console.log(highlightedElements);
    36.  
    37. 			// 使用id属性选择元素
    38. 			const containerDiv = document.getElementById('container');
    39. 			console.log(containerDiv);
    40. 		script>
    41. 	body>
    42. html>

    运行结果：

  • 相关阅读:
    C++学习笔记——链表基础算法
    oracle19c单机应用补丁-缺少包导致失败
    [C++]多态是如何调用不同的函数对象的？
    k8s--基础--20--污点和容忍度
    高薪程序员&面试题精讲系列138之如何生成分布式ID？如何生成全局唯一ID？你了解雪花算法吗？
    CrossOver2024中文免费版虚拟机软件
    ElasticSearch安装为Win11服务
    PgSQL-安全加固实践-如何设置非全零监听
    EOS的共识机制与区块生成
    Cookie基本使用 [JavaWeb][Servlet]
  • 原文地址：https://blog.csdn.net/m0_74293254/article/details/132895181