实例教程:HTML中会移动的文字

html-css05

实例教程:HTML中会移动的文字,第1张

我们在浏览页面的时候,会看到在页面上移动的文字,文字的移动方向有从左到右、从右到左、从上到下、从下到上等。下面,我们来看看如何使用HTML代码编写会移动的文字吧。

工具/材料

HTML

语法代码

(1)一般使用<marquee></marquee>来设置移动文字,比如我们编写如下代码:

(2)<marquee>会移动的文字</marquee>

预览效果可以发现编写在<marquee></marquee>标签内的文字,会从右边到左边循环移动,如下图所示:

文字移动速度

(1)使用scrollamount来设置文字的移动速度,比如我们编写如下所示代码:

<marquee scrollamount=16>快点,快点</marquee>

<marquee scrollamount=12>等等我</marquee>

(2)预览效果

可以看到scrollamount的数值越大,移动的速度就会越快,如下图所示:

设置文字移动的方向

(1)direction在英文上是方向的意思,同样使用direction来设置文字的移动方向,方向可以设置为左、右、上、下等等,编写如下代码:

<marquee direction=left>文字从右边向左边</marquee><P>

<marquee direction=right>从左边向右边移</marquee>

(2)预览效果

可以看到当direction=left时,文字从右边向左边,当direction=right时,文字从左边向右边,如下图所示:

文字循环的次数

(1)一般来说文字是默认无限次循环的,下面,我们来看看如何指定文字的循环次数吧。使用loop来设置文字的循环次数,比如编写代码如下:

<marquee loop=3 >文字只会循环三次</marquee>

(2)预览效果

可以在浏览器上看到,文字只会循环三次,如下图所示:

文字对齐

在HTML中的文字对齐功能,使用align属性来设置,属性值可以为top、Middle、button,比如我们编写如下所示的代码:

(2)预览效果

然后在浏览器中预览效果,可以看到文字向上对齐,如下图所示:

移动面积

(1)设置会移动的文字范围,比如文字在长为多少,宽为多少的区域内移动,比如我们编写如下代码:

<marquee height=40 width=50% bgcolor=pink>在区域内移动的文字</marquee>

(2)预览效果

在浏览器中可以看到文字在高为40,宽为浏览器一半的区域内移动,且区域的颜色为粉红色,如下图所示:

延时

(1)设置文字的运行速度,让文字可以时而快,时而慢地做运动,编写代码如下所示:

(2)预览效果

在浏览器中预览效果,可以看到文字先做快速度,然后做慢速度,如下图所示:

<!DOCTYPE html>声明为html5文档,有助于浏览器正确显示网页 <html>元素是html页面的根元素 <head>元素包含了文档的元数据,如定义网页编码格式 <title>元素描述了文档的标题 <body>元素包含了可见的页面内容 <h1>元素定义一个大标题 <p>元素定义一个段落 注:在浏览器的页面上使用键盘的F12按键开启调试模式,就可以看到组成标签 “HTML 标签”和“HTML 元素”通常是描述同样的意思,但是严格来说,一个HTML元素包含了开始标签和结束标签。只有body区域才会在浏览器中显示。 标题是通过<h1>-<h6>标签来定义的,字号逐渐减小。 HTML链接是通过标签<a>来定义的,在href中指定链接的地址。 图像是通过<img>来定义的,图像的名称和尺寸是以属性的形式来提供的。 HTML文档由HTML元素定义。

课程设置中都有项目实战,

第一阶段移动前端制作基础(HTML5+CSS3基础)

第二阶段移动前端交互基础(JS+JQ+Ajax)

第三阶段移动前端综合开发(H5+C3+jQ Mobile+bootstrap+zepto)

第四阶段项目实训

课程的安排和讲课老师占很大部门的。

兄弟连软件学院毕备

HTML 教程

HTML 教程

阅读(17962.4k) 收藏 赞(1524) 分享

手册简介

HTML 指超文本标签语言。 HTML 是通向 WEB 技术世界的钥匙。 在 W3Cschool 的 HTML 教程中,您将学习如何使用 HTML 来创建站点。 HTML 非常容易学习!你会喜欢它的!

手册说明

HTML是现在世界通用的超文本标记语言,通过它,可以实现图片、链接、音乐以及程序等等多种元素。现如今,HTML已经是程序员必须掌握的一项基本功。

如果您想要更快、更系统地学会HTML,您最好采用边学边练的学习模式:HTML微课

如果您觉得HTML的学习难度较高,不易理解,建议您采用视频教程进行学习:HTML视频课程

学完本教程之后,W3Cschool推荐您进行实战练习:HTML实战

1477036444719391

HTML发展史

HTML没有1.0,因为关于它的初版存在争议,1995年HTML 2.0面世,1997年由国际官方组织W3C推出了HTML 3.2以及HTML 4.0标准,后面W3C(万维网联盟)也渐渐变成Web技术领域的权威,经过漫长的演变,2014年,HTML 5标准最终面世。

HTML 2.0——1995年11月,RFC 1866发布

HTML 3.2——1997年1月14日,W3C发布推荐标准

HTML 4.0——1997年12月18日,W3C发布推荐标准

HTML 4.01——1999年12月24日,W3C发布推荐标准

HTML 5——2014年10月28日,W3C发布推荐标准

HTML结构

HTML的结构一般包括<head>标签和<body>标签,<head>和<body>这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容,它本身不作为内容来显示,但影响网页显示的效果。<body></body>当中是网页实际显示的内容,正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的指针,通过点击,可以很方便地获取新的网页,这是HTML获得广泛推广运用最重要的原因之一,而由这些相互之间存在关联的页面组成的有机集合便是网站。

究竟HTML为什么会被普及?这就要归功于互联网的高速发展,对于编程语言的需求直线上升。而HTML5具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性,HTML越来越受到人们的喜爱。

HTML5编辑规范

1、文件拓展名默认使用htm或者html,便于操作系统或者程序辨认文件,而图片则基本上存为gif或jpg

2、浏览器默认忽视回车符,不过为了方便阅览,人们还是会习惯地在写完一段代码后进行回车

3、标记符号用尖括号括起来,带斜杠的元素表示该标记说明结束,大多数标记符必须成对使用,用以说明起始和结束。

4、必须使用半角而不是全角字符

5、HTML注释<!--注释内容-->的内容不给予显示。

除了这本手册,你还可以参考

《HTML验证》

《HTML实例》

《HTML测验》

《HTML实战》

《HTML参考手册》

开始学习HTML

接下来,你可以打开这本教程,先了解html的基本概念,然后一个一个地掌握HTML标签、HTML注释、HTML框架的用法,并且参考借鉴一些优秀的网站,通过浏览器的“查看源代码”功能来了解别人写的HTML代码结构。

HTML对于系统环境配置要求一点也不高,基本上,你只需要有一台电脑就够了。