Href = # # # là gì và tại sao nó được sử dụng?

Trên nhiều trang web tôi thấy các liên kết có href="#". Nó có nghĩa là gì? Cái này được dùng để làm gì?

Về siêu liên kết:

Việc sử dụng chính của thẻ neo - <a></a>- là siêu liên kết . Điều đó về cơ bản có nghĩa là họ đưa bạn đi đâu đó. Các siêu liên kết yêu cầu thuộc hreftính, bởi vì nó chỉ định một vị trí.

Băm:

Hàm băm - #trong một siêu liên kết chỉ định id phần tử html mà cửa sổ sẽ được cuộn.

href="#some-id"sẽ cuộn đến một phần tử trên trang hiện tại, chẳng hạn như <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"sẽ đi đến site.comvà cuộn đến id trên trang đó.

Di chuyển lên trên cùng:

href="#"không chỉ định tên id, nhưng có một vị trí tương ứng - trên cùng của trang. Nhấp vào một neo với href="#"sẽ di chuyển vị trí cuộn lên trên cùng.

Xem bản demo này.

Đây là hành vi dự kiến ​​theo tài liệu w3.

Giữ chỗ siêu liên kết:

Một ví dụ trong đó một giữ chỗ siêu liên kết có ý nghĩa nằm trong các bản xem trước mẫu. Trên các bản trình diễn trang đơn cho các mẫu, tôi thường thấy <a href="#">rằng thẻ neo là một siêu liên kết, nhưng không đi đến đâu cả. Tại sao không để hreftrống tài sản? Một thuộc tính trống hrefthực sự là một siêu liên kết đến trang hiện tại. Nói cách khác, nó sẽ gây ra làm mới trang. Như tôi đã thảo luận, href="#"cũng là một siêu liên kết và gây ra cuộn. Do đó, giải pháp tốt nhất cho giữ chỗ siêu liên kết thực sự href="#!"Ý tưởng ở đây là hy vọng không có yếu tố nào trên trang với id="!"(ai làm vậy!?) Và siêu liên kết do đó không đề cập gì - vì vậy không có gì xảy ra.

Về thẻ neo:

Một câu hỏi khác mà bạn có thể tự hỏi là "Tại sao không bỏ tài sản href?". Một câu trả lời chung mà tôi đã nghe là hreftài sản là bắt buộc, vì vậy nó "nên" có mặt trên các neo. Điều này là sai! Các hrefbất động sản chỉ được yêu cầu cho một neo để thực sự trở thành một siêu liên kết! Đọc cái này từ w3. Vì vậy, tại sao không bỏ nó cho giữ chỗ? Trình duyệt hiển thị kiểu mặc định cho các thành phần và sẽ thay đổi kiểu mặc định của thẻ neo không có thuộc tính href. Thay vào đó, nó sẽ được coi như văn bản thông thường. Nó thậm chí còn thay đổi hành vi của trình duyệt liên quan đến yếu tố này. Thanh trạng thái (dưới cùng của màn hình) sẽ không được hiển thị khi di chuột trên một neo mà không có thuộc tính href. Tốt nhất là sử dụng giá trị giữ chỗ trên neo để đảm bảo nó được coi là siêu liên kết.

Xem bản demo này thể hiện sự khác biệt về phong cách và hành vi.

Đặt biểu tượng "#" làm href cho một cái gì đó có nghĩa là nó không trỏ đến một URL khác, mà là một id hoặc thẻ tên khác trên cùng một trang. Ví dụ:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

Tuy nhiên, nếu không có id hoặc tên thì nó sẽ "không ở đâu."

Đây là một câu hỏi tương tự khác hỏi HTML Neo với 'name' hoặc 'id'?

Đó là một liên kết liên kết đến hư không về cơ bản (nó chỉ thêm "#" vào URL). Nó được sử dụng cho một số lý do khác nhau. Chẳng hạn, nếu bạn đang sử dụng một số loại JavaScript / jQuery và không muốn HTML thực sự liên kết ở bất cứ đâu.

Nó cũng được sử dụng cho các neo trang, được sử dụng để chuyển hướng đến một phần khác của trang.

Thật không may, việc sử dụng phổ biến nhất <a href="#">là bởi các lập trình viên lười biếng, những người muốn các phần tử được mã hóa không phải là siêu liên kết có thể nhấp, hoạt động giống như các neo, nhưng họ không thể được thêm vào cursor: pointer;hoặc tạo :hoverkiểu cho một lớp cho các phần tử không liên kết của họ và ngoài ra quá lười biếng để thiết lập hrefđể javascript:void(0);.

Vấn đề với điều này là một <a href="#" onclick="some_function();">hoặc một lỗi khác chắc chắn kết thúc với một lỗi javascript và một neo với lỗi javascript onclick luôn kết thúc theo sau nó href. Thông thường, điều này kết thúc là một bước nhảy khó chịu lên đầu trang, nhưng trong trường hợp các trang web sử dụng <base>, <a href="#">được xử lý như <a href="[base href]/#">, dẫn đến một điều hướng bất ngờ. Nếu bất kỳ lỗi có thể đăng nhập nào được tạo ra, bạn sẽ không thấy chúng trong trường hợp sau trừ khi bạn bật nhật ký liên tục.

Nếu một phần tử neo được sử dụng như là một phần tử neo, thì nó nên được hrefđặt thành javascript:void(0);vì mục đích suy giảm duyên dáng .

Tôi chỉ lãng phí hai ngày để gỡ lỗi một chuyển hướng trang bất ngờ ngẫu nhiên mà chỉ cần làm mới trang và cuối cùng đã theo dõi nó xuống một chức năng nâng cao sự kiện nhấp chuột của một <a href="#">. Thay thế #bằng javascript:void(0);cố định nó.

Điều đầu tiên tôi làm vào thứ Hai là thanh trừng dự án của tất cả các trường hợp <a href="#">.

Danh sách không có thứ tự thường được tạo ra với mục đích sử dụng chúng làm menu, nhưng một limục danh sách là văn bản. Vì mục danh sách lilà văn bản, con trỏ chuột sẽ không phải là một mũi tên, mà là "con trỏ tôi". Người dùng đã quen với việc nhìn thấy một ngón tay trỏ cho một con trỏ chuột khi một cái gì đó có thể nhấp được. Sử dụng thẻ neo abên trong lithẻ khiến con trỏ chuột thay đổi thành ngón trỏ. Các ngón tay trỏ tốt hơn rất nhiều để sử dụng danh sách như một menu.

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

Nếu danh sách đang được sử dụng cho menu và không cần liên kết, thì URL không cần phải được chỉ định. Nhưng vấn đề là nếu bạn bỏ hrefthuộc tính, văn bản trong <a>thẻ được xem là văn bản và do đó con trỏ chuột trở lại con trỏ I. Con trỏ I có thể khiến người dùng nghĩ rằng mục menu không thể nhấp được. Do đó, bạn vẫn cần một href, nhưng bạn không cần một liên kết đến bất cứ đâu.

Bạn có thể sử dụng nhiều divhoặc pthẻ cho danh sách menu, nhưng con trỏ chuột cũng sẽ là con trỏ I cho chúng.

Bạn có thể sử dụng nhiều nút được xếp chồng lên nhau cho danh sách menu, nhưng danh sách này có vẻ thích hợp hơn. Và đó có lẽ là lý do tại sao các href="#"điểm đó không được sử dụng trong các thẻ neo bên trong các thẻ danh sách.

Bạn có thể đặt kiểu con trỏ trong CSS, vì vậy đó là một tùy chọn khác. Không href="#"nơi nào có thể chỉ là cách lười biếng để thiết lập một số kiểu dáng.

Vấn đề với việc sử dụng href = "#" cho một liên kết trống là nó sẽ đưa bạn đến đầu trang có thể không phải là hành động mong muốn. Để tránh điều này, đối với các trình duyệt cũ hơn hoặc các tài liệu không phải là HTML5, hãy sử dụng

<a href="javascript:void(0)">Goes Nowhere</a>

Theo như tôi biết thì thường là một trình giữ chỗ cho các liên kết có một số JavaScript được đính kèm với chúng. Điểm chính của liên kết được phục vụ bằng cách thực thi mã JavaScript; các trình duyệt có hỗ trợ JS sau đó bỏ qua mục tiêu liên kết thực. Nếu trình duyệt không hỗ trợ JS, dấu băm về cơ bản sẽ biến liên kết thành không có. Xem thêm JavaScript không phô trương .

Như một số câu trả lời khác đã chỉ ra, aphần tử yêu cầu một hrefthuộc tính và #được sử dụng như một trình giữ chỗ, nhưng nó cũng là một tạo tác lịch sử.

Từ Mạng lưới nhà phát triển Mozilla :

href

Đây là thuộc tính bắt buộc duy nhất cho các neo xác định liên kết nguồn siêu văn bản, nhưng không còn bắt buộc trong HTML5. Bỏ qua thuộc tính này sẽ tạo ra một liên kết giữ chỗ. Thuộc tính href chỉ ra mục tiêu liên kết, một URL hoặc một đoạn URL. Một đoạn URL là một tên đứng trước dấu băm (#), chỉ định vị trí mục tiêu bên trong (ID) trong tài liệu hiện tại.

Ngoài ra, mỗi HTML5 đặc tả :

Nếu một phần tử có thuộc tính no href, thì phần tử đó đại diện cho một trình giữ chỗ cho nơi liên kết có thể được đặt, nếu nó có liên quan, chỉ bao gồm nội dung của phần tử.

Thuộc tính href xác định URL của tài nguyên của một liên kết. Nếu thẻ neo không có thẻ href thì nó sẽ không trở thành siêu liên kết. Thuộc tính href có các giá trị sau:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>