HTML中操作总汇（根据张荣老师ppt，以及网络上不知作者的文章总结）
2024-04-29 00:40:38
在此总结了一些HTML中一些操作，有些还是比较重要的。
事件：
| 一般事件 | ||
|---|---|---|
| 事件 | 浏览器支持 | 描述 |
| onClick |
HTML: 2 | 3 | 3.2 |4 Browser: IE3|N2|O3 |
鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 |
| onDblClick |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
鼠标双击事件 |
| onMouseDown |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
鼠标上的按钮被按下了 |
| onMouseUp |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
鼠标按下后，松开时激发的事件 |
| onMouseOver |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
当鼠标移动到某对象范围的上方时触发的事件 |
| onMouseMove |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
鼠标移动时触发的事件 |
| onMouseOut |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N3|O3 |
当鼠标离开某对象范围时触发的事件 |
| onKeyPress |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] |
| onKeyDown |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] |
| onKeyUp |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N4| O |
当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] |
| 页面相关事件 | ||
| 事件 | 浏览器支持 | 描述 |
| onAbort |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4|N3| O |
图片在下载时被用户中断 |
| onBeforeUnload |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当前页面的内容将要被改变时触发的事件 |
| onError |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4|N3| O |
捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 |
| onLoad |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 |
| onMove |
HTML: 2 | 3 | 3.2 | 4 Browser: IE |N4| O |
浏览器的窗口被移动时触发的事件 |
| onResize |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4|N4| O |
当浏览器的窗口大小被改变时触发的事件 |
| onScroll |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
浏览器的滚动条位置发生变化时触发的事件 |
| onStop |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断 |
| onUnload |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
当前页面将被改变时触发的事件 |
| 表单相关事件 | ||
| 事件 | 浏览器支持 | 描述 |
| onBlur |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可] |
| onChange |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可] |
| onFocus |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
当某个元素获得焦点时触发的事件 |
| onReset |
HTML: 2 | 3 | 3.2 |4 Browser:IE4|N3|O3 |
当表单中RESET的属性被激发时触发的事件 |
| onSubmit |
HTML: 2 | 3 | 3.2 |4 Browser:IE3|N2|O3 |
一个表单被递交时触发的事件 |
| 滚动字幕事件 | ||
| 事件 | 浏览器支持 | 描述 |
| onBounce |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
在Marquee内的内容移动至Marquee显示范围之外时触发的事件 |
| onFinish |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当Marquee元素完成需要显示的内容后触发的事件 |
| onStart |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当Marquee元素开始显示内容时触发的事件 |
| 编辑事件 | ||
| 事件 | 浏览器支持 | 描述 |
| onBeforeCopy |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件 |
| onBeforeCut |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件 |
| onBeforeEditFocus |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当前元素将要进入编辑状态 |
| onBeforePaste |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件 |
| onBeforeUpdate |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当浏览者粘贴系统剪贴板中的内容时通知目标对象 |
| onContextMenu |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了] |
| onCopy |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当页面当前的被选择内容被复制后触发的事件 |
| onCut |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当页面当前的被选择内容被剪切时触发的事件 |
| onDrag |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当某个对象被拖动时触发的事件 [活动事件] |
| onDragDrop |
HTML: 2 | 3 | 3.2 | 4 Browser: IE |N4| O |
一个外部对象被鼠标拖进当前窗口或者帧 |
| onDragEnd |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了 |
| onDragEnter |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当对象被鼠标拖动的对象进入其容器范围内时触发的事件 |
| onDragLeave |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当对象被鼠标拖动的对象离开其容器范围内时触发的事件 |
| onDragOver |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件] |
| onDragStart |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当某对象将被拖动时触发的事件 |
| onDrop |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
在一个拖动过程中，释放鼠标键时触发的事件 |
| onLoseCapture |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当元素失去鼠标移动所形成的选择焦点时触发的事件 |
| onPaste |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当内容被粘贴时触发的事件 |
| onSelect |
HTML: 2 | 3 | 3.2 |4 Browser:IE4| N | O |
当文本内容被选择时的事件 |
| onSelectStart |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当文本内容选择将开始发生时触发的事件 |
| 数据绑定 | ||
| 事件 | 浏览器支持 | 描述 |
| onAfterUpdate |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当数据完成由数据源到对象的传送时触发的事件 |
| onCellChange |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当数据来源发生变化时 |
| onDataAvailable |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当数据接收完成时触发事件 |
| onDatasetChanged |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
数据在数据源发生变化时触发的事件 |
| onDatasetComplete |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当来子数据源的全部有效数据读取完毕时触发的事件 |
| onErrorUpdate |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件 |
| onRowEnter |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当前数据源的数据发生变化并且有新的有效数据时触发的事件 |
| onRowExit |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当前数据源的数据将要发生变化时触发的事件 |
| onRowsDelete |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当前数据记录将被删除时触发的事件 |
| onRowsInserted |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当前数据源将要插入新数据记录时触发的事件 |
| 外部事件 | ||
| 事件 | 浏览器支持 | 描述 |
| onAfterPrint |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当文档被打印后触发的事件 |
| onBeforePrint |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当文档即将打印时触发的事件 |
| onFilterChange |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当某个对象的滤镜效果发生变化时触发的事件 |
| onHelp |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当浏览者按下F1或者浏览器的帮助选择时触发的事件 |
| onPropertyChange |
HTML: 2 | 3 | 3.2 | 4 Browser:IE5| N | O |
当对象的属性之一发生变化时触发的事件 |
| onReadyStateChange |
HTML: 2 | 3 | 3.2 | 4 Browser:IE4| N | O |
当对象的初始化属性值发生变化时触发的事件 |
例：<p oncopy="javascript:alert('copied');">
当拷贝时触发oncopy事件
扩展标记(META)：
META可用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。
格式如下：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description" content="这是对本页面内容的一个简要描述">
<meta name="Keywords" Lang="EN" content=“apple,pear, orange">
HTTP-EQUIV：
Refresh (刷新)
让网页多长久（秒）刷新，或在多久后让网页自动链接到其它网页。
<Meta http-equiv="Refresh" Content="30">
<Meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com">
注意：其中的5是指停留5秒钟后自动刷新到URL网址
Expires (期限)
指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。
<Meta http-equiv="Expires" Content="0">
<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。
Pragma (cach模式)
禁止浏览器从本地机的缓存中调阅页面内容。
<Meta http-equiv="Pragma" Content="No-cach">
注意：网页不保存在缓存中，每次访问都必须刷新页面。这样设定，访问者将无法脱机浏览（安全性）。
Page-Enter (进入)
从其他页面载入该页面时的一些特效。
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=5)">
<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
注意：blendTrans，RevealTrans是动态滤镜的一种，产生渐隐效果。
Page-Exit (退出)
从该页面转到其他页面时的特效。
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=5)">
<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
注意：Duration表示滤镜特效的持续时间(秒)
Transition滤镜类型，取值为0-23。
NAME：
name是描述网页的，对应于网页内容，以便于搜索引擎查找、分类。
name的value值（name=""）指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、document ID(文档编号)和level(等级)等。
lKeywords (关键字)
为搜索引擎提供的关键字列表。
<Meta name="Keywords" Lang="EN" Content="vacation,greece,sunshine">
<Meta name="Keywords" Lang="FR" Content="vacances,grè:ce,soleil">
l Description (简介)
Description用来告诉搜索引擎你的网站主要内容。
<Meta name="Description" Content="你网页的简述">
lAuthor (作者)
lCopyright (版权)
lGenerator (编辑器)
BODY参数设定：
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
text:用以设定文字颜色
link:设定一般文字连结颜色
alink:设定刚按下时文字连结颜色。
vlink:设定连结后的颜色
<BODY text="#000000" link="#0000FF" alink="#FF0000" vlink="#0000FF" background="bg1.gif" bgcolor="#FFFFFF" leftmargin=2 topmargin=2 bgproperties="fixed">
background:设定背景墙纸
bgcolor:设定背景颜色
leftmargin/topmargin：设定文件内容的左/上边距
bgproperties：固定背景墙纸，当卷动文字时墙纸不会跟著卷动
图形标记(IMG)：
<img src=“logo.gif”width=100 height=100 hspace=5 vspace=5 border=2 align=“top” alt=“our Logo” lowsrc=“pre_logo.gif”>
src:图片来源
width、height:设定图片大小(宽度、高度)
hspace 、vspace:设定图片边沿空白，以免文字或其它图片过于贴近
border:图片边框厚度
<img src=“logo.gif” width=100 height=100 hspace=5 vspace=5 border=2 align=“top”alt=“our Logo”lowsrc=“pre_logo.gif”>
align:调整图片旁边文字的位置，即文字在图片的偏上方/中间/底端/左右等，可选值：top, middle, bottom, left, right
alt:描述该图形的文字
lowsrc:设定先显示低解像图片，等待大图片的下载。
注释标记(<!--注解文字-->)
提供注解功能。浏览器会忽略此标记中的文字不作显示，一般用于为添加说明。
<!--由这处开始标记-->
<!--本文版权-->
段落标记(P)：
为文字、图片、表格等之间留一空白行，从HTML2.0开始己不需要</P>作结尾。
参数：<p align="center">
align可选值：right,left,center。
<p align="right">居右显示
<p align="left">居左显示
<p align="center">居中显示
使文字、图片、表格等标记于下行显示。浏览器会自动忽略原码中空白和换行的部分，如：
566 E Boston Post RD
Mamaroneck NY 10543-9982
United States of America
修改如下：
566 E Boston Post RD
<BR>Mamaroneck NY 10543-9982
<BR>United States of America
水平线(HR)：
参数：
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
size:线条厚度，以像素作单位
width:线条长度，可以是绝对值(以像素作单位)或相对值，默认为 100%
color：线条颜色(默认为黑色)，也可用颜色名称("blue“)
noshade:设定线条为平面显示，若删去则增加阴影或立体效果，这是默认值。
如：
<HR>
<HR align="LEFT" size="4">
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
<HR align="LEFT" size="4">
<HR align="LEFT" size="2" width="70%" color="#0000FF" noshade>
<HR align="LEFT" size="4" width="70" color="#008000">
居中标记(CENTER)：
该标记由Netscape定义，后来其它浏览器都加以支持。很多浏览器不支持<TABLE>标记中的参数。align=“center”，而引入单独的CENTER标记。
如：
<CENTER>Chris's First Homepage</CENTER>
<CENTER>What's new</CENTER>
<CENTER>My profile</CENTER>
预设格式标记(PRE)：
该标记允许保留原码中输入文字格式。
<PRE>
#include <stdio.h>
int main(int argc, char *argv[])
{
printf("Hello, world/n");
return 0;
}
</PRE>
区隔标记(DIV)：
该标记设定文字、图片、表格等标记的摆放位置。
DIV适合应用于Style Sheet(式样表)方面，增加强大的显示能力；有 Class,Style,title,ID 等属性，将于样式表内容中详细讲解。
例：
<DIV align="center">
align可选值：center,left,right
不折行标记(NOBR)：
该标记可设置文字不换行显示，适用于地址、数学算式、一行数字、程式码等。
如：
If you want to know how to create you own homepage quickly, don't miss <NOBR>Chris's Creation of Webpage</NOBR> which will help you a lot.
字体标记
实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同，并且在旧浏览器不能有效显示多重的标示。
如在旧浏览器中逻辑标记<EM>及<STRONG>同时标示一段文字则常失去作用。
实体标记有：
<I> <B> <U>
逻辑标记有：
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
加粗标记：
<STRONG>、<B>两者都能产生字体加粗的效果，但当文件被设为gb2312编码时，两者所标示的中文字不会在Netscape Navigator显示粗体效果。
<STRONG>粗体效果</STRONG>
<B>粗体效果</B>
斜体标记：
<I><EM><VAR><CITE><DFN> <ADDRESS>
在IE都产生斜体效果，而<DFN>在Netscape Navigator无效；<ADDRESS>自身包括换行效果所以不必在它前面加上换行标记。
<I>Creation of Webpage</I>
<br><EM>Creation of Webpage</EM>
<br><VAR>Creation of Webpage</VAR>
<br><CITE>Creation of Webpage</CITE>
<br><DFN>Creation of Webpage</DFN>
<ADDRESS>Creation of Webpage</ADDRESS>
其他标记：
<TT><SAMP><CODE><KBD>设置每字母有相等宽度，在 NC中无效。
<U>是加底线的标记。
<STRIKE>加上删除线的标记。
<BIG>字体加大。
<SMALL>字体变细。
<SUB>下标字(仅剩的数学标记)
<SUP>上标字(仅剩的数学标记)
Creation of Webpage
<br><TT>Creation of Webpage</TT>
<br><SAMP>Creation of Webpage</SAMP>
<br><CODE>Creation of Webpage</CODE>
<br><KBD>Creation of Webpage</KBD>
<br><U>Creation of Webpage</U>
<br><STRIKE>Creation of Webpage</STRIKE>
<br><BIG>Creation of Webpage</BIG>
<br><SMALL>Creation of Webpage</SMALL>
<br>12345<SUB>7</SUB> 6789<SUP>9</SUP>
标题标记：
<H1>至<H6>变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。
<H1>Header Level 1</H1>
<H2>Header Level 2</H2>
<H3>Header Level 3</H3>
<H4>Header Level 4</H4>
<H5>Header Level 5</H5>
<H6>Header Level 6</H6>
字体标记：
<BASEFONT><FONT>都具参数设定，且参数设定相同，均负责设定文字的大小、字形和颜色：
<BASEFONT>设置默认格式字体；
<FONT>一个围堵标记，只影响FONT内的文字。
<font face="Arial" size="+2" color="#008000">Webpage</font>
face：设定文字的字体
size：设定文字的大小(1-7)，可以是绝对值(不受<BASEFONT>影响)或相对值(在内定值的基础上增加或减少大小级数)，<BASEFONT>只有绝对表示法。
color:设定文字的颜色,#008000表示绿色
例：
<BASEFONT size="4" color="yellow">
<FONT SIZE="+1" COLOR="green">Webpage</FONT><BR>
<FONT SIZE="+2" COLOR="green">Webpage</FONT><BR>
<FONT SIZE="+3" COLOR="green">Webpage</FONT><BR>
<FONT SIZE="+9">Webpage</FONT><BR>
<FONT SIZE="1" COLOR="red">Webpage</FONT><BR>
<FONT SIZE="7">Webpage</FONT><BR>
</BASEFONT>
链接标记(A)：
将<A>与</A>所包围的文字、图片等形成链接。
<a href="index.html" name="hello" target="_top">Text</a>
参数说明：
href:链接地址
取值如下：
href="#there"--链接到当前页某个位置
href="index.html#there"--链接到其他页某个位置
href="http://www.baidu.com”--链接到其他网址
href="mailto:new@yeah.net"--链接到Email客户端
<a href="index.html" name="hello" target="_top">Text</a>
target:链接被按后结果所要显示的视窗。
Target="name":在指定框架中打开超级链接页面
Target="_self":在当前框架中打开超链接页面
Target=“_blank”:新开窗口打开链接页面(同new)
Target="_parent":跳出整个框架集
Target="_top":将目标文件载入到整个浏览器窗口并删除所有框架。
注：_parent、_self、_top只有在使用框架页面时才有效
跑马灯标记(MARQUEE)：
建立移动或卷动的文字。
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#0000FF" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
behavior：决定文字的卷动方式，
可选值为：
lSCROLL一般卷动(默认值)。
lSLIDE如幻灯片，一格格的，效果是文字一接触左边便全部消失。
lALTERNATE文字向左右两边撞来撞去。
<marquee behavior="SCROLL" direction="LEFT" bgcolor="#99CC00" height="30" width="150" hspace="0" vspace="0" loop="INFINITE" scrollamount="30" scrolldelay="500">Hello</marquee>
direction:设定文字的卷动方向(left,right) 。
height、width:设定文字卷动范围，可采用相对或绝对，如30%或30等，单位为像素。
hspace、vspace：设定文字的水平及垂直空白位置。
loop：设定文字卷动次数，值为正整数或INFINITE。
scrollamount：每次文字跳动的间隔，单位是像素。
scrolldelay：文字卷动的停顿时间，单位是毫秒。
例：
<marquee width=150>I'm a small MARQUEE</marquee><BR><BR>
<marquee behavior=slide>This is a slide effect</marquee><BR><BR>
<marquee behavior=alternate>撞来撞去，啊！我昏啦</marquee><BR><BR>
<marquee scrolldelay=5 scrollamount=50>哗！！太快了，我又昏啦</marquee>
表格标记(TABLE)：
表格不仅仅能装载数据，还被广泛地应用于网页的布局，这与表格可以将其所在区域划分为行和列即诸多单元格密切相关
<TABLE>表格标记
<Caption>设置表格标题
<TR>表示表格中的行
<TD>表示表格中的列
<TH>同<TD>，只是对其中文字以粗体显示
表格标记参数：
<TABLE> 的参数设定（常用）：
<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#CCFFFF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF">
width:表格宽度，接受绝对值(如80)及相对值（如 80%）
border:表格边框厚度
cellspacing:表格格线厚度
cellpadding:文字与格线的距离
valign:表格内文字等的位置(垂直)，可选：top,middle,bottom
<TABLE> 的参数设定（常用）：
<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#CCFFFF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF">
bordercolor:表格边框颜色
bordercolorlight:表格边框向光部分的颜色
bordercolordark:表格边框背光部分的颜色，使用bordercolorlight或bordercolordark时bordercolor将会失效
表格行标记参数
<TR> 的参数设定（常用）：
<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000">
同table参数
无序列表标签:
指条列间并无顺序关系，只是利用条列式方法来呈现资料而已，在各条列前面均有一符号以示区隔。
<UL type="disk">
<LI>姓名：杰克升
<LI>生日：1974/11/21
<LI>星座：天蝎座
</UL>
注：type可取值：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）
有序列表标签：
指各条列之间是有顺序的。
<OL type="1"> <OL start=“10">
<LI>姓名：杰克升 <LI>姓名：杰克升
<LI>生日：1974/11/21 <LI>生日：1974/11/21
<LI>星座：天蝎座 <LI>星座：天蝎座
</OL> </OL>
注：type可取值：1、A、a、I、i
可以使用start来设定起始数值
定义列表标签：
无符号、无序列表。
<DL>
<DT>1
<DD>1.1
<DD>1.2
<DT>2
<DD>2.1
<DD>2.2
</DL>
框架(Frame)：
框架也就是所谓的分割窗口、分割画面、框窗效果。
如图：
共4个文件，分别是：
框架文件：index.htm
左侧文件：a.htm
右上文件：b.htm
右下文件：c.htm
FRAMESET参数说明：
<FRAMESET COLS="120,*" frameborder=0 framespacing=5>
COLS：垂直切割
ROWS：横向切割画面
frameborder：框架边框，无边框(0)或有边框(1)
framespacing：框架间保留空白的距离
FRAME参数说明：
<FRAME SRC="a.html" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
SRC：此框架要显示的页面名称
scrolling：是否要显示卷轴，YES、NO、AUTO
noresize:不允许改变边框大小
marginhight：框架高度部份边缘所保留的空间
marginwidth：框架宽度部份边缘所保留的空间
例1:
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*">
<FRAME SRC="a.html" NAME="1">
<FRAME SRC="b.html" NAME="2">
</FRAMESET>
</HTML>
例2(主框架文件index.html):
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" frameborder=1 framespacing=0>
<FRAME SRC="a.html" NAME="1" frameborder=1 scrolling="no" noresize marginhight=0 marginwidth=0>
<FRAMESET ROWS="100,*">
<FRAME SRC="b.html" NAME="2" noresize frameborder=1>
<FRAME SRC="c.html" NAME="3" noresize frameborder=1>
</FRAMESET>
</FRAMESET>
</HTML>
框架(IFRAME)：
又称为浮动帧标记，实现将一个HTML文档嵌入在另一个HTML中，与这个HTML文件内容相互融合，成为一个整体。
<Iframe src="URL" width="x" height="x" scrolling="YES" frameborder="x"></iframe>
src：文件的路径
width、height：要占用的区域宽度与高度
scrolling:是否要显示卷轴，YES、NO、AUTO
width、height：要占用的区域宽度与高度
scrolling:是否要显示卷轴，YES、NO、AUTO
FrameBorder：区域边框的宽度，为了与所嵌入的内容相融合，常置0
例：b-1.html
窗体：
Form表单是HTML页面与浏览器端实现交互的重要手段，利用表单可以收集客户端提交的有关信息。
在HTML里定义表单，并且使表单与JSP或ASP等服务器端的表单处理程序配合。
FORM
<form action="user.asp" method="POST">
<br>您的姓名: <input type=text name=un>
<br>您的姓名: <input type=text name=un>
<br>您的网址: <input type=text name=weburl value="">
<input type=submit value=“发送”>
</form>
参数说明：
action：提交页面地址
method：发送窗体内数据的方法：get(默认值)、post
区别：1.Get将表单中数据按variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，按照变量和值相对应的方式，传递到action所指向URL。
2.Get是不安全的，在传输过程，数据被放在请求的URL中，用户可以在浏览器上直接看到提交的数据；Post的所有操作对用户来说都是不可见的区别：
3.Get传输的数据量小，这主要是因为受URL长度限制(2K字节)；而Post可以传输大量的数据，所以在上传文件只能使用Post。
4.Get限制Form表单的数据集的值必须为ASCII字符；而Post支持整个ISO10646字符集。
文本框/密码框/隐藏框：
<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
<INPUT TYPE="PASSWORD" NAME="NAME" SIZE="20">
<INPUT TYPE=“HIDDEN" NAME="NAME">
参数说明：
NAME：名称
SIZE：显示宽度
VALUE：框内的值
MAXLENGTH：设定输入的最大长度单选框/复选框：
<INPUT TYPE="RADIO" NAME="NAME" Value="0">
<INPUT TYPE="CHECKBOX" NAME="NAME" Value="0">
参数说明：
NAME：单选框/复选框名称(同名的为一组)
VALUE：单选框/复选框的值
CHECKED：设定该项为选中状态
提交/重设按钮：
<INPUT TYPE="SUBMIT" VALUE="送出资料">
<INPUT TYPE="RESET" VALUE="重新填写">
说明：
1.提交：将当前form内的数据提交到action所设定的页面
2.重设：清空当前form内已各控件中输入的数据
文本区域：
<TEXTAREA NAME="TALK" COLS="20" ROWS="3" WRAP="OFF">
</TEXTAREA>
说明：
1. WRAP:设定换行模式,OFF(不自动换行) ,VIRTUAL(显示时自动换行，提交时未换行),PHYSICAL (自动换行)
2.COLS:设定栏位的行数
3.ROWS:设定栏位的列数列表框：
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜欢">非常喜欢
<OPTION VALUE="还算喜欢">还算喜欢
<OPTION VALUE="不太喜欢">不太喜欢
</SELECT>
参数说明：
1.SIZE：栏位大小，默认值为1
2.multiple：设定此栏位为复选(alt+鼠标选择)
HTML中元素：
HTML中操作总汇（根据张荣老师ppt，以及网络上不知作者的文章总结）相关推荐
- vc中操作Xml--使用CMarkup类
DotNet中使用xml相对比较轻松,在vc中操作xml,有些繁琐.最近在网络上得知CMarkup比较好用,于是试了下,还好,就把部分例子写出来.以后有时间的话,再写清楚点. //---------- ...
- python使用视频_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
- python播放视频代码_Python中操作各种多媒体,视频、音频到图片的代码详解
我们经常会遇到一些对于多媒体文件修改的操作,像是对视频文件的操作:视频剪辑.字幕编辑.分离音频.视频音频混流等.又比如对音频文件的操作:音频剪辑,音频格式转换.再比如我们最常用的图片文件,格式转换.各 ...
- thinkphp ajax volist,thinkphp中的volist标签在ajax中操作详解
在一个ThinkPHP的复杂页面(包含volist)中实现volist标签显示Jquery查询结果的返回.本文主要和大家介绍thinkphp 中的volist标签在ajax操作中的特殊性(推荐),需要 ...
- Linux中把文件夹打成war包,SpringBoot中maven项目打成war包部署在liunx服务器上的方法...
说明:Spring Boot由于内嵌了如Tomcat,Jetty和Undertow这样的容器,也就是说可以直接跑起来,用不着再像Spring项目还需要外置的Tomcat等容器来进行部署工作了,通过启动 ...
- 要配置家庭网中的计算机 需要启动,怎样设置组成家庭网络？
家庭网是现在很多人都使用的一种连接方式,下面是学习啦小编整理的一些关于设置组成家庭网络的相关资料,供你参考. 设置组成家庭网络的方法一 第一步:将网卡.电缆等硬件设备按照有关说明安装.连接好. 第二步 ...
- md5加密数据表中的密码php,JSP_使用MD5加密数据库中的用户密码（一），我们知道，现在网络上一般的 - phpStudy...
使用MD5加密数据库中的用户密码(一) 我们知道,现在网络上一般的网站,稍微完善一点的,往往都需要用户先注册,提供诸如电子邮件.账号.密码等信息以后,成为网站栏目的注册用户,才可以享受网站一些特殊栏目 ...
- 工作中需要将多张CAD图纸共同转换成DWF格式如何操作？
工作中需要将多张CAD图纸共同转换成DWF格式如何操作?有要求需要将CAD图纸文件进行格式转换成DWF形式的应该怎么样进行操作,使用CAD转换器软件进行此项操作的步骤是什么,具体应该怎么样进行操作,接 ...
- 张建宁老师主讲：计算机网络基础（笔记）
西安鹏程张建宁老师主讲:计算机网络基础(听课笔记) 第一章:计算机网络概述 第三讲:网络硬件配置实例 一般PC机用作服务器,理论上同时可访问的计算机不能超过十台,实际上有二十台同时访问速度会明显变慢. ...
最新文章
- KVM libvirt 虚拟机快照技术
- Spark源码剖析 - SparkContext的初始化(八)_初始化管理器BlockManager
- 10月第3周安全回顾 中小企业易受攻击 RealPlayer现漏洞
- UA MATH574M 统计学习II 二元分类
- Apache Hive JdbcStorageHandler 编程入门指南
- J2SE综合对java util的总结 一
- 如何简单形象又有趣地讲解神经网络是什么？
- 关于树和二叉树的一些基本概念，基本名词解释。
- Centos7搭建Java环境，并设置项目自启动脚本、定时数据库备份/日志清理脚本
- 作用域经典练习题(主要是这个图太大不能一起分享)
- Activityn 生命周期
- k2pbreed刷高恪教程_【转载】斐讯K1、K2、K2P 大部分官方固件刷机、刷入Breed 辅助工具教程工具...
- 基于JS和Canvas的小球碰撞动画演示
- Windows 技巧集
- ubuntu版网易云音乐下载
- 讯飞语音离线版本集成
- CTR预估 论文精读(十七)--ESMM: Entire Space Multi-Task Model
- 数字图像处理实验03——图像几何变换
- win7查看隐藏文件_u盘删除文件怎么恢复？
- Numpy入门[9]——数组与字符串的转换