文档章节

JavaScript由入门到精通(二)——学习JavaScript的基石Html(二)

白志华
 白志华
发布于 2015/10/18 10:56
字数 328
阅读 7
收藏 0

二、高级应用

【表格标签】

​<table></table> 创建表格

计算机生成了可选文字: <tabI巴卜灯table>标签对用来创建一个表格。它有以下属性:.:.bgcofor设哭表格的背景色。.:.border设哭边框的宽度.若不设咒此属性,则边框宽度默认为O。我们经常肴到很多网站中.字体排列非常整齐却又没有表格线出现,就是将borde:属性设笑成0的缘故。.:.bordercofor设置边框的颜色。.:.bordercolorlight设笠边框明亮部分的颜色(当bordc:的位大于等于l时才有用)。.:.bordercolordark设置边框昏暗部分的颜色(当bordcr的值大于等于.时才有用)。.:.cellsPacing设咒单元格之间的间隔大小..:.cellPadding设段单元格边框与其内部内容之间的间隔大小。.:.width设置表格的宽度,单位用绝对像素值或浏览器文档窗口宽度的百分比。.:.height设盆表格的高度,单位用绝对像素值或浏览器文档窗口高度的百分比。

vspace  hspace 用于设置表格与其附近文字的垂直和水平距离。

colspan rowspan 用于设置合并单元格,水平方向合并列,垂直方向合并行。

计算机生成了可选文字: (5)cofsPan设置一个单元格跨占的列数(默认位为l).(6)rowsPan设黄一个单元格跨占的行数(默认位为l)。(7)n。姗p禁止对单元格中过长的内容自动换行扯示。

计算机生成了可选文字: 口一}_J工liao列islandsbelongtochina.目陋试计戈l}abcZ一」abc3{123b一口}123c{BBBZ」}nDn3'}abc3}abcZ-一曰},23C}123b{BBBZ一}nDD3勺鱼岛是中国的。口口刊 

Caption 表格标题,默认居中。可以通过text-align来改变其位置。

<tr></tr><td></td><th></th>  tr表示一行,td表示一单元格  th 表示列表头(格式与)

<caption></caption>

【表单标签】

<form></form>提交数据是所用

计算机生成了可选文字: 表单元素最重要的两个属性是METHOD和ACn0N。METHOD说明应该如何将来自表单的输入数据传递给要处理数据的程序,最常用的属性值是get和post(分别代表了两种网络传递数据的方法)。AcT10N则指定负责处理表单数据的程序‘程序的URL)。表单的基本结构为:<FORMACTIO付,口RLMETHOD亡get}pDs七><INPUTTYP已=subrni七><INPUT它Y户E=.reset></ro斑吐》

<input></input> 表单中的重要元素

type属性

显示元素

text

文本框

button

一般按钮

submit

提交按钮

reset

重置按钮

checkbox

复选框

radio

单选框

      

<select></select> 列表框

计算机生成了可选文字: HTML表单还允许设计列表框,包括下拉式列表和滚动式列表两种。列表框用SELECT和OPTION两种元素实现,其格式为:<SELECTN<OPTION>A村1=',na讯e"></SELECT>SELECT元素用来定义fIJ表框。它支持NAME、SIZE和MULT企LE3种属性。NAME属性指定SELECT元素的名字;S忆E属性定义列表框的大小,即用户一次可见到的列表项的数目,如果S议E=l(默认值),列表框显示为下拉列表;使用MUTIPLE属性时,表示允许用户进行多项选择(使用Ctrl键和Shift键配合鼠标进行多项选择)。O叮ION元素定义列表框的各选项。它可以使用属性SELECTED,表示预先己选定。还可以使用VALUE属性,用来指定用户选择某选项后的返回值。

<textarea></textarea> 多行文本框

计算机生成了可选文字: 当预计用户的输入文本超过一行时,可使用多行文本框。多行文本框由TExTAREA元素定义,它的常用属性有3个:由NAME规定文本框的名字;ROWS定义文本框的行数;COLS定义文本框的FJJ数,其格式是<TEXTAREAN^ME=,,na脚e',ROWS二n'm加rCOLS==n“刃陀b己r>。

计算机生成了可选文字: 请愉入你的简历:<BR><FORMACTION'"aa.asp”何ETHOD=",post"><T公XTA只EANA加E二.,resu扭e'"ROWS=5COLS二20></TEXTAREA》<P><工NPuTTYP它‘submitvALuE二”发送,'><工N户UTTYPE.:e。etv入LuE=,‘重设”></FORM>

 

【帧|框架】

Frame 框架

计算机生成了可选文字: 帧功能扩展了认陌b网页的排版布局和链接能力,使用户能够在同一窗口中浏览不同的内容。每一个帧都具有以下特性:可载入独立的URL,与其他帧无关;可赋予一个名字,以便其他URL作为目标进行调用:可根据用户浏览器的窗口大小,自动调整尺寸,并能选择允许或不允许用户手动调节帧大小。

计算机生成了可选文字: <PRA封它S它T>,,.</犷RAMESE丁><FRAM乙5RC=URL><NOF只AHE>…</NOrRAM已>由于帧功能从根本上改变了HTML文档的结构,所以规定在出现FRAEMSET元素的文档中,不再使用BODY元素。

计算机生成了可选文字: <F只AMESETCOLS,n%,n%,…<rRA坷ESETRQ衬5=n%,n%,,,.

计算机生成了可选文字: 每一个帧都可以用NAME属性给予一个名字,加以引用。这样,就可以实现各个帧之问的互操作。并通过超链接元素A的TARGET属性格式为:<FRA介IENAME二‘,f:amename'><AHREr二URLTARGET!”七工a爪e_na职e'>帧有四个预定义名,它们使得对帧的操作更加便利:blank弹出新的无名帧;self将链接指向本帧;一arent将链接指向父帧(如果没有父帧,就指向自身):少p指向最顶层,实际上就是整个浏览器帧。

<frameset></frameset> 框架集

计算机生成了可选文字: <htm】>‘币trn卜标签对中,也可以嵌套在其他<斤田的eset>灯framcse。标签对中。<frameset>心斤a“犯set>标签对不能嵌套在<伙心介口伙川y>标签对中,使用<n习meset>心nZ打犯set>标签对的网页中不能包括<伙川介灯伙记y>标签对及位于<伙川y>心b记y>标签对中的其他元素.因为

计算机生成了可选文字: d抽服sc。心6飞介比set>标签对具有mws和cols属性,使用<角口csct>标签时.至少应选

计算机生成了可选文字: 择这两个属性中的一个,否则浏览器只显示第一个定义的帧,剩下的一概不管,<frarnescL>心角叻eset>标签对也就没有起到任何作用了。ro、,用来规定主文档中有几行帧窗口及各个帧窗口的大小,而cofs用来规定主文档中有儿列窗口及各个帧窗口的大小.这两个属性的取值可以是多个百分数、绝对像素位或星号(,)的组合.取值的个数说明了行或列的个数.每个值之间用逗号隔开,例如,"20.30,30%,,”表示将框架集窗口被分成四行或四列。址号代表剩余的空间大小,如果同一个属性中出现多个星号,则将剩下的空间大小平均分配给这些星号所对应的帧窗口。所有的帧按照rows和co!s的位从左到右,从上到下排列。示例如下:d抽nlesetrows=”气*,",>总共有三个按行排列的帧,睡个顿占整个浏览器窗口的l乃的空间大小。<6飞me二tcol,"40%.气*">总共有三个按列排列的帧,第一个帧占整个浏览器窗口的40%.剩下的空间平均分配给另外两个帧窗口。<franlesctrows二”40%.*''cols="50%,气200">总共有6个帧,先是在第一行中从左到右排列3个帧,然后在第二行中从左到右再排列3个帧,即两行三列,所占空间依据:ows和cols属性的值,其中数字200的单位是像素。

效果图:

计算机生成了可选文字: 我是顶部网页文件我是左侧网页文件我是右侧第一个网页文件显示右丫则的第一个文档显示右侧的第二个文档口口口口口口口口口口口口口口口口

<noframes></noframes>

计算机生成了可选文字: <n。斤阴les>心n。介别mes>标签对也是放在<frame、ct>心斤amcset>标签对之间,用来在那些不支持帧的浏览器中显示文本或图像信.息。在此标签对之间,首先应该嵌入<卜劝y>心b川y>标签对,然后再在<b记y>心b刃y>标签对内嵌入前面讲过的那些将通标签。

效果图:

计算机生成了可选文字: 十今C'D俐e:/l/c:/use+O护目回三白从I〔口导入日Google主页口600gle日历”我是右侧第一个网页文件

<iframe></iframe> 框架

计算机生成了可选文字: 石62“比>切斤别mc>标签不需要放在<frameseL>心frameset>标签对之间,它的作用是在一个网页中间插入一个简单的帧窗口,在这个帧窗口中可以显示另一个文件,这就能够实现一种“画中画”的效果。在心frame>灯1frame>标签对中放入的文本只有在浏览器不支持

 

计算机生成了可选文字: '-Jl,、“,二r/、三竺口,甘甘廿’'-'~奋、口占J甘U甘,'‘一份J这是嵌入了1fralne帧窗口的网页的前半部分l~·baidu·CO这里放置了一个1fralne标签,但你的浏览器不支持。网易首页 

【多媒体】

<img>图像

基本语法:属性src:图片url  (必需的)   alt:鼠标移动上去显示的文字

质量控制:widthheight控制大小,lowsrc控制

对齐布局:

计算机生成了可选文字: IMG元素的另一个重要属性是ALIGN,它指定图像的对齐与布局方式,格式为:<IMGSRC,b&Seline〔从LAL工GK=lef七rlghttoptexttop1nlddleabsmiddlebo七tomabsbottc耳>

图片映射:

计算机生成了可选文字: IMG元素的IsMAP(意为15map)属性将图像指定为图像映射(ImagoM叩)。图像映射是指图形的某些区域可映射到URL,通过单.击图像映射的不同部位,可从同,一图形访问不同的资源,格式为:<AR拙F!"http://www.bh.com/h二bin,工即a叮e详ap,'5ample''><I倪GSRC,"sample.glf"ISMA夕><·八:·

<bgsound></bgsound>背景音乐

<sound></sound> 音乐

计算机生成了可选文字: BGSOUND元素可为HTML文档创建背景声音。声音文件可以是采样声音(.认叭V或,Au格式)或MIDI音乐(.MID格式),格式为:<BGSOUNDSRC二”start.wav'>属性LOOP可指定声音播放的次数,.如果取属性值为一1或infinite,则声音一直播放下去,直到离开内嵌BGSO口阿D标记的贞面。Mosai。支持SOUND元素来播放内联声音,它只允许.认叭V格式的声音,格式为:<SOUNDSRC='filena仆e,w己v'>SOUND不是背景声音,它可放置于HTML文档的任何地方,只要声音文件所处的位置在浏览器窗口中可见,Mosaic就开始播放声音。SOUND元素也可通过LOOP属性设置为背景声音。

<embed><embed>多媒体文本

计算机生成了可选文字: <EMSEDEMBEDSRCoUR毛>中可以插入各种形式的多媒体文件(实际是各种对象),包括电影(Movie)、声音(s。und)、虚拟现实语言(VRML)对象等‘浏览器通过插件(Pfug一ln)来播放EMBED嵌入的多媒体文本。因此,使用前必须将插件安装正确。EMBED对于不同的插件具有不同的属性。

内联视频

计算机生成了可选文字: MsIE允许用户将.八yl视频剪辑文件嵌入HTML文档。它定义了IMG元素的DYNSRC属性灭意为Dyn呱10sour忧),用来插入.Avl文件,格式为:

计算机生成了可选文字: <IMGOYNSRC,r,VldeQ.avi'土n七土niteAL工GN,righ七>SRC二”丁heEart,n.qif'WIDTH=50HEIGHT=50LOOP二

【头标签】

<base>标签

计算机生成了可选文字: <base>标签用于指定网页中的超链接的墓准地址,以改变网页中所有使用相对地址的URL的荃准地址。<base>标签只能应用于文件的开头部分,即标签<head>与<角cad》之间。<加“>标签通常的使用形式如下:<basehref二”h七仁p://认八门时.it315.org/仁echworld/'targe七二”一blank'>

<link>标签

计算机生成了可选文字: dink>标签只能应用于文件的开头部分文档和另一个文档或资源之间的关系。例如,即标签<head>与<爪ead>之间,它定义了当前当前网页文档的显示样式由另外一个样式定义文件控制,就需要使用<Iink>标签说明这种关系。<link>标签中有如下几个主要的属性:HREF、REL、REV、们汀LE、TYPE、MEDIA。属性REL或REV定义LINK所链接的两

计算机生成了可选文字: 砒时HREF属注定义链接海丁又EL与.,RE丫.丫注有如下可能的取厄丁-.:.Contents这个链接指向的文档作为表格的内容出现。.:.Index这个链接指向的文档中提供一个当前文档的索引..:.以。“剐以这个链接指向的文档提供一份当前文档的词汇表..:.C叩州ght这个链接指向当前文档的版权语句..:.Next这个链接指向文档系列中的下一个文档,这个位通常与REL一起使用。.:.Pre讥。us这个链接指向文档系列中的上一个文档,这个位通常与REV·起使用。.:.5呱这个链接指向一套组合文档中的第一个文档,这个链接告诉搜索引笨哪个文档是这套组合文档的起始点。.:.Help这个链接指向一个提供帮助的文档..:.Bookmark这个链接指向一个书签。书签是到扩展文档的入口点,可以用TITLE属性来对书签命名,一个文档中可定义多个这样的书签。.:.stylesheet这个链接指向一个外部样式表文件,参看第3章中对外部样式单的讲解,以获得更多细节。.:.Altemate这个链接指向一份文档的不同版本,当与LANG属性一起使用时,暗示着一个相同文档的翻译版本。当与MEDIA属性一起使用时,指另一种媒体版本。

计算机生成了可选文字: .:.Shortcutkon这个链接指向一个图标,这个图标将显示在浏览器地址栏和收藏夹列表中的URL地址前,替换浏览器提供的默认图标。要实现这种效果,首先要做一个16xl6像素的图标,假设保存为favicon.ic。文件,将这个图标文件与要使用Shortc以kon链接的HTML文件放在同一个目录中(放在不同目录中也可以,但要注愈路径关系),然后在HTML文件的<head>灼币ead>标签对中加入如下语句:<1inkREL二’ShortCUtICOn'href二”f己viCOn.iCO'>即可。如果将这个HTML文件添加到浏览器收藏夹里,这个图标就会保存到他的计算机中,下次就不再需要从网络上读取了。TYPE属性给出目标资源的MIME类型,例如,HTML文档的MIME类型是tex亦tml,CSS样式表文件的MIME类型是”tex火55',Javascript文件的MIME类型是'tex巧av赴沁ript”。

<meta>标签

计算机生成了可选文字: <n犯ta>标签通常应用于文件的开头部分,即标签<head>与<小ead>之间。主要有两种类型的<rneta>,它们用不同的属性名来划分,这两种属性名为namc和htt卜equiv.n别me属性用于在网页中加入一些关于网页的描述信息,例如,网页的关键字(可供网页搜索引攀机器人查找、分类)、网页的描述信息等。httl卜闪uiv属性用于在HTML文档中模拟HTTP协议的响应消息头,什么是HTTP协

计算机生成了可选文字: n~和htt卜equiv属性后面都有一个配对的content属性需要设置,格式如下:<功e七a<功e仁an柳份”某个设犯位”con:ent二·对该设皿位进行共体补充说明的信.以·》h'p一equiv二”某个设t位’conten:二·对该设盆位进行具体补充说明的信息·》

 


版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/8024087

共有 人打赏支持
白志华
粉丝 31
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
JavaScript入门(二)

在20世纪90年代,Web开发得到了飞速发展,现在创建静态或者固定大小的网站已经意义不大了。任何主流的网页设计都必须考虑未来的扩展需求。同样,它对每个人来说都应该是可访问的(这并不意味...

晨曦之光
2012/03/09
0
0
HTML 5视频教程系列之JavaScript学习篇-何韬-专题视频课程

HTML 5视频教程系列之JavaScript学习篇—52816人已学习 课程介绍 HTML 5视频教程系列中JavaScript开发的基础知识讲解及学习。 课程收益 通过自学视频掌握HTML 5开发手机应用和手机游戏的技能...

pkutao
2015/02/10
0
0
说说掌握JavaScript语言的思想前提

无论是公司的同事还是外界的程序员朋友们,大部分人对JavaScript的高级应用不甚了解,已有的知识架构里会认为JavaScript仅仅是一门脚本语言,其作用是给页面做一些锦上添花的效果,比如表单验...

bosscheng
2013/08/07
0
1
Javasrcipt---HTML中使用Javascript

在HTML中使用Javascript: ———————————————————————————————————————————————————————— 主要内容; 一、<script>元素的使用。 二、...

不起眼的过路Sir
2014/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0
技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部