html 中 <a>标签里面的id 和 name 有啥区别

Posted 2023-04-12

1、不同用途:

名字是主要用于获取信息的表单字段提交表单,作为服务器端可以与服务器交互的html元素的标记数据,如输入、选择、文本区域、框架元件(iframe,框架,窗口名称,用于指定目标在其他框架或窗口),按钮等等。

而id和class主要是通过css控制设置了id和class的元素的样式。

2、用法不同：

定义了id的元素在css中用id选择器“#”来选择，例如 <h1 id="center">My First Heading</h1>，css中用#center 来控制其样式，定义了class的元素在css中用类选择器“.”来选择。

例如：<h1 class="center"> My First Heading </h1>，css中用 .center 来控制其样式。

扩展资料：

关于ID和Name的一些注意事项

当然，页面上HTML元素的Name属性也可以充当一个小ID，因为在DHTML对象树中，我们可以使用文档。获取页面的getElementsByName包含所有指定的对象名称元素数组。

2. 如果n(n>， 1)个HTML元素有相同的ID怎么办?如何在DHTML对象中引用它们?如果我们使用ASPX页面，则不太可能发生这种情况，因为aspnet进程不允许处理ID不惟一的ASPX页面，因此将抛出一个异常并不能正确呈现页面。

3、对于动态页面，我们坚持要我重复那个IE怎么办?此时，我们仍然可以使用document。getelementbyid来获取对象，但是我们只能获取其ID在HTML呈现中第一个出现的对象中重复的对象。

而这时重复的ID会在引用时自动变成一个数组，id重复的元素按Render的顺序依次存在于数组中。

参考技术A id与name的作用，作为标签的标识符，基本上是一样的。name是老方法，id是在name基础上发明的，后来才有的。
一般来说，js中使用ID，asp或php中使用name。比如，在js中要引用这个标签，就需要这个ID是什么，而asp中要得到这个值，就会用name来获取。
除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 标签外,id 都可用.

name只用于APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META. (name有时有自己的用途)

table 中 name 无定义, 应当用 id.

有些标签,可以同时有name和id.

在一个HTML网页中,id是唯一的,即只有某一个标签,或某一个块的标识符是这个id.

id 在HTML中的作用:

(1) 用id选择相应的style sheet(风格).
(2) <A ..> 链接的目的地
(3) 脚本语言用它找目的地(找该id的标签)
(4) 作为名字,用于声明某OBJECT element
(5) 作为一个标签或块的区分标致(用于从HTML网页中取出数据放入数据库或把HTML翻译成别的格式,等情况).本回答被提问者和网友采纳 参考技术B id：
顾名思义就是一个id，当你在同一个页面的别的地方插入链接想连到标有id地方的时候，这时候这个id就派上用场了
name:
就是给某个标签定义一个名字

打个简单的比方，你叫什么名字就是name，但是如果有人要给你寄东西，光填你名字是不够的，得有你的地址，这时候这个id就相当于地址 参考技术C name出来的早一些，id是后来出来的
定义id可以写css而用name不能定义css
在js上应用应该基本上差不多 参考技术D 一般JS是通过ID操作DOM的。
而程序是通过name获取value的。

小白的前端之路-HTMl

HTML——超文本标记语言

HTMl里面有标签，标签又分为单标签和双标签，也分为行级元素和块级元素

标签是用<>包裹起来的，而且必须要有<>，否则会直接显示在浏览器上面哦

现在介绍一下常用标签

<div class="box1" id="box1" style="background: skyblue;">我是div</div><p class="box1" id="box2" style="background: skyblue;">我是段落标签</p><ul style="background: skyblue;">
 <li style="background: skyblue;">有序列表</li> <li style="background: skyblue;">有序列表</li> <li style="background: skyblue;">有序列表</li></ul><ol style="background: skyblue;">
 <li style="background: skyblue;">无序列表</li> <li style="background: skyblue;">无序列表</li> <li style="background: skyblue;">无序列表</li></ol><h1 style="background: skyblue;">标题字大小（h1~h6</h1>
<h2 style="background: skyblue;">标题字大小（h1~h6</h2> <h3 style="background: skyblue;">标题字大小（h1~h6</h3> <h4 style="background: skyblue;">标题字大小（h1~h6</h4> <h5 style="background: skyblue;">标题字大小（h1~h6</h5> <h6 style="background: skyblue;">标题字大小（h1~h6</h6> <center style="background: skyblue;">居中文本</center>
<form style="background: skyblue;">定义供用户输入的表单</form>
<div>&lt;</div><!-- 小于号 -->
<div>&gt;</div><!-- 大于号 --><span style="background: skyblue;">我是span标签</span><i style="background: skyblue;">斜体字</i><em style="background: skyblue;">斜体字(强调)</em><b style="background: skyblue;">粗体字</b>
<strong style="background: skyblue;">粗体字(强调)</strong> <a href="http://www.baidu.com" style="background: skyblue;">超链接</a> <sub style="background: skyblue;">下标</sub>
<sup style="background: skyblue;">上标</sup>
<del style="background: skyblue;">加删除线</del>

<!-- 单标签 -->
<br><!-- 换行 --> <hr><!-- 水平线 -->
<img style="width: 25px;height: 25px;" src="../JavaScript/12.24cookie/img/4a6de48586f54845b67f8d3d874dacf5.png"><!-- 定义图像 --><!-- 图片是可以设置宽高的哦 -->

我们还要区分行级元素和块级元素，块级元素的特点是独占一行，可以设置宽高，行级元素不能设置宽高，如果需要设置宽高，需要添加属性，以后再说。

这些全部都是行级标签

<img style="width: 25px;height: 25px;" src="../JavaScript/12.24cookie/img/4a6de48586f54845b67f8d3d874dacf5.png"><!-- 定义图像 --><!-- 图片是可以设置宽高的哦 --><span style="background: skyblue;">我是span标签</span><i style="background: skyblue;">斜体字</i><em style="background: skyblue;">斜体字(强调)</em><b style="background: skyblue;">粗体字</b>
<strong style="background: skyblue;">粗体字(强调)</strong> <a href="http://www.baidu.com" style="background: skyblue;">超链接</a> <sub style="background: skyblue;">下标</sub> 
<sup style="background: skyblue;">上标</sup> 
<del style="background: skyblue;">加删除线</del>

标签的话大部分常用的已经整理出来了，但是h5的标签我没有整理，你们可以自行百度，还有一些标签内的属性，在这里可以简单讲解一下。

还有一些标签的属性需要你们继续探索哦，alt和title等等一系列属性。

HTML标签常用的一定要记熟哦，明天接着讲解css属性，我会整理出来大部分属性的，剩下的需要你们自行探索，解锁成就！！

我会持续更新小白前端之路，请继续关注哦~