整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML标签以及各个标签属性大全（网页制作必备）

HTML标签以及各个标签属性大全（网页制作必备）

<metahttp-equiv="Windows-Target"content="_top">


<NOBR> 取消换行 和<br>相反

总类（所有HTML文件都有的

--------------------------------------------------------------------------------

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

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

文头 <HEA D></HEA D> 描述性资料，像是「主题」）

文体 <BODY></BODY> 文件本体）

结构性定义（由浏览器控制的显示风格）

--------------------------------------------------------------------------------

标题<H?></H?>表示从16有六层选择）数值越高字越小

标题对齐 <H?ALIGN=LEFT|CENTER|RIGHT></H?>左对齐、居中对齐、右对齐

区分<P></P>

区分对齐<PALIGN=LEFT|RIGHT|CENTER|JUSTIFY></P>左对齐、右对齐、居中对齐、两端对齐

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

斜体 <EM></EM>

加粗 <SPONG></SPONG>

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

码<CODE></CODE>显示原始码之用）

样本<SA MP></SA MP>

表示一段用户应该对其没有什么其他解释的文本。要从正常的上下文抽取这些字符时，通常要用到这个标签。

并不经常使用，只在要从正常上下文中将某些短字符序列提取出来，对其加以强调，才使用这个标签

键盘输入<KBD></KBD>

变数<VA R></VA R>

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

地址<A DDRESS></A DDRESS>

3.0大字<BIG></BIG>

3.0小字<SMA LL></SMA LL>

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

--------------------------------------------------------------------------------

加粗<B></B>

斜体<I></I>

3.0底线<U></U>尚有些浏览器不提供）

3.0删除线 <S></S>尚有些浏览器不提供）

3.0下标 <SUB></SUB>

3.0上标 <SUP></SUP>

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

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

预定格式的宽度<PREWIDTH=?></PRE>以字元计算）

N1.0+向中看齐<CENTER></CENTER>文字与图片都可以）

N1.0闪耀<BLINK></BLINK>有史以来最被嘲弄的标签）

N1.0字体大小<FONTSIZE=?></FONT>从17

N1.0改变字体大小<FONTSIZE=+|-?></FONT>

N1.0基本字体大小<BA SEFONTSIZE=?>从17;内定为3

N2.0字体颜色<FONTCOLOR="#$$$$$$"></FONT>

连结与图形

--------------------------------------------------------------------------------

链接 <A HREF="URL"></A >

连结到锚点<A HREF="URL#***"></A >如果锚点在另一个档案）

<A HREF="#***"></A >如果锚点目前的档案）

N2.0连结到目的视框<A HREF="URL"TA RGET="***"></A >

设定锚点<A NA ME="***"></A >

图形 <IMGSRC="URL">

图形看齐方式<IMGSRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>

N1.0图形看齐方式<IMGSRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|A BSMIDDLE|BA SELINE|A BSBOTTOM>

取代文字 <IMGSRC="URL"ALT="***">如果没有办法显示图形则显示此文字）

点选图<IMGSRC="URL"ISMA P>需要CGI程式）

N2.0点选图 <IMGSRC="URL"USEMA P="URL">

N2.0地图 <MA PNA ME="***"></MA P>描述地图）

N2.0段落 <A REA SHA PE="RECT"COORDS=",,,"HREF="URL"|NOHREF>

3.0大小 <IMGSRC="URL"WIDTH="?"HEIGHT="?">以pixel为单位：px

N1.0图形边缘 <IMGSRC="URL"BORDER=?>以pixel为单位）

N1.0图形边缘空间 <IMGSRC="URL"HSPA CE=?VSPA CE=?>以pixel为单位）

N1.0低解析度图形 <IMGSRC="URL"LOWSRC="URL">

N1.1用户端拉 <META HTTP-EQUIV="Refresh"CONTENT="?;URL=URL">使用端自动更新

N2.0内嵌物件 <EMBEDSRC="URL">将物件插入页面）

N2.0内嵌物件大小 <EMBEDSRC="URL"WIDTH="?"HEIGHT="?">

分隔

--------------------------------------------------------------------------------

段落 <P>通常是两个return

3.0段落 <P></P>新定义成容器型标签）

3.0文字看齐方式 <PALIGN=LEFT|CENTER|RIGHT></P>

换行 <BR>一个return

N1.0文字部份看齐方式<BRCLEA R=LEFT|RIGHT|A LL>与图形合用时）

横线 <HR>

N1.0横线对齐 <HRALIGN=LEFT|RIGHT|CENTER>

N1.0横线厚度 <HRSIZE=?>以pixel为单位）

N1.0横线宽度 <HRWIDTH=?>以pixel为单位）

N1.0横线比率宽度 <HRWIDTH=%>以页宽为100%

N1.0实线 <HRNOSHA DE>没有立体效果）

N1.0不可换行 <NOBR></NOBR>不换行）

N1.0可换行处 <WBR>如果需要，可在此断行）

列举（可以巢状列举）

--------------------------------------------------------------------------------

无次序式列举<UL><LI></UL><LI>放在每一项前）

N1.0公布式列举 <ULTYPE=DISC|CIRCLE|SQUA RE>定义全部的列举项）

<LITYPE=DISC|CIRCLE|SQUA RE>定义这个及其後的列举项）

有次序式列举<OL><LI></OL><LI>放在每一项前）

N1.0数标型态 <OLTYPE=A |a|I|i|1>定义全部的列举项）

<LITYPE=A |a|I|i|1>定义这个及其後的列举项）

N1.0起始数字 <OLVA LUE=?>定义全部的列举项）

<LIVA LUE=?>定义这个及其後的列举项）

定义式列举 <DL><DT><DD></DL><DT>项目,<DD>定义）

表单式列举 <MENU><LI></MENU><LI>放在每一项前）

目录式列举 <DIR><LI></DIR><LI>放在每一项前）

背景与颜色

--------------------------------------------------------------------------------

3.0重复排列的背景 <BODYBA CKGROUND="URL">

N1.1+背景颜色 <BODYBGCOLOR="#$$$$$$">依序为红、绿、蓝）

N1.1+文字颜色 <BODYTEXT="#$$$$$$">

N1.1+连结颜色 <BODYLINK="#$$$$$$">

N1.1+看过的连结 <BODYVLINK="#$$$$$$">

N1.1使用中的连结 <BODYALINK="#$$$$$$">

特殊字元（以下标签需用小写）

--------------------------------------------------------------------------------

特别符号 &#?;其中 ?代表 ISO8859-1编码）

<&lt;>&gt;&&amp;"&quot;

注册商标TM?

N1.0+注册商标TM&reg;

著作权符号 ?

N1.0+著作权符号 &copy;

表单（通常需要与CGI程式配合）

--------------------------------------------------------------------------------

定义表单 <FORMACTION="URL"METHOD=GET|POST></FORM>

N2.0上传档案 <FORMENCTYPE="multipart/form-data></FORM>

输入栏位 <INPUTTYPE="TEXT|PA SSWORD|CHECKBOX|RA DIO|IMA GE|HIDDEN|SUBMIT|RESET">

栏位名称 <INPUTNA ME="***">

栏位内定值 <INPUTVA LUE="***">

已选定 <INPUTCHECKED>适用於checkbox与 radiobox

栏位宽度 <INPUTSIZE=?>以字元数为单位）

最长字数 <INPUTMA XLENGTH=?>以字元数为单位）

下拉式选单 <SELECT></SELECT>

下拉式选单名称 <SELECTNA ME="***"></SELECT>

选单项目数量 <SELECTSIZE=?></SELECT>

多选式选单 <SELECTMULTIPLE>多选）

选项 <OPTION>

内定选项 <OPTIONSELECTED>

文字输入区 <TEXTA REA ROWS=?COLS=?></TEXTA REA >

输入区名称 <TEXTA REA NA ME="***"></TEXTA REA >

N2.0输入区换行方式 <TEXTA REA WRA P=OFF|VIRTUA L|PHYSICA L></TEXTA REA >

表格

--------------------------------------------------------------------------------

3.0定义表格 <TA BLE></TA BLE>

3.0表格框线 <TA BLEBORDER></TA BLE>有或没有）

N1.1表格框线 <TA BLEBORDER=?></TA BLE>可以设定数值）

N1.1储存格左右留白 <TA BLECELLSPA CING=?>

N1.1储存格上下留白 <TA BLECELLPA DDING=?>

N1.1表格宽度 <TA BLEWIDTH=?>以pixel为单位）

N1.1宽度比率 <TA BLEWIDTH=%>页宽为100%

3.0表格列<P></P>

3.0表格列内容看齐 <PALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0储存格<TD></TD>须与列并用）

3.0储存格内容看齐 <TDALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0不换行 <TDNOWRA P>

N3.0储存格背景颜色 <TDBGCOLOR=#$$$$$$>

3.0储存格横向连接 <TDCOLSPA N=?>

3.0储存格纵向连接 <TDROWSPA N=?>

N1.1储存格宽度 <TDWIDTH=?>以pixel为单位）

N1.1储存格宽度比率 <TDWIDTH=%>页宽为100%

3.0表格标题 <TH></TH>跟<TD>一样，不过会对中并加粗）

3.0表格标题对齐 <THALIGN=LEFT|RIGHT|CENTERVA LIGN=TOP|MIDDLE|BOTTOM>

3.0表格标题不换行 <THNOWRA P>

3.0表格标题占几栏 <THCOLSPA N=?>

3.0表格标题占几列 <THROWSPA N=?>

N1.1表格标题宽度 <THWIDTH=?>以pixel为单位）

N1.1表格标题比率宽度<THWIDTH=%>页宽为100%

3.0表格抬头 <CA PTION></CA PTION>

3.0表格抬头看齐 <CA PTIONALIGN=TOP|BOTTOM>表格之上/之下）

视框（定义与控制萤幕上的特定区域）

--------------------------------------------------------------------------------

N2.0视框格式总定义 <FRA MESET></FRA MESET>取代<BODY>

N2.0视框行长度分配 <FRA MESETROWS=,,,></FRA MESET>pixel或 %

N2.0视框行长度分配 <FRA MESETROWS=*></FRA MESET>*=相对大小）

N2.0视框栏宽度分配 <FRA MESETCOLS=,,,></FRA MESET>pixel或 %

N2.0视框栏宽度分配 <FRA MESETCOLS=*></FRA MESET>*=相对大小）

N2.0定义个别视框 <FRA ME>定义个别视框）

N2.0个别视框内容 <FRA MESRC="URL">

N2.0个别视框名称 <FRA MENA ME="***"|_blank|_self|_parent|_top>

N2.0边缘宽度 <FRA MEMA RGINWIDTH=?>「左」与「右」边界）

N2.0边缘高度 <FRA MEMA RGINHEIGHT=?>「天顶」与「地底」边界）

N2.0卷动条 <FRA MESCROLLING="YES|NO|A UTO">

N2.0不可改变大小 <FRA MENORESIZE>

N2.0无视框时的内容 <NOFRA MES></NOFRA MES>如果浏览器不提供视框功能的话）

杂项

--------------------------------------------------------------------------------

说明 <!--***-->浏览器不会显示）

档案型态声明 <!DOCTYPEHTMLPUBLIC"-//IETF//DTDHTML2.0//EN">

3.0档案型态声明 <!DOCTYPEHTMLPUBLIC"-//W3O//DTDW3HTML3.0//EN">

可搜寻 <ISINDEX>指示可搜寻的索引项）

N1.0提示 <ISINDEXPROMPT="***">要求输入的提示文字）

送出搜寻条件 <A HREF="URL?***"></a>其中的问号不是数字，而是「问号」）

基本档案的URL<BA SEHREF="URL">必须放在「文头」区段内）

N2.0基本视窗名称 <BA SETA RGET="***">必须放在「文头」区段内）

相关性 <LINKREV="***"REL="***"HREF="URL">必须放在「文头」区段内）

背景资讯 <META >必须放在「文头」区段内）

HTML标签

HTML标签通常是英文词汇的全称（如块引用:blockquot或缩略语（如“p代表Paragragh但它与一般文本有区别，因为它放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>有些标签说明页面如何被格式化（例如，<p>开始一个新段落）其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－例如标题。

关于标签，需要记住的成双出现的每当使用一个标签－如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquot前的斜杠，那就是关闭标签与打开标签的区别。

基本HTML页面以<html>标签开始，以</html>结束。之间，整个页面有两部分－标题和正文。

标题词－夹在<head>和</head>标签之间－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间－即所有页面的内容所在页面上显示的任何东西都包含在这两个标签之中。

那么让我建立一个简单的范例吧，非常容易的第一步，当然是要建立一个新的文本文件（记住，如果你使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存）将它命名为“xxxx.html随便你起一个什么名字,但记住,要用英文)

然后你可以用浏览器将它打开，会看见最简单的自己做的页面。

.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

Html英文 HyperTextMarkupLanguag缩写，中文意思是超文本标志语言”用它编写的文件(文档)扩展名是.html或.htm可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPagEditor等编辑工具来编写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>标志中还可以有以下属性：属性

用途

示例

<bodibgcolor="#rrggbb">设置背景颜色。<bodibgcolor="red">红色背景

<boditext="#rrggbb">设置文本颜色。<boditext="#0000ff">蓝色文本

<bodilink="#rrggbb">设置链接颜色。<bodilink="blue">链接为蓝色

<bodivlink="#rrggbb">设置已使用的链接的颜色。<bodivlink="#ff0000">

<bodialink="#rrggbb">设置正在被击中的链接的颜色。<bodialink="yellow">

说明:以上各个属性可以结合使用，如<bodibgcolor="red"text="#0000ff">引号内的rrggbb用六个十六进制数表示的RGB即红、绿、蓝三色的组合)颜色，如#ff0000对应的红色。此外，还可以使用Html语言所给定的常量名来表示颜色：BlackWhiteGreenMaroonOliveNaviPurplGraiYellowLimeAguaFuchsiaSilverRedBlue和Teal如<boditext="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。

4.<title></title>

使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的主题”要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。注意：<title></title>标志对只能放在<head></head>标志对之间。

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

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

<html>

<head>

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

</head>

<bodibgcolor="red"text="blue">

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

</body>

</html>

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>

上一个教程中我讲了Html文档的基本标志，但我还不知道怎样在浏览器中显示文本之类的东西，这正是教程二中将要谈到学习之前，必须强调一下，这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的

1.<p></p>

<p></p>标志对是用来创建一个段落，此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，<p>标志还可以使用align属性，用来说明对齐方式，语法是<palign=""></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></dl><dt></dt><dd></dd>

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

例2创建一个普通列表

<html>

<head>

<title>一个普通列表</title>

</head>

<boditext="blue">

<dl>

<dt>中国城市</dt>

<dd>北京 </dd>

<dd>上海 </dd>

<dd>广州 </dd>

<dt>美国城市</dt>

<dd>华盛顿 </dd>

<dd>芝加哥 </dd>

<dd>纽约 </dd>

</dl>

</body>

</html>

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

中国城市

北京

上海

广州

美国城市

华盛顿

芝加哥

纽约

5.<ol></ol><ul></ul><li></li>

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

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

<html>

<head>

<title></title>

</head>

<boditext="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对齐方式属性，读者可以自己试试看。

html标签的用法=======================================================================================

一、基本概念：

网页、网站、浏览器、IE/NetScape

HTML超文本标记语言，什么是超文本、什么是标记语言。

HTML内容怎样显示出来。

二、HTML语法：

<html></html>

<head></head>

<title></title>

<body></body>

三、<body>一些属性：

什么是属性：

text:设定整个网页中文字的色彩

link:用于设定一般超链接文本的显示色彩

alink:用于设定鼠标移动到超链接上并按下鼠标是超文本的显示色彩

vlink:设置访问过的超链接的色彩

background:设定背景图片，可以是绝对路径也可以是相对路径。

bgcolor:用户设定背景色，当已设定background时这个属性会失去作用

leftmargin:左边距

topmargin:上边距

四、注释与特殊字符：

<!--.........-->

注释的内容不会被显示出来

注释不能被嵌套。

<<

>>

&&

"'

注册符号

版权符号

"TM

空格

五、格式标签

<p></p>:用来创建一个段落,可以用align属生来设置段落的对齐方式

<br/>:单标记直接在>前加一个“/表示结束标记，显示一个换行

<center></center>:对之间的图形或文本在水平方向居中显示

<marquee></marquee>:移动图片或文本。direct属性：内容的移动方向（left,right,down,up;behavior指定内容的移动行为（scroll,alternate,slid

<dl></dl><dt></dt><dd></dd>用来创建一个普通列表。

<ol></ol><ul></ul><li></li>:<ol></ol>创建一个标有数字的列表;<ul></ul>对创建的列表标有一个圆点;<li></li>只能在<ol></ol>或<ul></ul>之间使用，表示列表项

<pre></pre>:对文本进行预格式处理

六、文本标签：

<h1></h1>......<h6></h6>:把文本以标题方式显示。

<b></b><i></i><u></u>:分别对应粗体，斜体，下划线

<sub></sub><sup></sup>:分别对应下上标的显示

<cite></cite>:引用方式的字体，通常是斜体

<em></em>:显示需要强调的文本，通常是斜体加粗

<strong></strong>:用来显示加重文本，通常是加粗显示

<font></font>:对字体、字号、颜色进行改变。face属性：字体;Size属生：大小; Color属生：色彩

七、图像标签：

<img/>

src属性：必不可少，用来设置图像文件所在位置。

alt属性：当鼠标移到图像上显示的提示文本，当图像无法显示时，所显示的代替文字

align属性：设置图像与周围文本的对齐方式。top,bottom,left,right

border属性：设置图像的边框宽度

width和height设置图像的长宽高

<hr/>:HTML文档中加入一条水平线。

size:线的粗细

color:线的色彩

width:线的长度

noshade:阴影显示

八、超链接标签：

通一资源定位符：URL;

如：http://www.sina.com

http所使用的协议;www.sina.net要访问的主机名;80端口号

<ahref=""></a>:把中间标记的内容作为超链接显示，href内容作为超连接点击后转向的页面。

如：<ahref="http://www.sina.com">新浪网</a>

<ahref=http://www.hmttv.cn/uploadfile/2024/1012/20241012045509946.gif"></a>

href属性是不可少的

target属性：指明在浏览器的哪个窗口打开新页面。

<aname="">锚点标记，同一网页中设置多个锚点便于超链接的浏览。

如：<ahref="#标记１">跳转到第一个标记上</a>

mailto:打开电子邮件:

<ahref="mailto:ldc_5588@163.comsubject=hello&body=您好">联系我</a>

九、<mapname=""></map>图像地图将一个图像分成多个部分，各部分分别指向不同的链接。

<areashape="形状"coords="坐标"href="url">给图像分块

shape属性可以是以下几种形状：

rect:矩形，此时的coord为矩形的左上角个右下角的坐标

poly:多边形，此时的coord为多边形的各个顶点

circle:圆，此时coord为圆习坐标及半径

如：

<imgsrc="chinagif"usemap="mymap"/>

<mapname=mymap>

<areashape="rect"href="a.html"coords="140,20,280,60">

<areashape="poly"href="b.html"coords="100,100,180,80,200,400">

<areashape="circle"href="c.html"coords="10,100,60">

</map>

十、表格标签：<table></table><tr></tr><td></td>

这三个标签的层次结构：

<table></table>定义一个表格的开始和结束

<tr></tr>定义一行的开始和结束

<td></td>定义一个单元格的开始和结束

<table></table>属性：

bgcolor:设置表格的背景色彩

border:设置表格的边框的宽度

bordercolor:设置表格边框色彩

bordercolorlight:设置表格边框明亮部分的色彩

bordercolordark:设置表格边框昏暗部分的色彩

cellspacing:设置单元格之间的间隔

cellpad设置单元格内部的内容与边框的间隔

width:表格的宽度

height:表格的高度

<tr></tr>

align:整行单元格的内容水平对齐方式left,center,right

valign:整行单元格的内容竖直对齐方式topmiddle,bottom

bgcolor:设置这一行的色彩

<td></td>

width:单元格的宽度（大小）

height:单元格的高度

align:单元格内部内容的水平对齐方式

valign:单元格内部内容的竖直对齐方式

colspan:设置一个单元格跨占的列数

rowspan:设置一个单元格跨占的行数

nowrap:禁止单元格内的内容自动换行

<th></th>与<td></td>类似只不过里面显示的内容是黑体居中的

十一、框架标签<frameset></frameset><frame></frame>

什么是框架：将一个窗口分割成多部分，每一部分显示一个独立的页面。

框架只是分割窗口。

<frameset></frameset>定义一个框架集：

rows:将窗口竖直拆分时窗口的大小比例

cols:将窗口水平拆分窗口的大小比例

<frame></frame>定义一个具体的框架窗口：

src:要显示网页的ＵＲＬ

name:框架窗口的名子

taget:该框架中的超链接默认的打开窗口_blank,_parent,_self,_top

scrolling:否在框架边上出现滚动条yes,no,auto

noresize:禁止用户拖动分隔线来调整框架的大小,直接将该属生放入就可以了

<iframe></iframe>一个网上插入一个简单的框架窗口，这个窗口用来显示另一个文件。

name:框架窗口的名子

src:框架窗口中所显示的新的网页

十二、表单标签：

什么时表单？

<form></form>:定义表单的开始和结束位置<略讲>

action:处理表单内容的服务器程序的ＵＲＬ

method:提交给服务器处理表单信息的方式

get:将表单信息以ＵＲＬ参数的形式附在actionＵＲＬ后面

set:将表单信息以ＨＴＴＰ消息实体发送给ＷＥＢ服务器

target:设置服务器返回结果显示的窗口

title:当鼠标放在表单上的时候以黄色的泡泡进行提示

<inputtype="submit">定义一个提交按钮

action:指定ＵＲＬ所指定的服务器程序

value:按钮上的文字

<inputtype="reset">:定义一个重新填写的按钮。

value:按钮上的文字

<inputtype="text">:定义一个单行文本框

size:输入区域的宽度，以字符个数为单位

value:文本框的内容

maxlength:用户能够输入的最大字符串长度

readonly:属性存在时，文本框可以获得焦点，但用户不能更改里面的内容。

disable:属性存在时，文本框不能获得焦点，也不能更改里面的内容。

<inputtype="checkbox">:定义一个复选框

name:复选框的名，同一组复选框用同一个名子

checked:该复选框是否被选中

value:指定复选框被选中时，这个复选框的后台值

<inputtype="radio">:定义一个单选按钮

name:单选按钮的名，同一组单选按钮用同一个名子

value:指定单选按钮被选中时，这个单选按钮的后台值

<inputtype="hidden">表单上添加一个隐式的字段的元素，浏览器不会显示这个字段

name:名子

value:值

当表单提交的时候会以name=valu形式提交到服务器上去。

<inputtype="button">:表单上定义一个普通的按钮，这个按钮通常与某个脚本代码下关联

<inputtype="password">:表单上定义一个密码输入区域.

<inputtype="file">:用来从本机向服务器传文件

<inputtype="image">:表单上创建一个图像元素。

图像的源文件由src属性来指定，没有valu属性。

图像元素在某些情况下可以代替submit按钮来使用

单击图像元时就会将表单信息和单击处的x,y值一起发送到服务器

<select></select>创建一个下拉列表框或可以复选的列表框。

size:设置列表框中可见选项的数目。默认值是１，这时显示的下拉列表框。

mutipl属性：这是一个不且赋值的属性，定义列表框是否可以多选。

列表框中定义各项是用<option></option>来实现的

<option></option>为列表框中添加项目

value:项目的后台值

selected:指定项目是否被选定

<textarea></textarea>创建一个可输入多行文本的文本框

cols:文本框的列数

rows:文本框的列数

十三、分区标签：

<div></div>:区域标签，层

<span></span>:区域标签

十四、头元素:

<base>标签：用于指定网页中超链接的基准地址。网页中所有超链接的相对地址都以该地址为基准地址。

该标签只能放在<head></head>标签之间。

如：<basehref="http://www.sina.com/image"target="_blank">

<meta>标签：通常用于文件的<head></head>之间。主要有两种类型的<meta>用不同的属性名(name,http-equiv来划分。

name属性主要用于在网页中加入一些关于网页的描述信息，例如，网页的关键字，网页的描述信息等

http-equiv属性主要用于在HTML文档中模拟HTTP头。

什么是HTTP头？

通过访问网页时，服务器除了返回网页文件本身的内容（也就是浏览器中用查看源文件能看到东西）之外，还在返回网页文件内容之前，传送一部分被称为HTTP头的内容给浏览器，这部分肉容是浏览器的查看源文件中看不到HTTP头的内容相当于服务器发送给浏览器的一些暗号指令，通知浏览器查看该网页时应使用的字符编码、否本地缓存、网页的期时间、否间隔一定时间以后刷新页面或跳到其它页面等。

name属性的设置：

Keywords:网页的关键字，以便于在搜索引擎中进行收集信息。

<metaname="keywords"content="软件工程师培训,清华IT,华育国际">

Descript网页描述信，以便于搜索。

Gener用于编辑此页所用的工具名，content中填入所用的网页编辑软件。

Author用于说明网页的作者，content中填入作者的姓名。

Copyright:用于版权声明，content中填入你版权声明。

http-equiv属性设置：

Content-Type:用于说明网页内容的类型以及文本内容所使用的字符集编码。

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

Refresh:告诉浏览器定时自动刷新网页

<metahttp-equiv="Content-Type"content="1;url=http://www.sina.com.cn">

通知浏览器过一秒后跳转到新浪网上去。

Expires:用于设定网页的期时间。为了提高效率，浏览器可以被设置成缓存以前访问的页面，当再次访问该页面时，浏览器不会再去服务器上访问，而是直接在本地缓存中读到如果将其Content设为0则禁止浏览器使用缓存页面。

<metahttp_equiv="Expires"content=""Mon,12,May,200700:00:00GMT>

Windows-Target:强制页面在某个窗口显示。例如要防止别人把你网页作为frame页面调用：

流行的 PLC 编程语言是什么？

世界各地的工程师都在争论这个问题。普遍认为，PLC 编程最常用的语言是梯形逻辑。这是因为它非常灵活、易于学习，而且使用过相同架构原理图的电工很容易理解它。

然而，在过去十年中，更年轻的劳动力进入了制造业。这些工程师和技术人员主要学习 Java、Python 和 Javascript 等现代语言。这些语言与结构化文本 [ST] 更相似，因此促进了其使用。

考虑相关行业也很重要。化学工艺通常使用管道和仪表图 (P&ID) 进行设计。这些特定示意图可通过使用功能块图 [FBD] 轻松复制。

梯形逻辑 PLC 编程

在可编程逻辑控制器流行之前，大多数制造工厂都采用继电器控制。继电器根据通过设备物理接线实现的简单逻辑来驱动负载。这些设备的接线在电气图纸中指定，这些图纸假定布局类似于梯子。随着最基本的 PLC 被引入该领域，梯形逻辑 PLC 编程旨在模仿基于继电器的电路布局。换句话说，梯形逻辑是最早的PLC 编程语言之一，由于其简单性，至今仍在使用。

?自诞生以来，梯形逻辑已发生了重大变化。但是，操作的基本原理保持不变。梯形逻辑PLC 编程按顺序评估梯形图的每个梯级，评估条件指令，如果结果评估为“TRUE”，则执行输出指令。

梯形逻辑 PLC 编程的优点

  • 易于实施和故障排除：梯形逻辑是一种可视化语言，可为大多数指令提供状态确认。换句话说，即使对特定流程知之甚少的人也可以轻松浏览程序并了解逻辑。
  • 模块化设计：梯形逻辑可通过逻辑的增加或减少轻松修改。每个梯级都是一个单独的条件，可以根据需要删除或添加。
  • 弹性和一致性：Ladder Logic 允许用户实现许多功能。但是，该语言高度标准化，无法提供充分的灵活性，因此需要在不同实现之间保持代码的一致性。

梯形逻辑的缺点

  • 学习难度高：Ladder Logic 是一种简单的语言，但对于具有 C、C++、Java 或 Python 背景的人来说，它并不是非常直观。话虽如此，但对于电气工程师和具有汇编编程基础知识的人来说，它可能更容易掌握。
  • 部署缓慢：由于梯形逻辑的可视化特性，程序员需要更长的时间来创建他们所设想的逻辑。与其他现代编程语言相比，需要拖放元素，这会减慢开发过程。
  • 对于复杂应用来说不够直观：梯形逻辑在顺序布尔任务方面表现优异。然而，当涉及到涉及 PID、流量控制、模拟传感器和反馈回路的现代控制理论时，它并不总是易于实施和解读。

结构化文本 PLC 编程

结构化文本是一种与 C 或汇编语言非常相似的PLC 编程语言。用户输入按顺序执行的代码行，评估特定函数、布尔检查并激活 PLC 的适当输出。结构化文本为具有 C、C++、Java 或 Python 等传统编程语言背景的用户提供了进入 PLC 的简单过渡。此外，它可以在文本处理器中轻松操作，因此无需硬件即可快速实现。

结构化文本 PLC 编程的优点

  • 与其他编程语言一样直观：如上所述，结构化文本对于那些希望从软件工程背景过渡的人来说很容易学习。它具有与 C 或 Java 中相同的结构、编程范例和功能。
  • 高复杂度：结构化文本比其他语言具有更大的灵活性，因此掌握该语言的人可以更轻松地实现高级功能。
  • 可移植性|：结构化文本在大多数 PLC 系统中都是标准化的，因此很容易在平台之间迁移。您会发现不同平台之间其他语言存在显著差异，但结构化文本可以在硬件和软件平台上实现。

结构化文本的缺点

  • 难以排除故障| 与梯形逻辑编程相比，结构化文本从故障排除的角度来看要复杂得多。没有视觉队列，视觉辅助较少，并且一行上通常有更多代码。不熟悉这种语言的人很难弄清楚流程。
  • 易出错| 结构化文本为用户提供了更大的灵活性。然而，这种灵活性是以标准化为代价的。用户必须使用软件工程最佳实践来创建安全后备并捕获软件的任何潜在故障。

功能块图 PLC 编程语言

功能块图 (FBD) 是一种专门为化学过程开发的编程语言。它允许用户创建过程的可视化表示和流程，并在指令之间进行适当的转换。可视化编辑器用户友好、直观，并创建了一种自然的方式来实现特定流程。

我们在 PLC 程序中使用功能块图的最常见应用是建立 PID 控制器。FBD 的可视化功能使 PID 易于在现场实施、可视化、调整和故障排除。

功能块图 PLC 编程的优点

  • 灵活的可视化编辑器：功能块图编程编辑器非常用户友好，并提供了创建任何布局的简单方法。
  • 适合复杂的编程结构：在梯形逻辑中，用户必须使用多个梯级才能在单个 FBD 页面上完成可能完成的任务。这些指令可以直接带入实现 PID 循环、运动控制和附加指令 (AOI) 的复杂 PLC 指令中。
  • 用户友好：FBD 的可视化编辑器对于大多数用户来说都是自然而然的事情。可以通过拖放方法重新创建流程布局，几乎不需要猜测。

功能块图 PLC 编程的缺点

  • 难以标准化：由于布局的灵活性，标准化用 FBD 编写的程序具有挑战性。每个 PLC 程序员的方法都与其他人不同。落后的人很难理解信息流。?
  • 规模化带来的麻烦：FBD 在流程特定领域的小型实施方面表现出色。然而，随着程序变得复杂，很容易迷失在所有表格中。

顺序功能图 PLC 编程语言

顾名思义，顺序功能图（SFC）在后续流程中非常有用。对于不熟悉此概念的人来说，一个例子是从原材料到成品的化学转化。让我们以一个简单的酿造过程为例。

想象一下一个大型啤酒酿造厂，里面有无数的罐子、阀门、压力传感器、加热元件和包装部分。当操作员开始生产新一批啤酒时，该过程将按照以下步骤进行。请注意，这些步骤已简化。

步骤 1 - 验证系统是否准备就绪。所有适当的成分是否可用？储罐是否空了？阀门是否处于正确状态？如果所有检查的答案均有效，则继续。如果不是，则中止。

步骤 2 - 启动罐体填充程序，可能需要多种成分（水、糖、盐、酵母等）。验证状态并在罐体装满后继续。

步骤 3 - 开始冲泡过程。升高温度并维持一段时间。监测罐压并做出相应反应。如有必要，添加配料。冲泡完成后继续下一步。

步骤 4 - 开始转移到储罐。我们的批次已准备就绪；确认所有适当的阀门都已设置在正确的位置，储罐已空，然后开始转移过程。

步骤 5——将批次转移至装瓶设施。

从上面的示例大纲可以看出，流程步骤按顺序执行，具有定义的启动条件和流程，就像流程在生产设施中运行一样。在梯形逻辑中，此过程可以通过 SQI/SQO 指令实现。但是，更好的方法是利用 SFC。

顺序功能图 PLC 编程的优点

  • 模拟大多数化学工艺的工艺流程 | 配料是一种常见的化学工艺方法，它采用一定数量的原料并将其转化为最终产品。SFC 在这些应用中大放异彩。
  • 结合 ST | 大多数 SFC 编辑器允许在特定情况下使用结构化文本来创建高级逻辑流。

顺序功能图的缺点

  • 不适用于大多数应用 | 将顺序功能图应用于非顺序流程是一项挑战。换句话说，它的用例数量有限。?
  • 并行流程难以实施和排除故障 | 您可以通过 SFC 实施无限数量的流程。但是，随着流程路径分成多个流程，实施单独的流程路径以形成稳健的序列变得困难。

指令表 PLC 编程语言

由于指令列表和结构化文本的编辑器相似，因此它们经常被混淆。这两种 PLC 编程语言通常出现在不同的平台上，因为它们的流程相似。

就程序流程而言，每行都指定指令以及执行的条件和结果。在许多方面，指令列表比结构化文本更接近于您实现梯形逻辑程序的方式。但是，这两种语言都能够创建相同的流程。

指令表 PLC 编程的优点

  • 高度标准化：指令列表遵循严格的结构，要求用户明确创建变量、指定条件并列出每条指令。程序实现之间几乎没有差异，因此代码易于理解。
  • 以指令为中心：顾名思义，指令比数据流更重要。这种编程风格使程序中数据的处理方式更加清晰。

指令列表的缺点

大多数 PLC 平台上都不可用：如上所述，指令列表不是一种流行的编程方法，因为它们对大多数程序员来说并不自然。它们更接近于人们在汇编语言中看到的内容，而不是市场上任何其他编程语言。

结论

五种最流行的 PLC 编程语言是梯形逻辑、结构化文本、功能块图、顺序流程图和指令列表。这些编程方法在大多数平台上都可用。但是，某些 PLC 会限制用户使用某些语言，除非用户支付额外费用。

你使用的是哪种编程语言呢？评论区留言！

篇文章适合谁

这边文章适合对于JavaScript有兴趣也有一点基础的开发者，以下除了介绍何谓JavaScript外，本篇将运用简单的范例程式，让大家可以初步认识JavaScript。

什么是JavaScript?

如果您想让网页动起来，除了使用各种程式语言外，JavaScript 是最适合使用的语言之一。早期的网页都是用HTML 语法，制作出一个个静态网页，向用户显示一些固定不变的资料。若想要让网页有更多的变化并且更加精致，您就必须加上某些程式语言，如Script 语言。

Script language 是属于使用前不需先编释译的程式语言，很适合网路学习，他将程式的文字直接放在网页内。JavaScript 前名是Live Script，是Netscape 的产品。后因Netscape 支援JAVA(Sun Microsystems) 的产品， LiveScript 也就改名为JavaScript。最后提醒一个很多人搞错的观念：Java 和JavaScript 程式是完全不同的两件事。

编写基本的JavaScript

JavaScript最常使用在网页上，所以基本上所有浏览器都可以用来执行JavaScript程式，我们简单的建立一个网页，例如hello.html，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>Hello World!</title>
    <script>
      document.write('Hello world!');
    </script>
  </head>
  <body>
  </body>
</html>

document.write表示写入资料到文件中(因为当前文件尚未关闭，所以会写到文件未端，而浏览器会自动写到<body>尾端，但如果<body>未建立，则会在建立后跑到<body>的开始处)，接着利用浏览器开启网页档，就可以看到程式的结果。

在HTML中加入JavaScript

如前面的范例所示，在HTML中直接使用<script>…</script>的标签来表示嵌入一段JavaScript程式，而嵌入的位置可以在<head>和<body>之中的任意位置(不建议放在<head>最前面，因为<head>第一个节点通常为编码宣告)。

<html> 
<body> 
<script type="text/javascript"> 
var x=6, y=8; 
var s="Hello! " 

t=s + x; 
z=x * y; 

document.write("< pre>x="+x+" \n y="+y+" \n s="+s+" \n t="+t+" \n z="+z+"</pre>"); 
</script > 
</body> 
</html>

结果：

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

另一种方式是将JavaScript程式独立写成别的档案，不直接和HTML档案写在一起，JavaScript的档案副档名为js，例如我们建立一个hello.js档，里面写入：

document.write('Hello world!');

然后HTML档案则改为：

<!DOCTYPE html> 
  <html> 
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta charset="utf-8">  
  <title>Hello World!</title>   
  <script src="hello.js"></script>  
  </head>  
     <body>  
    </body>
</html>

如上所示，在<script>中使用src的属性指出外部js的位置

注解

注解的部份不会执行，是给人看的，JavaScript中有两种注解方式：

1. // 单行注解：两个斜线后面的部份将不会处理。

2. /* … */ 多行注解：注解中间的部份将不会处理。

alert(“注解一”); //单行注解alert(“注解二”); /*多行注解

我们可以利用//* … //*/的写法来作为区块注解的开关，藉由删除/加入开头的斜线作为开启或关闭区块

alert("不会影响到");//*区块注解开关if ($confition) {alert("要注解的区块";}//*/alert("不会影响到");

分号结尾

JavaScript如一般程式语言，每段程式结尾都是以分号表示，但JavaScript能够自动帮你在未加上分号的结尾加上分号，例如：

alert('Hello')alert('World');

第一行没加上分号并不会造成解析错误，JavaScript容许这样的错误发生。然而省略分号并不是一件正确的写作习惯，因为有时候JavaScript会误解你意思而造成程式错误，例如：

var func=function() {
return 42;
} // 省略分号
(function() {
// ...
})();

原本的意思是，建立一个函式变数，接着在Clousre中执行部分程式，但是浏览器以为你是要这样：

var func=function() {return 42;} ( function() {} ) ();// 1 2 3// 1. 建立函式function() {return 42;}// 2. 将function() {} 作为参数代入1的函式执行// 3. 将回传的结果(42)作为函式执行

然而42是数字，无法执行造成错误。

也因为这个特性，有时候如果在不正确的地方断行，也会造成不如预期的结果，例如：

returntrue;

原本是要回传true，却被当成：

return;true;

另一个例子

breakloop;

原本是要跳出loop这个回圈，却被当成：

break;loop;

只跳出当前的回圈。

基本语法范例

  • 运算式
  • 分枝
  • 回圈
  • 函数
  • 阵列

运算式范例

<html> 
<body> 
<script type="text/javascript"> 
var x=6, y=8; 
var s="Hello! " 

t=s + x; 
z=x * y; 

document.write("< pre>x="+x+" \n y="+y+" \n s="+s+" \n t="+t+" \n z="+z+"</pre>"); 
</script > 
</body> 
</html>

执行结果

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

分枝范例

<html> 
<body> 
<script type="text/javascript"> 
var score=70; 
if (score >=60) 
  document.write("及格"); 
else 
  document.write("不及格"); 
</ script> 
</body> 
</html>

执行结果

及格

回圈范例

<html> 
<body> 
<script type="text/javascript"> 
for (i=1;i<=10;i++) { 
  if (i==3) continue; 
  if (i==8) break; 
  document. write("i="+i+"<BR/>"); 
} 
</script> 
</body> 
</html>

执行结果

i=1 
i=2 
i=4 
i=5 
i=6 
i=7

函数范例

<html> 
<body> 

<script type="text/javascript"> 
var add=function(a,b) { //第一种写法，将匿名函数指定给变数。
  return a+b; 
} 

function sub(a,b) { //第二种写法，直接宣告函数，该函式是一个函数物件，
  return ab; 
} 

document.write("add(3,5)=" +add(3,5)+" sub(7,2)="+sub(7,2)); 
</script> 

</body> 
</html>

执行结果

add(3,5)=8 sub(7,2)=5

阵列范例

<html> 
<body> 
<script type="text/javascript"> 
var x; 
var friends=new Array(); 
friends[0]="John"; 
friends[1]="Mary"; 
friends[2]="George"; 
for (p in friends) { 
  document.write(p + ":"+ friends[p] + "<br />"); 
} 
</script> 
</body> 
</html>

执行结果

0:John 
1:Mary 
2:George

JavaScript Event

事件流：描述的是从页面中接受事件的顺序，IE的事件流是事件冒泡流，Netscape的事件流是事件捕获流。

事件冒泡：事件冒泡指的是「从启动事件的元素节点开始，逐层往上传递」，直到整个网页的根节点，也就是document。

举例一个HTML如下：

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假设我们点击(click) 了<div>CLICK</div> 元素，那么在「事件冒泡」的机制下，触发事件的顺序会是：

1.<div>CLICK</div>

2.<body>

3.<html>

4.document

像这样click 事件逐层向上依序被触发，就是「事件冒泡」机制。

事件捕获：刚刚说过「事件冒泡」机制是由下往上来传递，那么「事件捕获」(Event Capturing) 机制则正好相反。

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假设我们点击(click) 了<div>CLICK</div> 元素，那么在「事件捕获」的机制下，触发事件的顺序会是：

1.document

2.<html>

3.<body>

4.<div>CLICK</div>

像这样click 事件由上往下依序被触发，就是「事件捕获」机制。

JavaScript气泡事件

首先，得先了解一个事件发生时，都会有一个事件源，因为事情不会凭空发生。当事件发生后，因为事件源本身没有处理事件的能力，所以事件会开始传播。举例来说：当我点击一个按钮时，就会产生一个click事件，但按钮本身无法处理这个事件，所以事件必须传播出去，从而找到能处理这件事的函数，当找到了之后我们就会说这个函数捕捉到了这个事件。

那么一个函数是如何捕捉事件的呢，其实就像是一杯水,但是这杯水是分层次的,最底下是当前触发事件的物件。然后越往上范围越大，最顶层是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有相应的函数或是处理方法。有话就执行相应的处理，没有的话就继续向上起泡，直到到达最顶层的window视窗层。我们可以在任何一层做相应的处理以阻止事件继续起泡，方法就是呼叫事件物件的阻止起泡的方法。以下是事件起泡的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http ://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>sun</title > 
<script src="js/jquery-1.4.3.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $(' .one').click(function(e){ 
        alert('one'); 
    }); 
    
    $('.two').click(function(e){ 
        alert('two');                                                  
    });                                                                           

    $('.three').click(function(e){
        alert('three'); 
       //阻止起泡取消下面的注释
        //e.stopPropagation(); 

    }); 

});   
</script> 
</head> 
<body> 
<div class="one" style="width:200px;height:200px;background:green;"> 
one 
    <div class="two" style="width:150px;height:150px;background:yellow;"> 
    two 
        <div class="three"> 
            three 
        </div> 
    </div> 
</div> 

</body> 
</html>
  • 一个事件起泡对应触发的是上层的同一事件，单击two的时候就会起泡触发one单击的事件，单击tree时,会同时触发two,然后触发one。
  • 如果在click事件中，在你要处理的事件之前加上e.preventDefault()；那么就取消了行为(通俗理解：相当于做了个return操作)，不执行之后的语句了。
  • e.stopPropagation()只要在click事件中，就不会触发上层click事件。

结语

希望这篇文章能够帮助你了解基本的JavaScript，如果想看更多内容，可以到快乐学程式的官网逛逛，相信可以在你学程式的路上有所帮助。


在线咨询
上一篇：JavaScript当我们无法从故障中恢复
下一篇：html5的一些基础

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 偏关县 类乌齐县 崇州市 介休市 东昌府区 西乌珠穆沁旗 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服