在 HTML 中移动文本
html
html5
HTML Tutorial
HTML Properties
HTML tags
在 HTML 中移动文本也称为滚动文本。我们可以以一定的时间间隔速度向各个方向滚动文本。 标签用于进行下一步操作。文本滚动有 4 个方向，即左方向、右方向、上方向、下方向。通过设置行为属性在封闭区域内移动文本。
实时示例： 假设我们的网站上经常有重要的更新内容。如果内容始终稳定，用户就无法关注该内容，因此为了吸引用户的注意力，我们必须始终滚动更新的内容。根据用户的要求，我们可以指示内容滚动到哪一侧。达到这个要求
为什么我们在 HTML 中使用 CSS？
提供所有页面之间通用的逻辑；我们不再在每个 HTML 页面中编写相同的样式逻辑，而是使用 CSS 文件来编写通用逻辑。并在每个 HTML 页面中使用 包含此 CSS 页面。标签。
Marquee 标签在 HTML 中如何工作？
可以通过应用
语法 #1
<marquee> //some text to move </marquee>
登录后复制
语法#2
<marquee direction=”left or right or up or down”> //some text to move </marquee>
登录后复制
语法#3
<marquee behavior="alternate"> //it makes the text back direction by touching the border of the page. //some text to move </marquee>
登录后复制
语法#4
<marquee direction=”left” scrollamount="5">// scrollamount used to set the scrolling text speed //some text to move </marquee>
登录后复制
在 HTML 中实现移动文本的示例
以下是提到的示例：
示例#1
默认字幕标签
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: green;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee>
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>登录后复制
输出：
说明：正如您在上面的文本中看到的，即使我们没有提及任何方向，它也是从右向左移动的，因此它是默认的选取框标签。
示例#2
选框标签位于正确的方向。
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: maroon;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="right">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>登录后复制
输出：
说明：如上面的文字所示，通过将方向属性设置为右侧，从左向右移动。
示例 #3
顶部方向的字幕
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: blue;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="up">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>登录后复制
输出：
说明：如上面的文字所示，通过将方向属性设置为向上，从下到上移动。
示例#4
底部方向的选框。
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: orange;
text-align: center;
color: white;
font-family: Arial;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="down">
2020 is year bewildered each and every individual of the world due to pandemic COVID-19. This disease is caused by CARONA virus. Till date there is no medicine or vaccine for this disease. So the only option in our hands is to follow instructions strictly announced by World Health Organization. Italy is affected with this virus more worsen because of there is no initial preventive measures in the country. Fight back against the virus every individual should home quarantine. Clean the hands every time if are out from the same place. Strictly say no to hand shake instead respect them back with namaskar. Do not contact any person until state and center curfew is over. Now India also greatly affected by this COVID-19 virus because of foreigners. Who ever come to India from other country they must undergone to quarantine at least 14 days. After finishing quarantine they must go for CARONA test.
</marquee>
</body>
</html>登录后复制
输出：
说明：如上面的文字所示，通过将方向属性设置为向下，从上到下移动。
示例#5
具有行为属性的字幕。
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: lightblue;
text-align: center;
color: brown;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee behavior="alternate">
Hi, I am an alternate proeprty
</marquee>
</body>
</html>登录后复制
输出：
说明：如上面的文字所示，通过将行为属性设置为alternate，通过触摸边框从左到右和从右到左移动。
示例 #6
具有滚动量属性的字幕。
代码：
<!DOCTYPE html>
<html>
<head>
<title>Move Text</title>
<style>
body {
background-color: fuchsia;
text-align: center;
color: white;
font-family: Arial;
border: solid 2px red;
}
</style>
</head>
<body>
<h1>Moving Text with Marquee Tag</h1>
<marquee direction="left" scrollamount="2">
Paramesh
</marquee>
<marquee scrollamount="4">
Amardeep
</marquee>
<marquee scrollamount="6">
Harinath-Rajitha
</marquee>
</body>
</html>登录后复制
输出：
说明：正如您在上面的文字中看到的，从右向左移动的时间不同，因此它们都位于不同的位置。
结论
通过 marquee 标签实现 HTML 中文本的移动。我们可以根据需要对文本进行左、右、上、下移动。此字幕功能主要用于电视频道定期更新以吸引用户注意力。
以上是在 HTML 中移动文本的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
3 周前
By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：死铁路 - 如何驯服狼
3 周前
By DDD
蓝王子：如何到达地下室
3 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
