如何在 HTML 和 CSS 中添加点赞按钮

17 Mar 2025 | 6 分钟阅读

在本文中，我们将学习如何使用 HTML 和 CSS 添加点赞按钮。我们将通过各种示例，结合库、代码等来解释这篇文章。

HTML

HTML 代表超文本标记语言。HTML 是使用最广泛的标记语言，我们使用各种命令（称为标签）来标记网页上的内容。每个HTML 标签都指定了浏览器在网页上显示为文本的某些操作。 HTML 是构建和设计网页的标准语言。 HTML 的最新版本是 HTML5。

CSS

CSS 代表层叠样式表。 CSS 由万维网联盟 (W3C) 于1997 年开发，旨在为网页提供样式信息。它是一种所有浏览器都支持的演示定义语言。层叠一词指的是当网页上出现冲突的样式规则时，样式是如何应用的。它为网站设计师提供了对 HTML 页面演示的更大控制，因为他们可以使用样式来设置网页的各种元素，如列表、边框、边距、表格等。

CSS 代表层叠样式表。层叠样式表是一种通过添加样式来控制网页布局的强大方法。层叠样式表将表单的内容与其演示文体分离，提高了内容的可访问性，并提供了更大的灵活性。通过这种分离，可以从一个位置对所有文档进行全局更改，从而降低了复杂性。

层叠样式表有四种类型

使用 HTML 和 CSS 创建点赞按钮

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
Facebook like button
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.select {
width: 80%; 
padding:20px; 
border: 2px solid red; 
 }
body {
background-color: pink;
           }
p {
color: red;
font-size: 20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}
</style>                    
</head>
<body>
<div class="select">
<h2> Example: </h2>
<h1> Create Facebook like button </h1>
<a title="Like this on Facebook" 
href="https://#/plugins/like.php?href=http://eyeclarity.com.au&
  
layout=standard&
  
show_faces=false&
  
width=450&
  
action=like&
  
colorscheme=light&" >
  <img title= "Facebook like Button"
        
src="like.png" 
         alt="" 
        
height ="50" 
        
width ="50" align="center" />
</a>
</div>
</body>
</html>

输出

此示例的输出如下所示

在上图中，我们可以看到一个 Facebook 点赞按钮，当我们点击它时，会显示下一个页面，在那里我们可以点赞该页面。网页的输出如下所示

用于在 HTML 中添加点赞按钮的 Facebook 开发工具包

点赞按钮，HTML5 属性： 使用 HTML 5 属性，您可以更改点赞按钮的默认属性。

HTML5 属性	描述
data-action	它可以是 like（默认）或 recommended（推荐）。
data-color scheme	颜色方案用于按钮本身之外的任何文本。它可以是 light（浅色，默认）或 dark（深色）。
data-href	它包含网页的 URL。
data-layout	选择插件可用的不同布局之一。它可以是 default（默认）、button_count（按钮计数）、button（按钮）或 box_count（盒子计数）。
data-share	它指定是否在点赞按钮旁边包含分享按钮，true（真）或 false（假，默认）。
data-size	按钮提供 2 种尺寸，即 large（大）和 small（小，默认）。

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>

body {
background-color: pink;
	}
	.select {
		margin: 40px;
		width: 60%; 
		height: 300px; 
		padding: 30px; 
		border: 2px solid green; 
		}
p {
color: red;
font-size:20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}
i {
color: red;
}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>

<iframe src="https://#/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&share=true&height=35&appId" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</body>
</html>

输出

此示例的输出如下所示

示例 2

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
body {
background-color: pink;
	}
	.select {
		margin: 40px;
		width: 60%; 
		height: 300px; 
		padding: 30px; 
		border: 2px solid green; 
		}
p {
color: red;
font-size:20px;
}
h1 {
color: blue;
}
h2 {
color: red;
}
b {
color: green;
}

</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<iframe src="https://#/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=74&layout=box_count&action=like&size=large&share=true&height=65&appId" width="74" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
</body>
</html>

输出

此示例的输出如下所示

心形符号的 HTML 代码

我们也可以在我们的网站和应用程序中使用心形符号作为点赞按钮。在 HTML 中，我们可以使用多种心形符号代码。通过使用这些 HTML 代码，我们可以为用作网站和应用程序点赞按钮的心形符号创建各种设计。

符号	名称代码	十进制代码	十六进制代码	描述
♥	&hearts;	♥	♥	心形符号
❤		❤	❤	心形符号
❥		❥	❥	心形符号

让我们举一个例子来创建像心形代码一样的点赞按钮。

示例 1

<! DOCTYPE html>
<html>
<head>
<title> HTML code for heart symbol
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
.select {
	width: 80%; 
	padding: 20px; 
		
		border: 2px solid red; 
		}
		body {
		background-color: black;
		}
		p {
		color: red;
		font-size:20px;
		}
		h1{
		color: green;
		}
		h2 {
		color: red;
		}
		b {
		color: green;
		}
</style>		
<body>
<div class = "select">
<h1> Example </h1>
<h2> Using HTML Code create heart symbol used as a like button </h2>
<p> ♥ <b> design 1 </b> </p> <br> 
<p> ❤ <b> design 2 </b> </p> <br>
<p> ❥ <b> design 3 </b> </p> <br>
</div>
</body>
</html>

输出

此示例的输出如下所示

使用 HTML 和 CSS 中的库创建点赞按钮

在 HTML 和 CSS 中，我们可以使用外部“Font Awesome 图标库”来为网站和应用程序创建点赞按钮。我们可以在 HTML 的 <head> 部分使用 <link> 标签包含此库。

语法

<head>
	<title> ...... </title>
	<link rel ="stylesheet" type="text/css" href ="url of CSS file">
</head>

示例

<head>
	<title> ...... </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

在上面的示例中

rel 属性用于指定包含 <link> 标签的文档与包含样式的文档之间的关系。 rel 属性的值是“stylesheet”。

href 属性用于指定被链接文档的 URL。 href 属性的值是包含 CSS 规则的外部样式表的 URL。 URL 可以是绝对路径或相对路径。

例如： "https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css"

让我们使用 Font Awesome 图标库进行一些示例来创建点赞按钮。

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
Font Awesome Icons
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.select {
width: 80%; 
padding:20px; 
border: 2px solid red; 
 }
body {
background-color: black;
	}
p {
color: red;
font-size:20px;
}
h1 {
color: green;
}
h2 {
color: red;
}
b {
color: green;
}
i {
color: red;
}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<h1> Create like button using <b> fa fa-heart library </b> </h1>
<i class="fa fa-heart"> </i> <br>
<i class="fa fa-heart" style="font-size: 24px"> </i> <br>
<i class="fa fa-heart" style="font-size: 36px;"> </i> <br>
<i class="fa fa-heart" style="font-size: 48px; color: red"> </i> <br>
</div>
</body>
</html>

输出

示例 2

<! DOCTYPE html>
<html>
<head>
<title> Font Awesome Icons </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.select {
		width: 80%; 
		padding:20px; 
		border: 2px solid red; 
		}
		body {
		background-color: black;
		}
		p {
		color: red;
		font-size: 20px;
		}
		h1 {
		color: green;
		}
		h2 {
		color: green;
		}
		b {
		color: green;
		}
		i {
		color: red;
		}
</style>		
</head>
<body>
<div class="select">
<h2> Example: </h2>
<p>like icon used on a button : </p>
<button style="font-size: 24px"> Button <i class="fa fa-heart"> </i> </button>
<p> Unicode: </p>
<button> <i style="font-size:24px" class="fa">? </i> </button>
</div>
</body>
</html>

输出

以下是给定示例的输出

使用 HTML 和 CSS 的点赞/取消点赞按钮

示例

<! DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  font-size: 50px;
  cursor: pointer;
  user-select: none;
}
.fa:hover {
  color: darkblue;
}
p {
 color: darkblue;
 }
</style>
</head>
<body>
<center>
<p>Click on the like button for (like/dislike):</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
</center>
<script>
function myFunction(x) {
  x.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>

输出：以上程序的输出如下

要点赞该页面，我们可以点击下面的按钮

要取消点赞该页面，我们可以点击下面的按钮

下一个主题RSA 加密算法

← 上一个下一个 →

如何在 HTML 和 CSS 中添加点赞按钮

HTML

CSS

示例 1

用于在 HTML 中添加点赞按钮的 Facebook 开发工具包

示例 1

示例 2

心形符号的 HTML 代码

示例 1

使用 HTML 和 CSS 中的库创建点赞按钮

示例 1

示例 2

使用 HTML 和 CSS 的点赞/取消点赞按钮

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

如何在 HTML 和 CSS 中添加点赞按钮

HTML

CSS

示例 1

用于在 HTML 中添加点赞按钮的 Facebook 开发工具包

示例 1

示例 2

心形符号的 HTML 代码

示例 1

使用 HTML 和 CSS 中的库创建点赞按钮

示例 1

示例 2

使用 HTML 和 CSS 的点赞/取消点赞按钮

示例

相关帖子

C++ 语言的优缺点

夏季

Affinity Photo vs Pixelmator iPad

市场细分的优缺点

招聘的优缺点

在职培训的优缺点

周长公式是什么

什么是 NVMe

Adobe InDesign 的用途

谁发明了笔记本电脑

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器