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

html-css07

实例教程: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)预览效果

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

在网页中插入图片html图片代码方法:

步骤:

一、html图片标签语法

<img src="divcss-logo-201305.gif" width="165" height="60" />

img介绍:

src 后跟的是图片路径地址

width 设置图片宽度

height 设置图片高度

二、具体html 图片显示实例

在html源代码中分别插入三张图片,一张原始大、一张将宽度高度改小小、一张将宽度高度改大。

1、实例完整html代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<title>图片插入html 在线演示</title> 

</head> 

 

<body> 

<p>原始大图片</p> 

<p> 

<img src="divcss-logo-201305.gif" width="165" height="60" /> 

</p> 

<p>改小图片</p> 

<p> 

<img src="divcss-logo-201305.gif" width="105" height="30" /> 

</p> 

<p>改大图片</p> 

<p> 

<img src="divcss-logo-201305.gif" width="365" height="120" /> 

</p> 

</body> 

</html>

2、html插入图片实例截图

3、在线演示:

在html网页中显示图片,插入图片,通过使用img标签来实现,通过也可以将图片作为CSS网页背景图片显示插入到Html网页中(css 背景图片)。

HTML标签解释大全

一、HTML标记

标签:!DOCTYPE

说明:指定了 HTML 文档遵循的文档类型定义(DTD)。

标签:a

说明:标明超链接的起始或目的位置。

标签:acronym

说明:标明缩写词。

标签:address

说明:特定信息,如地址、签名、作者、此文档的原创者。

标签:applet

说明:在页面上放置可执行内容。

标签:area

说明:定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。

标签:attribute

说明:以对象的形式代表了 HTML 元素的标签属性或属性。

标签:b

说明:指定文本应以粗体渲染。

标签:base

说明:指定一个显式 URL 用于解析对于外部源的链接和引用,如图像和样式表。

标签:basefont

说明:设置渲染文本时作为默认字体的基础字体值。

标签:bdo

说明:允许作者为选定文本片断禁用双向法则。

标签:bgsound

说明:允许页面带有背景声音或创建音轨。

标签:big

说明:指定内含文本要以比当前字体稍大的字体显示。

标签:blockquote

说明:设置文本中的一段引语。

标签:body

说明:指定文档主体的开始和结束。

标签:br

说明:插入一个换行符。

标签:button

说明:指定其中所含的 HTML 要被渲染为一个按钮。

标签:caption

说明:指定表格的简要描述。

标签:center

说明:将后面的文本和图像居中显示。

标签:cite

说明:用斜体显示标明引言。

标签:clientinformation

说明:包含关于 Web 浏览器的信息。

标签:clipboarddata

说明:提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用。

标签:code

说明:指定代码范例。

标签:col

说明:指定基于列的表格默认属性。

标签:colgroup

说明:指定表格中一列或一组列的默认属性。

标签:comment

说明:标明不可见的注释.

标签:currentStyle

说明:代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。

标签:custom

说明:代表了一个用户自定义元素。

标签:datatransfer

说明:提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用。

标签:dd

说明:在定义列表中表明定义。定义通常在定义列表中缩进。

标签:defaults

说明:编程设置元素行为的默认属性。

标签:del

说明:表明文本已经从文档中删除。

标签:dfn

说明:表明术语的定义实例。

标签:dir

说明:引起目录列表。

标签:div

说明:指定渲染 HTML 的容器。

标签:dl

说明:引起定义列表。

标签:document

说明:代表给定浏览器窗口中的 HTML 文档。

标签:dt

说明:在定义列表中表明定义术语。

标签:em

说明:强调文本,通常以斜体渲染。

标签:embed

说明:允许嵌入任何文档。

标签:event

说明:代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。

标签:external

说明:允许访问由 Microsoft Internet Explorer 浏览器组件宿主应用程序提供的附加对象模型。

标签:fieldset

说明:在字段集包含的文本和其它元素外面绘制一个方框。

标签:font

说明:指定用于渲染所包含文本的新字体、大小和颜色。

标签:frame

说明:在 FRAMESET 元素内指定单个框架。

标签:frameset

说明:指定一个框架集,用于组织多个框架和嵌套框架集。

标签:from

说明:指定所包含控件在表单中起作用。

标签:head

说明:提供了关于文档的无序信息集合。

标签:history

说明:包含了用户已浏览的 URL 的信息。

标签:hn

说明:以标题样式渲染文本。

标签:hr

说明:绘制水平线。

标签:html

说明:表明文档包含 HTML 元素。Microsoft Internet Explorer 6 的新增内容 当你使用 !DOCTYPE 声明指定标准兼容模式,此元素将代表画布──也就是文档内容将渲染到的整个表面。

标签:i

说明:指定文本应以斜体渲染,若可用的话。

标签:iframe

说明:创建内嵌浮动框架。

标签:input

说明:创建各种表单输入控件。

标签:input type=button

说明:创建按钮控件。

标签:input type=checkbox

说明:创建复选框控件。

标签:input type=file

说明:创建文件上载控件,该控件带有一个文本框和一个浏览按钮。

标签:input type=hidden

说明:传输关于客户/服务器交互的状态信息。

标签:input type=image

说明:创建一个图像控件,该控件单击后将导致表单立即被提交。

标签:input type=password

说明:创建与 INPUT type=text 控件类似的单行文本输入控件,不过其中并不显示用户输入的内容。

标签:input type=radio

说明:创建单选钮控件。

标签:input type=reset

说明:创建一个按钮,该按钮单击后将重置表单控件为其默认值。

标签:input type=submit

说明:创建一个按钮,该按钮单击后将提交表单。

标签:input type=text

说明:创建一个单行的文本输入控件。

标签:ins

说明:指定被插入到文档中的文本。

标签:isindex

说明:使浏览器显示一个对话框,提示用户输入单行文本。

标签:kdb

说明:以固定宽度字体渲染文本。

标签:label

说明:为页面上的其它元素指定标签。

标签:legend

说明:在 fieldSet 对象绘制的方框内插入一个标题。

标签:li

说明:引起列表中的一个项目。

标签:link

说明:允许当前文档和外部文档之间建立连接。

标签:listing

说明:以固定字体渲染文本.

标签:location

说明:包含关于当前 URL 的信息。

标签:map

说明:包含客户端图像映射的坐标数据。

标签:marquee

说明:创建一个滚动的文本字幕。

标签:menu

说明:创建一个项目的无序列表。

标签:meta

说明:向服务器和客户端传达关于文档的隐藏信息。

标签:namespace

说明:向文档中动态导入一个元素行为。

标签:navigator

说明:包含关于 Web 浏览器的信息。

标签:nextID

说明:创建编辑软件可以读取的唯一标识符。

标签:nobr

说明:不换行渲染文本。

标签:noframes

说明:包含对于那些不支持 FRAMESET 元素的浏览器使用的 HTML。

标签:noscript

说明:指定要在不支持脚本的浏览器显示的 HTML。

标签:object

说明:向 HTML 页面中插入对象。

标签:ol

说明:绘制文本的编号列表。

标签:optgroup

说明:允许作者对 select 元素中的选项进行逻辑分组。

标签:option

说明:引起 select 元素中的一个选项。

标签:p

说明:引起一段。

标签:page

说明:代表 styleSheet 中的一条 @page 规则。

标签:param

说明:设置 applet、embed 或 object 元素的属性初始值。

标签:popup

说明:一种特殊的顶层窗口,主要用于出现在应用程序主窗口之外的对话框、消息框和其它临时窗口。

标签:pre

说明:以固定宽度字体渲染文本。

标签:q

说明:分离文本中的引语。

标签:rt

说明:指明 ruby 元素的注音文本。

标签:ruby

说明:指明要放置在文本串之上或内嵌的注解或发音指南。

标签:rule

说明:代表了层叠样式表(CSS)中由选择符和一个或多个声明组成的的样式

标签:runtimestyle

说明:代表了居于全局样式表、内嵌样式和 HTML 标签属性指定的格式和样式之上的对象的格式和样式。

标签:s

说明:以删除线字体渲染文本。

标签:samp

说明:指定代码范例。

标签:screen

说明:包含关于客户屏幕和渲染能力的信息。

标签:script

说明:为脚本指定由脚本引擎解释的脚本。

标签:select

说明:引起列表框或下拉框。

标签:selection

说明:代表了当前激活选中区,即高亮文本块,和/或文档中用户可执行某些操作的其它元素。

标签:small

说明:指定内含文本要以比当前字体稍小的字体显示。

标签:span

说明:指定内嵌文本容器。

标签:strike

说明:以删除线字体渲染文本。

标签:strong

说明:以粗体渲染文本。

标签:style

说明:代表了给定元素所有可能的内嵌样式的当前设置。

标签:stylesheet

说明:代表了文档中单一的样式表

标签:sub

说明:指定内含文本要以下标的形式显示,通常比当前字体稍小。

标签:sup

说明:指定内含文本要以上标的形式显示,通常比当前字体稍小。

标签:table

说明:指定所含内容要组织成行列的表格。

标签:tbody

说明:指明行作为表格主体。

标签:td

说明:指定表格中的单元格

标签:textarea

说明:指定多行文本输入控件。

标签:textnode

说明:将文本字符串代表为文档层次中的结点。

标签:textrange

说明:代表 HTML 元素中的文本。

标签:textrectangle

说明:指定包含元素或 TextRange 对象中一行文本的矩形。

标签:tfoot

说明:指明行作为表尾。

标签:th

说明:指定标题列。标题列将在单元格中居中并以粗体显示。

标签:thead

说明:指明行作为表头。

标签:title

说明:包含文档的标题。

标签:tr

说明:指定表格中的一行。

标签:tt

说明:以固定宽度字体渲染文本。

标签:u

说明:带下划线渲染文本。

标签:ul

说明:绘制文本的项目符号列表。

标签:userprofile

说明:提供了允许脚本对用户配置信息请求读取访问并执行读取操作的方法。

标签:var

说明:定义编程变量。通常以斜体渲染。

标签:wbr

说明:向一块 nobr 文本中插入软换行。

标签:window

说明:代表浏览器中一个打开的窗口。

标签:xml

说明:在 HTML 页面上定义一个 XML 数据。

标签:xmp

说明:以固定宽度字体渲染作为示例的字体。