html打字结构（html怎么打）

本篇文章给大家谈谈html打字结构，以及html怎么打对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、程序员必须知道的HTML常用代码有哪些
• 2、怎么在HTML 框架里打字等啊,就是在那个代码的哪个地方输入其他的 那个框架里就会出现字图什么的求高手指点
• 3、HTML语言的格式
• 4、html中的打字效果
• 5、html怎么在文本框里面输入文字

程序员必须知道的HTML常用代码有哪些

html+css代码

文本设置

1、font-size: 字号参数

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性

color: 参数

注意使用网页安全色

超链接设置

text-decoration: 参数

主要用途是改变浏览器显示文字链接时的下划线。

参数取值范围：

underline：为文字加下划线

overline：为文字加上划线

line-through：为文字加删除线

blink：使文字闪烁

none：不显示上述任何效果

背景

1、背景颜色

background-color: 参数

2、背景图片

background-image: url(URL)

URL就是背景图片的存放路径，none表示无。

3、背景图片重复

background-repeat: 参数

参数取值范围 ：

no-repeat：不重复平铺背景图片

repeat-x：使图片只在水平方向上平铺

repeat-y：使图片只在垂直方向上平铺

如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4、背景图片固定

背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定

background-attachment: 参数

参数取值范围：

fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动

scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

区块

1、单词间距

word-spacing: 间隔距离

2、字母间距

letter-spacing: 字母间距

3、文本对齐

text-align: 参数

参数的取值：

left：左对齐

right：右对齐

center：居中对齐

justify：相对左右对齐

4、垂直对齐

vertical-align: 参数

top：顶对齐

bottom：底对齐

text-top：相对文本顶对齐

text-bottom：相对文本底对齐

baseline：基准线对齐

middle：中心对齐

sub：以下标的形式显示

super：以上标的形式显示

5、文本缩进

text-indent: 缩进距离

12px相当于一个文字距离

6、空格

white-space: 参数

normal 正常

pre 保留

nowrap 不换行

7、显示样式

display: 参数

参数取值范围：

block：块级元素，在对象前后都换行

inline：在对象前后都不换行

list-item：在对象前后都换行，增加了项目符号

none：无显示

方框

1、height 高度

2、width 宽度

3、padding 内边距

4、margin 外边距

5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。

6、clear 清除浮动

边框

1、样式

border style 参数

边框样式的参数：

none：无边框

dotted：边框为点线

dashed：边框为长短线

solid：边框为实线

double：边框为双线

2、宽度

border width 参数

3、颜色

border color 参数

列表

list-style-type 列表样式

不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。

控制用户界面的样式

鼠标

cursor：鼠标形状参数

CSS鼠标形状参数表：

鼠标形状：CSS代码

style="cursor:hand" 　手形

style="cursor:crosshair" 十字形

style="cursor:text" 　文本形

style="cursor:wait" 　沙漏形

style="cursor:move" 十字箭头形：

style="cursor:help" 　问号形

style="cursor:e-resize" 　右箭头形

style="cursor:n-resize" 　上箭头形

style="cursor:nw-resize" 左上箭头形

style="cursor:w-resize" 　左箭头形

style="cursor:s-resize" 　下箭头形

style="cursor:se-resize" 右下箭头形

style="cursor:sw-resize" 左下箭头形

HTML常用代码之：结构性定义

文件类型HTML/HTML （放在档案的开头与结尾）

文件主题TITLE/TITLE （必须放在「文头」区块内）

文头HEAD/HEAD （描述性资料，像是「主题」）

文体BODY/BODY （文件本体）

标题H?/H? （从1到6，有六层选择）

标题的对齐 H?ALIGN=LEFT|CENTER|RIGHT/H?

区分DIV/DIV

区分的对齐 DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY/DIV

引文区块BLOCKQUOTE/BLOCKQUOTE （通常会内缩）

强调EM/EM （通常会以斜体显示）

特别强调STRONG/STRONG （通常会以加粗显示）

引文CITE/CITE （通常会以斜体显示）

码CODE/CODE （显示原始码之用）

样本SAMP/SAMP

键盘输入KBD/KBD

变数VAR/VAR

定义DFN/DFN （有些浏览器不提供）

地址 ADDRESS/ADDRESS

大字BIG/BIG

小字SMALL/SMALL

与外观相关的标签（作者自订的表现方式）

加粗B/B

斜体I/I

底线U/U （尚有些浏览器不提供）

删除线S/S （尚有些浏览器不提供）

下标SUB/SUB

上标SUP/SUP

打字机体TT/TT （用单空格字型显示）

预定格式PRE/PRE （保留文件中空格的大小）

预定格式的宽度PRE WIDTH=?/PRE（以字元计算）

向中看齐CENTER/CENTER （文字与图片都可以）

闪耀BLINK/BLINK （有史以来最被嘲弄的标签）

字体大小 FONTSIZE=?/FONT（从1到7）

改变字体大小 FONTSIZE=+|-?/FONT

基本字体大小 BASEFONTSIZE=? （从1到7; 内定为3）

字体颜色 FONTCOLOR="#$$"/FONT（$$为颜色代码）

HTML常用代码之：修改页面的实用性HTML代码

贴图：img src="图片地址"

加入连接：a href="所要连接的相关地址"写上你想写的字/a

在新窗口打开连接：a href="相关地址" target="_blank"写上要写的字/a

移动字体(走马灯)：marquee写上你想写的字/marquee

字体加粗：b写上你想写的字/b

字体斜体：i写上你想写的字/i

字体下划线: u写上你想写的字/u

字体删除线: s写上你想写的字/s

字体加大: big写上你想写的字/big

字体控制大小：h1写上你想写的字/h1 (其中字体大小可从h1-h5,h1最大，h5最小)

更改字体颜色：font color="#value"写上你想写的字/font(其中value值在000000与ffffff(16位进制)之间

消除连接的下划线：a href="相关地址" style="text-decoration:none"写上你想写的字/a

贴音乐：embed src="音乐地址" width="宽度" height="高度" autostart=false

贴flash: embed src="flash地址" width="宽度" height="高度"

贴影视文件：img dynsrc="文件地址" width="宽度" height="高度" start=mouseover

换行：br

段落：p段落/p

原始文字样式：pre正文/pre

换帖子背景：body background="背景图片地址"

固定帖子背景不随滚动条滚动：body background="背景图片地址" body bgproperties=fixed

定制帖子背景颜色：body bgcolor="#value"(value值见10)

帖子背景音乐：bgsound="背景音乐地址" loop=infinite

贴网页：iframe. src="相关地址" width="宽度" height="高度"/iframe

HTML常用代码之：常常会遇到的问题

点击关闭窗口

a href="javascript.:top.window.close();"点击关闭窗口/a！

请问如何去掉主页右面的滚动条？

body scroll="no"

body style="overflow-y:hidden"

如何做到让一个网页自动关闭.

html

head

OBJECT id=closes type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"

param name="Command" value="Close"

/object

/head

body

这个窗口会在10秒过后自动关闭,而且不会出现提示. /body

如何在不刷新页面的情况下刷新css?

style

button{ color:#000000;}

/style

button nclick=document.styleSheets[0].rules[0].style.color=‘‘‘‘red‘‘‘‘点击按钮直接修改style标签里button选择符使按钮改为红色/button

请问如何让网页自动刷新？

在head部记入META. HTTP-EQUIV="Refresh" c其中20为20秒后自动刷新，你可以更改为任意值。

如何让页面自动刷新？

方法一，用refresh

HTML 代码片段如下:

head

meta. http-equiv="refresh" c

/head

5表示刷新时间

[Ctrl+A 全部选择 提示:你可先修改部分代码，再按运行]

方法二，使用setTimeout控制

img src=/logo.gif

script

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

/SCRIPT

如何让超链接没有下划线

在源代码中的HEAD…/HEAD之间输入如下代码：

style. type="text/css" !--

a { text-decoration: none}

-- /style

请问如何去掉IE的上下滚动条？

body style=‘‘‘‘overflow:scroll;overflow-y:hidden‘‘‘‘

/body

怎样才能把RealPlayer文件在网页做一个试听连接？

embed height=25　src=51js.rm type=audio/x-pn-realaudio-plugin width=50 autostart="false" c

如何用html实现浏览器上后退按钮的功能？

a href="java script.:history.go(-1)"点击后退/a

或者

script history.back() /SCRIPT

HTML常用代码之：你不一定知道的技巧

ncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

table borderncontextmenu=return(false)tdno/table 可用于Table

body nselectstart="return false" 取消选取、防止复制

onpaste="return false" 不准粘贴

oncopy="return false;" ncut="return false;" 防止复制

link rel="Shortcut Icon"href="favicon.ico" IE地址栏前换成自己的图标

link rel="Bookmark"href="favicon.ico" 可以在收藏夹中显示出你的图标

inputstyle="ime-mode:disabled" 关闭输入法

永远都会带着框架

script. language="JavaScript"!--

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --/script

防止被人frame.

SCRIPT. LANGUAGE=JAVASCRIPT!--

if (top.location != self.location)top.location=self.location;

// --/SCRIPT

网页将不能被另存为

noscriptiframe.src=*.html/iframe/noscript

查看网页源代码

input type=button value=查看网页源代码

onclick="window.location = "view-source:"+"""

删除时确认

a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp? areyou=删除page=1""删除/a

屏蔽功能键Shift,Alt,Ctrl

script

function look(){

if(event.shiftKey)

alert("禁止按Shift键!");//可以换成ALT　CTRL

}

document.onkeydown=look;

/script

网页不会被缓存

META. HTTP-EQUIV="pragma" CONTENT="no-cache"

META. HTTP-EQUIV="Cache-Control"CONTENT="no-cache, must-revalidate"

META. HTTP-EQUIV="expires"CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"

或者META. HTTP-EQUIV="expires"CONTENT="0"

怎样让表单没有凹凸感？

input type=text style="border:1 solid #000000"

input type=text style="border-left:none;border-right:none; border -top:none; border-bottom: 1 solid#000000"/textarea

不要滚动条?

让竖条没有:

body style="overflow:scroll;overflow-y:hidden"

/body

让横条没有:

body style="overflow:scroll;overflow-x:hidden"

/body

两个都去掉？更简单了

body scroll="no"

/body

怎样去掉图片链接点击后，图片周围的虚线？

a href="#"nFocus="this.blur()"img src="logo.jpg"border=0/a

电子邮件处理提交表单

form. name="form1"method="post" action="mailt****@***.com"enctype="text/plain"

input type=submit

/form

在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

如何设定打开页面的大小

body nload="top.resizeTo(300,200);"

打开页面的位置bodynload="top.moveBy(300,200);"

在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

STYLE

body

{background-image:url(logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

/STYLE

检查一段字符串是否全由数字组成

script. language="Javascript"!--

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --/script

获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

TEXTAREA自适应文字行数的多少

textarea rows=1 name=s1 cols=27npropertychange="this.style.posHeight=this.scrollHeight"

/textarea

日期减去天数等于第二个日期

script. language=Javascript

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() +1) + "月" + a.getDate() + "日")

} cc("12/23/2002",2)

/script

选择了哪一个Radio

HTMLscript. language="vbscript"

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

next

end function

/scriptBODY

INPUT name="radio1" type="radio"value="style" checkedStyle.

INPUT name="radio1" type="radio"value="barcode"Barcode

INPUT type="button" value="check"nclick="checkme()"

/BODY/HTML

脚本永不出错

SCRIPT. LANGUAGE="JavaScript"

!-- Hide function killErrors(){return true;} window.onerror = killErrors;// --

/SCRIPT

ENTER键可以让光标移到下一个输入框

input nkeydown="if(event.keyCode==13)event.keyCode=9"

怎么在HTML 框架里打字等啊,就是在那个代码的哪个地方输入其他的 那个框架里就会出现字图什么的求高手指点

新建一个html文档(假设为test.html),给你的iframe添加src属性,即iframe src="test.html",那么test.html中的内容就显示到iframe中了

HTML语言的格式

一、基本标志

1.html/html

2.head/head

3.body/body

4.title/title

Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。

您可以使用记事本、写字板或 FrontPage Editor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名/标志名来表示标志的

开始和结束(例如html/html标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志：

1.html/html

html标志用于Html文档的最前边，用来标识Html文档的开始。而/html标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。

2.head/head

head和/head构成Html文档的开头部分，在此标志对之间可以使用title/title、script/script等等标志对，这些标志对都是描述Html文档相关信息的标志对，

head/head标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。

3.body/body

body/body是Html文档的主体部分，在此标志对之间可包含p、/p、h1、/h1、br、hr等等众多的标志，它们所定义的文本、图像等将会在浏览器的框

内显示出来。两个标志必须一块使用。body标志中还可以有以下属性：

属性

用途

示例

body bgcolor="#rrggbb"

设置背景颜色。

body bgcolor="red"红色背景

body text="#rrggbb"

设置文本颜色。

body text="#0000ff"蓝色文本

body link="#rrggbb"

设置链接颜色。

body link="blue"链接为蓝色

body vlink="#rrggbb"

设置已使用的链接的颜色。

body vlink="#ff0000"

body alink="#rrggbb"

设置正在被击中的链接的颜色。

body alink="yellow"

说明:以上各个属性可以结合使用，如body bgcolor="red"text="#0000ff"。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对

应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、

Red、Blue和Teal，如bodytext="Blue"表示body/body标志对中的文本使用蓝色显示在浏览器的框内。

4.title/title

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，

只要在title/title标志对之间加入您要显示的文本即可。注意：title/title标志对只能放在head/head标志对之间。

下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。

例1 Html文档中基本标志的使用

html

head

title显示在浏览器最上边蓝色条中的文本/title

/head

body bgcolor="red" text="blue"

p红色背景、蓝色文本/p

/body

/html

二、格式标志

1.p/p

2.br

3.blockquote/blockquote

4.dl/dldt/dtdd/dd

5.ol/olul/ulli/li

6.div/div

上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，

必须强调一下，我们这个教程中所讲的格式标志统统都是用于body/body标志对之间的。

1.p/p

p/p标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，p标志还可以使用align属性，它用

来说明对齐方式，语法是：p align=""/p。Align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如palign="Center"/p表

示标志对中的文本使用居中的对齐方式。

2.br

br是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。在br的使用上还有一定的技巧，如果您

把br加在p/p标志对的外边，将创建一个大的回车换行，即br前边和后边的文本的行与行之间的距离比较大，若放在p/p的里边则br前边和后

边的文本的行与行之间的距离将比较小，您不妨试试看。

3.blockquote/blockquote

在blockquote/blockquote标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

4.dl/dldt/dtdd/dd

dl/dl用来创建一个普通的列表，dt/dt用来创建列表中的上层项目，dd/dd用来创建列表中最下层项目，dt/dt和dd/dd都必须放在dl/dl标志对之间。看一下下边的例子您就会明白了：

例2 创建一个普通列表

html

head

title一个普通列表/title

/head

body text="blue"

dl

dt中国城市/dt

dd北京 /dd

dd上海 /dd

dd广州 /dd

dt美国城市/dt

dd华盛顿 /dd

dd芝加哥 /dd

dd纽约 /dd

/dl

/body

/html

此例在浏览器中的显示如下:

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

5.ol/olul/ulli/li

ol/ol标志对用来创建一个标有数字的列表；ul/ul标志对用来创建一个标有圆点的列表；li/li标志对只能在ol/ol或ul/ul标志对之间使

用，此标志对用来创建一个列表项，若li/li放在ol/ol之间则每个列表项加上一个数字，若在ul/ul之间则每个列表项加上一个圆点。请看下边的例子：

例3 标有数字或圆点的列表

html

head

title/title

/head

body text="blue"

ol

p中国城市 /p

li北京 /li

li上海 /li

li广州 /li

/ol

ul

p美国城市 /p

li华盛顿 /li

li芝加哥 /li

li纽约 /li

/ul

/body

/html

此例在浏览器中的显示如下:

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

6.div/div

div/div标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与p/p标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。

三、文本标志

1.pre/pre

2.h1/h1……h6/h6

3.b/bi/iu/u

4.tt/ttcite/citeem/emstrong/strong

5.font/font

上一个教程中我们已经讲了如何在浏览器中输出文本，以及文本输出的格式，这个教程中我们将谈一谈文本输出的字体，如斜体、黑体字、下加一划线

等等。在本教程的最后给出了一个文本标志的综合示例，希望读者能认真阅读。

1.pre/pre

pre/pre标志对用来对文本进行预处理操作。

2.h1/h1……h6/h6

Html语言提供了一系列对文本中的标题进行操作的标志对：h1/h1……h6/h6，即一共有六对标题的标志对。h1/h1是最大的标题，而h6/h6则是最小的标题，也即是标志中

h

后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话，便可以使用这六对标题标志对中的任何一对。

3.b/bi/iu/u

经常使用 WORD 的人对这三对标志对一定很快就能掌握。b/b用来使文本以黑体字的形式输出；i/i用来使文本以斜体字的形式输出；u/u用来使文本以下加一划线的形式输出。后边将会有一个综合的例子，所以此处就不再作详细讲解了。

4.tt/ttcite/citeem/emstrong/strong

这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。tt/tt用来输出打字机风格字体的文本；cite/cite用来输出引用方式的字体，通常是斜体；em/em用来输出需要强调的文本(通常是斜体加黑体)；strong/strong则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。

5.font/font

font/font是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性

size 和 color 的控制来实现的。size属性用来改变字体的大小，它可以取值：-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是我们在教程一中讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。具体用法请看下边综合的例子。

例4 文本标志的综合示例

html

head

title文本标志的综合示例/title

/head

body text="blue"

h1最大的标题/h1

h3使用h3的标题/h3

h6最大的标题/h6

pb黑体字文本/b /p

pi斜体字文本/i /p

pu下加一划线文本/u /p

ptt打字机风格的文本/tt/p

pcite引用方式的文本/cite/p

pem强调的文本/em/p

pstrong加重的文本/strong/p

pfont size="+1"

color="red"size取值“+1”、color取值“red”时的文本/font/p

/body

/html

本例在浏览器中显示的结果如下：

最大的标题

使用h3的标题

最大的标题

黑体字文本

斜体字文本

下加一划线文本

打字机风格的文本

引用方式的文本

强调的文本

加重的文本

size取值“+1”、color取值“red”时的文本

四、图像标志

1.img

2.hr

再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了img标志来处理图像的输出。

1.img

img标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可

以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到

当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成img

src="logo.gif"；假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为img

src="images/logo.gif"；假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../”表示您的网

站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为img

src="../home/logo.gif"，若home是您的网站下的目录king下边的一个子目录，则代码应该变为img src="../king/home/logo.gif"了。现在您对相对路径应该有所了解了吧！

必须强调一下，src属性在img标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，img标志还有alt、align、border、width和height属性。align是

图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是

图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。

2.hr

hr标志是在Html文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默

认单位是像素。想必大家对color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加

入此属性水平线将有阴影)。

下面是本教程的一个综合例子。

例5 图像标志举例

html

head

title图像标志的综合示例/title

/head

body

p align="center"a href=""

target="_blank"img src=""

alt="网页制作" WIDTH="468" HEIGHT="60"

border="0"/a/p

hr width="600" size="1" color="#0000FF"

/body

/html

本例在浏览其中的显示结果如下：

七、帧标志

1.frameset/frameset

2.frame

3.noframes/noframes

帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它

们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html

文件显示在另一个帧中。

1.frameset/frameset

frameset/frameset标志对放在帧的主文档的body/body标志对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标志对用来定义主文档中有

几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用frameset标志时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概

不管，frameset/frameset标志对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的

取值可以是百分数、绝对像素值或星号(“*”)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，

所有的帧按照rows和cols的值从左到右，然后从上到下排列。示例如下：

frameset rows="*,*,*"

总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3

frameset cols="40%,*,*"

总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧

frameset rows="40%,*" cols="50%,*,200"

总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素

2.frame

frame标志放在frameset/frameset之间，用来定义某一个具体的帧。frame标志具有src和name属性，这两个属性都是必须赋值的。src是此帧的源Html

文件名(包括网络路径,即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此帧的名字，这个名字是用来供超文本链接标志a

href=""

target=""中的target属性用来指定链接的Html文件将显示在哪一个帧中。例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是frame

src="jc.htm" name="main"，当您有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为a

href="new.htm"

target="main"需要链接的文本/a。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。

此外，frame标志还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动

显示,不需要则自动不显示)。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。

3.noframes/noframes

noframes/noframes标志对也是放在frameset/frameset标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标志对之间先紧跟

body/body标志对，然后才可以使用我们在教程七以前讲过的任何标志。

下边是一个综合示例：

例8 帧标志的综合示例

主文档：

html

head

title帧标志的综合示例/title

/head

frameset cols="25%,*"

frame src="menu.htm" scrolling="no" name="Left"

frame src="page1.htm" scrolling="auto" name="Main"

noframes

body

p对不起，您的浏览器不支持“帧”！/p

/body

/noframes

/frameset

/html

menu.htm

html

head

title目录/title

/head

body

pfont color="#FF0000"目录/font/p

pa href="page1.htm" target="Main"链接到第一页/a/p

pa href="page2.htm" target="Main"链接到第二页/a/p

/body

/html

page1.htm

html

head

title第一页/title

/head

body

p align="center"font color="#8000FF"这是第一页！/font/p

/body

/html

page2.htm

html

head

title第二页/title

/head

body

p align="center"font color="#FF0080"这是第二页！/font/p

/body

/html

若想看此例在浏览器中显示的结果请自己动手试试吧。

八、表单标志

1.form/form

2.input type=""

3.select/selectoption

4.textarea/textarea

表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做

提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的

ASP 或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html标志来设计表单。

1.form/form

form/form标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。form标志具有action、method和target

属性。action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：form

action=""，当用户提交表单时，服务器将执行网址上的名为search.asp的ASP程序。method属性用

来定义处理程序从表单中获得信息的方式，可取值为

GET 和 POST

的其中一个。GET方式是处理程序从当前Html文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式相反，它是

当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。target属性用来指定目标窗口或目标帧。

2.input type=""

input

type=""标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在form/form标志对之间。input

type=""标志中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定。请看下边列表：

type属性取值

输入区域类型

输入区域示例

input type="TEXT"

size="" maxlength=""

单行的文本输入区域,size与maxlength属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

input type="SUBMIT"

将表单内容提交给服务器的按钮

input type="RESET"

将表单内容全部清除,重新填写的按钮

input type="CHECKBOX"

checked

一个复选框,checked属性用来设置该复选框缺省时是否被选中,右边示例中使用了三个复选框

你喜欢哪些教程：

Html入门动态HtmlASP

input type="HIDDEN"

隐藏区域,用户不能在其中输入,用来预设某些要传送的信息

input type="IMAGE"

src="URL"

使用图像来代替Submit按钮,图像的源文件名由src属性指定,用户点击后,表单中的信息和点击位置的X、Y坐标一起传送给服务器

input type="PASSWARD"

输入密码的区域,当用户输入密码时,区域内将会显示"*"号

请输入您的密码：

input type="RADIO"

单选按钮类型,checked属性用来设置该单选框缺省时是否被选中,右边示例中使用了三个单选框

10月3日中韩国奥队比赛结果会是：

中国胜平局韩国胜

此外，八种类型的输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服

务器就是通过调用某一输入区域的名字的value属性来获得该区域的数据的。而value属性是另一个公共属性，它可用来指定输入区域的缺省值。

3.select/selectoption

select/select标志对用来创建一个下拉列表框或可以复选的列表框。此标志对用于form/form标志对之间。select具有multiple、name和size属

性。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选的了；name是此列表框的名字，它与上边讲的name属性作用是一样

的；size属性用来设置列表的高度，缺省时值为1，若没有设置(加入)multiple属性，显示的将是一个弹出式的列表框。

option标志用来指定列表框中的一个选项，它放在select/select标志对之间。此标志具有selected和value属性，selected用来指定默认的选项，value

属性用来给option指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用select区域的名字的value属性来获得该区域选中的数据项的。请看下例：

Html代码

浏览器显示的结果

form action=""

method="post"

p请选择最喜欢的男歌星:

select name="gx1" size="1"

option value="ldh"刘德华

option value="zhxy" selected张学友

option value="gfch"郭富城

option value="lm"黎明

/select

/form

请选择最喜欢的男歌星:

刘德华 张学友 郭富城 黎明

form action=""

method="post"

p请选择最喜欢的女歌星:

select name="gx2" multiple size="4"

option value="zhmy"张曼玉

option value="wf" selected王菲

option value="tzh"田震

option value="ny"那英

/select

/form

请选择最喜欢的女歌星:

张曼玉 王菲 田震 那英

4.textarea/textarea

textarea/textarea用来创建一个可以输入多行的文本框，此标志对用于form/form标志对之间。textarea具有name、cols和rows属性。cols和rows属性

分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。请看下边的例子：

Html代码

浏览器显示的结果

form

action="" method="post"

p您的意见对我很重要:

textarea name="yj" clos="20" rows="5"

请将意见输入此区域

/textarea

/form

您的意见对我很重要:

请将意见输入此区域

html中的打字效果

打字效果的文字特效[修改显示的文字即可]

以下代码放在HTML的body/body之间[适当的位置]：

script language=javascript

var layers =document.layers,style=document.all,both=layers||style,idme=908601;

if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef =

'.style';}

function writeOnText(obj,str){

if(layers)with(document[obj]){ document.open();document.write(str);document.close();}

if(style)eval(obj+'.innerHTML=str'); }

var dispStr=new Array("这里是你想要打的字");

var overMe=0;

function txtTyper(str,idx,idObj,spObj,clr1,clr2,delay,plysnd){

var tmp0=tmp1= '',skip=100;

if (both idx=str.length) {

if (str.charAt(idx)==''){ while(str.charAt(idx)!='') idx++;idx++;}

if (str.charAt(idx)==''str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;idx++;}

tmp0 = str.slice(0,idx);

tmp1 = str.charAt(idx++);

if (overMe==0 plysnd==1){

if (navigator.plugins[0]){

if(navigator.plugins["LiveAudio"][0].type=="audio/basic" navigator.javaEnabled()){document.embeds

[0].stop();

setTimeout("document.embeds[0].play(false)",100);}

} else if (document.all){

ding.Stop();

setTimeout("ding.Run()",100);}

overMe=1;}else overMe=0;

writeOnText(idObj, "span class="+spObj+"font color='"+clr1+"'"+tmp0+"/fontfont color='"+clr2

+"'"+tmp1+"/font/span");

setTimeout("txtTyper('"+str+"', "+idx+", '"+idObj+"', '"+spObj+"', '"+clr1+"', '"+clr2+"', "+delay+" ,"+plysnd+")",delay);}}

function init(){txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33', 300, 0);}

/script

BODY onload=init()

DIV class=ttl1 id=ttl0/DIV

/BODY

html怎么在文本框里面输入文字

html

body

form action="/example/html/form_action.asp" method="get"

pFirst name: input type="text" name="fname" //p

pLast name: input type="text" name="lname" //p

input type="submit" value="Submit" /

/form

p请单击确认按钮，输入会发送到服务器上名为 "form_action.asp" 的页面。/p

/body

/html

用的是INPUT标签。

input标签后面的type是输入的类型

type="text"是文本输入框

type="submit"是提交按钮

他会被标记为一个类似于变量的结构

name后面就使用输入数值的时候的名字

html打字结构的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html怎么打、html打字结构的信息别忘了在本站进行查找喔。